/* ============================================================
   Jimmy van der Ham - the site.
   Magazine: photography first, square corners, no shadows, flat
   colour fields, headlines large enough to carry a spread.
   Palette is the corrected one - white ground, clean blue, warm
   gold. No framework, so any developer can pick this up.
   ============================================================ */

/* ---------- the typefaces ----------
   The stack named Playfair Display and DM Sans but nothing ever loaded them,
   so the site rendered in whatever the visitor happened to own: Iowan Old
   Style on a Mac, Georgia on Windows, Roboto on Android. Three different
   designs. These are the real ones, self-hosted - no third-party request from
   a page that has a privacy policy, and no render-blocking round trip to
   another origin. Both are variable, so one file covers every weight.
   font-display:swap means text is readable immediately and reflows once. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/fonts/dm-sans-normal-latin.woff2) format('woff2');
  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:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  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:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/fonts/playfair-display-italic-latin.woff2) format('woff2');
  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:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
  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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/playfair-display-normal-latin.woff2) format('woff2');
  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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/playfair-display-normal-latin-ext.woff2) format('woff2');
  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}

/* Any author rule that sets display beats the browser's [hidden] rule, so a
   .btn or a .pick with hidden set stays on screen and the script looks broken
   when the stylesheet is at fault. Say it once, here. */
[hidden]{display:none!important}

:root {
  --paper:#ffffff; --surface:#f4f9ff; --tint:#e8f3ff; --tint-2:#cfe6fb;
  --navy-deep:#0a3f74; --navy:#0f4f8c; --ink:#0a1c30;
  --blue:#0f8ae8; --blue-dim:#9ed2f7;
  /* --blue is 3.61:1 on white: fine for a border or a focus ring (3:1), not
     for small text (4.5:1). --blue-ink is the same hue, darkened until it
     clears 4.5:1 on every light ground the site uses - paper, tint, surface
     and cream. Use --blue for decoration, --blue-ink whenever it is words. */
  --blue-ink:#0c71be;
  --gold:#e0a537; --gold-lift:#ffd06a; --cream:#fdf3e0;
  --mint:#0f9c84; --muted:#54657a; --line:#d9e9f8;
  --display:"Playfair Display","EB Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"DM Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:74rem;
  /* surfaces and form fields */
  --card:#ffffff; --r:12px; --serif:var(--display);
  --field:#9dbfe2; --field-bg:#ffffff;
}
/* The site commits to light. A marketing page that flips to dark on half its
   visitors is two designs to maintain and neither gets the attention. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(17px,.5vw + 15px,19px);line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
@media (pointer:coarse){a.btn,button{min-height:44px}}

.wrap{width:min(var(--wrap),100% - 2.6rem);margin-inline:auto}
.wrap.tight{width:min(46rem,100% - 2.6rem)}
.wrap.mid{width:min(58rem,100% - 2.6rem)}
section{padding-block:clamp(3.2rem,7vw,6rem)}
section.alt{background:var(--tint)}
.stack{display:flex;flex-direction:column;gap:1.15rem}
.stack.tight{gap:.55rem}

.roomshot{margin:0 auto;max-width:34rem}
/* A screenshot of a live call is evidence, not decoration. It is deliberately
   held small and shipped at half resolution: the point is that the room is
   full, which reads at any size - while the people in it did not agree to be
   recognisable on a marketing page. */
.roomshot img{width:100%;height:auto;display:block;background:#0a1c30}
.roomshot figcaption{margin-top:.6rem;font-size:.9rem;color:var(--muted);text-align:center}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(2.5rem,8.4vw,4.8rem)}
h2{font-size:clamp(1.95rem,5.2vw,3.3rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;color:var(--gold)}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--muted);max-width:44ch}
/* a one-sentence lede is a line, not a column - 44ch would break it in two */
.lede.wide{max-width:none;text-wrap:balance}
.kicker{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-ink);display:block
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:.8rem;padding:.5rem 0}
@media (min-width:600px){.nav .wrap{gap:1.4rem}}
.brand{
  font-family:var(--display);font-weight:700;font-size:1.12rem;text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;
  gap:.32em   /* flex eats the whitespace between "Jimmy" and the <i>, so put it back */
}
.brand i{font-style:normal;color:var(--gold)}
.nav .sp{flex:1}
.nav .lk{display:none;gap:1.5rem;font-size:.92rem;font-weight:600}
.nav .lk a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav .lk a:hover,.nav .lk a[aria-current]{color:var(--ink)}
@media (min-width:900px){.nav .lk{display:flex}}
/* 44x44 is the floor for a thumb - the HIG minimum, not a suggestion */
.navtoggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  background:none;cursor:pointer;font-size:1.15rem;flex:0 0 auto}
@media (min-width:900px){.navtoggle{display:none}}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobnav.on{display:block}
.mobnav a{display:flex;align-items:center;min-height:52px;padding:.4rem 0;
  border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.mobnav .btn{margin:1rem 0 1.2rem;width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.96rem;font-weight:800;text-decoration:none;cursor:pointer;
  padding:.9em 1.7em;border:0;color:#1c1403;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--gold-lift) 82%,#ffffff) 0%,
    var(--gold-lift) 52%,
    color-mix(in srgb,var(--gold-lift) 88%,#000000) 100%);
  background-color:var(--gold-lift);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:filter .15s ease,transform .06s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:none;background-image:none;box-shadow:none;color:inherit;
  border:1.5px solid var(--tint-2)}
.btn.ghost:hover{border-color:var(--gold)}
.btn.ondark{color:#1c1403}
.btn.sm{font-size:.88rem;padding:.8em 1.3em}
/* Below 600px the header carries the brand and the menu only. The call to
   action moves inside the menu, where it has room to be one line. Keeping it
   in the bar overflowed a 320px screen by 59px and wrapped to three lines. */
.nav .cta-top{display:none}
@media (min-width:600px){.nav .cta-top{display:inline-flex}}
.btnrow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding-block:clamp(4rem,11vw,8rem)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 28%}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(172deg,rgba(6,28,52,.62) 0%,rgba(6,28,52,.84) 52%,rgba(6,28,52,.95) 100%)}
.hero .wrap{position:relative}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.88);max-width:46ch}
.hero .kicker{color:var(--gold-lift)}
.hero .trust{display:flex;flex-direction:column;gap:.3rem;margin-top:.6rem;
  font-size:.88rem;color:rgba(255,255,255,.8)}
