/* The page's tokens, reset, buttons, the scroll cue and arrows, the scene scaffolding and the shared type. Loaded after fonts.css and replicas.css. The header height token --hh is defined in header.css. */
:root{
  --bg:#FCFBF8; --white:#FFFFFF; --soft:#F5F3EE; --line:#E8E4DC; --line2:#DCD7CD;
  --ink:#14161A; --ink2:#2A2D33; --text:#3B3E45; --grey:#6B6F78; --faint:#9A9DA4; --pale:#C2C4C9;
  --red:#C8102E; --red-d:#A50D26; --hl:rgba(200,16,46,.13); --blush:#FBEDEF;
  --brand:#23395B;
  --disp:"Playfair Display","Playfair Display Fallback",Georgia,"Times New Roman",serif;
  --sans:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --m:max(48px,calc((100vw - 1344px) / 2 + 48px),env(safe-area-inset-left),env(safe-area-inset-right));
  --e:cubic-bezier(.2,.7,.2,1);
  --sh:0 1px 2px rgba(20,22,26,.04),0 12px 28px rgba(20,22,26,.06),0 40px 80px rgba(20,22,26,.08);
}
@media (max-width:767px){:root{--m:max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
h1,h2,h3,.disp,.num{font-variant-numeric:lining-nums}
.wrap{padding:0 var(--m)}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:4px;background:var(--red);color:#fff;font:600 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:background .18s var(--e)}
.btn:hover{background:var(--red-d)}
.btn.o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.o:hover{background:var(--ink);color:#fff}
.tl{font:500 16px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .18s var(--e)}
.tl:hover{color:var(--red)}

/* keep-scrolling cue (words and an arrow that bounce together) and arrows */
.cue{all:unset;box-sizing:border-box;position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));margin:0 auto;width:max-content;max-width:90vw;z-index:55;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden}
.cue .cb{display:flex;flex-direction:column;align-items:center;padding:7px 16px 2px;border-radius:4px;background:rgba(252,251,248,.9)}
.cue .cw{font:600 14.5px/1.3 var(--sans);letter-spacing:.005em}
.cue:hover{color:var(--red)}
.cue.lft{left:var(--cm,96px);right:auto;margin:0}
.cue svg,.scue svg{width:26px;height:26px;flex:none}
.cue.on .cb,.scue svg{animation:bobBig 1.2s ease-in-out infinite}
@keyframes bobBig{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.scue{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;margin:34px auto 0;cursor:pointer;color:var(--ink);font:600 15px/1.3 var(--sans);text-align:center}
.scue:hover{color:var(--red)}
.scue:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.js:not(.go) .scue{opacity:0}
.hero-q{display:none}
.navs{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:55;display:flex;flex-direction:column;gap:8px}
.nb{all:unset;box-sizing:border-box;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(20,22,26,.08);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s var(--e),box-shadow .18s var(--e),opacity .2s}
.nb:hover{color:var(--red);box-shadow:0 0 0 1px var(--red),0 8px 20px rgba(20,22,26,.1)}
.nb[disabled]{opacity:.35;cursor:default;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cue .cb,.scue svg{animation:none}}
@media (max-width:959px){.cue,.navs{display:none}}

/* Until `go` the page is a whole page, and only what the OPENING animates is held back (opacity 0; opening.css fades it in on its own if `go` is late): the header, the claim and the
   rest of the hero copy, the independence line, the showcase tabs, caption and label, the scroll hint. Everything below the opening shows as the server drew it, so a reader who scrolls early never meets an empty section: the .rv blocks, the
   why and recommendation words, and the copy of each scene, of which only the last block shows (the step the page rests on, the one that goes with the picture; the others sit in
   the same grid cell and would print over it). When `go` comes the motion takes each section over from there (a section already on screen is left at its end state; one below the
   screen is put to its start state while it is out of sight). Nothing here is on a timer: if `go` never comes, the start deadline in js-class.js takes the `js` class off and the
   still page shows (the limits are in motion/timings.js, LIMITS). A browser without :has() keeps every scene's copy hidden until `go`. */
.js:not(.go) .rh,.js:not(.go) .hero-copy>*,.js:not(.go) .hero-q,.js:not(.go) #shwTabs,.js:not(.go) #shwCap,.js:not(.go) #shwFor,.js:not(.go) .cp{opacity:0}
@supports selector(:has(*)){.js:not(.go) .sc-copy>.cp:not(:has(~.cp)){opacity:1}}
/* Until `go` the sections below the opening are drawn only as they come near the screen (content-visibility), so the first paint and the build are not held up by a page of
   sections nobody can see yet: measured on slow 4G with the CPU 4x slower, `go` comes about a second sooner and the longest task while loading is about 0.7 s shorter. Only on a first
   view from the top (js-class.js adds `cv`: not a reload, not back or forward, no #hash, where the browser puts the scroll somewhere that depends on heights it does not yet know) and
   only until `go`: the motion measures the whole page, which has to be drawn then, so the rule goes with `go` and the layout is the one the page always had. The scripts-off page
   never has it. The 1200px is a guess at a section's height, until the browser has drawn it once.
   The still page a script-running visitor gets (reduced motion, a small or slow phone, data saving, ?still=1) has the same rule, with no `js` class and no `go`: js-class.js takes `cv` off
   at the visitor's first scroll, tap or key. Measured on slow 4G with a 4x CPU slow-down on a phone that reports 4 cores and 4 GB, the first paint comes at 2.4 s instead of 4.1 s. */
.cv:not(.go) #kit>section:not(#open){content-visibility:auto;contain-intrinsic-size:auto 1200px}

/* ---------- scenes ---------- */
.sc{position:relative}
.sc-in{position:relative;height:100vh;min-height:680px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-top:var(--hh);overflow:hidden}
.sc-copy{grid-column:1/5;position:relative;z-index:2;display:grid;align-content:center}
.sc-copy>.cp{grid-area:2/1;align-self:start}
.sc-copy>.grp{grid-area:1/1}
.sc-copy .count{grid-area:3/1}
.sc-stage{grid-column:5/13;position:relative;height:calc(100vh - 210px);min-height:520px;max-height:760px}
.h2{margin:0;font:600 clamp(32px,3vw,46px)/1.1 var(--disp);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.h2 em{font-style:italic;font-weight:500}
.lede{margin:18px 0 0;font:400 17px/1.6 var(--sans);color:var(--text);max-width:30em}
.lede b{color:var(--ink);font-weight:650}
.specs{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.specs li{padding:13px 0;border-bottom:1px solid var(--line);font:400 15px/1.45 var(--sans);color:var(--text)}
.specs b{display:block;font:650 15px/1.35 var(--sans);color:var(--ink)}
.specs .pr{color:var(--red);font-weight:650;font-variant-numeric:tabular-nums}
.small{margin:16px 0 0;font:400 14px/1.5 var(--sans);color:var(--grey)}
.small a{color:var(--ink)}
.small.sample{color:var(--red);font-weight:500}
.count{margin-top:22px;font:500 13px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.count b{color:var(--ink);font-weight:650}
/* a group of formats: one heading, a signpost that says where you are */
.grp{margin:0 0 26px}
.grp-h{font:600 22px/1.2 var(--disp);color:var(--ink);letter-spacing:-.01em}
.grp-s{display:flex;align-items:center;gap:14px;margin-top:10px;font:500 14px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.grp-s .segs{display:flex;gap:4px}
.grp-s .segs i{display:block;width:28px;height:3px;border-radius:2px;background:var(--line2);transition:background .3s}
.grp-s .segs i.on{background:var(--red)}
.grp-s b{color:var(--ink);font-weight:650}
@media (max-width:959px){
  .sc-in{height:auto;min-height:0;display:block;padding:88px var(--m) 24px;overflow:visible}
  .sc-copy{display:grid}
  .sc-stage{height:auto;min-height:0;max-height:none;margin-top:28px}
  .sc-copy .count{display:none}
}

/* every control shows where the keyboard is. Controls drawn with all:unset lose the page's outline (the class rule beats the bare :focus-visible above), so the ring is given again with the element in the selector; a control with its own focus rule keeps it, as that rule is the more specific */
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible,[role=tab]:focus-visible,[role=radio]:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* the showcase tabs (opening.css draws them with all:unset, which comes later and would win a rule of the same weight) */
.shw-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- touch and tall screens (brief 7.2). Every control is at least 44x44 with 8px between neighbours; where the drawn control is smaller, its hit area grows with an invisible ::before. ---------- */
@media (pointer:coarse){
  .nb{width:44px;height:44px}
}
/* full-height stops use the dynamic viewport where there is one, so a phone's toolbars do not cut a stop (a desktop browser's 100dvh is its 100vh) */
@media (min-width:960px){@supports (height:100dvh){
  .sc-in{height:100dvh}
  .sc-stage{height:calc(100dvh - 210px)}
}}

/* ---------- short windows (brief 7.3: a 1280x600 window shows every stop whole). Under 700px high a scene is as tall as the window instead of 680px, its stage takes what the header leaves, and the copy beside it is set a little tighter ---------- */
@media (min-width:960px) and (max-height:699px){
  .sc-in{min-height:0}
  .sc-copy{grid-column:1/6}
  .sc-stage{grid-column:6/13;min-height:0;height:calc(100vh - var(--hh) - 40px)}
  .h2{font-size:clamp(26px,2.3vw,31px)}
  .lede{margin-top:12px;font-size:15px;line-height:1.5}
  .specs{margin-top:14px}
  .specs li{padding:8px 0;font-size:14px;line-height:1.4}
  .specs b{font-size:14px;line-height:1.3}
  .small{margin-top:10px;font-size:13px;line-height:1.45}
  .grp{margin-bottom:12px}
  .grp-h{font-size:19px}
  .count{margin-top:12px}
}
@media (min-width:960px) and (max-height:699px){@supports (height:100dvh){.sc-stage{height:calc(100dvh - var(--hh) - 40px)}}}

/* the Skip button of a scene that plays by itself (motion/skip.js): out of sight until the keyboard or a screen reader reaches it, then a plain button at the top of the screen */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;z-index:80;top:calc(var(--hh) + 8px);left:max(var(--m),env(safe-area-inset-left));width:auto;height:44px;margin:0;padding:0 18px;overflow:visible;clip:auto;border-radius:4px;background:var(--ink);color:#fff;font:600 15px/1 var(--sans);box-shadow:0 0 0 3px #fff,0 8px 24px rgba(20,22,26,.25);cursor:pointer}

/* touch, 960 to 1439 wide (a tablet on its side): the pager arrows sit 24px from the right edge and are 44 wide, so the page's own margin is wide enough to keep its content 8px clear of them */
@media (pointer:coarse) and (min-width:960px) and (max-width:1439px){#kit{--m:80px}}