/* CASE · S&D FINLAND, "Election night" (case page styles for
   work/s-and-d-finland/)
   ------------------------------------------------------------------
   The case told from the result backwards, typeset as the front page of
   the morning after: a broadsheet in the print language of the new
   homepage and the About page (Bricolage 800 at 76-80% width, mono
   labels with a 12px cobalt square and a hairline to the edge, 0-4px
   corners, paper / ink / cobalt fields that meet on straight edges).
   A print object, not a news site: no paper name, no date, no price,
   no issue number.

     front    paper   masthead (ears, nameplate, folio between rules),
                      the result as the headline with 19,157 set to the
                      measure, the hero film as the lead photo with its
                      deck; beside it the second story, the 13 candidate
                      films, its 13 set as large as the count (both roll
                      in on an odometer on first view); "Inside"
     story    paper   the campaign in ruled newspaper columns: drop cap,
                      lead-in, subheads, end mark; her words as the
                      cobalt pull quote
     made     paper   "How the campaign was made": the three kinds of
                      work as a three-column feature spread (a frame from
                      a candidate film, a still, a loop)
     pictures ink     the photo page: lead, two beside, a panorama
     cands    paper   the candidates page: one equal box per candidate
                      film (frame, name, where), a lead and four to a
                      row, so 13 would fill it exactly; "5 of 13" says
                      how many are shown
     run      paper   2020 → 2025 as a results table (no invented figures)
     book     cobalt  the ask, the offer printed as a clip-out coupon
     outro    ink     back / related offer, the next case, the foot

   Progressive enhancement: the default CSS is the finished page (the
   counts already read 19,157 and 13). Entrance states live only under
   html.sd3--armed, added pre-paint when motion is allowed and dropped if
   the JS never runs. Reduced motion never animates. No #bgBlob, no
   .reveal, no timecode, no scene slates, no glows. Each class is
   prefixed sd3; the page wears body.sd3.
   ------------------------------------------------------------------ */

body.sd3 {
  --p: var(--paper, #f0ece3);
  --i: var(--ink, #14110c);
  --c: var(--cobalt, #2b34ff);
  --cl: var(--cobalt-light, #7a83ff);
  --soft: var(--ink-soft, #3a342b);
  --mut: var(--muted, #6a6358);             /* 5.3:1 on paper */
  --mut-d: #a39d91;                          /* 7.4:1 on ink */
  --on-ink: rgba(240, 236, 227, 0.78);
  --stock: #fbf8f2;                          /* coupon / print card stock */
  --rule: rgba(20, 17, 12, 0.18);
  --rule-d: rgba(240, 236, 227, 0.18);
  --rule-c: rgba(240, 236, 227, 0.45);
  --e: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --snap: cubic-bezier(0.3, 1.45, 0.45, 1);
  --draw: cubic-bezier(0.65, 0, 0.2, 1);
  --lift:
    drop-shadow(0 1px 1px rgba(20, 17, 12, 0.2))
    drop-shadow(0 18px 26px rgba(8, 10, 70, 0.3));
  --notch:
    radial-gradient(circle at 0 50%, #0000 6px, #000 6.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 6px, #000 6.5px) 100% 0 / 51% 100% no-repeat;
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --navh: 60px;                             /* the solid nav bar (68px once .pill gets 44px targets) */
  --gap: clamp(18px, 2.4vw, 36px);
  background: var(--p);
  color: var(--i);
}

/* ---------- page-level overrides (this page only) ---------- */
body.sd3 .timecode,
body.sd3 .scene-slate,
body.sd3 .wipe-stamp,                       /* no "CUT AT" timecode over the wipe */
body.sd3 .bg-blob { display: none !important; }
/* the homepage card morphs into the lead photo (and back): the case hero
   carries the view-transition name statically, as .project-media does */
body.sd3 #caseHero { view-transition-name: case-hero; }
/* arriving here, the morph keeps print corners (styles.css rounds it 18px) */
::view-transition-old(case-hero),
::view-transition-new(case-hero) { border-radius: 2px; }
body.sd3 ::selection { background: var(--c); color: var(--p); }
body.sd3 :focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 0; }
body.sd3 .sd3-pics :focus-visible,
body.sd3 .sd3-outro :focus-visible { outline-color: var(--cl); }
body.sd3 .sd3-cta :focus-visible { outline-color: var(--p); }
/* the coupon is card stock: a paper ring would vanish on it */
body.sd3 .sd3-cta .sd3-coupon :focus-visible { outline-color: var(--c); }

.sd3-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- NAV: one solid sheet of paper, a hairline under it ---------- */
body.sd3 #nav,
body.sd3 #nav.is-scrolled {
  background: var(--p);
  color: var(--i);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 1px 0 var(--rule);
  padding-top: 12px;
  padding-bottom: 12px;
}
body.sd3 #nav .nav__name { color: inherit; }
body.sd3 #nav .nav__name sup { color: var(--c); }
body.sd3 #nav .nav__lang {
  padding: 3px 6px 2px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: inherit;
  opacity: 0.72;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}
body.sd3 #nav .nav__lang:hover,
body.sd3 #nav .nav__lang:focus-visible { opacity: 1; color: var(--c); border-color: currentColor; }
body.sd3 #nav .nav__menu {
  gap: clamp(16px, 2.2vw, 30px);
  padding: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body.sd3 #nav .nav__menu .pill--ghost {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}
body.sd3 #nav .nav__menu .pill--ghost::before {
  inset: auto 0 4px 0;
  height: 1px;
  border-radius: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--e);
}
body.sd3 #nav .nav__menu .pill--ghost:hover::before,
body.sd3 #nav .nav__menu .pill--ghost:focus-visible::before { transform: scaleX(1); }
/* GET IN TOUCH: a die-cut cobalt ticket (fill on ::before so focus rings are never masked) */
body.sd3 #nav .nav__contact {
  position: relative;
  isolation: isolate;
  padding: 0.9em 1.25em;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  color: var(--p);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
body.sd3 #nav .nav__contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  background: var(--c);
  -webkit-mask: var(--notch);
          mask: var(--notch);
  transition: background-color 0.25s var(--e), transform 0.4s var(--snap);
}
body.sd3 #nav .nav__contact:hover { background: none; box-shadow: none; transform: none; color: var(--p); }
body.sd3 #nav .nav__contact:hover::before { background: var(--i); transform: scale(1.03); }
@media (max-width: 768px) {
  body.sd3 { --navh: 68px; }
}
@media (max-width: 620px) {
  body.sd3 #nav .nav__menu { gap: 12px; }
  body.sd3 #nav .nav__menu .pill--ghost { font-size: 0.6rem; letter-spacing: 0.12em; padding: 8px 0; }
  body.sd3 #nav .nav__contact { padding: 0.85em 0.95em; font-size: 0.58rem; letter-spacing: 0.1em; }
}

/* ---------- shared pieces ---------- */
.sd3-main { display: block; }
.sd3-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}
.sd3-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--c);
}
.sd3-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--i);
}
.sd3-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.sd3-h2 {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  max-width: 15em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2.75rem, 6.6vw, 6.2rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-wrap: balance;
  font-feature-settings: "kern" 1;
}
.sd3-hi { color: var(--c); }

