/* ============================================================
   TRAIN MY STUDIO, SHARED SITE STYLESHEET
   Design system: direction 2, "The Sales Floor", carried by
   photography. Poster Archivo typography, ink and warm paper,
   one vermilion accent used only as punctuation. Every dark
   moment on the page is a photograph dimmed by a scrim, never
   a painted flood.
   ============================================================ */

/* ---------- Fonts, self hosted, no external hosts ---------- */
@font-face{
  font-family:'Archivo VF';
  src:url('../fonts/d2-archivo-var-latin.woff2') format('woff2-variations'),
      url('../fonts/d2-archivo-var-latin.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo VF';
  src:url('../fonts/d2-archivo-var-latin-ext.woff2') format('woff2-variations'),
      url('../fonts/d2-archivo-var-latin-ext.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/d2-plexmono-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#0B0B0C;          /* primary dark surface */
  --ink-2:#17171A;        /* raised dark panel */
  --paper:#F5F2ED;        /* warm off white, light surface */
  --paper-2:#E8E3DA;      /* light panel */
  --accent:#FF3D14;       /* signal vermilion. Punctuation only, never a surface. */
  --accent-deep:#C22C08;  /* accent for small text on light, contrast safe */
  --mute-on-light:#726D64;
  --mute-on-dark:#9C978D;
  --line-light:rgba(11,11,12,.14);
  --line-dark:rgba(245,242,237,.22);

  --gutter:clamp(20px,5vw,56px);
  /* Inner gutter between a photograph and the text column beside it, for the
     paired components whose two halves sit in adjacent grid tracks. */
  --pair-gap:clamp(24px,3.4vw,56px);
  --maxw:1240px;
  --band:clamp(68px,9.5vw,142px);   /* section vertical rhythm */

  --disp:'Archivo VF','Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Plex Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--disp);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(16px,1.02vw + 12px,18.5px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* <picture> must not generate a box of its own: the hero images inside it are
   absolutely positioned against .hero / .phero, and an inline picture box would
   add a stray line box above the section. */
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0;padding:0}
ul{list-style:none}
[id]{scroll-margin-top:84px}

/* ---------- The one grid. Full bleed capable, 12 main columns. ----------
   line 1  = full-start
   line 2  = main-start  (main column 1 begins)
   line 14 = main-end
   line 15 = full-end
--------------------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [main-start] repeat(12,minmax(0,calc(var(--maxw) / 12)))
    [main-end] minmax(var(--gutter),1fr)
    [full-end];
  align-items:start;
}
.wrap{max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type primitives ---------- */
.kicker{
  font-family:var(--mono);font-weight:600;
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7em;
  color:var(--mute-on-light);
}
.kicker::before{content:"";width:7px;height:7px;background:var(--accent);flex:none}
.on-dark .kicker{color:var(--mute-on-dark)}

/* Display type: poster mass, tight leading, expanded widths */
.d1,.d2,.d3{
  font-family:var(--disp);
  font-variation-settings:'wdth' 112,'wght' 800;
  line-height:.9;letter-spacing:-.025em;
  text-wrap:balance;margin:0;color:var(--ink);
}
.d1{font-size:clamp(38px,5.1vw,68px);line-height:.92;letter-spacing:-.03em}
.d2{font-size:clamp(30px,4.4vw,56px);line-height:.98}
.d3{font-size:clamp(21px,2.1vw,29px);font-variation-settings:'wdth' 106,'wght' 750;letter-spacing:-.018em;line-height:1.04}
.on-dark .d1,.on-dark .d2,.on-dark .d3{color:var(--paper)}

.lede{
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(17px,1.25vw + 8px,22px);line-height:1.45;
  max-width:46ch;color:var(--mute-on-light);margin:0;
}
.on-dark .lede{color:#CFCAC1}

/* Numbers: the loudest voice on the page. Expanded, heavy, tabular. */
.num{
  font-family:var(--disp);
  font-variation-settings:'wdth' 125,'wght' 820;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.045em;line-height:.8;
  display:block;
}

/* The highlight block. Vermilion as a mark behind five words, clone
   wrapped, never wider than the line it sits on. */
.hl{
  background:var(--accent);color:#120906;
  padding:.02em .1em .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);
  font-variation-settings:'wdth' 108,'wght' 760;
  font-size:clamp(15px,.5vw + 13px,17px);letter-spacing:-.01em;
  padding:1.06em 1.55em;border-radius:0;border:0;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background-color .12s ease,color .12s ease;
}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff;transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-2px)}
.btn-sm{padding:.78em 1.15em;font-size:14px}

