/* ============================================================================
   martinbrusletto.no: site layer.
   Sits on top of /sc/scrollcraft.css (the engine's taste floor, never edited).
   Everything brand-specific lives here: six colour roles per ground, two
   type families, the margin folio, ledgers, forms, the colophon.

   Two grounds, hard cuts between them (chaptered editorial). Each ground
   restates its six roles AND `color`, because `color` inherits as a computed
   value and a token swap alone does not re-ink the text under it.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif.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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic.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;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Brand grounds. `--sun` (0 morning .. 1 evening) regrades these from
     site.js; the defaults below are the morning stop. */
  --paper:   #F4F3EF;
  --paper-2: #E9E6DF;
  --navy:    #0A1119;
  --navy-2:  #121B26;
  --gold:    #C9A961;   /* accent on navy */
  --gold-deep: #8A6D33; /* the same hue, darker, for paper: 5:1 on --paper */
  --sun: 0;

  /* Paper is the page default. */
  --sc-canvas:     var(--paper);
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0A1119;
  --sc-ink-soft:   #5B6068;
  --sc-accent:     var(--gold-deep);
  --sc-accent-ink: var(--paper);

  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Typeskala (okt. 2026): mindre og strammere enn motorens standard. Liten,
     presis brødtekst og etiketter; overskriftene bærer stemmen. */
  --sc-t-xs:   clamp(0.64rem, 0.62rem + 0.1vw, 0.7rem);
  --sc-t-sm:   clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --sc-t-base: clamp(0.9rem, 0.87rem + 0.12vw, 0.98rem);
  --sc-t-lg:   clamp(1rem, 0.95rem + 0.28vw, 1.2rem);
  --sc-t-xl:   clamp(1.2rem, 1.08rem + 0.6vw, 1.6rem);
  --sc-t-2xl:  clamp(1.55rem, 1.3rem + 1.3vw, 2.4rem);
  --sc-t-3xl:  clamp(1.95rem, 1.5rem + 2.3vw, 3.4rem);
  --sc-t-4xl:  clamp(2.5rem, 1.6rem + 4.2vw, 5.4rem);
  --sc-shadow-color: 214 40% 6%;
  --sc-maxw: 90rem;
  --sc-measure: 58ch;
  /* One radius scale for the whole site: square. */
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;

  color-scheme: light;
  scrollbar-gutter: stable;
}

.ground--paper {
  --sc-canvas: var(--paper);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.ground--paper2 {
  --sc-canvas: var(--paper-2);
  --sc-surface: var(--paper);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.ground--navy {
  --sc-canvas:     var(--navy);
  --sc-surface:    var(--navy-2);
  --sc-ink:        #F3EFE7;
  --sc-ink-soft:   #A39C90;
  --sc-accent:     var(--gold);
  --sc-accent-ink: var(--navy);
  background: var(--sc-canvas);
  color: var(--sc-ink);
  color-scheme: dark;
  /* Light on dark, compensated on three axes. */
  --sc-leading-body: 1.68;
  --sc-track-normal: 0.004em;
}

/* ------------------------------------------------------------ typography -- */
body { font-size: var(--sc-t-base); }
.sc-display { font-weight: 400; }
.sc-display em, .sc-display i { font-style: italic; color: var(--sc-ink-soft); }
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-lede { color: var(--sc-ink); }
.sc-lede--soft { color: var(--sc-ink-soft); }
.sc-label { font-family: var(--sc-font-mono); }
.sc-body strong { color: var(--sc-ink); font-weight: 600; }

.prose { max-width: var(--sc-measure); text-wrap: pretty; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--sc-5); }
.prose > :is(h2, h3) { margin-top: var(--sc-8); font-family: var(--sc-font-display); font-weight: 400; letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight); text-wrap: balance; }
.prose > h2 { font-size: var(--sc-t-xl); }
.prose > h3 { font-size: var(--sc-t-lg); }
.prose > :is(h2, h3) + * { margin-top: var(--sc-4); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--sc-2); }
.prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.prose a:hover { color: var(--sc-accent); }
.prose blockquote { margin: 0; padding-left: var(--sc-5); border-left: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.4; }
.prose img { width: 100%; height: auto; }
.prose hr { height: 1px; border: 0; background: var(--sc-hairline); }
.prose code { font-family: var(--sc-font-mono); font-size: 0.92em; }