.sd3-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(80px, 9vw, 136px) 0;
}

/* film grain on the cobalt field (the About / Gap tile) */
.sd3-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain-img);
  background-size: 160px 160px;
  opacity: 0.11;
  mix-blend-mode: hard-light;
}

/* ================================================================
   THE FRONT PAGE
   ================================================================ */
.sd3-front {
  /* fitted lines: --k1 / --k2 are the headline lines' widths in em,
     measured in the browser; the 13 beside the lead photo shares --k2,
     so it is set exactly as large as the count */
  --k1: 9.7;
  --k2: 3.85;
  position: relative;
  color: var(--i);                    /* no fill: the body grain runs on under the paper sections, no seam */
  padding: calc(var(--navh) + clamp(12px, 1.4vw, 20px)) 0 clamp(64px, 7vw, 104px);
}
/* the measure is the query container: 100cqw below is the headline's width */
.sd3-front > .sd3-wrap { container-type: inline-size; }

/* masthead: two boxed ears, the nameplate between them */
.sd3-mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 36px);
  padding-bottom: clamp(10px, 1.2vw, 16px);
}
.sd3-ear {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 9px 12px 8px;
  border: 1px solid var(--i);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.sd3-ear b { font-weight: 500; color: var(--i); }
.sd3-ear--l { justify-self: start; }
.sd3-ear--r { justify-self: end; text-align: right; }
.sd3-plate {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  padding-top: 0.06em;
}

/* the folio line between a thick-thin rule and a thin rule */
.sd3-folio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  margin: 7px 0 0;
  padding: 10px 0 9px;
  border-top: 1px solid var(--i);
  border-bottom: 1px solid var(--i);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sd3-folio::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 4px;
  background: var(--i);
  transform-origin: left center;
}
.sd3-folio__a { display: inline-flex; align-items: center; gap: 10px; }
.sd3-folio__a .sd3-mark { width: 10px; height: 10px; }
.sd3-folio__b { color: var(--soft); text-align: center; }
.sd3-folio__c { text-align: right; }

/* the kicker + the headline */
.sd3-lead { margin-top: clamp(18px, 2vw, 28px); }
.sd3-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sd3-kicker::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--rule);
}

.sd3-hed {
  /* each line fills the measure: font sizes in cqw of the headline */
  container-type: inline-size;
  overflow-x: clip;                   /* never a page scroll while fonts load */
  overflow-y: visible;
  overflow-clip-margin: 12px;
  margin: clamp(10px, 1.1vw, 16px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-feature-settings: "kern" 1;
  /* fitted lines: optical size pinned so the measured em widths hold at
     all sizes (Bricolage narrows as opsz rises) */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96;
  color: var(--i);
}
.sd3-hed__l1 {
  display: block;
  font-size: calc(100cqw / var(--k1));
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-left: -0.04em;
}
.sd3-hed__l1 > span { display: block; }
.sd3-hed__l2 {
  display: flex;
  align-items: baseline;
  gap: 0 0.2em;
  margin-top: -0.02em;
  font-size: calc(100cqw / var(--k2));
  line-height: 0.8;
  letter-spacing: -0.024em;
  white-space: nowrap;
}
.sd3-count {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: -0.045em;
  color: var(--c);
  letter-spacing: -0.012em;          /* digits never touch: no merged 1s */
  font-variant-numeric: lining-nums;
}
.sd3-hed__unit { line-height: 0.8; }

/* the odometer (built by the JS; never present without it) */
.sd3-d {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -0.3em);
}
.sd3-d__v { display: inline-block; }
[data-sd3-count].is-rolling .sd3-d__v { opacity: 0; }
.sd3-d__reel {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  will-change: transform;
}
.sd3-d__reel > span { display: block; height: 0.8em; line-height: 0.8; }

