/* STRUCTURES — v2, THE DECK.
   Palette comes from ../shared/tokens.css, verbatim, and nothing else is used.
   The page ground is the plate ground, so every plate floats with no edge:
   no borders, no shadows, no panels behind a plate. Ever. */

:root {
  --pad:    clamp(22px, 4.4vw, 76px);
  --padr:   var(--pad);            /* right inset, widened when the rail shows */
  --t-hero: clamp(46px, 8.3vw, 116px);
  --t-h2:   clamp(28px, 4.1vw, 60px);
  --t-h3:   clamp(17px, 1.5vw, 21px);
  --t-body: clamp(15px, 1.1vw, 17px);
  --t-say:  clamp(19px, 1.7vw, 25px);   /* slide body copy, larger than --t-body */
  --micro:  11px;
  --track:  .18em;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y mandatory;   /* the deck works with JS off */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 40;
  transform: translateY(-200%);
  background: var(--ground); color: var(--accent);
  padding: 9px 14px; text-decoration: none;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------ type basics */

h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.018em; }
h1 { font-size: var(--t-hero); line-height: .88; letter-spacing: -0.042em; }
h1 .thin { color: var(--ink-soft); }
h2 { font-size: var(--t-h2); line-height: 1.04; max-width: 18ch; }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0 0 1.05em; max-width: 54ch; }
p:last-child { margin-bottom: 0; }

.lede   { font-size: clamp(18px, 1.75vw, 25px); line-height: 1.42; max-width: 40ch; }
.muted  { color: var(--ink-mid); }
em.accent { font-style: normal; color: var(--accent); }

.micro, .cap {
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft);
}
.micro {
  margin: 0 0 clamp(16px, 2.6vh, 34px);
  display: flex; gap: 13px; align-items: baseline;
  max-width: none;                  /* it is a <p>, so it inherited the 54ch
                                       body measure and wrapped once a kicker
                                       ran long */
}
.micro .n { color: var(--accent); font-variant-numeric: tabular-nums; }
/* a run held out of the kicker's uppercase, for things like "vs." */
.micro .lc { text-transform: none; }
.cap { line-height: 1.7; max-width: 40ch; margin-top: clamp(16px, 2.4vh, 30px); }

/* the caption as a market list: bulleted, ticker left, figure right, on a
   tabular grid so the numbers line up down the column */