.textlink{
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.35em;border-bottom:1px solid currentColor;
}
.on-dark .textlink{color:var(--paper)}

.microprint{
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute-on-light);
}
.on-dark .microprint{color:var(--mute-on-dark)}

/* Small print in sentences. Mono 400, quiet, never hidden. */
.fine{
  font-family:var(--mono);font-weight:400;
  font-size:11.5px;letter-spacing:.05em;line-height:1.65;
  color:var(--mute-on-light);
}
.on-dark .fine{color:var(--mute-on-dark)}

/* Inline statistic source, part of the approved copy. Held on one line where
   there is room; on a phone the longest citations are wider than the line box,
   and nowrap made them run off the right edge, so there they wrap. */
.src-inline{
  font-family:var(--mono);font-weight:400;font-size:.78em;letter-spacing:.04em;
  color:var(--mute-on-light);white-space:nowrap;
}
@media (max-width:700px){
  .src-inline{white-space:normal}
}

.on-dark{color:var(--paper)}

/* ============================================================
   NAV. Direction 2's nav, set on the light ground: mono links,
   ink button, one hairline underneath.
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(245,242,237,.95);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line-light);
}
.nav__in{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  min-height:70px;
}
.nav__logo{width:clamp(118px,11vw,152px);height:auto}
.nav__links{
  display:flex;gap:clamp(14px,2.1vw,30px);margin-left:auto;align-items:center;
  font-family:var(--mono);font-weight:600;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;
}
.nav__links a{text-decoration:none;color:var(--mute-on-light);padding-block:4px}
.nav__links a:hover{color:var(--ink)}
.nav .btn{margin-left:clamp(8px,1.4vw,18px)}
@media (max-width:900px){
  .nav__links a:not(.nav__cta){display:none}
  .nav .btn{margin-left:auto}
}

/* ============================================================
   HERO. Full bleed photograph under a deep ink scrim. The poster
   headline and the three sourced statistics live inside the
   photograph, the statistics on hairlines at the bottom.
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#141416}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:22% 50%;
  z-index:0;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(11,11,12,.84) 0%,rgba(11,11,12,.26) 30%,rgba(11,11,12,0) 52%),
    linear-gradient(96deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.90) 26%,rgba(11,11,12,.62) 48%,rgba(11,11,12,.20) 68%,rgba(11,11,12,.08) 84%,rgba(11,11,12,.24) 100%);
}
.hero__in{
  position:relative;z-index:2;
  min-height:clamp(620px,86vh,880px);
  display:grid;grid-template-rows:1fr auto;
  padding-block:clamp(48px,6vw,84px) 0;
}
.hero__copy{
  grid-column:main-start / span 7;
  align-self:center;
  max-width:790px;
}
.hero .kicker{color:#DEDAD4}
.hero__copy .d1{margin-block:22px 0}
.hero__copy .lede{margin-block:26px 0;max-width:47ch}
.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px;
  margin-top:34px;
}
.hero__note{
  margin-top:22px;
  font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:.05em;color:var(--mute-on-dark);
}

/* Statistics live inside the photograph, set in the .num voice. */
.hero__stats{
  grid-column:main-start / main-end;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-dark);
  margin-top:clamp(44px,6vw,80px);
}
.stat{padding:clamp(22px,2.4vw,30px) clamp(16px,2vw,34px) clamp(26px,3vw,38px) 0}
.stat + .stat{border-left:1px solid var(--line-dark);padding-left:clamp(16px,2vw,34px)}
.stat__fig{
  color:#fff;font-size:clamp(28px,3.2vw,48px);
}
.stat__fig small{
  font-family:var(--mono);font-weight:600;
  font-size:.34em;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:.35em;
}
.stat__txt{
  display:block;margin-top:14px;
  font-variation-settings:'wdth' 100,'wght' 440;
  font-size:14px;line-height:1.45;color:#DEDAD4;max-width:28ch;
}
.stat__src{
  display:block;margin-top:10px;
  font-family:var(--mono);font-weight:600;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-on-dark);
}
.hero__fine{padding-block:16px 0}

