/* One existing brand family; hierarchy comes from size, weight and space. */
:root { --display: 'Hanken Grotesk', system-ui, sans-serif; --body: var(--display); --mono: var(--display); }
body { font-weight: 400; line-height: 1.65; }
.hero-row h1 { font: 700 clamp(36px, 4vw, 60px)/1.12 var(--display); letter-spacing: -.035em; margin: 16px 0 24px; }
.hero-row p { font-size: 17px; line-height: 1.65; max-width: 54ch; }
.card h2, .library-heading h2 { font: 700 clamp(26px, 2.4vw, 32px)/1.2 var(--display); letter-spacing: -.02em; }
.card h3, .entry-title { font: 600 22px/1.3 var(--display); letter-spacing: -.015em; }
.card p, .entry-description, .entry-details > p, .entry-details dd { font-size: 16px; line-height: 1.65; }
.eyebrow, .card-heading .eyebrow, .hero-kicker .eyebrow { font: 600 12px/1.4 var(--body); letter-spacing: 0; }
.small-label, .art-label, .intro-footer .mono, .entry-footer > span:first-child:not(.entry-cta), .draft-label { display: none; }
.tag, .project-number, .project-state, .library-hint, .entry-details dt { font: 500 12px/1.5 var(--body); letter-spacing: 0; }
.entry-description { min-height: 0; }
.project-state { max-width: 60%; }
.entry-details .private-note, .tool-group h3, .tool-group span, .case small { font-size: 14px; line-height: 1.5; }
.button { font-size: 15px; font-weight: 600; }
.intro-footer { font-size: 14px; }
.season-tag { font-size: 12px; }
.identity strong { letter-spacing: -.025em; }

.navigation-menu { position: relative; flex: 1; min-width: 0; }
.navigation-menu > summary { display: none; }
.top-menu { overflow: visible; gap: 6px; padding: 8px 0; }
.top-menu a { min-height: 44px; font: 500 14px/1.4 var(--body); padding: 12px 10px; border-radius: 7px; }
.top-menu a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; background: var(--soft-amber); }
.topbar { gap: 12px; }
.motion-toggle { font: 500 12px/1.4 var(--body); min-height: 44px; padding: 10px; letter-spacing: 0; }

@media (max-width: 1100px) and (min-width: 851px) {
  .topbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .navigation-menu { flex-basis: 100%; }
  .top-menu { flex-wrap: wrap; justify-content: flex-start; }
  .topbar-actions { padding-bottom: 8px; }
}
@media (max-width: 850px) {
  .topbar { min-height: 64px; padding: 8px 0; align-items: center; }
  .navigation-menu { flex: none; }
  .navigation-menu > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: 600 15px/1.4 var(--body); cursor: pointer; list-style: none; }
  .navigation-menu > summary::-webkit-details-marker { display: none; }
  .menu-chevron { width: 15px; height: 15px; }
  .navigation-menu[open] .menu-chevron { transform: rotate(180deg); }
  .navigation-menu .top-menu { position: absolute; left: 0; top: calc(100% + 10px); width: min(330px, calc(100vw - 32px)); padding: 8px; display: grid; grid-template-columns: 1fr; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px #0002; }
  .top-menu a { width: 100%; font-size: 16px; padding: 12px 14px; }
  .topbar-actions { margin-left: auto; padding: 0; }
  .topbar-actions .motion-toggle { font-size: 12px; padding: 10px; }
  .hero-row h1 { font-size: clamp(36px, 6vw, 48px); }
  .desktop-break { display: none; }
}
@media (max-width: 640px) {
  .hero-row p { font-size: 16px; }
  .hero-kicker { align-items: center; }
  .hero-kicker .eyebrow, .season-tag { font-size: 12px; }
  .card h2, .library-heading h2 { font-size: 28px; }
  .project-state { font-size: 12px; }
}

/* Keep local time in the header so the introduction starts with the hero. */
.header-clock { display: grid; flex: none; line-height: 1.3; white-space: nowrap; }
.header-clock > span:first-child { color: var(--muted); font-size: 11px; }
.header-clock time { font: 600 16px/1.4 var(--body); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.topbar-actions { gap: 12px; }
@media (max-width: 850px) {
  .topbar-actions { gap: 8px; }
  .header-clock time { font-size: 15px; }
}