/* ==========================================================================
   Horizonmark site_v5
   Palette: warm near-black, sunset orange, warm off-white. Five working hexes.
   Type: Fraunces (display), Hanken Grotesk (body), IBM Plex Mono (labels, figures).
   Mobile first. No framework, no build step.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0D0B09;
  --pit: #080706;
  --ivory: #F5EFE6;
  --sunset: #FF5A28;
  --ember: #C63D10;
  --dune: #A89A8A;
  --line: rgba(245, 239, 230, 0.13);
  --line-strong: rgba(245, 239, 230, 0.28);
  --glow: rgba(255, 90, 40, 0.14);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Avenir Next", Seravek, Verdana, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --measure: 62ch;
  --pad: 24px;
  --section: 96px;
}

@media (min-width: 900px) {
  :root { --pad: 48px; --section: 150px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 19px; } }

::selection { background: var(--sunset); color: var(--pit); }

a { color: inherit; }
.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.skip:focus {
  left: 24px;
  top: 14px;
  background: var(--night);
  color: var(--ivory);
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
  border-radius: 1px;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* --------------------------------------------------------------------------
   Grain: one cheap SVG turbulence layer over everything, barely there.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 20px 0;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.brand .word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.01em;
}
.head-nav { display: flex; align-items: center; gap: 22px; }
.head-links { display: none; gap: 22px; }
@media (min-width: 900px) { .head-links { display: flex; } }
.head-links a {
  text-decoration: none;
  font-size: 15px;
  color: var(--dune);
  transition: color 0.2s ease;
}
.head-links a:hover { color: var(--ivory); }
.lang {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--dune);
  border: 1px solid var(--line-strong);
  padding: 11px 13px;
  border-radius: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang:hover { color: var(--ivory); border-color: var(--ivory); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: #160903;
  background: var(--sunset);
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: #FF6E42; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.small { padding: 10px 16px; font-size: 14.5px; white-space: nowrap; }
/* The phone number came off the site on 2026-08-25, so the hero and the closer
   each run a single call to action instead of a pair. Sized up to carry the
   weight the number used to: it is the only way in now. */
.btn.lead {
  font-size: 17px;
  padding: 19px 32px;
}
@media (min-width: 720px) {
  .btn.lead { font-size: 19px; padding: 22px 42px; }
}
.head-nav .btn.small { display: none; }
@media (min-width: 620px) { .head-nav .btn.small { display: inline-block; } }
.btn.ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--line-strong);
}
.btn.ghost:hover { border-color: var(--ivory); background: transparent; }

/* --------------------------------------------------------------------------
   Hero with the sunset scene
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 150px;
  overflow: hidden;
  background:
    radial-gradient(58% 34% at 72% 100%, var(--glow), transparent 70%),
    var(--night);
}
.hero-sun {
  position: absolute;
  z-index: 1;
  right: -40px;
  bottom: -6px;
  width: 300px;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero-sun { width: 480px; right: 4vw; }
}
.hero-horizon {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
.hero .wrap { position: relative; z-index: 3; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sunset);
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 7.4vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  /* 21ch, not 17ch: the 2026-08-25 headline states three symptoms before the
     promise, and the French runs longer still. 17ch pushed FR to six lines. */
  max-width: 21ch;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero .sub {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ivory);
  max-width: 52ch;
  margin-bottom: 34px;
}
.hero .sub strong { font-weight: 600; }
/* margin-bottom since 2026-08-25: the pair of buttons became one taller .btn.lead,
   and the microline was sitting flush against it. */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 24px; }
.microline {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dune);
  max-width: 42ch;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Sections, editorial two-column: mono index + title left, content right
   -------------------------------------------------------------------------- */
section { border-top: 1px solid var(--line); }
.section-inner {
  padding-top: var(--section);
  padding-bottom: var(--section);
}
.sec-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .sec-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 72px; }
}
.sec-label { position: relative; }
@media (min-width: 900px) {
  .sec-label { position: sticky; top: 48px; align-self: start; }
}
.sec-index {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--sunset);
  margin-bottom: 14px;
}
.sec-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.sec-body > p {
  max-width: var(--measure);
  margin-bottom: 1.35em;
}
.sec-body > p:last-child { margin-bottom: 0; }
.sec-body .big {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.4;
}
.sec-body .big em { font-style: italic; color: var(--sunset); }
.footnote {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dune);
  line-height: 1.7;
  max-width: 54ch;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Hero stats bar */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.stats dt {
  font-family: var(--mono);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--sunset);
  letter-spacing: -0.01em;
}
.stats dd {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--dune);
  line-height: 1.5;
  max-width: 26ch;
}