@media (max-width:900px){
  .hero__img{object-position:44% 50%}
  .hero__scrim{
    background:linear-gradient(to top,rgba(11,11,12,.94) 0%,rgba(11,11,12,.88) 34%,rgba(11,11,12,.64) 62%,rgba(11,11,12,.38) 84%,rgba(11,11,12,.44) 100%);
  }
  .hero__in{min-height:0;padding-bottom:0}
  .hero__copy{grid-column:main-start / main-end;padding-top:clamp(180px,42vw,300px)}
  .hero__stats{grid-template-columns:1fr}
  .stat{padding:20px 0 22px}
  .stat + .stat{border-left:0;border-top:1px solid var(--line-dark);padding-left:0}
  .stat__fig{font-size:34px}
  .stat__txt{max-width:34ch;margin-top:9px}
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{padding-block:var(--band)}
.sec--panel{background:var(--paper-2)}
.sec__head{grid-column:main-start / span 8;margin-bottom:clamp(38px,4.4vw,62px)}
.sec__head .d2{margin-top:20px}
.sec__head p{
  margin-top:26px;padding-top:26px;border-top:1px solid var(--line-light);
  max-width:58ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.55;
}

/* The problem. Text on the paper ground, rule divided. */
.problem .sec__head{margin-bottom:0;grid-column:main-start / span 9}

/* ============================================================
   TWO THINGS THIS IS NOT. Direction 2's two column layout with
   01 / 02 mono indices, each column led by its photograph.
   ============================================================ */
.nots{grid-column:main-start / main-end;display:grid;gap:0;border-top:1px solid var(--line-light)}
.not{
  padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line-light);
}
.not__img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.not__row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(22px,2.6vw,34px);
}
.not__ix{
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--mute-on-light);padding-top:.55em;
}
.not__row p{
  margin:.7em 0 0;max-width:44ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
}
@media (min-width:900px){
  .nots{grid-template-columns:1fr 1fr}
  .not{border-bottom:0;padding-block:clamp(30px,3.4vw,44px) 0}
  .not:first-child{padding-right:clamp(34px,4vw,64px)}
  .not + .not{border-left:1px solid var(--line-light);padding-left:clamp(34px,4vw,64px)}
}

/* ============================================================
   THE THREE CALLS. The current build's alternating photo bleeds,
   with the type on ink plates: outlined ghost step numbers,
   paper headlines, direction 2's voice.
   ============================================================ */
.call{
  align-items:center;
  padding-block:0;
  margin-bottom:clamp(56px,6.2vw,104px);
}
.call:last-of-type{margin-bottom:0}
.call__fig{position:relative;z-index:1;grid-row:1}
.call__fig img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.call__fig figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-on-light);padding-top:12px;
}
.call--l .call__fig figcaption{padding-left:var(--gutter)}
.call__body{
  position:relative;z-index:3;grid-row:1;align-self:center;
  background:var(--ink);color:var(--paper);
  padding:clamp(28px,3.2vw,46px) clamp(26px,3vw,46px);
}
.call--l .call__fig{grid-column:full-start / span 8}   /* bleeds left */
.call--l .call__body{grid-column:8 / 14}
.call--r .call__fig{grid-column:7 / 15} /* bleeds right */
.call--r .call__body{grid-column:main-start / span 7}
.call__n{
  font-family:var(--disp);
  font-variation-settings:'wdth' 125,'wght' 820;
  font-variant-numeric:tabular-nums;
  font-size:clamp(44px,5.6vw,76px);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px rgba(245,242,237,.42);
  display:block;
}
.call__body .d3{color:var(--paper);margin-top:20px}
.call__body p{
  margin-top:14px;max-width:44ch;color:#C4BFB6;
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:16px;line-height:1.55;
}
@media (max-width:900px){
  .call__fig{grid-column:full-start / full-end!important;grid-row:1}
  .call__body{
    grid-column:full-start / full-end!important;grid-row:2;
    padding:28px var(--gutter) 32px!important;margin-top:0;
  }
  .call{margin-bottom:56px}
}

