/* home.css — Crown marketing home (CRO-34).

   A productionized port of the "infinite variation canvas" redesign Savannah's design tool
   proposed (the second, chosen direction: the product-demo panel is gone and the hero is a
   canvas where one "kept" take is surfaced from a scattered field of variations). It is the
   dedicated stylesheet for landing/index.html; the legal pages keep their own shared
   landing/styles.css, so this file is free to carry the new visual system (Newsreader /
   IBM Plex Mono, deep-green + antique-gold on a glassy paper ground with a faint plotting grid).

   GLASS WITHOUT FLICKER (CRO-21, do not regress): every frosted surface here is a dense
   translucent tint ONLY. We never use backdrop-filter and never background-attachment:fixed
   (both caused the landing to flash, see tests/unit/landing-glass-perf.test.ts and the app's
   long-settled recipe). The soft mesh + grid that make those tints read as glass are painted
   once on a single fixed ambient ground (.ambient), pointer-inert and unanimated, so no panel
   has to re-sample or repaint as the page scrolls. */

:root {
  /* brand palette */
  --green: #1f3d2f;
  --green-deep: #162c22;
  --gold: #b08a3e;
  --gold-soft: #c79a45;
  --paper: #edeef6;
  --paper-warm: #f4f1e8;

  /* ink ramp */
  --ink: #1f2430;
  --ink-soft: #5b6070;
  --on-dark: #f3f1e9;

  /* glass tints (opaque-over-mesh, never backdrop-filter) */
  --glass: rgba(255, 255, 255, .60);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-line: rgba(255, 255, 255, .7);
  --hairline: rgba(31, 36, 48, .12);
  --hairline-2: rgba(31, 36, 48, .18);

  /* type — the redesign is serif + mono only (no sans) */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --wrap: 1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ░░ AMBIENT GROUND ░░ — the single soft mesh + plotting grid the whole page floats over.
   Fixed + unanimated so the frosted tints above never trigger a per-frame repaint. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% 4%, #f5f1e7 0%, transparent 55%),
    radial-gradient(1000px 700px at 8% 30%, #e9ecf6 0%, transparent 55%),
    linear-gradient(160deg, #edeef6 0%, #f1eee6 100%);
}
/* faint registration grid (the "box" pattern). The ground is position:fixed, so this single
   grid sits behind the WHOLE page and stays put as you scroll: it must read consistently from
   the hero all the way to the footer, not just at the top (CRO-34 review). The old mask was a
   tight radial at 50% 30% that faded the grid out below the hero; this full-coverage radial keeps
   it solid across the whole viewport (only the extreme corners ease off), and it applies on
   mobile too since nothing disables .ambient there. */
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(150% 150% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(150% 150% at 50% 50%, #000 72%, transparent 100%);
}

.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
a { color: inherit; text-decoration: none; }

/* small structural helpers (kept out of inline style attributes) */
.svg-defs { position: absolute; width: 0; height: 0; }
.hero .wrap, .final-takes { position: relative; }

/* crown glyph (themeable, used inline at small sizes) */
.crown { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: var(--gold); }
.crown svg { width: 100%; height: 100%; display: block; }

/* brand mark image (the real asset, used for the nav + footer logo) */
.mark { display: block; width: 30px; height: 30px; border-radius: 9px; object-fit: cover;
  box-shadow: 0 1px 3px rgba(60, 50, 35, .28); }

/* registration / crop marks framing the canvas */
.mark-reg { position: absolute; width: 20px; height: 20px; pointer-events: none; opacity: .5; z-index: 4; }
.mark-reg::before, .mark-reg::after { content: ""; position: absolute; background: var(--hairline-2); }
.mark-reg::before { left: 9px; top: 0; width: 1px; height: 20px; }
.mark-reg::after { top: 9px; left: 0; height: 1px; width: 20px; }
.mr-tl { top: 18px; left: 22px; }
.mr-tr { top: 18px; right: 22px; }

/* ░░ BUTTONS ░░ */
.btn {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, background .25s, color .25s;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn-primary { background: var(--green); color: var(--on-dark); box-shadow: 0 10px 26px -12px rgba(31, 61, 47, .7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(31, 61, 47, .8); background: var(--green-deep); }
.btn-ghost { background: transparent; color: var(--ink); padding: 12px 6px; }
.btn-ghost:hover { color: var(--gold); }
.btn-ghost .arr { transition: transform .25s; }
.btn-ghost:hover .arr { transform: translateX(5px); }
/* down-scroll variant ("See how it works"): the arrow nudges DOWN, matching the smooth-scroll. */
.btn-ghost.down:hover .arr { transform: translateY(4px); }

/* ░░ NAV ░░ — full-width sticky bar (translucent tint, never backdrop-filter) */
nav.site { position: sticky; top: 0; z-index: 60; }
.navbar { background: var(--glass-strong); border-bottom: 1px solid var(--hairline); }
.navin { max-width: var(--wrap); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right a.sign { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); }
.nav-right a.sign:hover { color: var(--ink); }

/* ░░ CANVAS HERO ░░ */
.hero.canvas { position: relative; padding: 70px 0 40px; }
.hero .wrap { min-height: 760px; }

.field-tag { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.field-tag .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--hairline); padding: 7px 14px; border-radius: 30px;
}
.field-tag .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.field-tag .rule { flex: 1; height: 1px; background: var(--hairline-2); }
.field-tag .count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); }

/* the hero "winning take" card */
.winner {
  position: relative; z-index: 5; max-width: 780px; margin: 0 0 0 6%;
  background: linear-gradient(170deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));
  border: 1px solid rgba(176, 138, 62, .4); border-radius: 24px;
  padding: 46px 50px 42px;
  box-shadow: 0 50px 110px -50px rgba(40, 50, 70, .55), 0 0 0 6px rgba(176, 138, 62, .06);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}
.js .winner { opacity: 0; transform: translateY(30px) scale(.98); }
.winner.in { opacity: 1; transform: none; }
.winner .crowntag {
  position: absolute; top: -15px; left: 40px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--on-dark); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  padding: 7px 14px; border-radius: 30px; box-shadow: 0 10px 24px -10px rgba(31, 61, 47, .6);
}
.winner .crowntag .crown { color: var(--gold-soft); }
h1.hero-h { font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.02em; margin: 10px 0 0; color: var(--ink); }
.winner .hero-sub { font-size: 18px; color: var(--ink-soft); line-height: 1.6; max-width: 54ch; margin-top: 24px; }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* connector wires from the kept take out to the field */
.wires { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.wires line { stroke: rgba(176, 138, 62, .35); stroke-width: 1; stroke-dasharray: 4 5; }
.wires circle { fill: var(--gold); }

/* ░░ FLOATING TAKE CARDS ░░ — scattered "ghost" variations (hero + closing) */
.takecard {
  position: absolute; width: 220px; z-index: 3;
  background: linear-gradient(160deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .34));
  border: 1px solid var(--glass-line); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 28px 60px -34px rgba(40, 50, 70, .5);
  font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
  text-align: left;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}