/* ------------------------------------------------------------------ links -- */
a { color: inherit; text-decoration: none; }
.running { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.24em; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.running:hover { color: var(--sc-accent); }
.ln { border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: 0.18em; transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.ln:hover { border-color: currentColor; }

/* ------------------------------------------------------------ margin folio --
   The chrome. No bar: a wordmark and the current chapter in the top margin,
   two links and the light handle opposite. Inverts against whichever ground
   is under it. */
.folio {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sc-6);
  padding: var(--sc-5) var(--sc-gutter) 0;
  pointer-events: none;
  color: var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  line-height: 1.5;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
/* The folio follows the ground under it (site.js toggles .on-navy on <html>),
   and a short band of that ground fades in behind it so copy scrolling past
   never collides with the chrome. A scrim only where the text sits. */
:root.on-navy .folio { --sc-ink: #F3EFE7; --sc-canvas: var(--navy); }
.folio::before {
  content: ""; position: absolute; inset: 0 0 -2.75rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 55%, transparent 100%);
  transition: background var(--sc-d-base) var(--sc-ease-out);
}
.folio a, .folio label { pointer-events: auto; }
.folio__left, .folio__right { display: flex; flex-direction: column; gap: var(--sc-1); }
.folio__right { align-items: flex-end; text-align: right; }
.folio__mark { font-weight: 600; }
.folio__chapter { opacity: 0.72; min-height: 1.5em; }
.folio__links { display: flex; gap: var(--sc-5); }
.folio__links a { opacity: 0.78; transition: opacity var(--sc-d-fast) var(--sc-ease-out); }
.folio__links a:hover, .folio__links a[aria-current="page"] { opacity: 1; }
.sun { display: inline-flex; align-items: center; gap: var(--sc-3); cursor: pointer; }
.sun span { opacity: 0.72; }
.sun input {
  appearance: none; -webkit-appearance: none;
  width: 5.5rem; height: 14px; margin: 0; background: transparent; cursor: ew-resize;
}
.sun input::-webkit-slider-runnable-track { height: 1px; background: currentColor; opacity: 0.7; }
.sun input::-moz-range-track { height: 1px; background: currentColor; opacity: 0.7; }
.sun input::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-top: -4px; }
.sun input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; }
.sun input:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ------------------------------------------------------------------ meny --
   «Meny» i folioen åpner en navy fullskjerm med alle sidene. Folioen ligger
   over (samme posisjon, knappen blir «Lukk»). Bare clip-path og opacity
   animeres; redusert bevegelse gir umiddelbar visning. Adferd: site.js §4. */