/* Pull line. Poster Archivo, one short ink bar, nothing else. */
.pull{grid-column:main-start / span 10;margin-top:clamp(52px,5.6vw,92px)}
.pull::before{content:"";display:block;width:44px;height:3px;background:var(--ink);margin-bottom:22px}
.pull blockquote{
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(22px,2.2vw,32px);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);max-width:34ch;text-wrap:balance;
}
@media (max-width:860px){
  .pull{grid-column:main-start / main-end}
}

/* ============================================================
   PROOF AND RESULTS. One dark band, and the dark is a photograph
   of a viewing room dimmed by a scrim, not paint. The figure is
   the loudest voice on the page.
   ============================================================ */
.results{position:relative;isolation:isolate;overflow:hidden;background:#141210}
.results__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;z-index:0;
}
.results__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(11,11,12,.88) 0%,rgba(11,11,12,.64) 38%,rgba(11,11,12,.74) 72%,rgba(11,11,12,.92) 100%),
    radial-gradient(120% 90% at 42% 30%,rgba(11,11,12,.10) 0%,rgba(11,11,12,.70) 100%);
}
.results__in{position:relative;z-index:2;padding-block:var(--band)}
.proof__head{grid-column:main-start / span 9}
.proof__amt{
  color:var(--paper);
  font-size:clamp(64px,11.5vw,168px);
  margin-top:clamp(22px,2.6vw,36px);
}
.proof__rest{
  display:block;
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(26px,3.4vw,44px);line-height:1;letter-spacing:-.025em;
  color:var(--paper);margin-top:clamp(16px,1.8vw,26px);
  max-width:22ch;text-wrap:balance;
}
.proof__head p{
  margin-top:22px;color:#DEDAD4;max-width:58ch;
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.6vw + 13px,18px);line-height:1.6;
}
.proof__head .fine{display:block;margin-top:26px;max-width:64ch}
.quotes__head{grid-column:main-start / span 7;margin-top:clamp(64px,7.4vw,116px)}
.quotes{
  grid-column:main-start / main-end;
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(36px,4vw,58px);
  border-top:1px solid var(--line-dark);
}
.quote{
  padding:clamp(26px,2.6vw,38px) clamp(20px,2.2vw,34px) 0 0;
  display:flex;flex-direction:column;
}
.quote + .quote{border-left:1px solid var(--line-dark);padding-left:clamp(20px,2.2vw,34px)}
.quote blockquote{
  font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(19px,1.5vw,25px);line-height:1.18;letter-spacing:-.015em;
  color:#fff;text-wrap:pretty;
}
.quote cite{
  display:block;margin-top:20px;font-style:normal;
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.quotes__support{
  grid-column:main-start / span 8;
  margin-top:clamp(32px,3.6vw,50px);
  color:#DEDAD4;font-size:15.5px;line-height:1.6;max-width:62ch;
  font-variation-settings:'wdth' 100,'wght' 420;
}
@media (max-width:860px){
  .quotes{grid-template-columns:1fr;border-top:0}
  .quote{padding:26px 0 0 0;border-top:1px solid var(--line-dark)}
  .quote + .quote{border-left:0;padding-left:0;margin-top:26px}
  .proof__head,.quotes__head,.quotes__support{grid-column:main-start / main-end}
}

/* ============================================================
   HAND IT TO YOUR TEAM. Numbered list in the mono index voice,
   photograph bleeding left.
   ============================================================ */
.inside__fig{grid-column:1 / 9;grid-row:1}
.inside__fig img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.inside__body{grid-column:8 / 14;grid-row:1;align-self:center;
  background:var(--paper-2);padding:clamp(26px,3vw,44px) 0 clamp(6px,1vw,14px) clamp(26px,3vw,48px);position:relative;z-index:2}
.ilist{border-top:1px solid var(--line-light)}
.ilist li{
  display:grid;grid-template-columns:46px 1fr;gap:0 8px;
  padding:18px 0;border-bottom:1px solid var(--line-light);
  font-size:16px;line-height:1.5;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 440;
}
.ilist li span{
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--mute-on-light);padding-top:5px;
}
.ilist strong{
  font-weight:inherit;
  font-variation-settings:'wdth' 106,'wght' 720;
  color:var(--ink);letter-spacing:-.01em;
}
@media (max-width:900px){
  .inside__fig{grid-column:full-start / full-end;grid-row:1}
  .inside__body{grid-column:main-start / main-end;grid-row:2;padding:30px 0 0 0}
}

