/* ==========================================================================
   kult.homes — site stylesheet (v3 rebuild, 2026-07-11)
   Implements brand/b6-tokens.json + b6-graphic-profile.md (B7-amended):
   warm monochrome — colour lives in imagery, never in chrome.
   Fonts are LOCAL STACKS ONLY (SITE-DOCTRINE: no webfont fetch, no CDN):
   Fraunces/Georgia serif base · IBM Plex Mono technical accent.
   Shadows OFF; depth = image + 1px hairlines. CTAs are words, never buttons.
   ========================================================================== */

/* ---- tokens (from b6-tokens.json) ---------------------------------------- */
:root {
  --paper:        #FEFCF5;  /* page ground — never #FFF */
  --paper-2:      #F7F4EA;  /* lowered ground, band alternation */
  --paper-3:      #EFEBDD;  /* inset ground */
  --rule:         #D8D2C4;  /* the 1px drawing line */
  --rule-strong:  #C6BFAD;
  --ink:          #171512;  /* body + headings — never #000 */
  --ink-2:        #3A3833;  /* secondary text (AA-fix) */
  --ink-muted:    #5F5A4E;  /* meta/captions ONLY, never running text */
  --carbon:       #17161A;  /* dark band / footer ground */
  --carbon-2:     #232228;
  --on-dark:      #FEFCF5;
  --on-dark-muted:#9B968B;
  --on-dark-rule: #3A3942;

  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --scrim: linear-gradient(180deg,
            rgba(23,22,26,0.15) 0%,  rgba(23,22,26,0.10) 34%,
            rgba(23,22,26,0.45) 66%, rgba(23,22,26,0.84) 100%);
}

/* ---- reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 24px;
  overflow-x: hidden;
}
img, iframe, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--serif); margin: 0 0 var(--s4); }
h1 { font-size: clamp(39px, 6vw, 61px); line-height: 1.06; font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 39px);  line-height: 1.22; font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: 25px; line-height: 32px; font-weight: 600; }
h4 { font-size: 20px; line-height: 32px; font-weight: 600; }
p  { margin: 0 0 var(--s4); max-width: 68ch; }

/* ---- layout primitives ---------------------------------------------------- */
/* .wrap — the ~1120px content container with responsive side margins */
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--s7); }
@media (max-width: 700px) { .wrap { padding-inline: var(--s4); } }

/* .band — a full-width page section with generous vertical air.
   .band--raised = paper-2 alternation · .band--inset = paper-3 ·
   .band--carbon = dark ground with on-dark tokens · .band--rule = 1px top hairline */
.band { padding-block: clamp(var(--s8), 9vw, var(--s10)); }
.band--raised { background: var(--paper-2); }
.band--inset  { background: var(--paper-3); }
.band--rule   { border-top: 1px solid var(--rule); }
.band--carbon { background: var(--carbon); color: var(--on-dark); }
.band--carbon a { text-decoration-color: var(--on-dark-rule); }
.band--carbon a:hover { text-decoration-color: var(--on-dark); }

/* .cols.c-50 — two equal columns that stack on small screens */
.cols { display: grid; gap: var(--s7); align-items: start; }
.c-50 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .c-50 { grid-template-columns: 1fr; } }

/* ---- typographic roles ---------------------------------------------------- */
/* .kicker — mono uppercase section label (label.mono token) */
.kicker {
  font-family: var(--mono); font-size: 13px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--s4);
}
.band--carbon .kicker, .on-image .kicker { color: var(--on-dark-muted); }

/* .ingress — lead paragraph (body.l token) */
.ingress { font-size: 20px; line-height: 32px; max-width: 62ch; }

/* .mono-data — numbers-as-proof (data.mono token) */
.mono-data { font-family: var(--mono); font-size: 16px; line-height: 24px; font-weight: 500; }

/* .fine — mono caption/meta line (spec.mono token) */
.fine { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--ink-muted); }
.band--carbon .fine { color: var(--on-dark-muted); }

/* .cta-link — the CTA-as-word: quiet underlined text link, never a button */
.cta-link {
  display: inline-block; font-family: var(--serif); font-size: 18px; line-height: 24px;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--ink); text-underline-offset: 4px;
}
.cta-link:hover { text-decoration-thickness: 2px; }
.band--carbon .cta-link, .on-image .cta-link { text-decoration-color: currentColor; }

/* ---- header / nav ---------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s4) var(--s6); padding-block: var(--s5);
}
/* .brand — the KULT wordmark in running chrome. The DRAWN mark (founder 2026-07-12),
   not type: an inline <symbol> per page (see the sprite after <body>) that header and
   footer <use>. fill=currentColor ⇒ ink on paper, paper on carbon — one geometry, no
   dark/light file swap. Geometry: brand/assets/wordmark-src/build_wordmark.py.
   Size is this one knob; the ratio 366.92 : 109.22 must be kept. */
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand:hover, .brand:focus-visible { color: var(--ink); }
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark { display: block; height: 22px; width: 73.9px; fill: currentColor; }
@media (max-width: 560px) { .brand-mark { height: 19px; width: 63.8px; } }
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s6); flex: 1; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); list-style: none; margin: 0; padding: 0; align-items: baseline; }
.nav-main a { text-decoration: none; font-size: 16px; }
.nav-main a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* .nav-sep — the founder's visual "|" between story pages and tool/proof pages */
.nav-sep { width: 1px; height: 16px; background: var(--rule-strong); align-self: center; }
/* .nav-utility — right-aligned, mono-mini financier doors (EN) */
.nav-utility { margin-left: auto; }
.nav-utility a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-muted); text-decoration: none;
}
.nav-utility a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px) { .nav-utility { margin-left: 0; } }