.takecard .lbl { display: block; margin-top: 11px; font-family: var(--font-mono); font-style: normal;
  font-size: 9px; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
/* Progressive enhancement: hide-then-reveal only when JS is on (html.js). With JS off/blocked
   the content is visible by default, never trapped behind a script that may not run. */
.js .takecard { opacity: 0; }
.takecard.in { opacity: 1; animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* hero scatter (rotation lives in the resting transform; .in keeps it) */
.g1 { top: 90px; right: 3%; transform: rotate(3deg) translateY(20px); } .g1.in { transform: rotate(3deg); animation-delay: 0s; }
.g2 { top: 340px; right: 14%; transform: rotate(-4deg) translateY(20px); } .g2.in { transform: rotate(-4deg); animation-delay: 1.6s; }
.g3 { top: 560px; right: 6%; transform: rotate(2deg) translateY(20px); } .g3.in { transform: rotate(2deg); animation-delay: .9s; }
.g4 { top: 520px; left: 2%; transform: rotate(-3deg) translateY(20px); } .g4.in { transform: rotate(-3deg); animation-delay: 2.2s; }
.g5 { top: 660px; left: 24%; transform: rotate(4deg) translateY(20px); } .g5.in { transform: rotate(4deg); animation-delay: 1.2s; }

/* ░░ THESIS ░░ — editorial pull-quote (meta column removed per review) */
.thesis { position: relative; max-width: var(--wrap); margin: 40px auto 0; padding: 90px 40px; }
.thesis .inner { max-width: 760px; margin-left: auto; }
.thesis h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.01em; border-left: 3px solid var(--gold); padding-left: 30px; }
.thesis .body { font-size: 20px; color: var(--ink-soft); line-height: 1.65; margin-top: 28px; padding-left: 33px; max-width: 48ch; }
.thesis .body em { font-style: italic; color: var(--gold); }

/* ░░ ENGINE ░░ — specimen-plate grid (eyebrow removed per review) */
/* full-width section; the inner .wrap supplies the single horizontal padding + centering */
.engine { position: relative; padding: 40px 0 80px; }
.engine h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; max-width: 18ch; margin-bottom: 50px; }
.plate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; }
.cell {
  background: linear-gradient(165deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5));
  padding: 36px; position: relative;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.js .cell { opacity: 0; transform: translateY(26px); }