/* below the headline: the lead photo and the side column */
.sd3-above {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: clamp(18px, 2vw, 30px);
  padding-top: clamp(14px, 1.6vw, 22px);
  border-top: 2px solid var(--i);
}
.sd3-leadcol {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sd3-photo { margin: 0; }
.sd3-photo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--i);
}
.sd3-photo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Play: reduced motion or a refused autoplay leaves the poster up */
.sd3-play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 2px;
  background: var(--stock);
  color: var(--i);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--e), color 0.2s var(--e);
}
.sd3-play[hidden] { display: none; }
.sd3-play__sq {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--c);
}
.sd3-play:hover { background: var(--c); color: var(--p); }
.sd3-play:hover .sd3-play__sq { border-left-color: var(--p); }
.sd3-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  padding-top: 10px;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--soft);
}
.sd3-cap__cr,
.sd3-made__fig figcaption::after,
.sd3-byline {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sd3-cap__cr { flex: 0 0 auto; color: var(--i); }

.sd3-side {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: calc(var(--gap) / 2);
  margin-left: calc(var(--gap) / -2);
  border-left: 1px solid var(--rule);
}
.sd3-deck {
  max-width: 30em;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: clamp(1.3rem, 2.05vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  text-wrap: pretty;
  padding-bottom: 20px;
}
.sd3-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: auto 0 0;                   /* sits on the foot of the side column's Inside box */
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--soft);
}
.sd3-byline span:first-child { color: var(--i); }

/* the second story: 13 candidates, 13 films. Its 13 is set in the
   measure's units with the count's ratio: the same size as 19,157. */
.sd3-second { min-width: 0; }
.sd3-second__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sd3-second__k .sd3-mark { width: 10px; height: 10px; }
.sd3-13 {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: calc(100cqw / var(--k2));
  line-height: 0.8;
  letter-spacing: -0.012em;
  font-feature-settings: "kern" 1;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96;
  font-variant-numeric: lining-nums;
  color: var(--c);
  white-space: nowrap;
}
.sd3-13__n { display: inline-flex; }
.sd3-second__h {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--i);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  line-height: 0.92;
  letter-spacing: -0.026em;
}
.sd3-second__h span { display: block; color: var(--c); }
.sd3-second__c {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 440;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--soft);
  text-wrap: pretty;
}
/* the jump: the second story continues on the candidates page */
.sd3-jump {
  font-weight: 620;
  color: var(--c);
  white-space: nowrap;
  transition: color 0.2s var(--e);
}
.sd3-jump span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sd3-jump i { display: inline-block; font-style: normal; font-weight: 700; transition: transform 0.3s var(--e); }
.sd3-jump:hover { color: var(--i); }
.sd3-jump:hover i { transform: translateY(3px); }

/* the "Inside" box: newspaper furniture with real links */
.sd3-inside {
  margin-top: auto;
  padding-top: 28px;
}
.sd3-inside__k {
  margin: 0;
  padding: 8px 12px 7px;
  background: var(--i);
  color: var(--p);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sd3-inside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--i);
  border-top: 0;
  counter-reset: sd3in;
}
.sd3-inside__list li + li { border-top: 1px solid var(--rule); }
.sd3-inside__list a {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 10px 12px 9px;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 84%;
  font-size: 1.06rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  counter-increment: sd3in;
  transition: background-color 0.2s var(--e), color 0.2s var(--e);
}
.sd3-inside__list a::before {
  content: counter(sd3in, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  color: var(--c);
}
.sd3-inside__list i {
  font-style: normal;
  font-weight: 700;
  color: var(--c);
  transition: transform 0.3s var(--e);
}
.sd3-inside__list a:hover { background: var(--c); color: var(--p); }
.sd3-inside__list a:hover::before,
.sd3-inside__list a:hover i { color: var(--p); }
.sd3-inside__list a:hover i { transform: translateY(3px); }
/* desktop: the box sets the depth of the lead column (the byline sits on
   its foot), so with six entries it is set a little tighter */
@media (min-width: 1100px) {
  .sd3-inside { padding-top: 22px; }
  .sd3-inside__list a { padding: 8px 12px 7px; }
}

/* ================================================================
   THE STORY
   ================================================================ */
.sd3-story { padding-top: clamp(40px, 4vw, 64px); }
.sd3-story .sd3-h2 { max-width: 14em; }
.sd3-story .sd3-h2 .sd3-hi { display: block; }
.sd3-story__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  margin-top: clamp(36px, 4.4vw, 64px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 2px solid var(--i);
}
.sd3-cols {
  grid-column: 1 / span 7;
  column-count: 2;
  column-gap: var(--gap);
  column-rule: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.02rem;
  line-height: 1.52;
  color: var(--i);
  text-align: left;
}
.sd3-cols p { margin: 0 0 0.8em; text-wrap: pretty; }
.sd3-sub {
  margin: 1.3em 0 0.35em;
  break-inside: avoid;                /* its cobalt rule never stays behind at a column foot */
  break-after: avoid;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.28rem;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}
.sd3-sub::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 10px;
  background: var(--c);
}
/* the drop cap (float fallback; initial-letter where supported) */
.sd3-first::first-letter {
  float: left;
  margin: 0.05em 0.08em 0 -0.02em;
  font-weight: 800;
  font-stretch: 76%;
  font-size: 4.9em;
  line-height: 0.74;
  color: var(--c);
}
@supports (initial-letter: 4) {
  .sd3-first::first-letter {
    float: none;
    margin: 0 0.14em 0 0;
    font-size: 1em;
    line-height: 1;
    -webkit-initial-letter: 4;
            initial-letter: 4;
  }
}
.sd3-leadin {
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sd3-end {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.4em;
  background: var(--c);
  vertical-align: 0;
}

/* her words, in cobalt */
.sd3-quote {
  grid-column: 9 / span 4;
  position: relative;
  margin: 0;
  padding-top: 18px;
  border-top: 10px solid var(--c);
  color: var(--c);
}
.sd3-quote__mark {
  display: block;
  height: 0.5em;
  margin: 0.02em 0 0 -0.04em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(6rem, 9vw, 8.4rem);
  line-height: 0.82;
}
.sd3-quote__q { margin: 0; }
.sd3-quote__q p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 0.98;
  letter-spacing: -0.024em;
  text-wrap: pretty;
}
.sd3-quote__who {
  display: grid;
  gap: 6px;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding-top: 14px;
  border-top: 1px solid currentColor;
}
.sd3-quote__name {
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 86%;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--i);
}
.sd3-quote__role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ================================================================
   HOW THE CAMPAIGN WAS MADE
   ================================================================ */