/* ============================================================
   WHO TEACHES IT
   ============================================================ */
.teach__fig{grid-column:main-start / span 4}
.teach__fig img{
  width:100%;aspect-ratio:3 / 2;object-fit:cover;
}
.teach__fig figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-on-light);padding-top:12px;border-top:1px solid var(--line-light);margin-top:12px;
}
.teach__body{grid-column:7 / 14}
.teach__body .d2{margin-top:20px}
.teach__body p{
  margin-top:22px;max-width:56ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.55;
}
.teach__body p:first-of-type{padding-top:26px;border-top:1px solid var(--line-light);margin-top:26px}
@media (max-width:860px){
  .teach__fig{grid-column:main-start / span 8}
  .teach__body{grid-column:main-start / main-end;margin-top:40px}
}

/* ============================================================
   PRICING. The price figure is the single largest use of the
   accent on the page, and it is a glyph, not a rectangle.
   ============================================================ */
.price__body{grid-column:main-start / span 6}
.price__fig{grid-column:9 / 14;align-self:start}
.price__fig img{width:100%;aspect-ratio:1 / 1;object-fit:cover}
.price__fig figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-on-light);padding-top:12px;
}
.price__amt{
  color:var(--accent);
  font-size:clamp(88px,13vw,168px);
  margin-top:14px;
}
.price__unit{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(12px,1vw,14px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute-on-light);margin-left:12px;
}
.price__body > p{
  margin-top:clamp(22px,2.4vw,32px);max-width:48ch;
  color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:17px;line-height:1.55;
}
.price__line{
  margin-top:clamp(20px,2.2vw,30px);max-width:26ch;
  color:var(--ink)!important;
  font-variation-settings:'wdth' 106,'wght' 750!important;
  font-size:clamp(21px,2.1vw,29px)!important;line-height:1.06!important;
  letter-spacing:-.018em;text-wrap:balance;
}
.price__body .btn{margin-top:clamp(28px,2.8vw,40px)}
.price__body .fine{display:block;margin-top:18px}
@media (max-width:860px){
  .price__body{grid-column:main-start / main-end}
  .price__fig{grid-column:main-start / main-end;margin-top:44px;order:2}
}

/* ============================================================
   FOOTER. Ink, the one flat dark surface, logo inverted.
   ============================================================ */
.foot{background:var(--ink);color:var(--mute-on-dark);padding-block:clamp(40px,4.6vw,64px)}
.foot__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 40px;
}
.foot__logo{width:132px;height:auto;filter:invert(1)}
.foot__links{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.foot__links a{text-decoration:none;border-bottom:1px solid rgba(245,242,237,.28);padding-bottom:2px}
.foot__links a:hover{border-bottom-color:var(--paper);color:var(--paper)}
.foot__sep{opacity:.4}
@media (max-width:700px){.foot__sep{display:none}.foot__links{gap:9px 14px}}

/* Small screens: display type wraps on sense, labels stay on one line */
@media (max-width:900px){
  .sec__head,.problem .sec__head{grid-column:main-start / main-end}
  .call__fig figcaption{padding-left:var(--gutter)}
}
@media (max-width:700px){
  .d1,.d2,.d3,.proof__rest{text-wrap:pretty}
  .kicker{font-size:10px;letter-spacing:.15em;gap:.6em}
  .kicker::before{width:5px;height:5px}
}

/* Utility */
.u-right{text-align:right}
@media (max-width:700px){.u-right{text-align:left}}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   SHARED ADDITIONS FOR INTERIOR PAGES
   Everything below is additive: no selector here matches
   homepage markup, so the homepage render is untouched.
   ============================================================ */

/* Current page marker in the nav */
.nav__links a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* Page hero: the homepage hero treatment, shorter. */
.phero{position:relative;isolation:isolate;overflow:hidden;background:#141416}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(11,11,12,.86) 0%,rgba(11,11,12,.40) 42%,rgba(11,11,12,.16) 72%,rgba(11,11,12,.30) 100%),
    linear-gradient(96deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.86) 28%,rgba(11,11,12,.56) 52%,rgba(11,11,12,.20) 76%,rgba(11,11,12,.26) 100%);
}
.phero__in{position:relative;z-index:2;min-height:clamp(440px,56vh,640px);display:grid;align-items:center;padding-block:clamp(64px,8vw,110px)}
.phero--short .phero__in{min-height:clamp(340px,42vh,480px)}
.phero--legal .phero__in{min-height:clamp(230px,30vh,340px);padding-block:clamp(48px,6vw,80px)}
.phero__copy{grid-column:main-start / span 8;max-width:830px}
.phero .kicker{color:#DEDAD4}
.phero__copy .d1,.phero__copy .d2{margin-block:22px 0}
.phero__copy p{
  margin-top:24px;color:#CFCAC1;max-width:60ch;
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.55;
}
.phero__copy p strong{font-variation-settings:'wdth' 104,'wght' 700;font-weight:inherit;color:var(--paper)}
.phero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px;margin-top:32px}
.phero__note{
  margin-top:20px;font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:.05em;color:var(--mute-on-dark);
}
@media (max-width:900px){.phero__copy{grid-column:main-start / main-end}}