.hero .trust b{color:#fff}
@media (min-width:760px){.hero .trust{flex-direction:row;gap:1.8rem;flex-wrap:wrap}}

/* ---------- notice strip ---------- */
.notice{background:var(--navy-deep);color:#fff}
.notice .wrap{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center;padding-block:1.15rem}
.notice .kicker{color:var(--gold-lift)}
.notice .t{font-weight:700;font-size:1.02rem}
.notice .b{font-size:.9rem;color:rgba(255,255,255,.72)}
.notice .sp{flex:1}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:720px){.grid.two{grid-template-columns:1fr 1fr}}
@media (min-width:920px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--paper)}
.card .pic{aspect-ratio:4/3;background-size:cover;background-position:center}
.card .body{padding:1.2rem 0 0;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .body .btn{align-self:flex-start;margin-top:auto;padding-top:.7em;padding-bottom:.7em}
section.alt .card{background:transparent}

/* ---------- split ---------- */
.split{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
/* Two lists of different length read as one comparison only if they start on
   the same line. Centred, the shorter one floats halfway down the taller. */
.split.tops{align-items:start}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;gap:3.4rem}
  .split.wide-left{grid-template-columns:1.15fr .85fr}}
.split .pic{aspect-ratio:4/3;background-size:cover;background-position:center}

.plain{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--muted)}
.plain li{padding-left:1.1rem;position:relative}
.plain li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;
  background:var(--gold);border-radius:50%}

/* ---------- list of promises ---------- */
.promises{display:grid;gap:1.4rem 2.4rem;grid-template-columns:1fr}
@media (min-width:720px){.promises{grid-template-columns:1fr 1fr}}
.promise{border-top:2px solid var(--ink);padding-top:.9rem}
.promise .t{font-weight:800;font-size:1.02rem}
.promise .b{color:var(--muted);font-size:.95rem;margin-top:.25rem}

/* ---------- stories ---------- */
.stories{display:grid;gap:2rem 1.8rem;grid-template-columns:1fr;align-items:start}
/* align-items:start, not stretch. These are real quotes of real length - one
   runs eleven lines and its neighbour runs three - and stretching every card
   to the tallest in the row left the short ones with a hole above the name.
   Each card is now as tall as what it says. */
/* Above this width the wall stops being a grid. Twenty-one quotes of wildly
   different length in a three-column grid means every row is as tall as its
   longest card, so the short ones trail whitespace and the portraits in a row
   sit at unrelated heights - which is what made the page look broken. Columns
   pack each card against the one above it, so the variance stops being
   visible at all. The clamp caps the longest quotes; this absorbs the rest.
   `.stories .story` rather than `.story` because a later rule sets margin:0
   and would otherwise win on equal specificity. */
@media (min-width:860px){
  .stories{display:block;column-count:3;column-gap:1.8rem}
  .stories .story{break-inside:avoid;margin-bottom:2rem}
}
.story{border-top:2px solid var(--gold);padding-top:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.story q{font-family:var(--display);font-size:1.12rem;line-height:1.45;quotes:"\201C" "\201D"}
/* Real quotes run from one line to eleven. Clamped to six, the column keeps a
   rhythm; the ones that were clipped get a control, the short ones get none
   and stay exactly as they are. */
.story q.clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden}
/* The visible text is one line, but the tap target has to be a target. Height
   comes to 44px and the negative left margin keeps the label optically flush
   with the quote above it rather than indented by its own padding. */
.story .more{align-self:flex-start;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--blue-ink);text-decoration:underline;
  text-underline-offset:3px;
  min-height:44px;padding:.1rem .6rem;margin-left:-.6rem;text-align:left}
.story .more:hover{color:var(--navy)}
.story .who{font-weight:800;font-size:.95rem}
.story .role{font-size:.85rem;color:var(--muted)}