/* Trades strip */
.trades { padding: 26px 0; }
.trades .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 28px;
}
.trades-lead {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dune);
  flex: 0 1 auto;
  min-width: 0;
}
.trades-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
}
.trades-list li {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--ivory);
  opacity: 0.72;
  white-space: nowrap;
}
/* Under 380px the longest French item cannot hold one line, and nowrap pushed
   the page into a horizontal scroll. Let it wrap there and only there. */
@media (max-width: 380px) {
  .trades-list li { white-space: normal; }
}

/* How-it-works steps with hover detail */
.hsteps { display: grid; gap: 0; margin-top: 6px; }
.hstep {
  display: grid;
  gap: 12px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .hstep { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; }
}
.hstep .n {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--sunset);
  padding-top: 5px;
}
.hstep h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 6px;
}
.hstep p { color: var(--dune); max-width: 58ch; font-size: 17px; }
.hstep-detail {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--line-strong);
  font-size: 15.5px;
}
@media (hover: hover) and (min-width: 700px) {
  .hstep-detail {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .hstep:hover .hstep-detail,
  .hstep:focus-within .hstep-detail { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hstep-detail { opacity: 1 !important; transform: none !important; transition: none; }
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: 16px;
}
.chips li {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dune);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Menu (OS explorer frame) */
.menu-head { max-width: 720px; margin-bottom: 44px; }
.menu-head .sec-index { margin-bottom: 14px; }
.menu-intro {
  margin-top: 16px;
  color: var(--dune);
  max-width: 58ch;
}
.os-frame {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--pit);
  overflow: hidden;
}
.os-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.os-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.os-bar .os-dot:first-child { background: var(--ember); }
.os-title {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dune);
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 720px) { .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .menu-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mcard {
  background: var(--pit);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mcard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mcard h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}
.mcard .status {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dune);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.mcard .chip-flag {
  color: var(--sunset);
  border-color: var(--sunset);
}
/* Framing line above a card's promise: the problem stated in the owner's words. */
.mcard-frame {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--dune);
  max-width: 44ch;
}
.mcard .pays { color: var(--ivory); font-size: 16px; line-height: 1.55; }
.mcard ul { list-style: none; }
.mcard ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--dune);
  font-size: 14.5px;
  line-height: 1.5;
}
.mcard ul li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--sunset);
}
.feed {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--night);
  padding: 12px 14px;
}
.feed p {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--dune);
  overflow-wrap: break-word;
}
.feed p:last-child { color: var(--sunset); }
.mcard.wide { border-left: 2px solid var(--sunset); }
@media (min-width: 720px) {
  .mcard.wide { grid-column: span 2; }
  .mcard:last-child { grid-column: 1 / -1; }
  .mcard:last-child .feed { max-width: 560px; }
}
@media (min-width: 1080px) {
  .mcard.wide .pays { font-size: 17.5px; max-width: 60ch; }
}
/* The two wide cards (same-day quoting, and the dashboard on the last row) run
   their bullets and their feed side by side, so the extra column is not dead
   space. The header, the framing line and the promise stay full width. */
@media (min-width: 900px) {
  .mcard.wide,
  .menu-grid .mcard:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 14px;
    align-items: start;
    align-content: start;
  }
  .mcard.wide > header,
  .mcard.wide > .mcard-frame,
  .mcard.wide > .pays,
  .menu-grid .mcard:last-child > header,
  .menu-grid .mcard:last-child > .mcard-frame,
  .menu-grid .mcard:last-child > .pays { grid-column: 1 / -1; }
  .mcard.wide > .feed,
  .menu-grid .mcard:last-child > .feed { margin-top: 0; max-width: none; }
}
.menu-note {
  margin-top: 36px;
  max-width: var(--measure);
  color: var(--ivory);
}
.menu-note + .menu-note { margin-top: 1.3em; }

