/* Till & Leger: layout shared by every page (nav, footer, hero, section heads).
   Values come from the Claude Design templates; tokens live in broadsheet.css.
   Page-only styles go in assets/<page>.css. */

body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); overflow-x: hidden; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }
* { box-sizing: border-box; }

.page { position: relative; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); overflow-x: clip; }
.gutter { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.kicker { font-size: 15px; color: var(--color-neutral-700); }
.it { font-style: italic; font-weight: 400; }

/* Site nav */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-4) clamp(20px, 4vw, 56px);
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(10px);
}
.site-nav .brand {
  display: flex; align-items: baseline; gap: var(--space-2);
  color: var(--color-text); font-weight: 600; font-size: 20px; letter-spacing: -.01em;
}
.site-nav .brand span { font-style: italic; font-weight: 400; color: var(--color-accent-2); }
.site-nav .links { display: flex; gap: clamp(10px, 2vw, 28px); flex-wrap: wrap; font-size: 15px; }
.site-nav .links a { display: flex; gap: 6px; align-items: baseline; color: var(--color-text); }
.site-nav .links a:hover, .site-nav .links a[aria-current="page"] { color: var(--color-accent-700); }
.site-nav .links small { font-size: 12px; color: var(--color-neutral-600); }

/* Page footer */
.site-footer {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px) var(--space-8);
  display: flex; flex-direction: column; gap: clamp(48px, 8vh, 96px);
}
.site-footer .pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); }
.site-footer .pager a { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text); transition: color .3s; }
.site-footer .pager a:hover { color: var(--color-accent-700); }
.site-footer .pager .dir { font-size: 15px; color: var(--color-neutral-700); }
.site-footer .pager .label { font-size: clamp(32px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; }
.site-footer .pager .next .label { font-style: italic; }
/* Home has only a "next" link: keep it on the right, where readers look for "next". */
.site-footer .pager .next:only-child { align-items: flex-end; text-align: right; }
.site-footer .colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; color: var(--color-neutral-700); }

/* Section heads */
.section-head { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); }
.section-head h2 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
.section-head p { margin: 0; max-width: 52ch; font-size: 19px; line-height: 1.5; text-wrap: pretty; }

/* Hero */
.hero {
  position: relative; min-height: 92vh;
  padding-top: clamp(130px, 20vh, 200px); padding-bottom: var(--space-8);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-6);
}
.hero .float {
  position: absolute; padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-100); box-shadow: var(--shadow-md); font-size: 18px;
}
.hero .byline { font-size: 15px; color: var(--color-neutral-700); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero .byline i { font-style: normal; color: var(--color-accent); }
.hero h1 { margin: 0; font-size: clamp(52px, 9.5vw, 160px); line-height: .92; letter-spacing: -.025em; font-weight: 600; }
.hero h1 .mask { display: block; overflow: hidden; padding: 0 .12em .24em 0; margin-bottom: -.2em; }
.hero h1 .mask > span { display: block; }
.hero .lede { margin: 0; max-width: 44ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; text-wrap: pretty; }


/* Phones: brand on its own row, links in one row that scrolls sideways
   instead of wrapping to three lines. Hero tags sit higher so they clear
   the headline. */
.hero .float { top: var(--top); }
@media (max-width: 760px) {
  .site-nav { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-2); }
  .site-nav .links { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 16px; font-size: 14px; scrollbar-width: none; }
  .site-nav .links a { white-space: nowrap; }
  /* Drop the topic numbers so all six links fit a 390px screen; the row still scrolls on narrower ones. */
  .site-nav .links small { display: none; }
  @media (max-width: 420px) { .site-nav .links { gap: 10px; font-size: 13px; } }
  .hero .float { top: calc(var(--top) * .8 + 30px); font-size: 15px; }
}