:root {
  color-scheme: light;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  --paper: #f3f2ed;
  --ink: #252a26;
  --line: #dcded5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #ad541b; outline-offset: 5px; }
.shell { max-width: 1240px; margin: 0 auto; padding: 0 42px; }
.topbar { height: 116px; display: flex; align-items: center; }
.shell--home { --header-height: 116px; min-height: 100svh; display: grid; grid-template-rows: var(--header-height) 1fr var(--header-height); }
.shell--home main { align-self: center; padding-block: 28px; }
.wordmark { font-size: 33px; letter-spacing: -2px; font-weight: 800; }
/* Empty tiles are intentional: James will supply their content later. */
.bento { display: grid; grid-template-columns: 1.75fr 1fr 1fr; grid-template-rows: 249px 249px; gap: 16px; }
.tile { border-radius: 22px; overflow: hidden; }
.tile--large { grid-row: span 2; background: #243e32; }
.tile--lavender { background: #e7e4f5; }
.tile--sage { background: #e4ebd8; }
.tile--peach { background: #f3d9c8; }
.tile--blue { background: #e3e9ed; }
.utility-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 0; }
.utility { border: 1px solid var(--line); border-radius: 14px; min-height: 61px; }
.empty { padding-top: 80px; }
.empty h1 { margin-top: 90px; font-size: clamp(36px, 6vw, 70px); letter-spacing: -2px; font-weight: 550; }
.empty p { margin: 30px 0; }
.pill { display: inline-block; border: 1px solid var(--ink); padding: 14px 20px; border-radius: 40px; }
@media (max-width: 1000px) {
  .shell { padding: 0 28px; }
  .shell--home { --header-height: 95px; }
  .topbar { height: 95px; }
  .bento { grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; grid-template-rows: 235px 235px; }
}
@media (max-width: 760px) {
  .shell { max-width: 620px; padding: 0 22px; }
  .shell--home { --header-height: 87px; }
  .topbar { height: 87px; }
  .wordmark { font-size: 29px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 440px 230px 230px; gap: 12px; }
  .tile--large { grid-column: 1 / -1; grid-row: auto; }
  .utility-row { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .utility { min-height: 57px; }
}
@media (max-width: 380px) { .shell { padding: 0 16px; } }