.cell.in { opacity: 1; transform: none; }
.cell .idx { position: absolute; top: 22px; right: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); opacity: .6; }
.cell h3 { font-family: var(--font-serif); font-weight: 600; font-size: 23px; margin-bottom: 11px; line-height: 1.15; padding-right: 40px; }
.cell p { font-family: var(--font-serif); color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.c1 { grid-column: span 5; } .c2 { grid-column: span 7; }
.c3 { grid-column: span 7; } .c4 { grid-column: span 5; }
.c5 { grid-column: span 12; }

.badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  background: var(--glass); border: 1px solid rgba(176, 138, 62, .4); border-radius: 30px; padding: 8px 14px; color: var(--green); }
.badge .crown { color: var(--gold); }

/* mini stacked take cards in cell 1 */
.stack { position: relative; height: 120px; margin-top: 24px; }
.stack i { position: absolute; left: 0; top: 14px; width: 200px; height: 84px; border-radius: 11px; background: #fff;
  border: 1px solid var(--hairline); box-shadow: 0 12px 28px -18px rgba(40, 50, 70, .4); }
.stack i:nth-child(1) { transform: rotate(-6deg) translateY(6px); }
.stack i:nth-child(2) { transform: rotate(4deg) translateY(3px); }
.stack i:nth-child(3) { border: 1.5px solid var(--gold); box-shadow: 0 16px 36px -16px rgba(176, 138, 62, .55); }
.stack .kept { position: absolute; left: 16px; top: 26px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--gold); font-weight: 600; }
.stack .lines { position: absolute; left: 16px; top: 50px; z-index: 2; }
.stack .lines b { display: block; height: 6px; border-radius: 4px; background: var(--hairline); margin-bottom: 7px; }
.stack .lines b:nth-child(1) { width: 150px; }
.stack .lines b:nth-child(2) { width: 108px; }

