/* site.css — wolfchildren.co marketing pages.
   Built from brand-bible.md with the Steppa method (vieren/sops/hyperframes-deck-pipeline):
   zero inline styles, one type scale, four named layouts, explicit alignment on
   every zone, one left axis. Photo-led: every image is a named .slot with a ratio. */

/* ===== fonts: self-hosted, Latin subset ===== */
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal; font-display: swap; src: url(/assets/fonts/montserrat-900.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/libre-baskerville-400.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/libre-baskerville-700.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/libre-baskerville-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 300; font-style: normal; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-300.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-700.woff2) format("woff2"); }

/* ===== tokens ===== */
:root {
  /* palette (bible §2) */
  --cream: #DFD7C3; --green: #495543; --green-deep: #3A4435; --tan: #CDB494; --orange: #DA4635;
  --line: var(--tan);
  --tint: rgba(73, 85, 67, .06);

  /* faces */
  --f-display: Montserrat, "Arial Black", Arial, sans-serif;
  --f-serif: "Libre Baskerville", Georgia, serif;
  --f-mono: "IBM Plex Mono", Menlo, Consolas, monospace;

  /* type scale — mobile. Any font-size not a --t-* token is a bug. */
  --t-title: 40px;    /* page title */
  --t-head: 28px;     /* section heading */
  --t-sub: 20px;      /* tile / item heading */
  --t-price: 48px;    /* offer price */
  --t-lead: 19px;     /* serif lead */
  --t-body: 16px;     /* mono body */
  --t-small: 14px;    /* captions, meta, subtext */
  --t-label: 12px;    /* eyebrows, table heads */

  /* rhythm */
  --s-section: 64px;  /* between sections */
  --s-block: 32px;    /* head → body inside a section */
  --s-item: 16px;     /* between items in a list/grid */
  --s-gap: 20px;      /* grid gutters */
  --gutter: 24px;     /* page edge */
  --head-h: 36px;     /* eyebrow block height: 20px line + 16px margin. Split bodies offset by this. */
  --radius: 4px;
  --measure: 62ch;
}
@media (min-width: 900px) {
  :root {
    --t-title: 64px; --t-head: 40px; --t-sub: 24px; --t-price: 72px;
    --t-lead: 22px; --t-body: 17px; --t-label: 13px;
    --s-section: 112px; --s-block: 48px; --s-item: 24px; --s-gap: 24px; --gutter: 32px;
  }
}

/* ===== reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); color: var(--green); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-mono); font-weight: 400; font-size: var(--t-body); line-height: 1.65; }
img, picture { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.band-green :focus-visible { outline-color: var(--cream); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ===== type classes ===== */
.display { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.01em; }
.t-title { font-size: var(--t-title); line-height: 1.0; }
.t-head  { font-size: var(--t-head);  line-height: 1.05; }
.t-sub   { font-size: var(--t-sub);   line-height: 1.15; }
.t-price { font-size: var(--t-price); line-height: 1.0; }
.eyebrow { font-family: var(--f-display); font-weight: 900; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; line-height: 20px; margin-bottom: 16px; }
.lead { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.01em; }
.serif { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.55; letter-spacing: -0.01em; }
.small { font-size: var(--t-small); line-height: 1.5; }
.label { font-family: var(--f-display); font-weight: 900; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; line-height: 20px; }
.em { color: var(--orange); }                 /* the one emphasis in a section */
.rule-em { display: block; width: 48px; height: 3px; background: var(--orange); margin-bottom: var(--s-item); }

/* ===== page frame ===== */
.container { width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--s-section); padding-bottom: var(--s-section); }
.section + .section { border-top: 1px solid var(--line); }
.section.band-green, .section.band-green + .section { border-top: 0; }

/* ===== the four layouts. Every zone names its alignment. ===== */
/* 1. hero: photo | copy. Photo first on mobile (photo-led). */
.l-hero { display: grid; grid-template-columns: 1fr; gap: var(--s-block); align-items: start; }
.l-hero > .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 900px) { .l-hero { grid-template-columns: 6fr 6fr; gap: 64px; align-items: start; } .l-hero > .hero-media { order: 2; align-self: stretch; } }
/* media column: the hero slot keeps its ratio (flex: 0 0 auto); the detail slot fills what is left (flex: 1 1 auto; min-height: 0) — the Steppa composition fix. Mobile shows the hero slot only. */
.hero-media { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-gap); }
.hero-media > .slot:first-child { flex: 0 0 auto; }
.hero-media > .slot:nth-child(2) { display: none; }
@media (min-width: 900px) { .hero-media > .slot:nth-child(2) { display: block; flex: 1 1 auto; min-height: 240px; aspect-ratio: auto; } }