.sd3-made { padding-top: clamp(24px, 3vw, 48px); }
.sd3-banner {
  --k3: 9.96;
  container-type: inline-size;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  line-height: 0.84;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  font-feature-settings: "kern" 1;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96;
}
.sd3-banner > span {
  display: block;
  font-size: calc(100cqw / var(--k3));
  white-space: nowrap;
  margin-left: -0.03em;
}
.sd3-made__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin: clamp(22px, 2.6vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 5px solid var(--i);
  border-bottom: 1px solid var(--i);
}
.sd3-made__col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px) 0 clamp(26px, 2.8vw, 40px);
}
.sd3-made__col + .sd3-made__col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap) / -2);
  width: 1px;
  background: var(--rule);
}
.sd3-made__no {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--c);
  font-variant-numeric: tabular-nums lining-nums;
}
.sd3-made__t {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  line-height: 0.88;
  letter-spacing: -0.032em;
}
.sd3-made__fig { margin: clamp(18px, 2vw, 26px) 0 0; }
.sd3-made__pic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--i);
}
.sd3-made__pic img,
.sd3-made__pic video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.sd3-made__fig figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--soft);
}
.sd3-made__c {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 440;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--i);
  text-wrap: pretty;
}

/* ================================================================
   IN PICTURES (ink)
   ================================================================ */
.sd3-pics { background: var(--i); color: var(--p); }
.sd3-pics .sd3-label { color: var(--on-ink); }
.sd3-pics .sd3-label::after { background: var(--rule-d); }
.sd3-pics .sd3-hi { color: var(--cl); }
.sd3-pics__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px) var(--gap);
  margin-top: clamp(36px, 4.4vw, 64px);
}
.sd3-pic { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.sd3-pic__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.sd3-pic__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd3-pic--lead { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.sd3-pic--lead .sd3-pic__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
/* the lead box is squarer than the still: crop from the right so the
   film's corner mark is never cut in half */
.sd3-pic--lead img { object-position: 0 50%; }
.sd3-pic--b { grid-column: 9 / span 4; grid-row: 1; }
.sd3-pic--c { grid-column: 9 / span 4; grid-row: 2; }
.sd3-pic--pano { grid-column: 1 / -1; grid-row: 3; }
.sd3-pic--pano .sd3-pic__img { aspect-ratio: 21 / 8; }
.sd3-pic--pano img { object-position: 50% 58%; }
.sd3-pic figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 10px;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--on-ink);
}
.sd3-pic figcaption b {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cl);
}
.sd3-pics__credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-d);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut-d);
}
.sd3-pics__credit span:last-child { color: var(--p); }

/* ================================================================
   THE CANDIDATES: the candidates page
   Every candidate film gets the same box. The first box is the lead
   (half the measure, two rows deep); the rest run four to a row, so
   the sheet takes up to 13 without a redesign (lead + 4 + 8).
   ================================================================ */
.sd3-cands { padding-bottom: clamp(56px, 6vw, 96px); }
.sd3-cands .sd3-h2 { max-width: 13em; }
.sd3-cands .sd3-h2 .sd3-hi { display: block; }
.sd3-cands__deck {
  max-width: 34em;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
/* the sheet's head: a heavy rule, the count and the election between rules */
.sd3-cands__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  padding: 12px 0 11px;
  border-top: 5px solid var(--i);
  border-bottom: 1px solid var(--i);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sd3-cands__bar > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.sd3-cands__bar .sd3-mark { width: 10px; height: 10px; }
.sd3-cands__bar > span:last-child { color: var(--soft); }
.sd3-cands__sheet {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(26px, 2.8vw, 40px) var(--gap);
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.sd3-cand { grid-column: span 3; min-width: 0; display: flex; }
.sd3-cand figure { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin: 0; }
.sd3-cand__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--i);
}
.sd3-cand__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.sd3-cand figcaption {
  display: grid;
  gap: 5px;
  padding-top: 12px;
}
.sd3-cand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.sd3-cand__name::before {                 /* the story's subhead mark */
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 10px;
  background: var(--c);
}
.sd3-cand__note {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--soft);
}
/* the lead: half the measure, two rows deep; the frame fills the depth,
   cropped from the right so the film's corner mark is never cut. The
   crop stops at 81.5% of the frame's width (max-height 69cqw), which
   keeps the burned-in subtitle whole (it ends at ~79%); on narrower
   desktops the lead's caption then sits a few px above its neighbours'
   instead of the subtitle being cut mid-word. */