/* ---------- closing band ---------- */
.band{position:relative;overflow:hidden;color:#fff}
.band .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.band .scrim{position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(6,28,52,.94) 0%,rgba(6,28,52,.8) 58%,rgba(6,28,52,.5) 100%)}
.band .wrap{position:relative;padding-block:clamp(3rem,7vw,5rem)}
.band h2{color:#fff}
.band .lede{color:rgba(255,255,255,.86)}
.band .kicker{color:var(--gold-lift)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:3rem;font-size:.92rem}
footer a{color:rgba(255,255,255,.72);text-decoration:none}
footer a:hover{color:#fff}
.fgrid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:720px){.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}}
footer .fb{font-family:var(--display);font-size:1.2rem;color:#fff}
footer .fb i{font-style:normal;color:var(--gold-lift)}
footer h3{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer .base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.84rem;color:rgba(255,255,255,.5)}

.draft{background:var(--gold);color:#241a02;text-align:center;font-size:.7rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.4rem 1rem}

/* ---------- portraits on the stories ---------- */
.story{margin:0}
.story .by{display:flex;align-items:center;gap:.9rem;margin-top:auto;padding-top:.4rem}
/* height:100% made every card fill its grid row, so a three-line quote sat in
   a card sized for an eleven-line one and left a hole above the name. These
   are real quotes of real length; each card is as tall as what it says. */
.story{display:flex;flex-direction:column}
.story q{flex:1}
.face{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--tint)}
@media (min-width:860px){.face{width:80px;height:80px}}
.story .who{display:block;font-weight:800;font-size:.95rem}
.story .role{display:block;font-size:.85rem;color:var(--muted)}

/* ---------- three-up promises ---------- */
@media (min-width:920px){.promises.three{grid-template-columns:repeat(3,1fr)}}

/* ---------- captioned photo ---------- */
.shot{margin:0;display:flex;flex-direction:column;gap:.6rem}
.shot .pic{aspect-ratio:4/3;background-size:cover;background-position:center}
.shot .pic.tall{aspect-ratio:4/5}
.shot figcaption{font-size:.85rem;color:var(--muted);line-height:1.45}
.shot.wide{max-width:64rem;margin-inline:auto;width:100%}
.shot.wide .pic{aspect-ratio:16/9;background-position:center 30%}
@media (min-width:860px){.shot.wide .pic{aspect-ratio:2.4/1}}
.shot.wide figcaption{text-align:center}


/* ---------- pull quote ---------- */
.pull{
  margin:.4rem 0 0;padding:1.2rem 0 0;border-top:2px solid var(--gold);
  font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.4
}
.pull::before{content:"\201C"}
.pull::after{content:"\201D"}

/* ---------- questions ---------- */
.faq{display:grid;gap:0}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.1rem 2.4rem 1.1rem 0;min-height:44px;
  font-weight:700;font-size:1.02rem;line-height:1.4;display:flex;align-items:center
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:.45rem;top:1.5rem;width:.6rem;height:.6rem;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s ease
}
.q[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.q summary:hover{color:var(--blue-ink)}
.q .a{padding:0 2.4rem 1.2rem 0;color:var(--muted)}


/* ============================================================
   Patterns - its own block, not three more paragraphs
   ============================================================ */
.patterns{background:var(--navy-deep);color:#fff}
.patterns h2{color:#fff}
.patterns .lede{color:rgba(255,255,255,.72)}
/* Heading and lede sit side by side on a wide screen so the row is used, and
   the headline gets a proper measure instead of wrapping to three lines in a
   narrow column with two thirds of the width empty beside it. */
.phead{display:grid;gap:.7rem;grid-template-columns:1fr;margin-bottom:1.8rem}
@media (min-width:900px){
  .phead{grid-template-columns:1.05fr 1fr;gap:3.2rem;align-items:end;margin-bottom:2.4rem}
  .patterns h2{max-width:22ch}   /* breaks after "patterns." not mid-phrase */
  .phead .lede{max-width:38ch;padding-bottom:.35rem}
}
.pgrid{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:860px){.pgrid{grid-template-columns:repeat(3,1fr);gap:0 2.6rem}}
.pcard{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.22)}
@media (min-width:860px){.pcard{padding:1.7rem 0 0}}
.pcard .n{
  display:block;font-family:var(--display);font-size:2rem;line-height:1;
  color:var(--gold-lift);margin-bottom:.5rem
}
.pcard h3{color:#fff;font-size:1.22rem;margin-bottom:.35rem}
.pcard p{color:rgba(255,255,255,.74);font-size:.96rem}

/* ============================================================
   Gallery - a gallery, not a pile
   ============================================================ */
/* Nine photos, three columns, everywhere - exactly three full rows with no
   stranded tile and no gaps. The earlier version mixed a 2x2 feature into a
   4-column grid, which left the ninth photo alone in an empty row and made the
   row heights disagree with the square tiles.
   The image is positioned absolutely: a percentage height on an <img> inside a
   button only resolves when the parent has a definite height, which a grid item
   does not always have - that is why they were letterboxing. */
.gallery{display:grid;gap:.4rem;grid-template-columns:repeat(3,1fr)}
@media (min-width:760px){.gallery{gap:.6rem}}
.gtile{
  padding:0;border:0;margin:0;background:var(--tint-2);cursor:zoom-in;
  aspect-ratio:1;position:relative;overflow:hidden;display:block;line-height:0
}
.gtile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .35s ease
}
.gtile:hover img{transform:scale(1.05)}
.gtile::after{content:"";position:absolute;inset:0;background:rgba(6,28,52,0);transition:background .25s ease}
.gtile:hover::after{background:rgba(6,28,52,.16)}
.hint{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.taphint{text-align:center}
@media (min-width:700px){.taphint{display:none}}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(4,16,30,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out}
.lightbox button{
  position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  width:52px;height:52px;font-size:1.9rem;line-height:1;display:grid;place-items:center
}
.lightbox button:hover{background:rgba(255,255,255,.2)}
.lb-close{top:.8rem;right:.8rem;font-size:2.2rem}
.lb-prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.5rem;top:50%;transform:translateY(-50%)}
@media (min-width:760px){.lb-prev{left:1.4rem}.lb-next{right:1.4rem}}

/* two captioned photos, stacked, beside the lineage text */
.shots{display:grid;gap:1.2rem}
/* Side by side at every width above a phone. Stacked they made this column
   roughly twice the height of the text beside it, which is what made the
   section feel endless. */
@media (min-width:520px){.shots{grid-template-columns:1fr 1fr;gap:1rem}}
/* The photos are evidence beside the text, not a column of their own: top
   aligned with the heading, and narrower than the prose they support. */
@media (min-width:860px){
  .split.lineage{grid-template-columns:.85fr 1.15fr;align-items:start}
}
.shots .shot .pic.tall{aspect-ratio:4/5}
.shots .shot figcaption{font-size:.8rem}

/* ---------- the two evenings ---------- */
.nights{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:760px){.nights{grid-template-columns:1fr 1fr}}
.night{margin:0;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.night .pic{aspect-ratio:16/9;background-size:cover;background-position:center}
.night .body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.night h3{margin:0;font-size:1.22rem;line-height:1.25}
.night .when{margin:0;font-weight:700;color:var(--ink);line-height:1.4}
.night .when span{display:block;font-weight:400;color:var(--muted);font-size:.88rem}

/* ---------- a name without a portrait ---------- */
/* Not every person who gave a quote gave a photo. An initial says "no picture"
   honestly; a stock face would say something untrue about who they are. */
.face.mono{display:grid;place-items:center;background:var(--navy);
  color:var(--gold);font-family:var(--serif);font-size:1.75rem;line-height:1}

/* ---------- signup form ---------- */
/* Ported from the funnel page that was already designed and signed off. Same
   field set, same uppercase labels, same success state - the Magazine palette
   supplies the colours instead of the old one. */
.formcard{
  background:var(--surface);border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.3rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1rem;width:100%
}
.fields{display:grid;gap:.85rem;grid-template-columns:1fr}
@media (min-width:560px){.fields.two{grid-template-columns:1fr 1fr}}
.f{display:flex;flex-direction:column;gap:.3rem}
.f label{font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.f label .opt{text-transform:none;letter-spacing:0;font-weight:600}
.f input,.f select{
  font:inherit;font-size:1rem;padding:.75em .85em;width:100%;min-height:48px;
  border:1.5px solid var(--field);border-radius:.5rem;
  background:var(--paper);color:var(--ink)
}
.f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6rem}
.f input:focus-visible,.f select:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;
  color:var(--muted);line-height:1.5}
.consent input{margin-top:.2rem;width:1.15rem;height:1.15rem;flex:0 0 auto;
  accent-color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin:0;font-size:.8rem;color:var(--muted)}
.formmsg{margin:0;font-size:.95rem;font-weight:700}
.formmsg.ok{color:var(--mint)}
.formmsg.bad{color:#a4282c}
.btn.full{width:100%;justify-content:center;text-align:center}

.done{display:none;text-align:center;gap:.7rem;flex-direction:column;
  align-items:center;padding:1rem 0}
.done.on{display:flex}
.done h3{margin:0}
.done .tick{width:3.2rem;height:3.2rem;border-radius:50%;background:var(--mint);
  color:#fff;display:grid;place-items:center;font-size:1.6rem}
.formcard.sent .fields,.formcard.sent .consent,
.formcard.sent .btn,.formcard.sent .formnote{display:none}

/* ---------- certifications ---------- */
.certs{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;grid-template-columns:1fr;width:100%}
@media (min-width:640px){.certs{grid-template-columns:1fr 1fr}}
.certs li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1rem;font-weight:700;display:flex;align-items:center;gap:.6rem}
.certs li::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gold);flex:0 0 8px}

/* ---------- legal pages ---------- */
.legal h1{margin:0}
.legal .updated{margin:0;font-size:.85rem;color:var(--muted)}
.legal .toc{width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.3rem}
.legal .toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.95rem}
.legal .toc a{color:var(--blue-ink)}
.clause{width:100%;padding:0}
.clause h2{font-size:1.18rem;margin:1.6rem 0 .5rem;scroll-margin-top:5rem}
.clause p{margin:0 0 .7rem;color:var(--muted)}