/* Bold runs keep their weight inside variation-set paragraphs */
.sec__head p strong{font-variation-settings:'wdth' 106,'wght' 720;color:var(--ink);font-weight:inherit;letter-spacing:-.01em}
.sec__head p a:not(.btn){color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}

/* A sentence that follows a pull quote */
.pull p{
  margin-top:16px;max-width:52ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.6;
}

/* Prose: running body copy for interior sections */
.prose p{
  margin-top:18px;max-width:58ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.6;
}
.prose p strong{font-variation-settings:'wdth' 106,'wght' 720;color:var(--ink);font-weight:inherit;letter-spacing:-.01em}
.prose a:not(.btn){color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}
.prose .fine{display:block;margin-top:24px;max-width:64ch}
.prose > .d3{margin-top:clamp(28px,3vw,40px)}

/* Two column section: figure one side, prose the other.
   The figure and the text column occupy ADJACENT grid tracks and .grid
   deliberately has no column-gap, so the text column has to carry the
   gutter itself on whichever side the photograph is. Without it the first
   character of the copy, and the 01 / 02 index numbers, land exactly on
   the photograph's edge. min-width:0 stops an unbreakable run of text
   from pushing the column wider than its track. */
.duo{align-items:center}
.duo__fig{grid-column:main-start / span 5;grid-row:1}
.duo__fig--r{grid-column:9 / main-end;grid-row:1;align-self:start}
.duo__fig img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.duo__fig figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-on-light);padding-top:12px;
}
.duo__fig,.duo__body,.duo__body--l{min-width:0}
/* Text to the RIGHT of the photograph: gutter on its left. */
.duo__body{grid-column:7 / main-end;grid-row:1;align-self:center;padding-inline-start:var(--pair-gap)}
/* Text to the LEFT of the photograph: gutter on its right instead. */
.duo__body--l{grid-column:main-start / span 7;grid-row:1;padding-inline-start:0;padding-inline-end:var(--pair-gap)}
.duo__body .d3,.duo__body .d2{margin-top:18px}
@media (max-width:900px){
  .duo__fig,.duo__fig--r{grid-column:main-start / main-end;grid-row:auto}
  .duo__body,.duo__body--l{
    grid-column:main-start / main-end;grid-row:auto;margin-top:30px;
    padding-inline:0;   /* stacked: the photograph is above, not beside */
  }
}

/* Ghost index number on light ground */
.gnum{
  font-family:var(--disp);
  font-variation-settings:'wdth' 125,'wght' 820;
  font-variant-numeric:tabular-nums;
  font-size:clamp(44px,5.6vw,76px);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px rgba(11,11,12,.32);
  display:block;margin-top:22px;
}

/* Script excerpt: a quoted line from the course documents */
.script{margin-top:20px;border-left:3px solid var(--ink);padding:2px 0 2px 22px;max-width:54ch}
.script p{
  margin:0;font-variation-settings:'wdth' 103,'wght' 580;
  font-size:clamp(17px,1vw + 11px,21px);line-height:1.38;letter-spacing:-.012em;color:var(--ink);
}
.script p + p{margin-top:12px}