/* 2. split: label + heading | body. Both columns top-aligned; the body starts level with the heading, not the eyebrow. */
.l-split { display: grid; grid-template-columns: 1fr; gap: var(--s-block); align-items: start; }
@media (min-width: 900px) { .l-split { grid-template-columns: 5fr 7fr; gap: 64px; } .l-split > .split-body { padding-top: var(--head-h); } }
.split-head, .split-body { display: flex; flex-direction: column; align-items: flex-start; }

/* 3. stack: head, then body, one left axis. */
.l-stack { display: flex; flex-direction: column; align-items: flex-start; }
.l-stack > .stack-head { max-width: 760px; margin-bottom: var(--s-block); }
.l-stack > .stack-body { width: 100%; }

/* 4. band: copy | card on green. Top-aligned, never centred. */
.l-band { display: grid; grid-template-columns: 1fr; gap: var(--s-block); align-items: start; }
@media (min-width: 900px) { .l-band { grid-template-columns: 6fr 6fr; gap: 64px; } }
.band-green { background: var(--green); color: var(--cream); }
.band-green a, .band-green .eyebrow, .band-green .display { color: var(--cream); }
.band-green .em { color: var(--cream); }

/* ===== photo slots ===== */
.slot { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--tan); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-3x2 { aspect-ratio: 3 / 2; } .slot-2x3 { aspect-ratio: 2 / 3; } .slot-4x5 { aspect-ratio: 4 / 5; }
.slot-1x1 { aspect-ratio: 1 / 1; } .slot-16x9 { aspect-ratio: 16 / 9; } .slot-21x9 { aspect-ratio: 21 / 9; }
.slot-bleed { border-radius: 0; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-gap); align-items: start; }
.slot-grid .slot { border-radius: var(--radius); }
.bleed { width: 100%; }

/* placeholder face of an unfilled slot: loud on purpose, never shipped */
.placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 16px; gap: 4px; border: 2px dashed var(--green); border-radius: inherit; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(73, 85, 67, .10) 14px 28px); text-align: left; }
.placeholder-label { font-family: var(--f-display); font-weight: 900; font-size: var(--t-label); letter-spacing: .08em; }
.placeholder-what { font-size: var(--t-small); line-height: 1.4; max-width: 34ch; }
.placeholder-meta { font-size: var(--t-label); line-height: 1.4; opacity: .8; }
.band-green .placeholder { border-color: var(--cream); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(223, 215, 195, .12) 14px 28px); }
.ph { background: transparent; color: inherit; border-bottom: 2px dashed var(--orange); padding: 0 2px; font-weight: 700; }

/* ===== buttons: the one CTA. Green fill, cream label (bible §2 option 5). ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-weight: 700; font-size: var(--t-small); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); min-height: 48px; padding: 12px 24px; line-height: 1.3; border: 1px solid var(--green); background: var(--green); color: var(--cream); }
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: var(--t-label); }
.btn-lg { width: 100%; min-height: 56px; padding: 16px 28px; font-size: var(--t-body); }
@media (min-width: 600px) { .btn-lg { width: auto; } }
.band-green .btn { background: var(--cream); color: var(--green); border-color: var(--cream); }
.band-green .btn:hover { background: #F3EEE1; border-color: #F3EEE1; }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--s-block); }
.cta-subtext { font-size: var(--t-small); line-height: 1.5; max-width: 46ch; }

/* ===== logo: alpha mask coloured by CSS ===== */
.logo { display: block; text-decoration: none; }
.logo-mark { display: block; width: 100%; aspect-ratio: 1600 / 696; background-color: var(--green); -webkit-mask: url(/assets/img/logo/wolfchildren-logo-mask-1200.png) no-repeat left center / contain; mask: url(/assets/img/logo/wolfchildren-logo-mask-1200.png) no-repeat left center / contain; }
.logo-sm { width: 112px; } .logo-md { width: 150px; } .logo-lg { width: 200px; }
@media (min-width: 600px) { .logo-sm { width: 140px; } }
.band-green .logo-mark { background-color: var(--cream); }

/* ===== banner + header ===== */
.banner { border-bottom: 1px solid var(--line); }
.banner p { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: var(--t-small); line-height: 1.4; }
.banner p::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.site-header { border-bottom: 1px solid var(--line); }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }

/* ===== hero ===== */
.hero { padding-top: var(--s-block); padding-bottom: var(--s-section); }
.hero h1 { margin-bottom: var(--s-item); }
.hero .lead { margin-bottom: var(--s-item); max-width: var(--measure); }
.benefits { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
.benefits li { position: relative; padding-left: 28px; font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.01em; }
.benefits li::before { content: ""; position: absolute; left: 0; top: .6em; width: 14px; height: 2px; background: var(--tan); }
.rating-anchor { font-size: var(--t-small); line-height: 1.5; margin-top: var(--s-item); }
.badges { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; font-size: var(--t-small); line-height: 1.5; }
.badges li { position: relative; padding-left: 18px; }
.badges li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border: 1px solid var(--tan); border-radius: 50%; }