/* ---------- clickable session card ---------- */
/* One real link, stretched over the card. Wrapping the whole card in an <a>
   would make the text unselectable and read the entire card out as the link. */
.night{position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}
.night:has(.stretch:hover),.night:has(.stretch:focus-visible){
  border-color:var(--blue);box-shadow:0 6px 22px rgba(10,28,48,.10);transform:translateY(-2px)}
.night h3 a.stretch{color:inherit;text-decoration:none}
.night h3 a.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.night h3 a.stretch:focus-visible{outline:none}
.night:has(.stretch:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.night .go{margin-top:.35rem;font-weight:700;font-size:.92rem;color:var(--navy)}
.night:has(.stretch:hover) .go{color:var(--blue-ink)}

/* the reader's own time, added by script only when it differs */
.yourtime{display:block;font-weight:400;font-size:.85rem;color:var(--muted);margin-top:.15rem}

/* ---------- 1 - 2 - 3 ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:1fr;width:100%}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem}}
.step{display:flex;gap:.9rem;align-items:flex-start}
.step .sn{flex:0 0 2.4rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--navy);color:var(--gold-lift);font-family:var(--serif);font-size:1.15rem;
  display:grid;place-items:center;line-height:1}
.step .t{font-weight:700;margin-bottom:.25rem}
.step .b{color:var(--muted);font-size:.96rem;line-height:1.55}

/* ---------- the months after the next two ---------- */
.later{width:100%;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:1rem}
.later h3{margin:0;font-size:1.25rem}
.dates{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:1fr}
@media (min-width:560px){.dates{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.dates{grid-template-columns:repeat(3,1fr)}}
.dates li{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:.6rem .8rem;font-size:.94rem}
.dates .d{font-weight:700;color:var(--ink)}
.dates .t{color:var(--muted);font-size:.86rem}
.dates .yourtime{flex-basis:100%;margin-top:0}

/* ---------- recordings ---------- */
.replays{display:grid;gap:1.6rem;grid-template-columns:1fr;width:100%}
@media (min-width:860px){.replays{grid-template-columns:1fr 1fr}}
.replay{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.replay .body{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.replay h3{margin:0;font-size:1.18rem;line-height:1.3}
.clipwrap{background:#000;border-radius:8px;overflow:hidden;margin:.3rem 0}
.clip{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* the email gate on a recording */
.unlock{display:flex;flex-direction:column;gap:.55rem;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:.9rem}
.unlock .lbl{font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.unlock .inline{display:flex;gap:.5rem;flex-wrap:wrap}
.unlock input[type=email]{flex:1 1 12rem;font:inherit;padding:.65rem .75rem;min-height:48px;
  border:1.5px solid var(--field);border-radius:8px;background:var(--paper);color:var(--ink)}
.unlock input[type=email]:focus-visible{outline:2px solid var(--blue);outline-offset:1px;
  border-color:transparent}
.unlock .btn.sm{min-height:48px}
.unlock .consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.84rem;
  color:var(--muted);line-height:1.45}
.unlock .consent input{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.2rem;
  accent-color:var(--navy)}
.unlock .msg{margin:0;font-size:.9rem;font-weight:700;min-height:0}
.unlock .msg.ok{color:var(--mint)}
.unlock .msg.bad{color:#a4282c}

/* the cadence line under the upcoming cards */
.cadence{margin:0;font-weight:700;color:var(--navy)}

/* ---------- typography: no word left alone ---------- */
/* nw() in build.py ties the last two words with a non-breaking space, which
   works everywhere. These two give the browser the wider hint where it
   supports it: balance for short headings, pretty for running prose. */
h1, h2, h3, .lede, .kicker { text-wrap: balance; }
p, .b, .story q, .clause p, blockquote { text-wrap: pretty; }

/* ---------- hero with a portrait beside the words ---------- */
/* Words on a solid ground, not over a scrim: better contrast, and it does not
   depend on a photo wide enough to fill 1440px, which we do not have. */
.hero.portrait{
  background:linear-gradient(160deg,var(--navy-deep) 0%,#0c3c6b 45%,#0a2f57 100%);
  padding-block:clamp(2.4rem,5.5vw,4rem)
}
.hero.portrait .split{align-items:center;gap:2rem}
@media (min-width:860px){.hero.portrait .split{grid-template-columns:1.25fr .75fr;gap:3rem}}
.hero.portrait h1{max-width:18ch}
/* The evening happens on a screen, so the hero shows a screen. Drawn here
   rather than baked into the image: one picture serves every width, and the
   frame stays crisp where a screenshot of a laptop would not. Held small on
   purpose - it is a proof, not the subject. */
.deviceshot{margin:0;max-width:34rem;justify-self:center;width:100%;position:relative;
  padding:2.4rem 2.2rem}   /* the room layer lives in this padding, not outside the box */
/* The room the evening happens in, sitting behind the screen it happens on.
   Both are real: the grid is the same softened gallery used further down the
   page. Dimmed and feathered so it reads as depth, not as a second picture
   competing with the first. */
.roomback{
  position:absolute;inset:0;border-radius:.5rem;
  background-size:cover;background-position:center;opacity:.42;
  filter:saturate(.7);
  /* feathered well inside its own box, or the rectangle shows */
  -webkit-mask-image:radial-gradient(farthest-side at 50% 46%,#000 38%,rgba(0,0,0,.45) 72%,transparent 100%);
          mask-image:radial-gradient(farthest-side at 50% 46%,#000 38%,rgba(0,0,0,.45) 72%,transparent 100%)}
/* The padding is what the base bleeds back into. Without it the base is wider
   than its own parent and the figure overflows by a dozen pixels at every
   width - invisible to the eye, but it is still the page scrolling sideways. */
.laptop{filter:drop-shadow(0 22px 50px rgba(2,14,28,.6));padding-inline:5%;
  position:relative;max-width:26rem;margin-inline:auto}
.laptop .screen{
  background:#0a1626;border:.45rem solid #101f33;border-radius:.6rem .6rem 0 0;
  border-bottom:0;overflow:hidden;line-height:0}
.laptop .screen img{width:100%;height:auto;display:block}
/* the lid sits on a base that is a little wider, the way a laptop does */
.laptop .base{
  height:.7rem;margin:0 -5%;border-radius:0 0 .7rem .7rem;
  background:linear-gradient(#1b2d45,#0d1a2b 60%,#16283d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.laptop .base::after{
  content:"";display:block;width:16%;height:.18rem;margin:.16rem auto 0;
  border-radius:0 0 .2rem .2rem;background:rgba(255,255,255,.16)}
@media (max-width:859px){.deviceshot{max-width:27rem;margin-inline:auto;padding:1.6rem 1.4rem}
  .laptop{max-width:21rem}.roomback{opacity:.34}}

.portraitshot{margin:0}
.portraitshot .pic{
  aspect-ratio:3/4;border-radius:var(--r);background-size:cover;
  box-shadow:0 18px 48px rgba(3,18,36,.45);
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px
}
@media (max-width:859px){
  .hero.portrait .split{grid-template-columns:1fr}
  .portraitshot{max-width:16rem;margin-inline:auto;width:100%}
  .portraitshot .pic{aspect-ratio:1}
}

/* ---------- photographic hero ---------- */
/* The blanket scrim above exists to make any photo safe to put words on. This
   one is a real photograph worth seeing, so the darkening is weighted to the
   left where the headline sits and lifts off the right where the subject and
   the light are. */
.hero.wide{padding-block:clamp(3.4rem,9vw,7rem)}
.hero.wide .bg{background-image:var(--hero)}
.hero.wide .scrim{
  background:
    linear-gradient(97deg,
      rgba(5,24,46,.90) 0%,
      rgba(5,24,46,.78) 32%,
      rgba(5,24,46,.44) 56%,
      rgba(5,24,46,.20) 78%,
      rgba(5,24,46,.26) 100%),
    linear-gradient(to top, rgba(5,24,46,.45) 0%, rgba(5,24,46,0) 34%)
}
/* A light hero. The photograph is warm and bright, so the words cannot be
   white on it - they are ink on a white veil that thins out to the right,
   leaving the laptop clear. Same machinery as the dark one, opposite values. */
.hero.wide.light{color:var(--ink)}
.hero.wide.light .scrim{
  background:
    linear-gradient(97deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 30%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,.12) 68%,
      rgba(255,255,255,0) 82%),
    linear-gradient(to top, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%)
}
.hero.wide.light h1,.hero.wide.light .lede{text-shadow:none}
.hero.wide.light h1{color:var(--ink)}
.hero.wide.light .lede{color:var(--muted)}
/* --blue-ink clears 4.5:1 on white, but the veil here is 93% white over a
   photograph, which measured 4.28:1. The navy has the headroom. */
.hero.wide.light .kicker{color:var(--navy)}
.hero.wide.light .trust{color:var(--muted)}
.hero.wide.light .trust b{color:var(--ink)}
.hero.wide.light .btn.ghost{color:var(--ink);border-color:rgba(10,28,48,.30)}
.hero.wide.light .btn.ghost:hover{border-color:var(--ink)}

.hero.wide h1{max-width:15ch;text-shadow:0 2px 18px rgba(4,18,36,.45)}
.hero.wide .lede{max-width:40ch;text-shadow:0 1px 12px rgba(4,18,36,.5)}

/* On a phone this photo cannot work behind the words. It is 2.36:1, and cover
   on a 393px viewport shows about a sixth of its width - so you get either the
   man or the street, never the picture, and his face lands under a paragraph.
   Below the breakpoint the words get a solid ground and the photograph gets a
   band of its own underneath, where it is actually legible. */
@media (max-width:859px){
  .hero.wide{
    background:linear-gradient(160deg,var(--navy-deep) 0%,#0c3c6b 55%,#0a2f57 100%);
    padding-top:1rem;padding-bottom:1.6rem
  }
  .hero.wide.light{background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 60%)}
  .hero.wide.light .bg{background-position:62% 42%}
  .hero.wide.light .scrim{
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%,
      rgba(244,249,255,.85) 86%, var(--surface) 100%)}
  .hero.wide .bg{
    bottom:auto;top:0;height:32vh;max-height:280px;min-height:168px;
    background-position:58% 24%;background-size:cover
  }
  .hero.wide .scrim{
    bottom:auto;top:0;height:32vh;max-height:280px;min-height:168px;
    background:linear-gradient(to bottom,
      rgba(10,47,87,.30) 0%, rgba(10,47,87,.10) 45%, rgba(10,47,87,.82) 82%,
      rgba(10,47,87,1) 100%)
  }
  .hero.wide .wrap{padding-top:calc(32vh + .4rem)}
  .hero.wide h1,.hero.wide .lede{max-width:none;text-shadow:none}
  .hero.wide h1{font-size:clamp(2.1rem,9.2vw,2.9rem)}
  .hero.wide .lede{font-size:1rem}
  /* the proof points are the least urgent thing here - let them fall below */
  .hero.wide .trust{margin-top:.8rem;font-size:.82rem;gap:.15rem}
  .hero.wide .wrap.stack{gap:.55rem}
  .hero.wide .btnrow{gap:.5rem;margin-top:.2rem}
}
@media (max-width:859px) and (max-height:700px){
  .hero.wide .bg,.hero.wide .scrim{height:26vh;min-height:150px}
  .hero.wide .wrap{padding-top:calc(26vh + .4rem)}
}

/* a smaller file for small screens - no phone needs the 2400px one, and this
   way exactly one of the two is ever downloaded */
@media (max-width:860px){
  .hero.wide .bg{background-image:var(--hero-sm)}
}

/* ---------- a button is never wider than its column ---------- */
/* The contact button holds an email address, which is one unbreakable word.
   At 320px it pushed past its column and ate the side gutter. */
.btn{max-width:100%}
#contact .btn{overflow-wrap:anywhere;text-align:center;line-height:1.3}
@media (max-width:420px){
  #contact .btn{width:100%;padding-inline:1rem}
}

/* the three promises under the monthly rhythm */
.loopbits{margin-top:.4rem}
.later .cadence{margin-bottom:.2rem}

/* ---------- the story form ---------- */
/* Five steps, one screen each. Built for a phone held one-handed on the way
   home: nothing is more than one column, every target clears 44px, and the
   only question that insists on an answer is the last one. */
.storywrap{max-width:34rem;margin-inline:auto;padding:1.1rem 1.1rem 5rem;min-height:70vh}
@media (min-width:640px){.storywrap{padding:2rem 1.5rem 5rem}}
.stmsg{max-width:32rem;margin:3.5rem auto;padding:0 1.1rem;text-align:center}
.stmsg h1{font-size:1.6rem;margin:.6rem 0 .4rem}
.tickbig{width:4rem;height:4rem;margin:0 auto;border-radius:50%;background:var(--mint);
  color:#fff;display:grid;place-items:center;font-size:2rem}

/* progress */
.stbar{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.stprog{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.stprog span{display:block;height:100%;background:var(--gold);
  transition:width .3s ease;width:0}
.stcount{font-size:.76rem;font-weight:800;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase;white-space:nowrap}

.stp h1{font-size:clamp(1.65rem,6.4vw,2.3rem);margin:.2rem 0 .5rem}
.stp h2{font-size:clamp(1.3rem,5.2vw,1.65rem);margin:0 0 .35rem}
.stp .hint{margin:0 0 1.2rem;font-size:.92rem;line-height:1.55}
.stp .lede{margin-bottom:1.6rem}

/* stars */
.rates{display:flex;flex-direction:column;gap:1.05rem}
.rate{display:flex;flex-direction:column;gap:.2rem}
.rl{font-size:.95rem;font-weight:700;color:var(--ink)}
.rs{display:flex;gap:.1rem}
.rs button{background:none;border:0;padding:.1rem;cursor:pointer;font-size:2.15rem;
  line-height:1;color:#dbe6f1;min-width:48px;min-height:48px;
  transition:color .12s,transform .12s}
.rs button.on{color:var(--gold)}
.rs button:active{transform:scale(.88)}
.rs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}

.yesno{margin-top:1.4rem;display:flex;flex-direction:column;gap:.45rem}
.yn{display:flex;gap:.5rem}
.yn button{flex:1;font:inherit;font-weight:700;min-height:52px;padding:.5rem 1rem;
  border:1.5px solid var(--field);border-radius:12px;background:var(--paper);
  color:var(--ink);cursor:pointer}
.yn button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* the big choice cards: write / record / both, and yes / no */
.picks{display:grid;gap:.6rem;grid-template-columns:1fr;margin-bottom:1.3rem}
@media (min-width:460px){.picks{grid-template-columns:repeat(3,1fr)}
  .picks.two-up{grid-template-columns:1fr 1fr}}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:.95rem 1rem;border:1.5px solid var(--field);border-radius:14px;
  background:var(--paper);cursor:pointer;text-align:left;font:inherit;
  min-height:76px;transition:border-color .15s,background .15s,box-shadow .15s}
.pick:hover{border-color:var(--blue)}
.pick.on{border-color:var(--navy);background:var(--surface);
  box-shadow:0 0 0 2px var(--navy) inset}
.pick .pi{font-size:1.2rem;line-height:1;color:var(--navy)}
.pick.on .pi{color:var(--gold)}
.pick .pt{font-weight:800;font-size:1rem;color:var(--ink)}
.pick .ps{font-size:.82rem;color:var(--muted);line-height:1.35}
.pick:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.needpick{margin:.6rem 0 0;font-weight:700;color:#a4282c;font-size:.92rem}

/* fields */
.fl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:1rem 0 .3rem}
.storywrap input[type=text],.storywrap input[type=number],.storywrap textarea{
  font:inherit;width:100%;padding:.8rem .9rem;min-height:52px;
  border:1.5px solid var(--field);border-radius:12px;
  background:var(--paper);color:var(--ink)}
.storywrap textarea{min-height:8rem;resize:vertical;line-height:1.6}
.storywrap input:focus-visible,.storywrap textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.two{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media (min-width:520px){.two{grid-template-columns:1fr 1fr}}

.prompts{margin:0 0 .6rem}
.prompts summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--navy);
  padding:.5rem 0;min-height:44px;display:flex;align-items:center}
.prompts ul{margin:.2rem 0 .6rem;padding-left:1.1rem;color:var(--muted);
  font-size:.93rem;display:grid;gap:.35rem}

/* choosing a file, made to look like something you can tap */
.drop{display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:.8rem 1rem;border:1.5px dashed var(--field);
  border-radius:12px;background:var(--surface);color:var(--navy);
  font-weight:700;font-size:.92rem;cursor:pointer;text-align:center;margin-top:.3rem}
.drop:hover{border-color:var(--blue);color:var(--blue-ink)}
.prev{max-width:7.5rem;border-radius:50%;aspect-ratio:1;object-fit:cover;
  margin-top:.8rem;border:3px solid var(--line);display:block}

/* video */
.vwrap{background:#08131f;border-radius:14px;overflow:hidden;margin-bottom:.4rem}
.vwrap video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#08131f}
@media (min-width:560px){.vwrap video{aspect-ratio:16/9}}
.vbar{display:flex;gap:.8rem;align-items:center;padding:.7rem .8rem;color:#cfe6fb;
  font-size:.86rem}
.recbtn{width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:none;
  cursor:pointer;display:grid;place-items:center;padding:0;flex:0 0 48px}
.recbtn span{width:22px;height:22px;border-radius:50%;background:#e2484d;
  transition:border-radius .2s,width .2s,height .2s}
.recbtn.rec span{border-radius:4px;width:17px;height:17px}

/* navigation */
.stnav{display:flex;align-items:center;gap:.8rem;margin-top:2rem}
.stnav .btn{flex:1;min-height:54px;justify-content:center}
.stnav .linky{flex:0 0 auto}
.saved{margin:.7rem 0 0;font-size:.82rem;color:var(--muted);min-height:1.2em;text-align:center}
.linky{background:none;border:0;color:var(--muted);text-decoration:underline;
  cursor:pointer;font:inherit;font-size:.86rem;padding:.6rem;min-height:44px}

/* ---------- the story form on a wide screen ---------- */
/* It was built for a phone and left as a narrow column adrift in the middle of
   a desktop. Above the breakpoint it becomes a card on a tinted ground, with a
   measure wide enough that a two-line sentence does not break into three. */
@media (min-width:860px){
  body:has(.storywrap){background:var(--surface)}
  .storywrap{
    max-width:44rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 1px 2px rgba(10,28,48,.04),0 14px 40px rgba(10,28,48,.07);
    padding:2.6rem 3rem 3rem;
    margin-block:3rem 4rem;
    min-height:0
  }
  .storywrap .lede,.storywrap .hint{max-width:46ch}
  .stp h1{font-size:2.5rem}
  .stp h2{font-size:1.8rem}
  /* the intro is one short sentence and a button - it should not sit in the
     top corner of a tall empty card */
  .stp[data-step="0"]{padding:1.5rem 0 0}
  /* .btn.full is a phone rule - a button the width of a desk is not a target,
     it is a banner */
  .storywrap .btn.full{width:auto;min-width:12rem;align-self:flex-start}
  .stmsg{margin:2rem auto}
}
@media (min-width:860px){
  .stnav{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
  .stnav .btn{flex:0 0 auto;min-width:11rem}
  .stnav .linky{margin-right:auto}
}

/* ---------- photo strip between sections ---------- */
/* A full-bleed photograph that separates one part of the argument from the
   next. Height is a clamp rather than an aspect-ratio: these are phone photos
   in three different shapes, and a fixed band keeps the rhythm of the page
   even when the source is 4:3 in one place and 16:9 in another. object-fit
   does the cropping, object-position picks which part survives it. */
.strip{position:relative;margin:0;overflow:hidden;background:var(--navy-deep)}
.strip img{
  display:block;width:100%;
  height:clamp(190px,30vw,400px);
  object-fit:cover
}
.strip figcaption{
  position:absolute;inset:auto 0 0 0;pointer-events:none;
  padding:2.6rem clamp(1rem,5vw,2.2rem) .9rem;
  background:linear-gradient(to top,rgba(5,24,46,.78) 0%,rgba(5,24,46,.34) 55%,rgba(5,24,46,0) 100%)
}
.strip .kicker{color:var(--gold-lift);text-shadow:0 1px 10px rgba(4,18,36,.6)}
/* The wrap's own max-width does not apply here - the caption is positioned
   against the full-bleed figure - so it is indented by hand to line up with
   the text above it. Below the wrap width that calc goes negative and max()
   falls back to the plain gutter, so this needs no media query. */
.strip figcaption{padding-left:max(clamp(1rem,5vw,2.2rem),calc((100vw - var(--wrap)) / 2))}