/* subagent buttons row */
.subrow { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.subrow b { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.subrow .plus { background: var(--green); color: var(--on-dark); }
.subrow .fork { color: var(--ink-soft); }
.subrow .gold { background: #fcf6e8; border: 1px solid rgba(176, 138, 62, .45); color: var(--gold); }
.subrow .chk { background: #fff; border: 1px solid var(--hairline); color: var(--green); }

/* code preview block in cell 4 */
.codebox { margin-top: 22px; background: var(--ink); border-radius: 11px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.codebox b { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .18); display: block; }
.codebox b:nth-child(1) { width: 72%; }
.codebox b.g { width: 18%; background: var(--gold); }
.codebox b:nth-child(3) { width: 55%; }

/* medium row — real generated stills from the current landing assets, not placeholders */
.media { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 24px; }
.media .tile { border-radius: 13px; height: 130px; border: 1px solid var(--hairline); overflow: hidden; position: relative; }
.media .txt { background: #fff; padding: 18px; display: flex; flex-direction: column; }
.media .txt small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--gold); }
.media .txt span { font-family: var(--font-serif); font-size: 17px; margin-top: 8px; color: var(--ink); }
.media .shot { display: block; width: 100%; height: 100%; object-fit: cover; }
.media .medialbl { position: absolute; left: 10px; bottom: 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  color: #fff; background: rgba(20, 28, 22, .55); border-radius: 20px; padding: 3px 9px; }
.media .vid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: rgba(0, 0, 0, .14); }

/* ░░ FINAL CTA ░░ */
.final { position: relative; padding: 100px 0 90px; text-align: center; }
.final .inner { position: relative; z-index: 2; }
.final .badge { margin: 0 auto 30px; }
.final h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(48px, 8vw, 108px); line-height: .96; letter-spacing: -.02em; max-width: 11ch; margin: 0 auto 36px; }
.final h2 em { font-style: italic; color: var(--gold); }
.final-takes .takecard { width: 190px; }
.ft1 { top: 30px; left: 3%; transform: rotate(-4deg) translateY(20px); } .ft1.in { transform: rotate(-4deg); animation-delay: .2s; }
.ft2 { top: 0; right: 3%; transform: rotate(3deg) translateY(20px); } .ft2.in { transform: rotate(3deg); animation-delay: 1.5s; }
.ft3 { top: 250px; left: 0; transform: rotate(2deg) translateY(20px); } .ft3.in { transform: rotate(2deg); animation-delay: .9s; }
.ft4 { top: 250px; right: 0; transform: rotate(-3deg) translateY(20px); } .ft4.in { transform: rotate(-3deg); animation-delay: 2.2s; }

/* ░░ FOOTER ░░ */
footer { border-top: 1px solid var(--hairline); max-width: var(--wrap); margin: 0 auto; padding: 30px 0; }
.foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.foot .logo { font-size: 18px; }
.foot .links { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); align-items: center; flex-wrap: wrap; }
.foot .links a:hover { color: var(--gold); }

/* ░░ RESPONSIVE ░░ */
@media (max-width: 840px) {
  /* the scattered field + wires are pure decoration; drop them so the kept take stands alone */
  .takecard, .wires { display: none; }
  .hero.canvas { padding: 50px 0 20px; }
  .hero .wrap { min-height: auto; }
  .winner { margin-left: 0; padding: 38px 28px; }
  .winner .crowntag { left: 24px; }
  .mr-tl, .mr-tr { display: none; }
  .plate { grid-template-columns: 1fr; }
  .c1, .c2, .c3, .c4, .c5 { grid-column: span 1; }
  .thesis { padding: 70px 22px; }
  .thesis .inner { margin-left: 0; }
  .engine { padding: 30px 0 60px; }
  .final { padding: 80px 0 70px; }
  .wrap { padding: 0 22px; }
  .navin { padding: 14px 22px; }
}

@media (max-width: 560px) {
  nav.site { top: 0; }
  .navin { padding: 12px 18px; }
  .nav-right { gap: 14px; }
  .btn { padding: 11px 18px; font-size: 12px; }
  h1.hero-h { font-size: clamp(34px, 11vw, 50px); }
  .winner { padding: 32px 22px; border-radius: 18px; }
  .winner .hero-sub { font-size: 16px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn-primary { width: 100%; justify-content: center; }
  .field-tag .count { display: none; }
  .thesis h2 { padding-left: 18px; }
  .thesis .body { padding-left: 21px; font-size: 18px; }
  .cell { padding: 28px 24px; }
  .media { grid-template-columns: 1fr 1fr; }
  .media .txt { grid-column: span 2; }
  .foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Respect reduced-motion: drop the drift/reveal and show everything immediately. */
@media (prefers-reduced-motion: reduce) {
  .takecard, .winner, .cell { transition: none !important; animation: none !important; opacity: 1 !important; }
  .winner, .cell { transform: none !important; }
  html { scroll-behavior: auto; }
}