.sd3-cand:first-child { grid-column: span 6; grid-row: span 2; }
.sd3-cand:first-child figure { container-type: inline-size; }
.sd3-cand:first-child .sd3-cand__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; max-height: 69cqw; }
.sd3-cand:first-child img { object-position: 0 50%; }
.sd3-cand:first-child .sd3-cand__name { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 0.92; letter-spacing: -0.024em; }
.sd3-cand:first-child .sd3-cand__note { font-size: 0.95rem; }
.sd3-cands__credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin: clamp(30px, 3.2vw, 46px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--i);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut);
}
.sd3-cands__credit span:last-child { color: var(--i); }

/* ================================================================
   THE RUN: the results table
   ================================================================ */
.sd3-table {
  width: 100%;
  margin-top: clamp(36px, 4.4vw, 64px);
  border-collapse: collapse;
  border-top: 5px solid var(--i);
  font-family: var(--font-display);
  color: var(--i);
}
.sd3-table thead th {
  padding: 12px 0 10px;
  border-bottom: 2px solid var(--i);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
}
.sd3-table th,
.sd3-table td { vertical-align: top; }
.sd3-table__y { width: 22%; }
.sd3-table__e { width: 30%; padding-right: var(--gap); }
.sd3-table tbody th,
.sd3-table tbody td {
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
}
.sd3-table tbody td.sd3-table__e,
.sd3-table tbody td.sd3-table__span { padding-right: var(--gap); }
.sd3-table tbody th {
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(3.4rem, 7.4vw, 7rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-align: left;
  font-variant-numeric: lining-nums;
}
.sd3-el {
  display: block;
  font-weight: 780;
  font-stretch: 82%;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sd3-fi {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
.sd3-table__m,
.sd3-made-txt {
  font-weight: 440;
  font-size: 1.02rem;
  line-height: 1.5;
}
.sd3-made-txt { display: block; margin-top: 10px; color: var(--soft); }
.sd3-table__span { display: table-cell; }
.sd3-row--start th { color: var(--mut); }
.sd3-row--start .sd3-el { color: var(--mut); }
.sd3-row--win th { color: var(--c); }
.sd3-table .sd3-row--win th,
.sd3-table .sd3-row--win td { border-bottom: 2px solid var(--i); }
.sd3-films {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.sd3-films b {
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2.8rem, 4.4vw, 4rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--c);
  font-variant-numeric: lining-nums;
}
.sd3-films span { font-weight: 620; line-height: 1.35; }
.sd3-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 16px 15px;
  background: var(--c);
  color: var(--p);
  font-weight: 560;
  font-size: 1rem;
  line-height: 1.42;
}
.sd3-result b {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sd3-result b::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--p);
}

/* ================================================================
   BOOKING (cobalt) + the coupon
   ================================================================ */
.sd3-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--c);
  color: var(--p);
  padding: clamp(80px, 9vw, 136px) 0 clamp(88px, 9vw, 140px);
}
.sd3-cta .sd3-label { color: var(--p); }
.sd3-cta .sd3-mark { background: var(--i); }
.sd3-cta .sd3-label::after { background: var(--rule-c); }
.sd3-cta ::selection { background: var(--p); color: var(--i); }
.sd3-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 40px;
  align-items: end;
  margin-top: clamp(18px, 2.2vw, 30px);
}
.sd3-cta__title {
  margin: 0;
  max-width: 9em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(3rem, 8vw, 7.8rem);
  line-height: 0.85;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.sd3-cta__copy {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--p);
  max-width: 40ch;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.5;
}

.sd3-coupon {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 32px) clamp(24px, 2.6vw, 30px);
  border-radius: 2px;
  background: var(--stock);
  color: var(--i);
  outline: 2px dashed rgba(20, 17, 12, 0.5);
  outline-offset: -10px;
  transform: rotate(-1.2deg);
  filter: var(--lift);
}
.sd3-coupon__cut {
  position: absolute;
  top: -1px;
  left: 30px;
  padding: 0 6px;
  background: var(--stock);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--i);
  transform: translateY(0);
}
.sd3-coupon__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
}
.sd3-coupon__k::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--c);
}
.sd3-coupon__t {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
}
.sd3-coupon__p {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.sd3-coupon__p b {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(3.4rem, 5.6vw, 5rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--c);
}
.sd3-coupon__p span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sd3-coupon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 20px 0 0;
}
.sd3-cta__alt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--e);
}
.sd3-cta__alt:hover { background-size: 0 1px; background-position: 100% 100%; }

/* the die-cut ticket: cobalt stock, side notches, a perforated stub */
.sd3-ticket {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  min-height: 60px;
  border-radius: 3px;
  color: var(--p);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--e);
}
.sd3-ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  background: var(--c);
  -webkit-mask: var(--notch);
          mask: var(--notch);
  transition: background-color 0.25s var(--e), transform 0.4s var(--snap);
}
.sd3-ticket__t { display: flex; align-items: center; padding: 0 22px 0 26px; }
.sd3-ticket__stub {
  display: flex;
  align-items: center;
  padding: 0 20px 0 18px;
  border-left: 2px dashed rgba(240, 236, 227, 0.45);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
  transition: transform 0.35s var(--e), border-color 0.25s var(--e);
}
.sd3-ticket:hover::before { background: var(--i); transform: scale(1.03); }
.sd3-ticket:hover .sd3-ticket__stub { transform: translateX(4px); }
.sd3-ticket:focus-visible { outline: 2px solid var(--c) !important; outline-offset: 5px; }