.caplist {
  list-style: none;
  padding: 0;
  max-width: 26em;
  font-size: 13px;                  /* a step up from the 11px micro caption */
  letter-spacing: .13em;
}
.caplist li {
  display: grid;
  grid-template-columns: 12px 5.5em auto;
  gap: 0 8px;
  align-items: baseline;
}
.caplist li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  transform: translateY(-3px);
}
.caplist .k { color: var(--ink); }
.caplist .v { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- chrome */

.chrome { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

.mark {
  position: absolute; top: var(--pad); left: var(--pad);
  font-size: var(--micro); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
}
.mark .dot { color: var(--accent); }

.counter {
  position: absolute; bottom: var(--pad); right: var(--pad);
  font-size: var(--micro); letter-spacing: var(--track);
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.counter b { font-weight: 400; color: var(--accent); }

.rail {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; pointer-events: auto;
}
.rail a { display: block; padding: 3px 0; }
.rail i { display: block; width: 16px; height: 1px; background: var(--rule); transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .rail i { transition: background .2s, width .2s; }
}
.rail a:hover i { background: var(--ink-mid); }
.rail a[aria-current="true"] i { background: var(--accent); width: 26px; }

@media (min-width: 761px) { :root { --padr: calc(var(--pad) + 34px); } }
@media (max-width: 760px) { .rail { display: none; } }

/* ---------------------------------------------------------------- slides */

.slide {
  position: relative;
  height: 100svh;
  min-height: 520px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.pad { padding: 0 var(--padr) 0 var(--pad); }
/* .pad is a flex item on the type-led slides, so it must be told to fill */
.slide > .pad { width: 100%; }

/* plates never get a frame; the grounds match */
figure.plate { margin: 0; }
figure.plate img { width: auto; max-width: 100%; }

figcaption {
  margin-top: 12px;
  font-size: var(--micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 4px;
}
figcaption .k { color: var(--ink); }
figcaption .n { font-variant-numeric: tabular-nums; }

/* 01 — title: type high left, the plate laid along the bottom edge */
.s-title { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.s-title .top { padding-top: clamp(72px, 12.5svh, 158px); }
.s-title .meta {
  list-style: none; margin: clamp(24px, 4svh, 48px) 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  /* the rule spans the column, so it must escape the base p max-width */
  max-width: none;
}
.s-title .meta b { font-weight: 400; color: var(--ink); }
.title-plate {
  min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(38px, 6svh, 64px);
}
.title-plate img { width: 100%; max-height: 100%; }

/* 02 — thesis: type only, no plate */
.s-type { display: flex; align-items: center; }
/* wide enough to hold the authored line break rather than orphaning a word */
.s-type h2 { max-width: 12em; }   /* wide enough to honour the authored <br> */
.two {
  margin-top: clamp(26px, 4.6svh, 56px);
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(22px, 4vw, 66px);
  max-width: 1080px;
}
.two p { max-width: none; }

/* a square animated mark holding the whole right column of a type slide.
   The text stacks on the left; the mark spans the full height beside it rather
   than being pushed under the lede. Its ground is the page ground, so like
   every plate it sits with no edge.
   NB: the class is .loopmark, not .mark, because .mark is already the fixed
   brand mark in the chrome overlay and would absolutely position this. */
.s-mark .markgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto;
  gap: clamp(26px, 5vw, 84px);
  align-items: center;
  width: 100%;
}
.s-mark .say { min-width: 0; }
/* the question is set as body, matching the split slides, not as a lede */
.s-mark .say .muted {
  margin-top: clamp(22px, 4svh, 44px);
  font-size: var(--t-say);
  line-height: 1.5;
  color: var(--ink-soft);           /* same ink as h1 .thin on the title slide */
}
.s-mark .loopmark { margin: 0; }
.s-mark .loopmark img {
  height: clamp(230px, 62svh, 560px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
}
@media (max-width: 900px) {
  .s-mark .markgrid { grid-template-columns: 1fr; gap: clamp(20px, 4svh, 40px); }
  .s-mark .loopmark { justify-self: start; }
  .s-mark .loopmark img { height: clamp(200px, 34svh, 320px); }
}

/* 03 / 05 — split: plate one side, type the other */
.s-split {
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  align-items: center;
  gap: clamp(26px, 4.2vw, 72px);
  padding: 0 var(--padr) 0 var(--pad);
}
.s-split .plate { justify-self: center; }
.s-split .plate img { max-height: 78svh; }
.s-split .side { max-width: 44em; }   /* wide; the body measure is set below */
.s-split .side .muted {
  font-size: var(--t-say); line-height: 1.5;
  color: var(--ink-soft);           /* same ink as h1 .thin on the title slide */
  max-width: 26em;                  /* em of --t-say, so the measure reads right */
}
.s-split.rev { grid-template-columns: 1.24fr .76fr; }
.s-split.rev .plate { order: 2; }
.s-split.rev .side  { order: 1; }
/* the split slides now carry three line headlines, and 1.04 leading that
   suited a one liner had them stacked almost touching. Loosen the leading,
   widen the measure so the break falls in a better place, and give the body
   more air beneath. */
.s-split h2 {
  line-height: 1.16;
  max-width: none;                  /* the break is authored; let the column govern */
  margin-bottom: clamp(22px, 3.4svh, 40px);
}

/* 04 — the banner run edge to edge, the line set above it */
.s-bleed { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
/* the plate sits at the TOP of its row, so the gap under the headline closes
   and the space it used to waste falls to the sign off instead */
.s-bleed .plate { min-height: 0; display: flex; align-items: flex-start; }
.s-bleed .plate img { width: 100vw; max-width: none; max-height: 100%; }
.s-bleed .overlay {
  padding: clamp(56px, 9svh, 112px) var(--padr) clamp(4px, 0.8svh, 14px) var(--pad);
}
.s-bleed .overlay h2 {
  font-size: clamp(26px, 3.5vw, 50px);
  max-width: 17em;                  /* em of its own size, wide enough to hold
                                       the authored <br> instead of forcing its
                                       own break; 21ch was measuring far short */
  line-height: 1.12;
}
/* the answer to the question in the headline, set low and right */
.s-bleed .signoff {
  margin: 0;
  max-width: none;
  padding: clamp(2px, 0.7svh, 11px) var(--padr) 0 var(--pad);
  text-align: right;
  font-size: clamp(26px, 3.5vw, 50px);   /* the overlay headline's own size */
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* .thin is scoped to h1 in the type basics, so the sign off needs its own */
.s-bleed .signoff .thin { color: var(--ink-soft); }

/* 06 — a row of three squares */
.s-row { display: flex; flex-direction: column; justify-content: center;
         gap: clamp(24px, 5svh, 64px); }
.s-row .row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 52px);
  padding: 0 var(--padr) 0 var(--pad);
  align-items: start;
}
.s-row .row img { width: 100%; max-height: 48svh; object-fit: contain; }
.s-row figcaption { flex-direction: row; justify-content: space-between; gap: 12px; }

/* 07 — palette */
.s-palette { display: flex; align-items: center; }
.pal-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 66px);
  align-items: end;
}
.pal-head h2 { max-width: 12ch; }
.swatches {
  list-style: none; margin: clamp(26px, 4.4svh, 54px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.swatches i { display: block; height: clamp(52px, 12svh, 104px); }
.sw-ground { background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); }
.sw-c1     { background: var(--clay-1); }
.sw-c2     { background: var(--clay-2); }
.sw-c3     { background: var(--clay-3); }
.sw-shadow { background: var(--shadow); }
.swatches span, .accent-bar span {
  display: block; margin-top: 8px;
  font-size: var(--micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.swatches b, .accent-bar b {
  display: block; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums;
}
.accent-bar { margin-top: 2px; }
.accent-bar i { display: block; height: clamp(30px, 6svh, 54px); background: var(--accent); }
.note {
  margin-top: clamp(18px, 3svh, 34px);
  font-size: 14px; line-height: 1.55; color: var(--ink-mid); max-width: 60ch;
}

/* 08 — the three aspect ratios, at true relative proportion, on one baseline */
.s-formats { display: flex; flex-direction: column; justify-content: center;
             gap: clamp(24px, 5svh, 66px); }
.fmt {
  display: grid; grid-template-columns: auto auto auto;
  justify-content: start;
  gap: clamp(18px, 3.4vw, 58px);
  padding: 0 var(--padr) 0 var(--pad);
  align-items: end;
}
.fmt .plate img { height: auto; max-width: none; }
.fmt .f-seed    img { width: clamp(128px, 17.5vw, 268px); }   /* 1000 x 1400 */
.fmt .f-banner  img { width: clamp(268px, 37vw, 566px); }     /* 1500 x  500 */
.fmt .f-profile img { width: clamp(148px, 20vw, 306px); }     /*  800 x  800 */
.fmt figcaption .q { color: var(--ink-mid); text-transform: none; letter-spacing: 0;
                     font-size: 13px; line-height: 1.45; max-width: 26ch; }

/* 09 — method */
.s-method { display: flex; align-items: center; }
.steps {
  list-style: none; margin: clamp(24px, 4svh, 52px) 0 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4.5vw, 72px);
  max-width: 1080px;
}
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 42px 1fr;
  padding: clamp(11px, 1.7svh, 18px) 0;
  border-top: 1px solid var(--rule);
}
.steps li > * { grid-column: 2; }   /* keep h3 and p out of the numeral column */
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-size: var(--micro); letter-spacing: .14em; color: var(--accent);
  font-variant-numeric: tabular-nums; padding-top: 5px;
}
.steps h3 { margin-bottom: 3px; }
.steps p { color: var(--ink-mid); font-size: 14px; line-height: 1.5; max-width: 40ch; }

/* 10 — close */
.s-close {
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: center; gap: clamp(26px, 4.5vw, 78px);
  padding: 0 var(--padr) 0 var(--pad);
}
.s-close .plate { justify-self: end; }
.s-close .plate img { max-height: 72svh; }
.s-close h2 { max-width: 15ch; margin-bottom: clamp(16px, 2.6svh, 30px); }
.btn {
  display: inline-block; margin-top: clamp(18px, 3svh, 32px);
  padding: 13px 26px;
  border: 1px solid var(--accent); color: var(--accent); text-decoration: none;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
}
.btn:hover { background: var(--accent); color: var(--ground); }

/* -------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .two, .pal-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps p { font-size: 13px; }

  .s-split, .s-close {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: clamp(20px, 3.4svh, 40px);
  }
  .s-split .plate img, .s-close .plate img { max-height: 46svh; }
  .s-split.rev .plate { order: 1; }
  .s-split.rev .side  { order: 2; }
  .s-close .plate { justify-self: center; order: 1; }
  .s-close .side  { order: 2; }
  .s-split .side, .s-close .side { max-width: 52ch; }

  .fmt { grid-template-columns: 1fr; justify-content: stretch; gap: clamp(16px, 3svh, 34px); }
  .fmt .f-seed    img { width: 21vw; }
  .fmt .f-banner  img { width: 50vw; }
  .fmt .f-profile img { width: 25vw; }
  .fmt figcaption { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }

  .s-row .row img { max-height: 30svh; }
  .title-plate { align-items: center; padding-bottom: 0; }
  .s-row figcaption { flex-direction: column; }
  .s-bleed .overlay { top: auto; bottom: 64%; }
  .s-bleed .corner { bottom: clamp(40px, 8svh, 90px); }
  .title-plate img { width: 132%; margin-left: -16%; }
}

@media (max-width: 560px) {
  .s-row .row { grid-template-columns: 1fr; gap: 18px; }
  .s-row .row .plate:nth-child(n+3) { display: none; }
  .swatches { grid-template-columns: repeat(2, 1fr) ; }
}

/* short windows: give the type room back */
@media (max-height: 620px) {
  .s-title .top { padding-top: clamp(56px, 10svh, 90px); }
  .steps li { padding: 8px 0; }
  .steps p { font-size: 12.5px; }
}

/* print, because a deck gets printed */
@media print {
  html { scroll-snap-type: none; }
  .chrome, .skip { display: none; }
  .slide { height: auto; page-break-after: always; padding: 24px 0; }
}