/* Testimonial grid on the light ground */
.lquotes{grid-column:main-start / main-end;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
.lquote{
  padding:clamp(26px,2.6vw,38px) clamp(20px,2.2vw,34px) clamp(26px,2.6vw,38px) 0;
  border-bottom:1px solid var(--line-light);border-left:1px solid var(--line-light);
  padding-left:clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;
}
.lquote:nth-child(3n+1){border-left:0;padding-left:0}
.lquote blockquote{
  font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(17px,1.3vw,22px);line-height:1.24;letter-spacing:-.015em;
  color:var(--ink);text-wrap:pretty;
}
.lquote cite{
  display:block;margin-top:16px;font-style:normal;
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);
}
@media (max-width:860px){
  .lquotes{grid-template-columns:1fr}
  .lquote,.lquote:nth-child(3n+1){border-left:0;padding-left:0}
}

/* Portrait work strip, full bleed */
.workstrip{grid-column:full-start / full-end;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.workstrip img{width:100%;height:100%;aspect-ratio:4 / 5;object-fit:cover}
@media (max-width:700px){.workstrip{grid-template-columns:repeat(2,1fr)}}

/* Three stills side by side */
.tristrip{grid-column:main-start / main-end;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(30px,3.4vw,46px)}
.tristrip img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
@media (max-width:700px){.tristrip{grid-template-columns:1fr}}

/* Numbered and plain inventory lists reuse the homepage index voice */
ol.ilist{margin:0;padding:0;list-style:none}
.ilist--wide li{grid-template-columns:56px 1fr}

/* FAQ */
.faq{grid-column:main-start / span 9;border-top:1px solid var(--line-light)}
.faq > div{padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--line-light)}
.faq h3{
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 750;
  font-size:clamp(17px,1.3vw,21px);letter-spacing:-.015em;line-height:1.2;color:var(--ink);
}
.faq p{
  margin-top:12px;max-width:62ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;font-size:16.5px;line-height:1.6;
}
.faq a:not(.btn){color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:900px){.faq{grid-column:main-start / main-end}}

/* Legal pages */
.legal{grid-column:main-start / span 8}
.legal h2{
  font-family:var(--disp);
  font-variation-settings:'wdth' 108,'wght' 780;
  font-size:clamp(19px,1.7vw,25px);letter-spacing:-.018em;line-height:1.1;
  color:var(--ink);margin-top:clamp(36px,4vw,54px);
  padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line-light);
}
.legal p,.legal li{
  margin-top:14px;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 430;
  font-size:16.5px;line-height:1.65;max-width:68ch;
}
.legal p strong,.legal li strong{font-variation-settings:'wdth' 104,'wght' 700;color:var(--ink);font-weight:inherit}
.legal ul{margin-top:4px}
.legal li{padding-left:24px;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--accent)}
.legal .microprint{display:block;margin-top:10px}
@media (max-width:900px){.legal{grid-column:main-start / main-end}}

/* ============================================================
   LONG FORM ARTICLE. The one prose primitive, used by every
   page under /journal/. A single readable measure inside the
   12 column grid, the mono label voice for the section name,
   a photograph per section, and the same type scale as the
   rest of the site. No Journal page carries CSS of its own.
   Everything is scoped to .article, so nothing above changes.
   ============================================================ */
.sec--article{padding-block:clamp(52px,6.4vw,92px)}
.article{grid-column:main-start / span 8;min-width:0}
.article > .kicker{margin-bottom:18px}

/* Section name. Set in the display face, uppercase, tracked out
   a hair because capitals need it. The loud line is the standfirst
   underneath; this is the label that names the section. */
.article > h2{
  font-family:var(--disp);
  font-variation-settings:'wdth' 110,'wght' 800;
  font-size:clamp(18px,1.5vw,23px);line-height:1.12;letter-spacing:.005em;
  color:var(--ink);max-width:30ch;text-wrap:balance;
}
.article > h2 + .article__deck{margin-top:14px}

/* Standfirst: the sentence that carries the section. Two classes deep on
   purpose, so it outranks the `.article > p` body rule below it. */