/* ================================================================
   OUTRO (ink): back / related offer, the next case, the foot
   ================================================================ */
.sd3-outro {
  position: relative;
  background: var(--i);
  color: var(--p);
  padding-top: clamp(28px, 3vw, 44px);
}
.sd3-footnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-d);
}
.sd3-footnav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink);
  transition: color 0.2s var(--e);
}
.sd3-footnav a:hover { color: var(--cl); }

/* the shared .next-project (main.js loads the Red Bull loop on hover),
   re-set as a ruled row: title, a photo print, the arrow stub */
body.sd3 .sd3-next {
  display: block;
  place-items: normal;               /* the shared rule centres (and shrinks) the inner */
  min-height: 0;
  padding: 0;
  text-align: left;
  background: var(--i);
}
body.sd3 .sd3-next .next-project__eyebrow::after { content: none; }
body.sd3 .sd3-next .next-project__media { transition: opacity 0.6s var(--e); }
body.sd3 .sd3-next:hover .next-project__media,
body.sd3 .sd3-next:focus-visible .next-project__media { opacity: 0.28; }
body.sd3 .sd3-next .next-project__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 420px) auto;
  align-items: center;
  column-gap: clamp(24px, 3.4vw, 56px);
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
body.sd3 .sd3-next .next-project__inner::after {
  content: "";
  position: absolute;
  left: var(--gutter, 24px);
  right: var(--gutter, 24px);
  bottom: 0;
  height: 1px;
  background: var(--rule-d);
}
.sd3-next__txt { display: grid; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }
body.sd3 .sd3-next .next-project__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-ink);
}
body.sd3 .sd3-next .next-project__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(3rem, 8.4vw, 8.2rem);
  line-height: 0.84;
  letter-spacing: -0.022em;
  color: var(--p);
  -webkit-text-stroke: 0;
  transition: color 0.3s var(--e);
}
.sd3-next__print {
  position: relative;
  display: block;
  padding: 10px 10px 30px;
  border-radius: 2px;
  background: var(--stock);
  transform: rotate(2deg);
  transition: transform 0.55s var(--snap);
}
.sd3-next__print img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sd3-next__go {
  display: grid;
  place-items: center;
  width: clamp(56px, 5.6vw, 84px);
  height: clamp(56px, 5.6vw, 84px);
  background: var(--c);
  color: var(--p);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 2rem);
  transition: transform 0.35s var(--e), background-color 0.25s var(--e), color 0.25s var(--e);
}
@media (hover: hover) {
  body.sd3 .sd3-next:hover .next-project__title { color: var(--cl); }
  .sd3-next:hover .sd3-next__print { transform: rotate(0deg) translateY(-6px); }
  .sd3-next:hover .sd3-next__go { transform: translateX(8px); background: var(--p); color: var(--i); }
}
body.sd3 .sd3-next:focus-visible { outline-offset: -8px; }

.sd3-foot {
  padding: 22px 0 32px;
  color: rgba(240, 236, 227, 0.72);
}
.sd3-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sd3-foot__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--p);
}
.sd3-foot a:hover { color: var(--p); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1099px) {
  .sd3-folio__b { display: none; }
  .sd3-folio { grid-template-columns: minmax(0, 1fr) auto; }
  .sd3-leadcol { grid-column: 1 / -1; }
  .sd3-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
    margin: clamp(36px, 4.4vw, 48px) 0 0;
    padding: 0;
    border-left: 0;
  }
  .sd3-inside { padding-top: 0; margin-top: 0; }

  .sd3-cols { grid-column: 1 / -1; }
  .sd3-quote { grid-column: 2 / span 10; margin-top: clamp(40px, 5vw, 64px); }

  /* candidates: the lead across the measure, the rest two to a row */
  .sd3-cand { grid-column: span 6; }
  .sd3-cand:first-child { grid-column: 1 / -1; grid-row: auto; }
  .sd3-cand:first-child .sd3-cand__img { flex: 0 0 auto; aspect-ratio: 16 / 9; }

  .sd3-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .sd3-coupon { max-width: 520px; }
}

@media (max-width: 899px) {
  .sd3-made__cols { grid-template-columns: minmax(0, 1fr); }
  .sd3-made__col { padding: 24px 0 30px; }
  .sd3-made__col + .sd3-made__col::before { display: none; }
  .sd3-made__col + .sd3-made__col { border-top: 1px solid var(--rule); }
  .sd3-made__col {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "no fig" "t fig" "c fig";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--gap);
  }
  .sd3-made__no { grid-area: no; }
  .sd3-made__t { grid-area: t; }
  .sd3-made__fig { grid-area: fig; margin: 0; }
  .sd3-made__c { grid-area: c; }

  .sd3-pic--lead { grid-column: 1 / -1; grid-row: auto; }
  .sd3-pic--lead .sd3-pic__img { aspect-ratio: 16 / 9; }
  .sd3-pic--b { grid-column: 1 / span 6; grid-row: auto; }
  .sd3-pic--c { grid-column: 7 / span 6; grid-row: auto; }
  .sd3-pic--pano { grid-row: auto; }

  body.sd3 .sd3-next .next-project__inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 28px; }
  .sd3-next__txt { grid-column: 1 / -1; }
  .sd3-next__print { grid-column: 1; max-width: 360px; }
  .sd3-next__go { grid-column: 2; align-self: end; }
}