.folio button { pointer-events: auto; }
.folio__meny {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.folio__meny-ikon { position: relative; width: 18px; height: 7px; }
.folio__meny-ikon::before, .folio__meny-ikon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.folio__meny-ikon::before { top: 0; }
.folio__meny-ikon::after { bottom: 0; }
.folio__meny[aria-expanded="true"] .folio__meny-ikon::before { transform: translateY(3px) rotate(45deg); }
.folio__meny[aria-expanded="true"] .folio__meny-ikon::after { transform: translateY(-3px) rotate(-45deg); }
.folio__meny:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.folio__links { align-items: center; }

.meny {
  position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sc-canvas); color: var(--sc-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--sc-ease-out);
}
.meny[hidden] { display: none; }
.meny.is-open { clip-path: inset(0 0 0 0); }
:root.meny-open { overflow: hidden; }
:root.meny-open .folio { --sc-ink: #F3EFE7; --sc-canvas: var(--navy); }
.meny__inner {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 7vw, 8rem); align-items: end;
  padding-block: clamp(6.5rem, 16vh, 10rem) clamp(2.5rem, 8vh, 5rem);
}
.meny__nav { display: flex; flex-direction: column; border-top: 1px solid var(--sc-hairline-strong); }
.meny__nav a {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: var(--sc-5); align-items: baseline;
  padding-block: clamp(0.55rem, 1.4vh, 0.9rem); border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.1; letter-spacing: var(--sc-track-snug);
  opacity: 0; transform: translateY(0.6rem);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
  transition-delay: calc(120ms + var(--i, 0) * 45ms);
}
.meny__nav a span {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); line-height: 1.5;
}
.meny.is-open .meny__nav a { opacity: 1; transform: none; }
.meny__nav a:hover, .meny__nav a:focus-visible, .meny__nav a[aria-current="page"] { color: var(--sc-accent); }
.meny__nav a:focus-visible { outline: none; }
.meny__side { display: flex; flex-direction: column; gap: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.meny__side a { color: var(--sc-ink); }
.meny__side .btn { color: var(--sc-canvas); margin-top: var(--sc-4); }
.meny__side .btn:hover { color: var(--sc-ink); }
.meny__label { margin-top: var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.meny__label:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .folio__kontakt { display: none; }
  .meny__inner { grid-template-columns: 1fr; align-items: start; }
  .meny__nav a { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .meny, .meny__nav a, .folio__meny-ikon::before, .folio__meny-ikon::after { transition: none; }
}

/* ------------------------------------------------------------- rutenett --
   Hårlinjer i margene, små kryss og en linjal til venstre som viser hvor på
   siden leseren er. Ligger over grunnen, under folioen. Farge fra grunnen
   under (.on-navy), svak nok til aldri å konkurrere med innholdet. */
.rutenett { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 2); pointer-events: none; color: var(--sc-ink); opacity: 0.16; transition: color var(--sc-d-base) var(--sc-ease-out); }
:root.on-navy .rutenett { color: #F3EFE7; opacity: 0.14; }
:root.meny-open .rutenett { opacity: 0; }
.rutenett__v { position: absolute; top: 0; bottom: 0; width: 1px; background: currentColor; }
.rutenett__v--l { left: calc(var(--sc-gutter) * 0.5); }
.rutenett__v--r { right: calc(var(--sc-gutter) * 0.5); }
.kryss { position: absolute; width: 11px; height: 11px; left: calc(var(--x) - 5px); top: calc(var(--y) - 5px); }
.kryss::before, .kryss::after { content: ""; position: absolute; background: currentColor; }
.kryss::before { left: 5px; top: 0; bottom: 0; width: 1px; }
.kryss::after { top: 5px; left: 0; right: 0; height: 1px; }
.linjal { position: absolute; left: calc(var(--sc-gutter) * 0.5); top: 20vh; bottom: 20vh; width: 7px;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2.6vh); }
.linjal__merke { position: absolute; left: -5px; width: 17px; height: 2px; margin-top: -1px; background: currentColor; top: calc(var(--side-p, 0) * 100%); }
@media (max-width: 860px) { .kryss { display: none; } .linjal { top: 26vh; bottom: 26vh; } }

/* ------------------------------------------------------------ ord for ord --
   Overskrifter løftes inn ord for ord når de kommer i bildet (site.js deler
   dem opp og setter .ord-inn). Uten JS eller med redusert bevegelse står de. */
.ord { display: inline-block; overflow: clip; overflow-clip-margin: 0.16em; vertical-align: top; }
.ord > span { display: inline-block; transform: translateY(110%); transition: transform 950ms cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--o, 0) * 55ms); }
.ord-inn .ord > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .ord > span { transform: none; transition: none; } }

/* ----------------------------------------------------------- bildekamera --
   Bilder i kapitler zoomer rolig ut mens kapitlet passerer (--sc-p fra
   motoren). `scale` er egen egenskap, så motorens parallakse-transform står. */
@media (prefers-reduced-motion: no-preference) {
  [data-sc-act] .plate img { scale: calc(1.14 - 0.14 * var(--sc-p, 1)); transform-origin: 50% 40%; }
}

/* ----------------------------------------------------------------- scene --
   Én stående scene: fullskjermbilder med rolig kamerabevegelse, pikseloppløsning
   mellom dem, og små tekstblokker som kommer og går. Tegnes på canvas fra
   site.js §5. Uten JS: første bilde og teksten i vanlig flyt. */
.scene { position: relative; background: var(--navy); }
.scene__stage { background: var(--navy); color: #F3EFE7; }
.scene__canvas, .scene__fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__fallback { object-fit: cover; }
.scene.is-live .scene__fallback { visibility: hidden; }
.scene__kilder { display: none; }
.scene__skygge { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in oklab, var(--navy) 70%, transparent) 0%, color-mix(in oklab, var(--navy) 22%, transparent) 30%, transparent 52%),
    linear-gradient(to right, color-mix(in oklab, var(--navy) 42%, transparent) 0%, transparent 42%); }