/* ---- hero (text-on-image, imgtext treatment) -------------------------------- */
/* .hero — full-bleed photo band, min-height per b6 imagery.hero.minHeight,
   copy overlaid on the warm scrim; .on-image switches text to on-dark tokens */
.hero { position: relative; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.hero-copy { position: relative; z-index: 1; padding-block: var(--s8) var(--s7); }
.on-image { color: var(--on-dark); }
.on-image p { color: var(--on-dark); }

/* .img-label — the persistent §9 marking badge on photos/renders (top-right) */
.img-label {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
  font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.04em;
  color: var(--on-dark); background: rgba(23,22,26,0.62);
  padding: 3px 8px; border-radius: 1px;
}

/* ---- figures / photos -------------------------------------------------------- */
/* figure.photo — a photo with its mono caption; border = hairline, radius = 2px */
.photo { margin: 0; position: relative; }
.photo img { width: 100%; border: 1px solid var(--rule); border-radius: 2px; }
.photo figcaption {
  font-family: var(--mono); font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em; color: var(--ink-muted); padding-top: var(--s2);
}
/* .photo--frame keeps a fixed aspect for grids */
.photo--frame img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- 3D set-piece (c13 INPASSET: half-width, inside a band) ------------------ */
/* figure.set-piece — the ONE technical set-piece per page: embedded viewer iframe
   on paper ground with hairline frame and a mono figcaption carrying the house id */
.set-piece { margin: 0; }
.set-piece iframe {
  width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--rule);
  border-radius: 2px; background: var(--paper); display: block;
}
@media (max-width: 860px) { .set-piece iframe { aspect-ratio: 4 / 3; } }
.set-piece figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4);
  font-family: var(--mono); font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em; color: var(--ink-muted); padding-top: var(--s2);
}
.set-piece figcaption a { color: var(--ink-2); }

/* ---- step list (process) ------------------------------------------------------ */
/* ol.steps — numbered process; the number is a mono label, the h-row carries meaning */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: steg; }
.steps li { counter-increment: steg; padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: "0" counter(steg);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  color: var(--ink-muted); display: block; margin-bottom: var(--s2);
}
.steps h3 { font-size: 20px; line-height: 28px; margin-bottom: var(--s2); }
.steps p { margin: 0; color: var(--ink-2); }

/* ---- capability grid ----------------------------------------------------------- */
/* .cap-grid — three outcome-first capability blocks, hairline-separated */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
@media (max-width: 860px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-grid h3 { font-size: 22px; line-height: 30px; border-top: 1px solid var(--rule-strong); padding-top: var(--s4); }
.cap-grid p { color: var(--ink-2); margin: 0; }

/* ---- card grid (gallery teaser) -------------------------------------------------- */
/* .cards — gallery grid of .card links; image + mono meta + serif title. No shadows. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { display: block; text-decoration: none; }
.card .photo figcaption { color: var(--ink-muted); }
.card h3 { font-size: 20px; line-height: 28px; margin: var(--s3) 0 var(--s1); }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card p { color: var(--ink-2); margin: 0; font-size: 14px; line-height: 24px; }

/* ---- stat row (credentials) -------------------------------------------------------- */
/* .stats — the numbers-as-proof strip: mono figures between hairlines */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: var(--s6);
}
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }
.stat .mono-data { display: block; font-size: 20px; line-height: 28px; margin-bottom: var(--s2); }
.stat p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 24px; }

/* ---- research teaser ------------------------------------------------------------------ */
/* .research-list — dated finding blocks (activity signal); date in mono, title in serif */
.research-list { list-style: none; margin: 0; padding: 0; }
.research-list li { border-top: 1px solid var(--rule); padding: var(--s5) 0; }
.research-list time {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-muted); display: block; margin-bottom: var(--s2);
}
.research-list h3 { font-size: 20px; line-height: 28px; margin-bottom: var(--s2); }
.research-list p { margin: 0; color: var(--ink-2); }

/* ---- financier strip (EN) --------------------------------------------------------------- */
/* .fin-strip — the sober EN doorway band for investors/grant boards */
.fin-strip p { max-width: 68ch; }
.fin-strip .doors { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s5); }

/* ---- footer -------------------------------------------------------------------------------- */
/* .site-footer — carbon trust instrument: 4 columns, 20–25 links, mono meta bottom bar */
.site-footer { background: var(--carbon); color: var(--on-dark); padding-block: var(--s9) var(--s6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s7); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* .footer-brand — same drawn mark, reversed for free via currentColor. The
   .footer-grid .footer-brand specificity is deliberate: it has to beat
   `.footer-grid p { color: var(--on-dark-muted) }` below, or the mark renders muted. */
.footer-grid .footer-brand { color: var(--on-dark); margin: 0 0 var(--s4); }
.footer-grid p { color: var(--on-dark-muted); font-size: 14px; line-height: 24px; }
.footer-grid h4 {
  font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted);
  margin: 0 0 var(--s4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--s3); font-size: 14px; line-height: 20px; }
.footer-grid a { color: var(--on-dark); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; text-decoration-color: var(--on-dark-rule); }
.footer-cred li { color: var(--on-dark-muted); }
.footer-bottom {
  border-top: 1px solid var(--on-dark-rule); margin-top: var(--s8); padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  font-family: var(--mono); font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em; color: var(--on-dark-muted);
}
.footer-bottom a { color: var(--on-dark-muted); }

/* ---- misc ------------------------------------------------------------------------------------ */
/* .note-warm — the single warm mission note per page (one sentence, serif, larger) */
.note-warm { font-size: 22px; line-height: 34px; max-width: 46ch; }

/* .measure — cap prose width when a block isn't a <p> */
.measure { max-width: 68ch; }

/* reduced motion: this stylesheet animates nothing, but keep the contract explicit */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}