/* ===== photo band (full-bleed) ===== */
.photo-band { padding-top: 0; padding-bottom: 0; border-top: 0; }
.photo-band + .section { border-top: 0; }

/* ===== gallery (scroll-snap, no JS) ===== */
.gallery { display: flex; align-items: flex-start; gap: var(--s-gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--tan) transparent; }
.gallery-item { flex: 0 0 84%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (min-width: 700px) { .gallery-item { flex-basis: 46%; } }
@media (min-width: 1100px) { .gallery-item { flex-basis: 31%; } }
.gallery-item figcaption { font-size: var(--t-small); line-height: 1.5; }
.gallery-dots { display: flex; align-items: center; gap: 8px; margin-top: var(--s-item); }
.gallery-dots a { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--green); }
.gallery-dots a:hover { background: var(--green); }

/* ===== grids, tiles, cards ===== */
.grid { display: grid; gap: var(--s-gap); align-items: stretch; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tile-key { border-color: var(--green); }
.tile p { font-size: var(--t-small); line-height: 1.55; }
.testimonial { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--s-item); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.testimonial-quote { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.01em; }
.testimonial cite { font-style: normal; font-size: var(--t-small); }

/* ===== prose ===== */
.prose-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-item); max-width: var(--measure); }

/* ===== steps ===== */
.section-after { margin-top: var(--s-block); max-width: var(--measure); }

/* ===== contents list (what's inside) ===== */
.contents { width: 100%; counter-reset: c; }
.contents li { counter-increment: c; display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; align-items: start; padding: var(--s-item) 0; border-top: 1px solid var(--line); }
.contents li:last-child { border-bottom: 1px solid var(--line); }
.contents li::before { content: counter(c, decimal-leading-zero); font-size: var(--t-label); letter-spacing: .06em; line-height: 1.15; padding-top: .35em; }
.contents .t-sub { grid-column: 2; margin-bottom: 6px; }
.contents p { grid-column: 2; font-size: var(--t-small); line-height: 1.55; }
.peek-media { width: 100%; margin-top: var(--s-block); }

/* ===== comparison ===== */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--f-display); font-weight: 900; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.compare tbody th { font-weight: 700; white-space: nowrap; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .col-key { background: var(--tint); }
.compare .price-cell { font-family: var(--f-display); font-weight: 900; font-size: var(--t-sub); }

/* ===== faq ===== */
.faq-list { width: 100%; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: 18px 0; font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--f-mono); font-weight: 700; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 0 20px; font-size: var(--t-small); line-height: 1.55; max-width: var(--measure); }

/* ===== offer ===== */
.offer-copy { display: flex; flex-direction: column; align-items: flex-start; }
.offer-copy .t-price { margin: 8px 0 var(--s-item); }
.offer-copy .lead { margin-bottom: var(--s-block); }
.offer-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--tan); border-radius: var(--radius); padding: 28px; }
.includes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.includes li { position: relative; padding-left: 26px; font-size: var(--t-small); line-height: 1.5; }
.includes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--tan); }
.offer-card .cta { margin-top: var(--s-block); }
.offer-note { font-size: var(--t-small); line-height: 1.5; margin-top: var(--s-item); }

/* ===== final cta + footer ===== */
.final-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 760px; }
.final-copy .lead { margin-top: var(--s-item); }
.guarantee { font-size: var(--t-small); line-height: 1.5; max-width: 46ch; }
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 32px; font-size: var(--t-small); line-height: 1.5; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-item); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer-fine { margin-top: var(--s-block); font-size: var(--t-label); line-height: 1.5; max-width: 70ch; letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* signup — the moon-calendar form (src/lib/signup.mjs). Layout only; type inherits the tokens. */
.signup { margin-top: var(--s-block); }
.signup-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 46ch; }
.signup-form input[type="email"] { width: 100%; box-sizing: border-box; font: inherit; color: var(--green); background: #fff; border: 1px solid var(--tan); border-radius: 4px; padding: 12px 14px; }
.signup-form input[type="email"]:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.signup-status, .signup-success, .signup-sub { max-width: 46ch; }

/* ---------- homepage hero (2026-09-14): the film, then one quote alone ---------- */
.film { background: var(--green); }
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.quote-alone { padding-top: calc(var(--s-section) * 2); padding-bottom: calc(var(--s-section) * 2); }
.quote-alone blockquote { margin: 0 auto; max-width: 22ch; text-align: center; }
.quote-alone blockquote p { margin: 0; }
.quote-alone blockquote p::before { content: "\201C"; }
.quote-alone blockquote p::after { content: "\201D"; }