.scene__tekst { position: absolute; left: var(--sc-gutter); bottom: clamp(3.5rem, 12vh, 7.5rem); width: min(34rem, calc(100% - 2 * var(--sc-gutter))); }
.scene__tekst--hoyre { left: auto; right: var(--sc-gutter); width: min(22rem, calc(100% - 2 * var(--sc-gutter))); }
.scene.is-live .scene__tekst { opacity: var(--vis, 0); translate: 0 calc((1 - var(--vis, 0)) * 1.6vh); pointer-events: none; visibility: var(--synlig, hidden); }
.scene.is-live .scene__tekst.er-synlig { pointer-events: auto; }
.scene__tekst .sc-display { color: #F3EFE7; }
.scene__tekst .sc-lede { color: #F3EFE7; margin-top: var(--sc-5); max-width: 30ch; }
.scene__tekst .etikett { display: block; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--gold); margin-bottom: var(--sc-4); }
.scene__tekst h2:not(.sc-display) { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: var(--sc-track-snug); color: #F3EFE7; margin: 0; }
.scene__tekst p { color: color-mix(in oklab, #F3EFE7 84%, transparent); font-size: var(--sc-t-base); line-height: 1.6; max-width: 40ch; }
.scene__tekst h2 + p, .scene__tekst p + p { margin-top: var(--sc-4); }
.scene__tekst .running { color: #F3EFE7; }
.scene__tekst .lenker { display: flex; gap: var(--sc-5); flex-wrap: wrap; margin-top: var(--sc-5); }
.scene__hud { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5); display: flex; justify-content: flex-end; gap: var(--sc-5);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: color-mix(in oklab, #F3EFE7 70%, transparent); pointer-events: none; }
.scene__bar { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--scene-p, 0)); }
:root:not(.js) .scene .scene__stage { position: relative; height: auto; min-height: 100svh; }
:root:not(.js) .scene .scene__tekst { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--sc-gutter) var(--sc-7); width: auto; max-width: 42rem; }
:root:not(.js) .scene .scene__tekst:first-of-type { padding-top: 62svh; }
:root:not(.js) .scene .scene__hud { display: none; }
@media (max-width: 860px) {
  .scene__tekst, .scene__tekst--hoyre { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: clamp(3.5rem, 10vh, 6rem); }
  .scene__skygge { background: linear-gradient(to top, color-mix(in oklab, var(--navy) 90%, transparent) 0%, color-mix(in oklab, var(--navy) 45%, transparent) 48%, transparent 72%); }
}

/* ------------------------------------------------------------- structure -- */
.chapter { position: relative; padding-block: var(--sc-section); }
.chapter--flush { padding-block: 0; }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }

/* Title page: type on the ground, nothing else above the fold. */
.title-page {
  min-height: 100svh;
  display: grid; align-content: end;
  padding-block: clamp(7rem, 18vh, 12rem) clamp(3rem, 10vh, 7rem);
}
.title-page .sc-lede { margin-top: var(--sc-6); max-width: 34ch; font-size: var(--sc-t-xl); line-height: 1.2; }
.title-page .byline { margin-top: var(--sc-7); max-width: 48ch; color: var(--sc-ink-soft); }
.title-page--short { min-height: 0; padding-top: clamp(8rem, 22vh, 14rem); }

/* Ledger: the editorial answer to a card grid. Hairlines and a fixed label
   column, same schema every row. */
.ledger { border-top: 1px solid var(--sc-hairline-strong); }
.ledger > * {
  display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr; gap: var(--sc-5);
  padding-block: var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline);
}
.ledger > * > :first-child { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.35em; }
.ledger > * > :last-child { margin: 0; }
.ledger--display > * > :last-child { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.25; letter-spacing: var(--sc-track-snug); }
.ledger--display > * > :last-child small { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-normal); color: var(--sc-ink-soft); margin-top: var(--sc-2); max-width: 46ch; }
.ledger a { display: block; }
.ledger a:hover :last-child, .ledger a:hover { color: var(--sc-accent); }

