/* ==========================================================================
   Great Trek -- reset, typography, grid, and the two signature devices
   ========================================================================== */

/* ---- Self-hosted Montserrat ---------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header height, so in-page anchors do not land under it. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Links that are not part of a styled component.

   There was no rule here at all, so any link written into prose fell back to
   the browser default -- #0000EE, which on this site's ink surfaces is both
   off-system and close to unreadable. Components that style their own links
   still win on specificity. */
a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: var(--hair);
  transition: color var(--t);
}

a:hover { color: var(--on-surface); }

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sunrise); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
/* On dark surfaces the orange outline disappears into the accent itself. */
[data-surface="ink"] :focus-visible,
[data-surface="ink-sink"] :focus-visible,
[data-surface="indigo"] :focus-visible {
  outline-color: var(--bone);
}

/* ---- Typography ----------------------------------------------------------- */
h1, h2, h3, .display {
  font-weight: var(--w-black);
  letter-spacing: var(--tr-head);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--w-med);
  line-height: 1.5;
  color: var(--on-surface-dim);
  max-width: min(46ch, 100%);
}

.prose { max-width: min(var(--w-text), 100%); }
.prose p + p { margin-top: var(--s-4); }

.small { font-size: var(--fs-small); }
.dim { color: var(--on-surface-dim); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Section eyebrow -- carries the survey mark. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 14px;
  height: 12px;
  background: var(--sunrise);
  /* The survey mark: a short vertical stroke rising from a horizontal one. */
  clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%, 0 85%, 42% 85%, 42% 0, 58% 0, 58% 85%);
}

/* ==========================================================================
   THE HIGHLIGHT RULE

   The client asked for colour on selected words. Made into a rule with teeth:
   one highlighted phrase per heading, never two; it falls on the payload (the
   verb or the new noun phrase), never an article; 1-4 words; H1 and H2 only.

   The treatment MUST invert with the surface. #FF5A36 on #F7F6F3 measures
   2.89:1 and fails WCAG AA even at large sizes. So on dark surfaces the words
   turn SUNRISE (6.11:1); on BONE the words stay INK and take a thick SUNRISE
   underline that draws itself in on reveal -- a line being struck on a plan.

   The accessibility fix and the best idea on the page turn out to be the
   same thing.
   ========================================================================== */