@media (max-width: 699px) {
  /* masthead: the nameplate centred, the ears as one line under it */
  .sd3-mast {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "plate plate" "l r";
    row-gap: 12px;
    column-gap: 10px;
  }
  .sd3-plate { grid-area: plate; font-size: clamp(2.4rem, 12.4vw, 3.4rem); }
  .sd3-ear--l { grid-area: l; }
  .sd3-ear--r { grid-area: r; }
  .sd3-ear { padding: 7px 9px 6px; font-size: 0.56rem; letter-spacing: 0.12em; }
  .sd3-folio { font-size: 0.58rem; letter-spacing: 0.14em; }

  .sd3-kicker { font-size: 0.64rem; letter-spacing: 0.16em; }
  .sd3-kicker::after { display: none; }
  /* line 1 wraps at a readable size; the count still fills the measure */
  .sd3-front { --k2: 1.79; }
  .sd3-hed__l1 { font-size: clamp(2.4rem, 11.6vw, 3.4rem); line-height: 0.9; white-space: normal; text-wrap: balance; }
  .sd3-hed__l2 { flex-wrap: wrap; margin-top: 0.14em; }
  .sd3-hed__unit { flex-basis: 100%; font-size: 0.46em; margin-top: 0.16em; }

  .sd3-side { display: flex; flex-direction: column; align-items: stretch; }
  .sd3-inside { margin-top: 36px; }
  .sd3-deck { margin-top: 20px; }
  .sd3-cap { flex-direction: column; gap: 6px; font-size: 0.84rem; }

  .sd3-h2 { font-size: clamp(2.5rem, 11.6vw, 3.4rem); }
  .sd3-cols { column-count: 1; }
  .sd3-quote { grid-column: 1 / -1; }
  .sd3-quote__q p { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  .sd3-banner > span { font-size: clamp(2.6rem, 12.6vw, 3.6rem); white-space: normal; text-wrap: balance; }
  .sd3-made__col { display: flex; }
  .sd3-made__fig { margin-top: 18px; }

  .sd3-pics__grid { row-gap: 22px; }
  .sd3-cands__sheet { row-gap: 24px; }
  .sd3-cands__bar { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.6rem; letter-spacing: 0.14em; }
  .sd3-cand__name { font-size: 1.02rem; }
  .sd3-cand__name::before { width: 20px; margin-bottom: 8px; }
  .sd3-cand__note { font-size: 0.8rem; }
  .sd3-cand figcaption { padding-top: 9px; }
  .sd3-pic--b,
  .sd3-pic--c { grid-column: 1 / -1; }
  .sd3-pic--pano .sd3-pic__img { aspect-ratio: 16 / 9; }

  /* the results table: each row a block */
  .sd3-table,
  .sd3-table tbody,
  .sd3-table tr,
  .sd3-table td,
  .sd3-table tbody th { display: block; width: auto; }
  .sd3-table thead { display: none; }
  .sd3-table tbody tr { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
  .sd3-table tbody tr.sd3-row--win { border-bottom: 2px solid var(--i); }
  .sd3-table tbody th,
  .sd3-table tbody td { padding: 0; border: 0; }
  .sd3-table .sd3-row--win th,
  .sd3-table .sd3-row--win td { border: 0; }
  .sd3-table tbody th { font-size: clamp(3.6rem, 18vw, 4.6rem); margin-bottom: 14px; }
  .sd3-table__m { margin-top: 12px; }
  .sd3-result { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .sd3-cta__title { font-size: clamp(2.9rem, 13.6vw, 4rem); }
  .sd3-coupon { transform: rotate(-0.8deg); }
  .sd3-ticket { min-height: 56px; font-size: 0.72rem; }
  .sd3-ticket__t { padding: 0 16px 0 20px; }
  .sd3-ticket__stub { padding: 0 16px 0 14px; }

  .sd3-footnav { flex-direction: column; }
  .sd3-foot__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .sd3-folio__a { display: none; }
  .sd3-folio { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sd3-folio__c { text-align: center; }
}

/* ================================================================
   MOTION (armed only; the finished page is the default)
   ================================================================ */
@keyframes sd3Rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes sd3Up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sd3Draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes sd3Fade { from { opacity: 0; } to { opacity: 1; } }

/* the front page prints in: rules draw, nameplate and headline rise */
.sd3--armed .sd3-folio::before { animation: sd3Draw 0.9s var(--draw) 0.05s both; }
.sd3--armed .sd3-mast > * { animation: sd3Up 0.8s var(--e) both; }
.sd3--armed .sd3-folio > * { animation: sd3Fade 0.6s var(--e) 0.3s both; }
.sd3--armed .sd3-kicker { animation: sd3Up 0.8s var(--e) 0.25s both; }
.sd3--armed .sd3-hed__l1 { clip-path: inset(-0.2em -0.3em 0 -0.3em); }
.sd3--armed .sd3-hed__l1 > span { animation: sd3Rise 1s var(--e) 0.3s both; }
.sd3--armed .sd3-hed__unit { animation: sd3Up 0.8s var(--e) 1.5s both; }
/* the lead photo, deck and side column come up under the headline.
   Arriving by the homepage morph (the pagereveal script marks #caseHero
   .is-in), the photo is already in place and does not animate. */
.sd3--armed .sd3-photo__frame:not(.is-in),
.sd3--armed .sd3-cap,
.sd3--armed .sd3-deck,
.sd3--armed .sd3-byline { animation: sd3Up 1s var(--e) 0.6s both; }
.sd3--armed .sd3-side { animation: sd3Up 1s var(--e) 0.72s both; }
/* the counts wait for their odometers (the JS adds .is-rolling at once) */
.sd3--armed [data-sd3-count]:not(.is-rolling):not(.is-counted) { opacity: 0; }

/* sections: the JS adds .is-in when each one enters */
.sd3--armed [data-sd3-in] .sd3-label,
.sd3--armed [data-sd3-in] .sd3-h2,
.sd3--armed [data-sd3-in] .sd3-banner > span,
.sd3--armed .sd3-cta__title {
  transition: opacity 0.8s var(--e), transform 1s var(--e);
}
.sd3--armed [data-sd3-in]:not(.is-in) .sd3-label { opacity: 0; }
.sd3--armed [data-sd3-in]:not(.is-in) .sd3-h2,
.sd3--armed .sd3-cta:not(.is-in) .sd3-cta__title { opacity: 0; transform: translateY(0.35em); }
.sd3--armed .sd3-banner { clip-path: inset(-0.2em -0.3em 0 -0.3em); }
.sd3--armed .sd3-made:not(.is-in) .sd3-banner > span { transform: translateY(104%); }

/* story: the rules draw, the columns set */
.sd3--armed .sd3-story__grid { transition: border-color 0.1s linear; }
.sd3--armed .sd3-cols,
.sd3--armed .sd3-quote { transition: opacity 0.9s var(--e) 0.2s, transform 1s var(--e) 0.2s; }
.sd3--armed .sd3-quote { transition-delay: 0.4s; }
.sd3--armed .sd3-story:not(.is-in) .sd3-cols,
.sd3--armed .sd3-story:not(.is-in) .sd3-quote { opacity: 0; transform: translateY(24px); }

/* spread: columns one by one */
.sd3--armed .sd3-made__col { transition: opacity 0.8s var(--e), transform 1s var(--e); }
.sd3--armed .sd3-made__col:nth-child(2) { transition-delay: 0.1s; }
.sd3--armed .sd3-made__col:nth-child(3) { transition-delay: 0.2s; }
.sd3--armed .sd3-made:not(.is-in) .sd3-made__col { opacity: 0; transform: translateY(32px); }

/* photo page: the prints come up out of the dark */
.sd3--armed .sd3-pic { transition: opacity 1s var(--e), transform 1.1s var(--e); }
.sd3--armed .sd3-pic--b { transition-delay: 0.1s; }
.sd3--armed .sd3-pic--c { transition-delay: 0.18s; }
.sd3--armed .sd3-pic--pano { transition-delay: 0.26s; }
.sd3--armed .sd3-pics:not(.is-in) .sd3-pic { opacity: 0; transform: translateY(36px); }

/* candidates page: the deck and the bar rise, the boxes come up one by one */
.sd3--armed .sd3-cand { transition: opacity 0.9s var(--e), transform 1s var(--e); }
.sd3--armed .sd3-cand:nth-child(2) { transition-delay: 0.08s; }
.sd3--armed .sd3-cand:nth-child(3) { transition-delay: 0.16s; }
.sd3--armed .sd3-cand:nth-child(4) { transition-delay: 0.24s; }
.sd3--armed .sd3-cand:nth-child(n+5) { transition-delay: 0.32s; }
.sd3--armed .sd3-cands:not(.is-in) .sd3-cand { opacity: 0; transform: translateY(32px); }
.sd3--armed .sd3-cands__deck,
.sd3--armed .sd3-cands__bar { transition: opacity 0.8s var(--e) 0.1s, transform 1s var(--e) 0.1s; }
.sd3--armed .sd3-cands:not(.is-in) .sd3-cands__deck,
.sd3--armed .sd3-cands:not(.is-in) .sd3-cands__bar { opacity: 0; transform: translateY(16px); }

/* results table: typeset row by row */
.sd3--armed .sd3-table tbody tr { transition: opacity 0.7s var(--e), transform 0.9s var(--e); }
.sd3--armed .sd3-table tbody tr:nth-child(2) { transition-delay: 0.1s; }
.sd3--armed .sd3-table tbody tr:nth-child(3) { transition-delay: 0.2s; }
.sd3--armed .sd3-table tbody tr:nth-child(4) { transition-delay: 0.3s; }
.sd3--armed .sd3-run:not(.is-in) .sd3-table tbody tr { opacity: 0; transform: translateX(-24px); }

/* the coupon drops onto the cobalt */
.sd3--armed .sd3-coupon { transition: opacity 0.7s var(--e) 0.2s, transform 0.9s var(--snap) 0.2s; }
.sd3--armed .sd3-cta:not(.is-in) .sd3-coupon { opacity: 0; transform: rotate(-7deg) translateY(40px); }

/* the next case */
.sd3--armed .sd3-next__print { transition: transform 0.9s var(--snap), opacity 0.7s var(--e); }
.sd3--armed .sd3-outro:not(.is-in) .sd3-next__print { opacity: 0; transform: rotate(8deg) translateY(30px); }

/* belt and braces: never animate for reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.sd3 *,
  body.sd3 *::before,
  body.sd3 *::after { animation: none !important; transition: none !important; }
}