/* Figures. Every image is a plate: square corners, a caption in the label
   voice. `.house` marks the photographs the light handle regrades. */
figure { margin: 0; }
figure img { width: 100%; height: auto; }
.plate { overflow: clip; background: var(--sc-surface); }
.plate img { object-fit: cover; }
.caption { display: flex; justify-content: space-between; gap: var(--sc-5); margin-top: var(--sc-3); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.house img {
  filter: sepia(calc(var(--sun) * 0.30)) saturate(calc(1 - var(--sun) * 0.14)) brightness(calc(1.02 - var(--sun) * 0.13)) contrast(calc(1 + var(--sun) * 0.05));
  transition: filter 240ms var(--sc-ease-out);
}

/* ----------------------------------------------------------------- forms -- */
.form { display: grid; gap: var(--sc-6); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); }
.field { display: grid; gap: var(--sc-2); }
.field > span, .field > label, label.field { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; display: block;
  border: 0; border-bottom: 1px solid var(--sc-hairline-strong); border-radius: 0;
  background: transparent; color: var(--sc-ink);
  padding: var(--sc-3) 0; font: inherit; font-family: var(--sc-font-text); font-size: var(--sc-t-base); letter-spacing: var(--sc-track-normal);
  text-transform: none;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 5.5em; }
.field select { appearance: auto; }
.field select option { color: #0A1119; background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--sc-ink-soft); opacity: 0.7; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1px 0 var(--sc-accent); }
.field input[readonly] { color: var(--sc-ink-soft); }
.field .help { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-normal); text-transform: none; color: var(--sc-ink-soft); margin: 0; }
.consent { display: flex; align-items: flex-start; gap: var(--sc-3); font-family: var(--sc-font-text); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-normal); text-transform: none; line-height: 1.5; color: var(--sc-ink-soft); }
.consent input { width: 1rem; height: 1rem; margin-top: 0.2em; flex: 0 0 auto; }
.hp { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  padding: 0.95em 1.5em;
  border: 1px solid var(--sc-ink); border-radius: var(--sc-r-sm);
  background: transparent; color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: var(--sc-track-normal); line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out);
}
.btn:hover { background: var(--sc-ink); color: var(--sc-canvas); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--solid { background: var(--sc-ink); color: var(--sc-canvas); }
.btn--solid:hover { background: transparent; color: var(--sc-ink); }
.btn--quiet { border-color: var(--sc-hairline-strong); color: var(--sc-ink-soft); }
.btn--quiet:hover { background: transparent; border-color: var(--sc-ink); color: var(--sc-ink); }

/* -------------------------------------------------------------- colophon --
   The close, on every page. The ask is a line of running text, not a button
   island; then the masthead in small type. The last screen holds. */
.colophon { padding-block: clamp(6rem, 14vh, 11rem) var(--sc-6); }
.colophon__ask { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sc-8) var(--sc-9); align-items: end; }
.colophon__ask .sc-display { max-width: 16ch; }
.colophon__ask p { font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 30ch; margin: 0; text-wrap: pretty; }
.masthead {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline-strong);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--sc-6);
  font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft);
}
.masthead p { margin: 0; }
.masthead strong { font-weight: 500; color: var(--sc-ink); }
.masthead nav { display: grid; gap: var(--sc-1); }
.masthead nav a:hover { color: var(--sc-ink); }
.masthead__legal { grid-column: 1 / -1; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; display: flex; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .folio { padding-top: var(--sc-4); }
  .folio__chapter { display: none; }
  .folio__links a:not([data-primary]) { display: none; }
  .title-page .sc-lede { font-size: var(--sc-t-lg); }
  .sc-display--xl { font-size: clamp(2.3rem, 1.6rem + 5vw, 3.2rem); }
  .form .two { grid-template-columns: 1fr; }
  .ledger > * { grid-template-columns: 1fr; gap: var(--sc-2); }
  .colophon__ask { grid-template-columns: 1fr; gap: var(--sc-6); }
  .masthead { grid-template-columns: 1fr 1fr; }
  .masthead nav { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .masthead { grid-template-columns: 1fr; }
  .sun input { width: 4rem; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .house img { transition: none; }
  .btn:active { transform: none; }
}