.hl {
  color: var(--accent-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-surface="bone"] .hl {
  color: var(--on-surface);
  background-image: linear-gradient(var(--sunrise), var(--sunrise));
  background-repeat: no-repeat;
  background-position: 0 0.92em;
  background-size: 0 0.14em;
  padding-inline: 0.04em;
  transition: background-size var(--t-reveal) var(--ease-out) 180ms;
}
[data-surface="bone"] .is-in .hl,
[data-surface="bone"] .is-in.hl { background-size: 100% 0.14em; }

/* ==========================================================================
   Layout: one named-line bleed grid

   Any component can occupy `content`, `wide` or `full` without a nested
   wrapper, which keeps the markup shallow and the full-bleed images honest.
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--on-surface);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--bleed-band))
    [content-start] minmax(0, var(--w-content)) [content-end]
    minmax(0, var(--bleed-band)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.section > * { grid-column: content; }
.section > .bleed-wide { grid-column: wide; }
.section > .bleed-full { grid-column: full; }

.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* Surface transitions are hard edges, never gradients. */
.section + .section { border-top: none; }
.rule { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }

.stack > * + * { margin-top: var(--s-5); }
.stack-tight > * + * { margin-top: var(--s-3); }
.stack-loose > * + * { margin-top: var(--s-7); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.center { text-align: center; }
.narrow { max-width: var(--w-narrow); }

/* Wide content must scroll inside its own container; the page body never
   scrolls horizontally. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--sunrise);
  color: var(--ink);
  font-weight: var(--w-bold);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ==========================================================================
   Reveal

   One shared IntersectionObserver adds .is-in and unobserves. Gated behind
   .js so that with JavaScript off everything is simply visible -- never a
   page of invisible content.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  [data-surface="bone"] .hl { background-size: 100% 0.14em; transition: none; }
}

/* ==========================================================================
   Utilities

   These exist because the Content-Security-Policy forbids 'unsafe-inline'
   for styles, and a CSP NONCE DOES NOT COVER style="" ATTRIBUTES -- it
   applies only to <style> elements. So the build carries no inline styles at
   all, including the one the design notes originally reserved for chart bar
   widths.
   ========================================================================== */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.my-5 { margin-block: var(--s-5); }
.mi-auto { margin-inline: auto; }

.w-text { max-width: var(--w-text); }
.w-narrow { max-width: var(--w-narrow); }
.w-prose { max-width: 60ch; }
.w-measure { max-width: 52ch; }

.surface-raise { background: var(--ink-raise); }
.surface-sink { background: var(--ink-sink); }

/* Proportional scale: one static rule per integer percent, so PHP sets a
   class rather than a style attribute. 101 rules, ~2KB, fully cacheable. */
.v-0{--v:0%}
.v-1{--v:1%}
.v-2{--v:2%}
.v-3{--v:3%}
.v-4{--v:4%}
.v-5{--v:5%}
.v-6{--v:6%}
.v-7{--v:7%}
.v-8{--v:8%}
.v-9{--v:9%}
.v-10{--v:10%}
.v-11{--v:11%}
.v-12{--v:12%}
.v-13{--v:13%}
.v-14{--v:14%}
.v-15{--v:15%}
.v-16{--v:16%}
.v-17{--v:17%}
.v-18{--v:18%}
.v-19{--v:19%}
.v-20{--v:20%}
.v-21{--v:21%}
.v-22{--v:22%}
.v-23{--v:23%}
.v-24{--v:24%}
.v-25{--v:25%}
.v-26{--v:26%}
.v-27{--v:27%}
.v-28{--v:28%}
.v-29{--v:29%}
.v-30{--v:30%}
.v-31{--v:31%}
.v-32{--v:32%}
.v-33{--v:33%}
.v-34{--v:34%}
.v-35{--v:35%}
.v-36{--v:36%}
.v-37{--v:37%}
.v-38{--v:38%}
.v-39{--v:39%}
.v-40{--v:40%}
.v-41{--v:41%}
.v-42{--v:42%}
.v-43{--v:43%}
.v-44{--v:44%}
.v-45{--v:45%}
.v-46{--v:46%}
.v-47{--v:47%}
.v-48{--v:48%}
.v-49{--v:49%}
.v-50{--v:50%}
.v-51{--v:51%}
.v-52{--v:52%}
.v-53{--v:53%}
.v-54{--v:54%}
.v-55{--v:55%}
.v-56{--v:56%}
.v-57{--v:57%}
.v-58{--v:58%}
.v-59{--v:59%}
.v-60{--v:60%}
.v-61{--v:61%}
.v-62{--v:62%}
.v-63{--v:63%}
.v-64{--v:64%}
.v-65{--v:65%}
.v-66{--v:66%}
.v-67{--v:67%}
.v-68{--v:68%}
.v-69{--v:69%}
.v-70{--v:70%}
.v-71{--v:71%}
.v-72{--v:72%}
.v-73{--v:73%}
.v-74{--v:74%}
.v-75{--v:75%}
.v-76{--v:76%}
.v-77{--v:77%}
.v-78{--v:78%}
.v-79{--v:79%}
.v-80{--v:80%}
.v-81{--v:81%}
.v-82{--v:82%}
.v-83{--v:83%}
.v-84{--v:84%}
.v-85{--v:85%}
.v-86{--v:86%}
.v-87{--v:87%}
.v-88{--v:88%}
.v-89{--v:89%}
.v-90{--v:90%}
.v-91{--v:91%}
.v-92{--v:92%}
.v-93{--v:93%}
.v-94{--v:94%}
.v-95{--v:95%}
.v-96{--v:96%}
.v-97{--v:97%}
.v-98{--v:98%}
.v-99{--v:99%}
.v-100{--v:100%}

/* Treemap weight: flex-grow needs a unitless number, so 20 buckets. */
.g-1{flex-grow:1}
.g-2{flex-grow:2}
.g-3{flex-grow:3}
.g-4{flex-grow:4}
.g-5{flex-grow:5}
.g-6{flex-grow:6}
.g-7{flex-grow:7}
.g-8{flex-grow:8}
.g-9{flex-grow:9}
.g-10{flex-grow:10}
.g-11{flex-grow:11}
.g-12{flex-grow:12}
.g-13{flex-grow:13}
.g-14{flex-grow:14}
.g-15{flex-grow:15}
.g-16{flex-grow:16}
.g-17{flex-grow:17}
.g-18{flex-grow:18}
.g-19{flex-grow:19}
.g-20{flex-grow:20}