.article .article__deck{
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 750;
  font-size:clamp(21px,2.1vw,29px);line-height:1.06;letter-spacing:-.018em;
  color:var(--ink);max-width:30ch;text-wrap:balance;
}
.article > h3{
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 730;
  font-size:clamp(17px,1.35vw,21px);line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);margin-top:clamp(30px,3.2vw,44px);max-width:42ch;
}
.article > p{
  margin-top:18px;max-width:64ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.62;
}
.article > p strong{
  font-variation-settings:'wdth' 106,'wght' 720;color:var(--ink);
  font-weight:inherit;letter-spacing:-.01em;
}
.article a:not(.btn){color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}
.article > ul{margin-top:20px;max-width:64ch}
.article > ul > li{
  position:relative;padding-left:24px;margin-top:13px;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(16px,.7vw + 13px,19px);line-height:1.62;
}
.article > ul > li::before{
  content:"";position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--accent);
}
.article > ul > li strong{
  font-variation-settings:'wdth' 106,'wght' 720;color:var(--ink);font-weight:inherit;
}
.article .script{margin-top:22px;max-width:56ch}
.article .fine{display:block;margin-top:26px;max-width:64ch}
.article .pull{margin-top:clamp(32px,3.8vw,54px)}
.article .btn{margin-top:clamp(26px,2.8vw,38px)}
.article .microprint{display:block;margin-top:18px}

/* One photograph per section, held on the prose measure. */
.article__fig{margin-top:clamp(26px,3vw,40px)}
.article__fig img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.article__fig figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-on-light);padding-top:12px;
}
.article__fig--wide img{aspect-ratio:2 / 1}
.article__fig--film img{aspect-ratio:16 / 9}
.article__fig--square img{aspect-ratio:1 / 1}
.article__fig--tall img{aspect-ratio:4 / 5}
.article__fig--square{max-width:480px}
/* Small source files are shown small rather than upscaled. */
.article__fig--half{max-width:480px}
.article__fig--tall{max-width:430px}
/* Two stills side by side, per the copy's paired image slots. */
.article__pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(26px,3vw,40px);
}
.article__pair figure{margin:0}
.article__pair img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.article__pair figcaption{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-on-light);padding-top:12px;
}
@media (max-width:900px){
  .article{grid-column:main-start / main-end}
}
@media (max-width:560px){
  .article__pair{grid-template-columns:1fr}
}

/* The Journal index: one card per pillar. */
.jcards{
  grid-column:main-start / main-end;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4vw,58px) clamp(24px,3vw,46px);
  border-top:1px solid var(--line-light);padding-top:clamp(32px,3.8vw,52px);
}
.jcard{display:flex;flex-direction:column;min-width:0}
.jcard > a:first-child{display:block}
.jcard img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.jcard .kicker{margin-top:20px}
.jcard h2{
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 750;
  font-size:clamp(21px,2.1vw,29px);line-height:1.06;letter-spacing:-.018em;
  color:var(--ink);margin-top:14px;text-wrap:balance;
}
.jcard h2 a{text-decoration:none}
.jcard h2 a:hover{color:var(--accent-deep)}
.jcard p{
  margin-top:16px;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:16.5px;line-height:1.6;
}
.jcard .textlink{align-self:flex-start;margin-top:auto;padding-top:22px;border-bottom:0}
.jcard .textlink span{border-bottom:1px solid currentColor;padding-bottom:.35em}
@media (max-width:860px){
  .jcards{grid-template-columns:1fr}
}

/* Cross links between the pillars, at the foot of each one. */
.jnext{grid-column:main-start / span 8}
.jnext p{
  margin-top:16px;max-width:60ch;color:var(--mute-on-light);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:16.5px;line-height:1.6;
}
.jnext p a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}
.jnext ul{margin-top:18px;border-top:1px solid var(--line-light)}
.jnext li{border-bottom:1px solid var(--line-light)}
.jnext li a{
  display:block;padding:18px 0;text-decoration:none;
  font-family:var(--disp);
  font-variation-settings:'wdth' 106,'wght' 720;
  font-size:clamp(17px,1.35vw,21px);letter-spacing:-.012em;line-height:1.2;
  color:var(--ink);
}
.jnext li a:hover{color:var(--accent-deep)}
@media (max-width:900px){
  .jnext{grid-column:main-start / main-end}
}

/* ============================================================
   WORDPRESS-ONLY ADDITIONS. Nothing above this line differs
   from the static site stylesheet. These rules exist so the
   identical markup renders the same inside WordPress.
   ============================================================ */
body .is-layout-flow > *{margin-block:0}
.wp-site-blocks{padding:0}
.wp-site-blocks > *{margin-block:0}
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}