/* The math, two columns and the one big number */
.math2 { display: grid; gap: 36px; }
@media (min-width: 820px) { .math2 { grid-template-columns: 1fr 1fr; gap: 56px; } }
.math-tag {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sunset);
  margin-bottom: 16px;
}
.math-col p { color: var(--ivory); margin-bottom: 1.2em; max-width: 54ch; }
.math-col p:last-child { margin-bottom: 0; }
.math-list { list-style: none; }
.math-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.55;
}
/* Founder note */
.note-body { max-width: var(--measure); }
.note-body p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.55;
  margin-bottom: 1.2em;
}
.note-sig {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  color: var(--sunset);
}

/* Work already done: prose entries, a rule between them, no card chrome */
.worklist { border-top: 1px solid var(--line); }
.wentry {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .wentry {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: baseline;
  }
}
.wtag {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--sunset);
  margin-bottom: 12px;
}
@media (min-width: 820px) { .wtag { margin-bottom: 0; } }
.wbody {
  color: var(--ivory);
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
}

/* What you get here. One list, full width of the content column. */
.differ { display: grid; gap: 40px; }
.d-head {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.d-us .d-head { color: var(--sunset); }
.d-col ul { list-style: none; }
.d-col li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.55;
}

/* Stack strip */
.stack { padding: 26px 0; }
.stack .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 28px;
}
.stack-lead {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dune);
  flex: 0 1 auto;
  min-width: 0;
}
.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
}
.stack-list li {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ivory);
  opacity: 0.6;
  white-space: nowrap;
}
.stack-note {
  flex: 1 0 100%;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dune);
}

/* Who */
/* The 2026-08-21 Costa Rica frame is a LANDSCAPE environmental portrait (5:4), so
   the bio and the plate stack rather than sit side by side. Beside the text the
   plate could never exceed 320px, because .sec-body caps at 672px once the sticky
   label column has taken 372 of the wrap, and a 320px-wide 5:4 frame renders only
   238px tall: too small for a face to read, and it wastes the vista. Stacked, the
   plate gets 480px and the bio keeps its full measure at every width. */
.who-grid { display: grid; gap: 36px; }
.who-grid > div > p { max-width: var(--measure); margin-bottom: 1.35em; }
.who-grid > div > p:last-child { margin-bottom: 0; }
.portrait {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 10px;
  background: var(--pit);
  max-width: 480px;
}
/* Seats the frame on the night ground without muting it. The heavy 0.62 vignette
   and the grayscale below it existed to rescue a white studio backdrop; the
   golden-hour frame that replaced it on 2026-08-25 is already on palette. */
.portrait::after {
  content: "";
  position: absolute;
  inset: 10px 10px 44px;
  pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 45%, transparent 55%, rgba(13, 11, 9, 0.40) 100%),
    linear-gradient(180deg, rgba(13, 11, 9, 0.16), transparent 38%),
    radial-gradient(95% 65% at 25% 100%, rgba(255, 90, 40, 0.16), transparent 68%);
  mix-blend-mode: multiply;
}
.portrait img {
  filter: brightness(0.95) saturate(0.97);
  border-radius: 1px;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* If the ratio ever drifts from the file, crop off the bottom, never the head. */
  object-position: center top;
}
.portrait figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dune);
  padding-top: 10px;
  letter-spacing: 0.06em;
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mark {
  font-family: var(--mono);
  color: var(--sunset);
  flex: none;
  transition: transform 0.25s ease;
}
.faq details[open] summary .mark { transform: rotate(45deg); }
.faq .a {
  padding: 0 0 22px;
  color: var(--dune);
  max-width: 58ch;
}

/* Final CTA */
.final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52% 42% at 50% 118%, var(--glow), transparent 72%),
    var(--night);
}
.final .section-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.final h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  max-width: 18ch;
}
.final p { max-width: 52ch; color: var(--dune); }
.final .microline { max-width: none; }

/* Footer */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 36px 0 46px;
}
.site-foot .wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 780px) {
  .site-foot .wrap { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
.site-foot p {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dune);
  line-height: 1.8;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dune);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ivory); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Reveals: content is fully visible without JS. When JS runs it adds
   .js on <html>, elements get hidden state, and .in transitions them up.
   -------------------------------------------------------------------------- */
/* Reveal entrances are played by site.js through the Web Animations API, only
   when the page is visible and the observer fires. Nothing is hidden by CSS,
   so captures, hidden tabs, no-JS readers and reader modes all get the full page. */
@media (prefers-reduced-motion: reduce) {
  .btn, .faq summary .mark { transition: none; }
  .hero-sun { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Legal-page shell note: legal pages use /legal.css (v4 chrome), untouched.
   -------------------------------------------------------------------------- */