/* ============================================================
   Tinvero — design system
   Dark-first by intent: the product edits light, so the site is
   built in shade and lit by one amber accent. Category convention
   (measured 28 Sep) is #000/#fff monochrome; this keeps the depth
   and adds the one colour a lens actually makes.
   ============================================================ */

:root{
  /* ground */
  --ink:#0C0D0F; --ink-2:#141619; --ink-3:#1C1F24; --ink-4:#262A30;
  --line:rgba(244,241,234,.10); --line-2:rgba(244,241,234,.18);
  /* light */
  --bone:#F4F1EA; --bone-2:rgba(244,241,234,.66); --bone-3:rgba(244,241,234,.40);
  /* accent */
  --amber:#E8A13C; --amber-2:#F2BD6E; --glass:#7F98A9;
  /* type */
  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'Azeret Mono',ui-monospace,SFMono-Regular,monospace;
  /* rhythm */
  --gut:clamp(1.25rem,4vw,3rem);
  --sec:clamp(4.5rem,11vw,10rem);
  --maxw:1440px; --narrow:720px;
  --r:2px; --r-lg:4px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.62,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--amber);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--amber);color:var(--ink);padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.sprite{position:absolute}

/* ---------- type ---------- */
.display{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.92;letter-spacing:-.035em;
  text-wrap:balance;margin:0;
  font-stretch:112%;
}
.display--xl{font-size:clamp(3.4rem,13vw,11rem);line-height:.86;letter-spacing:-.045em}
.display--pdp{font-size:clamp(2.6rem,6vw,4.6rem)}
.h2{
  font-family:var(--display);font-weight:700;font-stretch:108%;
  font-size:clamp(1.75rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.025em;
  text-wrap:balance;margin:0 0 1rem;
}
.sec .h2:not(:first-child){margin-top:3.2rem}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin:0 0 1rem;
}
.lede{font-size:clamp(1.06rem,1rem + .45vw,1.32rem);line-height:1.5;color:var(--bone-2);max-width:56ch;margin:1.1rem 0 0}
.lede--wide{max-width:68ch}
.lede--answer{color:var(--bone);max-width:62ch}
.lede--answer b{font-weight:600}
p + p{margin-top:1.1rem}
.sec p a,.lede a,.faq_a a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(232,161,60,.45);transition:text-decoration-color .3s}
.sec p a:hover,.lede a:hover{text-decoration-color:var(--amber)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--narrow)}
.sec{padding-block:var(--sec);position:relative}
.sec--grid{padding-top:clamp(2rem,5vw,4rem)}
/* Two plain sections in a row stack their vertical padding and leave a dead band.
   Sections that carry their own background keep the full measure, because there the
   padding is what separates the colour change from the type. */
.sec + .sec:not(.sec--faq):not(.sec--lens):not(.sec--story):not(.sec--cta):not(.sec--rail){padding-top:clamp(1.5rem,3.5vw,3rem)}
.pagehead + .sec{padding-top:clamp(1.5rem,3.5vw,3rem)}

/* ---------- progress + header ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-2));transform-origin:0 50%}
.hdr{position:fixed;inset:0 0 auto 0;z-index:110;padding-block:1.05rem;transition:background .45s var(--ease),backdrop-filter .45s,transform .5s var(--ease),border-color .45s;border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(12,13,15,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.hdr.is-hidden{transform:translateY(-102%)}
.hdr_in{display:flex;align-items:center;gap:2rem}
.logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.logo_mark{display:flex;gap:3px;align-items:center}
.logo_mark i{width:13px;height:13px;border-radius:50%;background:var(--bone);transition:background .4s,transform .5s var(--ease)}
.logo_mark i:last-child{background:var(--amber)}
.logo:hover .logo_mark i:first-child{transform:translateX(3px)}
.logo:hover .logo_mark i:last-child{transform:translateX(-3px)}
.logo_mark--lg i{width:22px;height:22px}
.logo_word{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:.01em;font-size:1.06rem;text-transform:uppercase}
.nav{margin-left:auto}
.nav_list{display:flex;gap:1.9rem;align-items:center}
.nav_list > li > a,.nav_btn{font-size:.9rem;letter-spacing:.005em;color:var(--bone-2);display:inline-flex;align-items:center;gap:.35rem;padding-block:.4rem;position:relative;transition:color .3s}
.nav_list > li > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav_list > li > a:hover{color:var(--bone)}
.nav_list > li > a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav_btn i{width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .35s}
.has-menu{position:relative}
.has-menu[data-open] .nav_btn{color:var(--bone)}
.has-menu[data-open] .nav_btn i{transform:rotate(-135deg) translateY(-2px)}
.menu{position:absolute;top:100%;left:0;padding-top:1.1rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease),visibility .35s}
.has-menu[data-open] .menu{opacity:1;visibility:visible;transform:none}
.menu_in{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.35rem 1.5rem;min-width:270px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.menu_lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);margin-bottom:.9rem}
.menu_list li a{display:block;padding:.44rem 0;font-size:.95rem;color:var(--bone-2);transition:color .25s,padding-left .35s var(--ease)}
.menu_list li a:hover{color:var(--amber);padding-left:.4rem}
.menu_all{display:inline-block;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--amber);width:100%}
.hdr_end{display:flex;align-items:center;gap:1rem}
.hdr_bag{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--bone-2);transition:color .3s}
.hdr_bag:hover{color:var(--bone)}
.hdr_bag i{font-style:normal;font-family:var(--mono);font-size:.7rem;min-width:19px;height:19px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;transition:background .3s,color .3s,border-color .3s}
.hdr_bag i.is-full{background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:500}
.burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger i{display:block;height:1.4px;background:var(--bone);transition:transform .45s var(--ease),width .45s var(--ease)}
.burger i:first-child{width:22px}.burger i:last-child{width:14px}
.burger[aria-expanded=true] i:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{width:22px;transform:translateY(-3.2px) rotate(-45deg)}
.mobnav{position:fixed;inset:0;z-index:105;background:var(--ink);padding:6rem var(--gut) 2rem;overflow-y:auto}
.mobnav_in{display:flex;flex-direction:column;gap:.35rem}
.mobnav_in a{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:clamp(1.9rem,8vw,2.6rem);letter-spacing:-.02em;padding-block:.42rem;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px)}
.mobnav.is-open .mobnav_in a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.mobnav.is-open .mobnav_in a:nth-child(1){transition-delay:.05s}.mobnav.is-open .mobnav_in a:nth-child(2){transition-delay:.09s}
.mobnav.is-open .mobnav_in a:nth-child(3){transition-delay:.13s}.mobnav.is-open .mobnav_in a:nth-child(4){transition-delay:.17s}
.mobnav.is-open .mobnav_in a:nth-child(5){transition-delay:.21s}.mobnav.is-open .mobnav_in a:nth-child(6){transition-delay:.25s}
.mobnav.is-open .mobnav_in a:nth-child(7){transition-delay:.29s}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.6rem;border-radius:100px;font-size:.92rem;font-weight:600;letter-spacing:.005em;
  position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s;
  will-change:transform;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transition:transform .55s var(--ease);transform-origin:50% 100%}
.btn--primary{background:var(--amber);color:var(--ink)}
.btn--primary::before{background:var(--bone);transform:scaleY(0)}
.btn--primary:hover::before{transform:scaleY(1)}
.btn--ghost{border:1px solid var(--line-2);color:var(--bone)}
.btn--ghost::before{background:var(--bone);transform:scaleY(0)}
.btn--ghost:hover{color:var(--ink);border-color:var(--bone)}
.btn--ghost:hover::before{transform:scaleY(1)}
.btn--lg{padding:1.1rem 2.1rem;font-size:1rem}
.btn--sm{padding:.62rem 1.1rem;font-size:.82rem}
.btn--full{width:100%}
.linkbtn{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-block:9rem 4.5rem;overflow:hidden;isolation:isolate}
.hero_bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero_bg picture,.hero_photo{display:block;width:100%;height:100%}
.hero_photo{object-fit:cover;object-position:50% 55%}
/* The photograph is bright and the type sits on it, so the scrim does two jobs: a
   left-to-right fade that gives the headline a dark ground and leaves the road and
   sun open on the right where the lens goes, and top and bottom bands for the nav
   and the CTA row. Nothing over the right-centre, or the lens has nothing to show. */
/* Two scrims on purpose. The page gets the lighter one: the day should look over-bright,
   which is the problem the lens exists to solve. The lens view keeps the heavier one, so
   what is inside the outline reads darker and clearer than what is around it. The left
   band is kept for the headline; the sun and road on the right are left open. */
.hero{--hero-scrim:
  linear-gradient(90deg,rgba(12,13,15,.62) 0%,rgba(12,13,15,.40) 30%,rgba(12,13,15,.08) 55%,transparent 78%,rgba(12,13,15,.04) 100%),
  linear-gradient(180deg,rgba(12,13,15,.42) 0%,transparent 22%,transparent 74%,rgba(12,13,15,.74) 100%);
  --hero-scrim-lens:
  linear-gradient(90deg,rgba(12,13,15,.90) 0%,rgba(12,13,15,.74) 30%,rgba(12,13,15,.28) 55%,rgba(12,13,15,.06) 78%,rgba(12,13,15,.18) 100%),
  linear-gradient(180deg,rgba(12,13,15,.70) 0%,transparent 26%,transparent 68%,rgba(12,13,15,.88) 100%)}
.hero_scrim{position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero_in{position:relative;z-index:2}
.hero .display--xl{margin:.4rem 0 0;mix-blend-mode:normal}
.hero_lede{max-width:46ch;margin-top:1.8rem;color:var(--bone-2);font-size:clamp(1rem,.95rem + .42vw,1.24rem)}
.hero_cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.3rem}
.hero_hint{position:absolute;right:var(--gut);bottom:4.6rem;z-index:2;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;color:var(--bone-3);text-align:right;max-width:27ch;line-height:1.6}
.hero_hint span{color:var(--amber)}
.scrollcue{position:absolute;left:50%;bottom:1.7rem;translate:-50% 0;width:1px;height:46px;background:var(--line-2);overflow:hidden;z-index:2}
.scrollcue span{position:absolute;inset:0;background:var(--amber);transform:translateY(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
/* the signature: a real polarising filter you move over the page.
   Cut to the T01's own lens outline rather than a circle — the path comes from
   src/frames.mjs, the same one the product drawings use, so the two cannot drift.
   Everything that shapes the element is clip-path, because an inset box-shadow
   would be cut square by it; the rim and the gloss are stroked in the SVG instead. */
.hero_lens{position:absolute;top:0;left:0;width:clamp(196px,19vw,286px);aspect-ratio:var(--lens-ar,1.37);
  translate:-50% -50%;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
.hero_lens.is-live{opacity:1}
.hero_lens>*{position:absolute;inset:0}
.hero_lens_cast{filter:blur(24px);opacity:.7;transform:translateY(18px) scale(.95)}
.hero_lens_cast i{position:absolute;inset:0;display:block;background:rgba(0,0,0,.85);
  clip-path:url(#a01-lens);-webkit-clip-path:url(#a01-lens)}
.hero_lens_in{
  clip-path:url(#a01-lens);-webkit-clip-path:url(#a01-lens);overflow:hidden;background:var(--ink)}
/* The treated frame is the same photograph as the hero, so it must occupy the same box:
   sized to the hero by JS and counter-translated by the lens position each frame, so
   the view through the lens lines up with the scene around it to the pixel. */
.hero_lens_view{position:absolute;top:0;left:0;width:var(--hw,100vw);height:var(--hh,100svh);
  transform:translate3d(var(--vx,0px),var(--vy,0px),0);will-change:transform;display:block}
.hero_lens_view img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* the same scrim rides inside the view, so the lens never looks brighter than the page around it */
.hero_lens_view::after{content:"";position:absolute;inset:0;background:var(--hero-scrim-lens);pointer-events:none}
/* Nothing milky over the view: the point is that the scene inside is clearer than the
   scene outside, so the only overlays are a faint edge vignette and a hint of grating. */
.hero_lens_in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
    radial-gradient(130% 110% at 52% 104%,rgba(0,0,0,.16),transparent 60%)}
.hero_lens_in::after{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.10}
.hero_lens_shape{width:100%;height:100%;overflow:visible}
.hero_lens_rim{fill:none;stroke:rgba(244,241,234,.42);stroke-width:1.7px;stroke-linejoin:round}
.hero_lens_rim--in{stroke:rgba(12,13,15,.55);stroke-width:3.4px}
.hero_lens_gloss{fill:none;stroke:rgba(244,241,234,.13);stroke-width:16px;stroke-linecap:round;filter:blur(5px)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1rem;background:var(--ink-2)}
.marquee_track{display:flex;gap:2rem;white-space:nowrap;width:max-content;will-change:transform}
.marquee span{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.01em;text-transform:uppercase;color:var(--bone-2)}
.marquee i{color:var(--amber);font-style:normal;font-size:1.2rem;align-self:center}

/* ---------- horizontal rail ---------- */
.sec--rail{padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.rail_head{margin-bottom:clamp(2rem,4vw,3.4rem)}
.rail{width:100%}
.rail_track{display:flex;gap:clamp(1rem,1.6vw,1.6rem);padding-inline:var(--gut);width:max-content;will-change:transform}
.rail_foot{margin-top:2.2rem}
.rail_bar{height:2px;background:var(--line);position:relative;overflow:hidden}
.rail_bar i{position:absolute;inset:0;width:18%;background:var(--amber);transform-origin:0 50%}
/* fallback when JS/ScrollTrigger is unavailable: an ordinary scroller */
.no-js .rail,.rail.is-native{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.no-js .rail_track,.rail.is-native .rail_track{transform:none!important}
.rail.is-native .card{scroll-snap-align:center}

/* ---------- product card ---------- */
.card{flex:0 0 clamp(250px,25vw,340px);position:relative}
.card_link{display:flex;flex-direction:column;height:100%}
.card_media{
  display:grid;place-items:center;position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 108%,color-mix(in srgb,var(--lens) 55%,transparent),transparent 60%),
    linear-gradient(165deg,var(--ink-3),var(--ink-2) 62%);
  border:1px solid var(--line);will-change:transform;
}
.card_media::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 30%,color-mix(in srgb,var(--frame) 26%,transparent),transparent 70%);opacity:0;transition:opacity .6s var(--ease)}
.card:hover .card_media::after{opacity:1}
.card_media .fsvg{width:96%;height:auto;will-change:transform;transition:transform .8s var(--ease)}
.card:hover .card_media .fsvg{transform:scale(1.045)}
.card_body{display:flex;flex-direction:column;gap:.45rem;padding-top:1.05rem}
.card_top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card_name{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.22rem;letter-spacing:-.015em}
.card_price{font-family:var(--mono);font-size:.86rem;color:var(--bone-2)}
.card_meta{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.71rem;letter-spacing:.03em;color:var(--bone-3);flex-wrap:wrap}
.card_meta .dot{width:2px;height:2px;border-radius:50%;background:currentColor;display:inline-block}
.card_swatches{display:flex;gap:.34rem;margin-top:.15rem}
.sw{width:11px;height:11px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(244,241,234,.22)}
.card--end .card_link{justify-content:center;min-height:100%;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:2rem;text-align:left}
.card--end .card_body{gap:.7rem;align-items:flex-start;padding-top:0}

/* ---------- frame drawings ---------- */
/* The drawing is stroked in --frame-ink, the colourway lifted toward bone so a
   near-black acetate still reads against a near-black card. The swatches beside
   it stay the true colour, so nothing misrepresents the finish. */
.card_media,.pdp_fig{--frame-ink:color-mix(in srgb,var(--frame) 62%,var(--bone) 38%)}
.fsvg{overflow:visible;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.fsvg_front,.fsvg_temples{transition:opacity .4s}
.fsvg_temples{opacity:.72}
.card:hover .fsvg_temples,.pdp_art:hover .fsvg_temples{opacity:1}
.fsvg_shine{pointer-events:none}

/* ---------- grid ---------- */
.grid{display:grid;gap:clamp(1.4rem,2.4vw,2.4rem);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}
.griditem.is-out{display:none}
.gridcount{font-family:var(--mono);font-size:.76rem;color:var(--bone-3);margin:1.4rem 0 1.8rem;letter-spacing:.06em}
.gridempty{color:var(--bone-2);padding:3rem 0}

/* ---------- filters ---------- */
.filters{display:flex;flex-direction:column;gap:.8rem;padding-top:.5rem;align-items:flex-start}
.filterrow{width:100%}
.filterrow{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.filterlab{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);width:74px;flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.44rem .9rem;border:1px solid var(--line-2);border-radius:100px;font-size:.84rem;color:var(--bone-2);transition:background .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--bone-3);color:var(--bone)}
.chip.is-on{background:var(--bone);border-color:var(--bone);color:var(--ink);font-weight:500}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.chip--clear{border-style:dashed;color:var(--amber);border-color:rgba(232,161,60,.4)}
.chip--link{border-color:var(--line-2)}
.fitchips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* ---------- lens demo ---------- */
.sec--lens{background:var(--ink-2);border-block:1px solid var(--line)}
.lens_head{max-width:64ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.lens_demo{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.6rem,3.5vw,3.4rem);align-items:start}
.lens_stage{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);isolation:isolate}
.lens_stage .lens_scene{display:block}
.lens_stage .scene{width:100%;aspect-ratio:1216/832;display:block}
.lens_tint{position:absolute;inset:0;background:var(--t,#4A5443);mix-blend-mode:multiply;opacity:var(--v,.645);transition:background .65s var(--ease),opacity .65s var(--ease)}
.lens_polar{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 38%),radial-gradient(60% 40% at 72% 26%,rgba(255,255,255,.30),transparent 62%);
  opacity:1;transition:opacity .6s var(--ease)}
.lens_polar.is-off{opacity:0}
.lens_cap{position:absolute;left:0;bottom:0;right:0;padding:1rem 1.15rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--bone);background:linear-gradient(0deg,rgba(12,13,15,.8),transparent)}
.lens_panel{padding-top:.4rem}
.lens_read{display:flex;align-items:flex-start;gap:.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.lens_num{display:flex;align-items:baseline;font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.04em}
.lens_num b{font-size:clamp(3rem,7vw,5rem);line-height:.84;color:var(--amber)}
.lens_num em{font-style:normal;font-size:1.5rem;color:var(--amber);margin-left:.1rem}
.lens_numlabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);line-height:1.6;padding-top:.5rem}
.lens_numlabel span{color:var(--bone-2)}
.lens_name{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.6rem;letter-spacing:-.02em;margin:1.3rem 0 .6rem}
.lens_lead{color:var(--bone);margin-bottom:.8rem}
.lens_detail{color:var(--bone-2);font-size:.95rem}
.lens_pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 1.2rem}
.tintbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem .42rem .42rem;border:1px solid var(--line-2);border-radius:100px;transition:border-color .3s,background .3s}
.tintbtn span{width:20px;height:20px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -3px 7px rgba(255,255,255,.22)}
.tintbtn em{font-style:normal;font-size:.8rem;color:var(--bone-2);transition:color .3s}
.tintbtn:hover{border-color:var(--bone-3)}
.tintbtn.is-on{border-color:var(--bone);background:rgba(244,241,234,.07)}
.tintbtn.is-on em{color:var(--bone)}
.polar_toggle{display:flex;align-items:center;gap:.7rem;cursor:pointer;margin-bottom:1.5rem;user-select:none}
.polar_toggle input{position:absolute;opacity:0;width:0;height:0}
.polar_track{width:42px;height:23px;border-radius:100px;border:1px solid var(--line-2);position:relative;transition:background .35s,border-color .35s;flex:0 0 auto}
.polar_track i{position:absolute;top:2.5px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--bone-3);transition:transform .4s var(--ease),background .35s}
.polar_toggle input:checked + .polar_track{background:var(--amber);border-color:var(--amber)}
.polar_toggle input:checked + .polar_track i{transform:translateX(18px);background:var(--ink)}
.polar_toggle input:focus-visible + .polar_track{outline:2px solid var(--amber);outline-offset:3px}
.polar_label{font-size:.9rem;color:var(--bone-2)}
.polar_label b{color:var(--bone);font-weight:600}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.steplist{margin-top:2.6rem;display:flex;flex-direction:column;gap:2.4rem}
.steplist li{display:flex;gap:1.1rem;opacity:.34;transition:opacity .5s var(--ease)}
.steplist li.is-on{opacity:1}
.stepnum{font-family:var(--mono);font-size:.74rem;color:var(--amber);padding-top:.3rem;flex:0 0 auto}
.steplist h3{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.22rem;letter-spacing:-.015em;margin-bottom:.25rem}
.steplist p{color:var(--bone-2);font-size:.96rem}
.steps_stage{position:sticky;top:12vh;aspect-ratio:4/5;margin-bottom:-6vh;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.stagefig{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease),transform 1.1s var(--ease);transform:scale(1.06)}
.stagefig.is-on{opacity:1;transform:none}
.stagefig .stepart{width:100%;height:100%;object-fit:cover;display:block}
.stage_grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(12,13,15,.55),transparent 45%),repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(244,241,234,.07) calc(25% - 1px) 25%)}

/* ---------- faces ---------- */
.faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(.8rem,1.6vw,1.3rem);margin-top:clamp(2rem,4vw,3rem)}
.faces--lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));gap:clamp(1rem,2vw,1.6rem)}
.facecard{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.5rem 1.35rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);transition:border-color .4s,background .4s,transform .5s var(--ease)}
.facecard:hover{border-color:var(--line-2);background:var(--ink-3)}
.facecard_art{width:46px;height:56px;color:var(--amber);display:block;will-change:transform}
.facecard_art svg{width:100%;height:100%}
.facecard_name{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.16rem;letter-spacing:-.01em}
.facecard_desc{font-size:.9rem;color:var(--bone-2);line-height:1.45}
.facecard_n{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--bone-3);margin-top:auto;padding-top:.5rem}
.faceart{display:block;width:54px;height:66px;color:var(--amber);margin-bottom:1.2rem}
.pagehead--face .faceart svg{width:100%;height:100%}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.proof_fig{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.proof_fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.proof_fig--art{background:var(--ink-2);display:grid;place-items:center;padding:clamp(1rem,2.5vw,2.2rem)}
.proof_fig--art .craft{width:100%;height:auto;max-width:460px}
.craft_layer{transform:translateY(16px);opacity:0}
.js .proof_fig--art.is-in .craft_layer{transform:none;opacity:1;transition:transform .9s var(--ease) calc(var(--i)*.09s),opacity .7s ease calc(var(--i)*.09s)}
.reduced .craft_layer,.no-js .craft_layer{transform:none;opacity:1}
.proofnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1.4rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.proofnums dt{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;color:var(--amber);line-height:1}
.proofnums dd{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bone-3);margin-top:.4rem}

/* ---------- faq ---------- */
.sec--faq{background:var(--ink-2);border-block:1px solid var(--line)}
.faq{margin-top:2rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.35rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-stretch:104%;font-size:clamp(1.02rem,1.6vw,1.2rem);letter-spacing:-.01em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary i{position:relative;width:13px;height:13px;flex:0 0 auto;margin-top:.42rem}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.faq summary i::before{left:0;top:6px;width:13px;height:1.4px}
.faq summary i::after{left:6px;top:0;width:1.4px;height:13px}
.faq details[open] summary i::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--amber)}
.faq_a{padding-bottom:1.5rem;max-width:66ch}
.faq_a p{color:var(--bone-2)}

/* ---------- page heads ---------- */
.pagehead{padding-block:clamp(8rem,14vw,12rem) clamp(2rem,4vw,3.4rem);position:relative}
.pagehead--lens::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 82% 10%,color-mix(in srgb,var(--t) 32%,transparent),transparent 66%);pointer-events:none}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;color:var(--bone-3);margin-bottom:1.6rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--amber)}
.crumbs i{font-style:normal;opacity:.4}
.lenshead{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.lenschip{width:64px;height:64px;border-radius:50%;background:var(--t);flex:0 0 auto;box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.25),inset 0 -8px 20px rgba(255,255,255,.18),0 16px 44px -12px color-mix(in srgb,var(--t) 70%,transparent)}
.lensstat{font-family:var(--mono);font-size:.82rem;letter-spacing:.05em;color:var(--bone-2);margin-top:.6rem}
.lensstat b{color:var(--amber);font-size:1.05rem}

/* ---------- pdp ---------- */
.pdp_top{padding-block:clamp(7.5rem,12vw,10rem) clamp(2rem,4vw,3rem);position:relative}
.pdp_top::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 28% 22%,color-mix(in srgb,var(--lens) 26%,transparent),transparent 62%);pointer-events:none}
.pdp_grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start;position:relative}
.pdp_fig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;
  background:radial-gradient(85% 65% at 50% 106%,color-mix(in srgb,var(--lens) 50%,transparent),transparent 62%),linear-gradient(165deg,var(--ink-3),var(--ink-2) 64%);}
.pdp_fig{display:grid;place-items:center}
.pdp_art{display:block;width:94%;transition:opacity .4s var(--ease)}
.pdp_art .fsvg{width:100%;height:auto}
.pdp_fig.is-swapping .pdp_art{opacity:.2}
.pdp_fig .fsvg_front path,.pdp_fig .fsvg_temples path{transition:stroke .55s var(--ease),fill .55s var(--ease)}
.pdp_tint{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 44%,color-mix(in srgb,var(--t) 45%,transparent),transparent 68%);mix-blend-mode:screen;opacity:.55;transition:background .6s var(--ease)}
.pdp_figcap{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--bone-3);margin-top:.9rem;line-height:1.6}
.pdp_figcap b{color:var(--bone-2);font-weight:400}
.pdp_figcap a{color:var(--bone-3);text-decoration:underline}
.pdp_shape{font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--bone-3);margin-top:1rem}
.pdp_price{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.9rem;letter-spacing:-.02em;margin-top:.7rem;color:var(--amber)}
.pdp_lead{margin-top:1.1rem;color:var(--bone-2)}
.opt{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.optlab{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);margin-bottom:.85rem}
.optlab b{color:var(--bone);font-weight:400;text-transform:none;letter-spacing:.02em}
.opt_hint{color:var(--bone-3);text-transform:none;letter-spacing:0;font-family:var(--body)}
.opts{display:flex;gap:.6rem;flex-wrap:wrap}
.opt_sw{width:42px;height:42px;border-radius:50%;padding:4px;border:1px solid transparent;transition:border-color .3s,transform .4s var(--ease)}
.opt_sw span{display:block;width:100%;height:100%;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(244,241,234,.22),inset 0 -6px 12px color-mix(in srgb,var(--l) 55%,transparent)}
.opt_sw:hover{transform:translateY(-2px)}
.opt_sw.is-on{border-color:var(--bone)}
.opt_lens{display:flex;flex-direction:column;align-items:center;gap:.32rem;padding:.4rem .5rem;border:1px solid transparent;border-radius:var(--r-lg);transition:border-color .3s,background .3s}
.opt_lens span{width:30px;height:30px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -5px 10px rgba(255,255,255,.2)}
.opt_lens em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--bone-3)}
.opt_lens.is-on{border-color:var(--line-2);background:rgba(244,241,234,.05)}
.opt_lens.is-on em{color:var(--bone)}
.opt_help{font-size:.88rem;color:var(--bone-2);margin-top:.85rem;max-width:44ch}
.pdp_buy .btn--full{margin-top:2rem}
.pdp_assure{display:flex;flex-direction:column;gap:.4rem;margin-top:1.1rem}
.pdp_assure li{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--bone-3);padding-left:1.1rem;position:relative}
.pdp_assure li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2.2rem;border-top:1px solid var(--line)}
.spec{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line)}
.spec:nth-child(odd){padding-right:1.2rem}
.spec:nth-child(even){padding-left:1.2rem;border-left:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--bone-3)}
.spec dd{font-family:var(--mono);font-size:.8rem;color:var(--bone)}
.fitline{margin-top:1.3rem;font-size:.9rem;color:var(--bone-2)}
.fitline b{color:var(--bone)}
.fitline a{color:var(--amber)}
.story{font-size:clamp(1.02rem,1rem + .3vw,1.18rem);color:var(--bone-2)}
.fitfor{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.fitnote{font-size:.88rem;color:var(--bone-3);margin-top:.9rem}
.sec--story{background:var(--ink-2);border-block:1px solid var(--line)}

/* ---------- tables ---------- */
.lenstable,.fittable{font-family:var(--mono);font-size:.84rem;margin-top:1.6rem}
.lenstable th,.lenstable td,.fittable th,.fittable td{text-align:left;padding:.85rem .9rem;border-bottom:1px solid var(--line)}
.lenstable thead th,.fittable thead th{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3);font-weight:400;border-bottom-color:var(--line-2)}
.lenstable tbody th,.fittable tbody th{font-weight:400}
.lenstable tbody tr:hover,.fittable tbody tr:hover{background:rgba(244,241,234,.03)}
.lenstable td b,.fittable td b{color:var(--amber);font-weight:500}
.lenstable a,.fittable a{display:inline-flex;align-items:center;gap:.55rem;transition:color .3s}
.lenstable a:hover,.fittable a:hover{color:var(--amber)}
.tintdot{width:13px;height:13px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);flex:0 0 auto}

/* ---------- lens cards, compare, diagram ---------- */
.lenscard{display:flex;flex-direction:column;gap:.55rem;padding:1.7rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);transition:border-color .4s,background .4s}
.lenscard:hover{border-color:var(--line-2);background:var(--ink-3)}
.lenscard_chip{width:52px;height:52px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.22),inset 0 -7px 16px rgba(255,255,255,.18)}
.lenscard_name{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:1.2rem;letter-spacing:-.015em;margin-top:.5rem}
.lenscard_stat{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--bone-3)}
.lenscard_stat b{color:var(--amber)}
.lenscard_lead{font-size:.92rem;color:var(--bone-2);line-height:1.5}
.lenscompare{position:relative;margin-top:2rem;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);cursor:ew-resize;touch-action:pan-y}
.lenscompare .scene{width:100%;aspect-ratio:1216/832;display:block;pointer-events:none}
.lenscompare_tint{position:absolute;inset:0;background:var(--t);mix-blend-mode:multiply;opacity:var(--v);clip-path:inset(0 0 0 50%);pointer-events:none}
.lenscompare_handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bone);pointer-events:none;box-shadow:0 0 24px rgba(0,0,0,.6)}
.lenscompare_handle::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:42px;height:42px;border-radius:50%;border:2px solid var(--bone);background:rgba(12,13,15,.35);backdrop-filter:blur(4px)}
.lenscompare figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--bone);background:linear-gradient(0deg,rgba(12,13,15,.82),transparent);pointer-events:none}
.diagram{margin:1.8rem 0;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);color:var(--bone-2)}
.diagram svg{width:100%;height:auto}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:1.2rem;max-width:520px}
/* The contact form uses .fld like every other form here. It used to use .field, which is also
   the name of the lens background on a product page — and since that rule is declared later it
   won, so every input inherited position:absolute, inset:0 and pointer-events:none: the fields
   stacked on top of one another and nothing could be typed. Two unrelated things must not share
   a class name, so the lens one is now .lensfield. */
.form .fld{margin-bottom:0}
.form .fld textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form_status{font-family:var(--mono);font-size:.78rem;color:var(--bone-2)}
.form_status[data-kind=error]{color:#E07A5F}
.form_note{font-size:.85rem;color:var(--bone-3)}
.form_note a{color:var(--amber)}

/* ---------- cta ---------- */
.sec--cta{text-align:center;background:
  radial-gradient(80% 100% at 50% 0%,rgba(232,161,60,.16),transparent 60%),var(--ink-2);border-top:1px solid var(--line)}
.cta p{color:var(--bone-2);margin:1.2rem auto 2rem;max-width:46ch}
.cta .display{font-size:clamp(2.2rem,6.4vw,5rem)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-block:clamp(3.4rem,6vw,5.5rem) 2.2rem;background:var(--ink)}
/* Mailing list band. Sits above the columns: a footer is where someone lands after reading,
   which is the one moment a sunglasses shop has earned the ask. */
.ftr_sub{display:grid;grid-template-columns:1.1fr 2.2fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  margin:0 0 clamp(2.4rem,5vw,3.6rem);padding:0 0 clamp(2.4rem,5vw,3.6rem);
  border-bottom:1px solid var(--line)}
.ftr_sub_copy h2{margin:0 0 .5rem;font-size:1.05rem;letter-spacing:-.01em;color:var(--bone)}
.ftr_sub_copy p{margin:0;font-size:.85rem;line-height:1.55;color:var(--bone-3);max-width:34rem}
.ftr_sub_form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ftr_sub_form input[type=email]{flex:1 1 15rem;min-width:0;padding:.8rem .95rem;
  border:1px solid var(--line);border-radius:var(--r-sm,6px);background:transparent;
  color:var(--bone);font:inherit;font-size:.9rem}
.ftr_sub_form input[type=email]::placeholder{color:var(--bone-3)}
.ftr_sub_form input[type=email]:focus{outline:2px solid var(--bone-2);outline-offset:1px;border-color:transparent}
.ftr_sub_form .btn{flex:0 0 auto}
.ftr_sub_form .form_status{flex:1 1 100%;margin:0;font-size:.78rem;color:var(--bone-3);min-height:1.1em}
.ftr_sub_form .form_status[data-kind=error]{color:#ff9b8a}
@media (max-width:820px){
  .ftr_sub{grid-template-columns:1fr;gap:1.4rem}
}
.ftr_top{display:grid;grid-template-columns:1.1fr 2.2fr;gap:clamp(2rem,5vw,4rem)}
.ftr_tag{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.7rem;letter-spacing:-.03em;margin-top:1rem}
.ftr_blurb{color:var(--bone-3);font-size:.92rem;margin-top:.7rem;max-width:34ch}
.ftr_cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2rem}
.ftr_cols h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);font-weight:400;margin-bottom:.9rem}
.ftr_cols li a{display:block;padding:.28rem 0;font-size:.92rem;color:var(--bone-2);transition:color .25s,padding-left .35s var(--ease)}
.ftr_cols li a:hover{color:var(--amber);padding-left:.35rem}
.ftr_bot{margin-top:clamp(2.4rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--bone-3)}
.ftr_bot a{color:var(--bone-2)}
.ftr_note a{color:var(--bone-3);text-decoration:underline}

/* ---------- reveal base states (JS only; content is visible without JS) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js [data-clip] img,.js [data-clip] > .craft{clip-path:inset(0 0 100% 0)}
.js [data-clip] img{transform:scale(1.14)}
/* The mask hides each line until it slides up. Descenders hang below the line box at this
   display size, so the mask carries a little room underneath and pulls it back with a
   matching negative margin: line spacing is unchanged, the g and the y keep their tails. */
.js .split-line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.js .split-line > span{display:block;will-change:transform}
.reduced [data-reveal],.reduced [data-clip] img,.reduced [data-clip] > .craft{opacity:1!important;transform:none!important;clip-path:none!important}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lens_demo,.steps,.proof,.pdp_grid,.ftr_top{grid-template-columns:1fr}
  .steps_stage{position:relative;top:0;order:-1;aspect-ratio:16/10}
  .proof_fig img{aspect-ratio:16/10}
  .hero_hint{display:none}
}
@media (max-width:860px){
  .nav,.hdr_bag span{display:none}
  .burger{display:flex}
  .hdr_in{gap:1rem}
  .hdr_end{margin-left:auto}
  .specs{grid-template-columns:1fr}
  .spec:nth-child(even){padding-left:0;border-left:0}
  .spec:nth-child(odd){padding-right:0}
  .hero{min-height:92svh;padding-block:7.5rem 3.5rem}
  /* The desktop scrim darkens the LEFT third, because that is where the headline sits in a wide
     window. On a phone the headline spans the full width and the sun in this photograph sits dead
     centre behind it, so the right half of "Five tints" was white on white. Below 860px the scrim
     becomes a bottom-up wash instead: the sky and road stay visible, the text sits on ink. */
  .hero{--hero-scrim:
    linear-gradient(180deg,rgba(12,13,15,.58) 0%,rgba(12,13,15,.14) 26%,rgba(12,13,15,.38) 52%,rgba(12,13,15,.80) 74%,rgba(12,13,15,.93) 100%);
    --hero-scrim-lens:
    linear-gradient(180deg,rgba(12,13,15,.74) 0%,rgba(12,13,15,.30) 26%,rgba(12,13,15,.50) 52%,rgba(12,13,15,.86) 74%,rgba(12,13,15,.95) 100%)}
  .filterlab{width:100%}
}
@media (max-width:560px){
  .card{flex-basis:76vw}
  .ftr_bot{flex-direction:column;gap:.7rem}
  .lens_read{flex-direction:column;gap:.3rem}
  .btn{width:auto}
  .hero_cta .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero_lens{display:none}
}

/* ============================================================
   Real-product build: the honest-gap block, and the bits the
   five-tint catalogue needs that the design study did not.
   ============================================================ */
.card_meta--use{color:var(--amber);opacity:.85}
.lens_name--lead{margin-top:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.lens_use{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:.5rem 0 1.1rem}
.opts--pairs{gap:.45rem;flex-wrap:wrap}
.opts--pairs .opt_lens{text-decoration:none}
.opts--pairs .opt_lens em{max-width:8ch;text-align:center;line-height:1.25}
.tablenote,.steps_foot{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--bone-3);margin-top:1rem;line-height:1.7}
.steps_foot{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line)}

/* the honest gap */
.pending{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-2);padding:clamp(1.4rem,3vw,2.2rem);margin-top:1.5rem}
.pending_head{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:1.4rem}

/* face cards on the guide are reference, not links */
.facecard--static{cursor:default}
.facecard--static:hover{border-color:var(--line);background:var(--ink-2)}
.facecard_rule{font-size:.88rem;color:var(--amber);line-height:1.45;margin-top:auto;padding-top:.7rem;opacity:.9}

/* ---------- supplier photography ----------
   The studio ground is keyed out of the source files, so the pair sits on the page's
   own surface. The tile keeps the lens-coloured wash underneath it: with the white
   slab gone, that glow is the only thing separating the frame from the background. */
.card_media--photo,.pdp_fig--photo{
  background:
    radial-gradient(76% 70% at 50% 50%,color-mix(in srgb,var(--lens) 34%,transparent),transparent 74%),
    radial-gradient(120% 90% at 50% 8%,rgba(244,241,234,.07),transparent 62%),
    linear-gradient(168deg,var(--ink-3),var(--ink-2) 62%,var(--ink));
}
.card_media--photo::after{background:radial-gradient(64% 58% at 50% 48%,color-mix(in srgb,var(--lens) 26%,transparent),transparent 74%)}
.card_media--photo picture,.pdp_fig--photo picture{display:block;width:100%}
.card_media--photo img,.pdp_fig--photo img{
  display:block;width:100%;height:auto;max-width:none;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.62));
  transform:scale(1.02);transition:transform .8s var(--ease);will-change:transform;
}
.card:hover .card_media--photo img{transform:scale(1.07)}
.pdp_fig--photo{aspect-ratio:auto;padding:clamp(1.6rem,4vw,3rem) 0;border-color:var(--line)}
.pdp_fig--photo .pdp_art{width:100%}

/* ---------- the measured diagram ---------- */
.specdia{display:block;width:100%;height:auto;color:var(--bone-3)}
.specdia text{font-family:var(--mono);letter-spacing:.02em;fill:var(--bone-2)}
.pdp_dia,.specdia_fig{margin-top:clamp(1.4rem,3vw,2rem);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-2);padding:clamp(1rem,2.4vw,1.6rem)}
.pdp_dia figcaption,.specdia_fig figcaption{font-family:var(--mono);font-size:.68rem;line-height:1.7;
  letter-spacing:.04em;color:var(--bone-3);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}

/* ---------- spec table inside the pending block ---------- */
.spectable{width:100%;border-collapse:collapse;font-size:.88rem}
.spectable th,.spectable td{text-align:left;padding:.46rem 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.spectable th{font-weight:400;color:var(--bone-3);padding-right:1rem;white-space:nowrap}
.spectable td{font-family:var(--mono);font-size:.82rem;color:var(--bone);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.pending_src{font-family:var(--mono);font-size:.66rem;line-height:1.7;letter-spacing:.04em;color:var(--bone-3);margin-top:.9rem}
@media (max-width:640px){
  .spectable td,.spectable th{white-space:normal}
  }

/* ---------- product gallery ---------- */
.gal_stage.pdp_fig--photo{padding:0;aspect-ratio:4/3;display:grid;place-items:center}
.gal_stage .pdp_art{position:relative;width:100%;height:100%;display:grid;place-items:center}
/* written with the tile's own class so it outranks the photo-tile rule that makes every
   picture in it display:block, which left the product shot pinned to the top */
.pdp_fig--photo .gal_slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.pdp_fig--photo .gal_slide > source{display:none}
.pdp_fig--photo .gal_slide.is-on{opacity:1;pointer-events:auto}
.gal_slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gal_slide.is-product img{width:92%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.62))}
.gal_slide.is-model img{height:100%;width:auto;filter:none;transform:none;border-radius:var(--r-lg)}
.gal_thumbs{display:flex;gap:.6rem;margin-top:.9rem;overflow-x:auto;padding-bottom:.2rem}
.gal_thumb{flex:0 0 auto;width:72px;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--ink-2);padding:0;cursor:pointer;opacity:.6;transition:opacity .3s,border-color .3s}
.gal_thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal_thumb:hover,.gal_thumb.is-on{opacity:1;border-color:var(--amber)}
.gal_thumb:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- lens demo: the road, split ----------
   Same frames as the hero. Left of the line is the day as it is; right of it is the
   treated frame (glare rolled off, haze gone) under the chosen tint. Switching the
   polarising filter off swaps the treated frame for the raw one under the same tint,
   which is the honest version of the comparison: tint alone against tint plus filter. */
.lens_stage--split{aspect-ratio:1344/768;cursor:ew-resize;touch-action:pan-y;user-select:none}
.lens_stage--split picture,.lens_stage--split picture img{display:block;width:100%;height:100%}
.lens_stage--split picture img{object-fit:cover;object-position:50% 55%}
.lens_raw{position:absolute;inset:0}
.lens_through{position:absolute;inset:0;clip-path:inset(0 0 0 50%);will-change:clip-path}
.lens_treated,.lens_rawcopy{position:absolute;inset:0;transition:opacity .45s var(--ease)}
.lens_rawcopy{opacity:0}
.lens_through.is-off .lens_treated{opacity:0}
.lens_through.is-off .lens_rawcopy{opacity:1}
.lens_through .lens_tint{position:absolute;inset:0}
.lens_handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bone);pointer-events:none;box-shadow:0 0 24px rgba(0,0,0,.6);z-index:2}
.lens_handle::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:42px;height:42px;border-radius:50%;border:2px solid var(--bone);background:rgba(12,13,15,.35);backdrop-filter:blur(4px)}
.lens_tag{position:absolute;top:1rem;z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);background:rgba(12,13,15,.55);padding:.4rem .6rem;border-radius:var(--r);pointer-events:none;backdrop-filter:blur(4px)}
.lens_tag--l{left:1rem}.lens_tag--r{right:1rem}
.lens_stage--split .lens_cap{z-index:2;pointer-events:none}

/* ---------- product page: the lens field behind the buy column ----------
   The scene composited into this colourway's lens on the supplier photograph, remade
   at full size and in colour, sits behind the copy under a heavy scrim. The same cursor
   lens as the hero moves over it and shows the scene through this pair. The panel is
   its own positioning context, so the hero's lens code runs unchanged inside it. */
.pdp_buy--field{position:relative;isolation:isolate;padding:clamp(1.4rem,3vw,2.4rem);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.pdp_buy--field > *:not(.lensfield){position:relative;z-index:2}
.lensfield{position:absolute;inset:0;z-index:0;pointer-events:none}
.lensfield_bg,.lensfield_bg img{display:block;width:100%;height:100%}
.lensfield_bg img{object-fit:cover;object-position:50% 50%;opacity:.9}
.lensfield_view img{object-position:50% 50%}
.lensfield_scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,13,15,.86) 0%,rgba(12,13,15,.70) 40%,rgba(12,13,15,.62) 70%,rgba(12,13,15,.88) 100%),
  linear-gradient(90deg,rgba(12,13,15,.55) 0%,transparent 40%,transparent 60%,rgba(12,13,15,.45) 100%)}
.lensfield_lens{width:clamp(180px,17vw,250px)}
.lensfield_lens .hero_lens_in{background:var(--ink)}
/* the view inside the lens is the treated scene under the same scrim, so the lens is never brighter than the panel */
.lensfield_view::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,13,15,.62) 0%,rgba(12,13,15,.40) 40%,rgba(12,13,15,.34) 70%,rgba(12,13,15,.66) 100%)}
.pdp_buy--field .hero_lens_shape{overflow:visible}
@media (hover:none){.lensfield_lens{display:none}}

/* ---------- the five, as a grid (the pinned rail is gone) ---------- */
.grid--five{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.6rem)}
.grid--five .card{flex:none;width:auto}
.grid_more{margin-top:2rem}
@media (max-width:1100px){.grid--five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid--five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.grid--five{grid-template-columns:1fr}}

/* ---------- journal ---------- */
.post{position:relative;min-width:0}
.grid--3 .post{grid-column:auto}
.post_link{display:flex;flex-direction:column;height:100%}
.post_media{display:block;position:relative;aspect-ratio:1344/768;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.post_media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post_media img{transform:scale(1.04)}
.post_body{display:flex;flex-direction:column;gap:.4rem;padding-top:1rem}
.post_meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-3)}
.post_title{font-family:var(--display);font-weight:700;font-stretch:106%;font-size:1.18rem;letter-spacing:-.015em;line-height:1.2;color:var(--bone)}
.post_desc{font-size:.92rem;color:var(--bone-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.display--post{font-size:clamp(2rem,1.4rem + 2.8vw,3.6rem);max-width:22ch}
.pagehead--post .eyebrow{margin-bottom:.6rem}
.post_byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--bone-3);margin-top:1rem}
.sec--post{padding-top:0}
.post_hero{margin:0 0 2rem;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.post_hero img{display:block;width:100%;height:auto}
.post_hero figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--bone-3);padding:.8rem 1rem;background:var(--ink-2)}
.takeaways{border:1px solid var(--line-2);border-left:3px solid var(--amber);border-radius:var(--r);background:var(--ink-2);padding:1.2rem 1.4rem;margin:0 0 2.2rem}
.takeaways_h{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 .6rem}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{margin:.35rem 0;color:var(--bone-2);font-size:.95rem;line-height:1.5}
.prose{max-width:66ch}
.prose>p{margin:0 0 1.15em;color:var(--bone-2)}
.prose>p:first-child{font-size:1.12rem;line-height:1.55;color:var(--bone)}
.prose>p:first-child strong{color:var(--bone);font-weight:600}
.prose h2{font-family:var(--display);font-weight:700;font-stretch:106%;font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);letter-spacing:-.02em;line-height:1.15;margin:2.4em 0 .7em;color:var(--bone);text-wrap:balance}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:1.8em 0 .5em;color:var(--bone)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;color:var(--bone-2)}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--amber)}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--bone)}
.prose blockquote{border-left:3px solid var(--amber);margin:1.4em 0;padding:.2em 0 .2em 1.1em;color:var(--bone-2);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose .tbl{overflow-x:auto;margin:1.2em 0 1.6em}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:.6em .7em;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);font-weight:500}
.prose tbody th{font-weight:600;color:var(--bone)}
.prose td{color:var(--bone-2)}
.faq--post details{border-top:1px solid var(--line)}
.faq--post details:last-child{border-bottom:1px solid var(--line)}
.faq--post summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--bone);list-style:none}
.faq--post summary::-webkit-details-marker{display:none}
.faq--post summary i{flex:0 0 auto;width:10px;height:10px;border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);transform:rotate(45deg);transition:transform .3s}
.faq--post details[open] summary i{transform:rotate(-135deg)}
.faq--post .faq_a{padding:0 0 1.1rem}
.faq--post .faq_a p{margin:0 0 .7em;color:var(--bone-2)}
.refs{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);max-width:66ch}
.refs h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);margin:0 0 .8rem}
.refs ol{padding-left:1.2em;margin:0;font-size:.86rem;color:var(--bone-3);line-height:1.5}
.refs li{margin:.4em 0}
.refs a{color:var(--amber)}
.post_note{font-family:var(--mono);font-size:.68rem;line-height:1.7;letter-spacing:.04em;color:var(--bone-3);max-width:66ch;margin-top:2rem}

/* ============================================================
   Shop: bag drawer, cart, order status, review, back office.
   Ported from NorthBurnGoods onto this site's tokens.
   ============================================================ */
:root{--ok:#8FBF7A;--warn:#E07A5F}
[hidden]{display:none!important}
.notice{border:1px solid var(--line-2);border-radius:var(--r);padding:.8rem 1rem;font-size:.9rem;margin:1rem 0;color:var(--bone-2)}
.notice.ok{border-color:var(--ok);color:var(--ok)}
.notice.warn{border-color:var(--warn);color:var(--warn)}

/* drawer */
/* Back to top. Appears once the page is long enough behind you to be worth skipping, and
   gets out of the way whenever an overlay owns the screen. */
.totop{position:fixed;right:clamp(1rem,3vw,1.9rem);bottom:clamp(1rem,3vw,1.9rem);z-index:150;
  width:46px;height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--ink-2);color:var(--bone);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),background .2s,border-color .2s}
.totop[data-show]{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--ink);border-color:var(--bone-3)}
.totop:focus-visible{outline:2px solid var(--bone-2);outline-offset:3px}
.totop svg{width:19px;height:19px}
/* an open bag or mobile menu owns the screen; the button must not float over the dimmer */
.scrim[data-open] ~ .totop{opacity:0;pointer-events:none}
body:has([data-mobnav].is-open) .totop{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity .01s}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:190;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim[data-open]{opacity:1;pointer-events:auto}
.drawer{visibility:hidden;position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--ink-2);border-left:1px solid var(--line);z-index:200;transform:translateX(100%);transition:transform .32s var(--ease),visibility 0s .32s;display:flex;flex-direction:column}
.drawer[data-open]{transform:none;visibility:visible;transition:transform .32s var(--ease)}
.drawer_hd{display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--gut);border-bottom:1px solid var(--line)}
.drawer_hd h2{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.drawer_hd button{color:var(--bone-2);font-size:1.6rem;line-height:1}
.drawer_hd button:hover{color:var(--bone)}
.drawer_body{flex:1;overflow-y:auto;padding:1rem var(--gut)}
.drawer_ft{padding:1.2rem var(--gut);border-top:1px solid var(--line)}
.drawer_note{margin-top:.8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--bone-3)}
.bag_empty{color:var(--bone-2);padding:1rem 0}
.bag_empty a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.ci{display:grid;grid-template-columns:86px 1fr auto;gap:.9rem;align-items:center;padding-block:1rem;border-bottom:1px solid var(--line)}
.ci_pic{width:86px;aspect-ratio:1066/348;object-fit:contain;background:var(--ink-3);border-radius:var(--r);padding:4px}
.ci b{display:block;font-weight:600;color:var(--bone)}
.ci_meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--bone-3);margin-top:.15rem}
.ci_qty{display:inline-flex;align-items:center;gap:.2rem;margin-top:.5rem;border:1px solid var(--line-2);border-radius:999px}
.ci_qty button{width:1.7rem;height:1.7rem;color:var(--bone-2);font-size:1rem;line-height:1}
.ci_qty button:hover{color:var(--amber)}
.ci_qty span{min-width:1.4rem;text-align:center;font-family:var(--mono);font-size:.8rem}
.ci_rm{margin-left:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--bone-3);text-decoration:underline;text-underline-offset:3px}
.ci_rm:hover{color:var(--warn)}
.ci_price{font-family:var(--mono);font-size:.9rem;color:var(--bone)}
.totals{font-family:var(--mono);font-size:.82rem;color:var(--bone-2)}
.totals div{display:flex;justify-content:space-between;padding:.3rem 0}
.totals .grand{font-size:1.05rem;color:var(--bone);border-top:1px solid var(--line-2);margin-top:.5rem;padding-top:.7rem}
.totals_note{margin:.5rem 0 0;font-size:.68rem;color:var(--bone-3);letter-spacing:.02em}
.hdr_bag{cursor:pointer}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.pdp_stock{margin:.7rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--amber-2)}
.pdp_stock--out{color:var(--warn)}

/* cart page + confirmation */
.cartpage{padding-block:clamp(1.5rem,3vw,2.5rem) var(--sec)}
.cartpage .drawer_ft{padding-inline:0;border-top:0}
.cart_wrap{max-width:640px;margin-inline:auto}
.pagehead--tx{padding-block:clamp(6rem,10vw,8rem) clamp(1rem,2vw,1.6rem)}
.confirm{text-align:center}
.confirm .lede{margin-inline:auto}
.confirm_note{border-left:2px solid var(--amber);padding:.3rem 0 .3rem 1.1rem;color:var(--bone-2);text-align:left;max-width:56ch;margin:2rem auto}
.confirm_actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* forms shared by status, review, back office (.fld, not .field: .field is the lens field) */
.fld{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.fld>span,.fld label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.fld input,.fld textarea,.fld select{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;color:var(--bone);font:inherit}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--amber);background:var(--ink-3)}
.fld .help{font-family:var(--mono);font-size:.68rem;color:var(--bone-3)}
.fld i{font-style:normal;text-transform:none;letter-spacing:0}
.form_row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.form_row{grid-template-columns:1fr}}

/* order status */
.trk{margin-top:2rem;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem}
.trk_hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.trk_hd b{font-family:var(--mono);letter-spacing:.06em;color:var(--bone)}
.trk_hd span{font-family:var(--mono);font-size:.72rem;color:var(--bone-3)}
.trk_steps{margin:1.4rem 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.trk_steps li{display:flex;flex-direction:column;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.trk_steps li span{display:block;height:3px;border-radius:3px;background:var(--line-2)}
.trk_steps li[data-state="done"] span{background:var(--amber)}
.trk_steps li[data-state="done"] b{color:var(--bone-2)}
.trk_steps li[data-state="now"] span{background:var(--amber);box-shadow:0 0 14px rgba(232,161,60,.55)}
.trk_steps li[data-state="now"] b{color:var(--amber-2)}
.trk_detail{color:var(--bone-2);font-size:.95rem;line-height:1.65;margin:0 0 1.2rem}
.trk_track{margin:0 0 1rem;font-family:var(--mono);font-size:.85rem;color:var(--bone)}
.trk_track a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;margin-left:.6rem}
.trk_items{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.trk_item{margin:0 0 .5rem;font-size:.92rem;color:var(--bone-2)}
.trk_item b{color:var(--bone)}
.trk_faq{margin-top:2.5rem}

/* review */
.rvw_stars{border:0;padding:0;margin:0 0 1.4rem}
.rvw_stars legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);padding:0;margin-bottom:.5rem}
.rvw_stars_row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.25rem}
.rvw_star{cursor:pointer;line-height:1;position:relative}
.rvw_star input{position:absolute;opacity:0;width:1px;height:1px}
.rvw_star span[aria-hidden]{font-size:2.2rem;color:var(--line-2);transition:color .12s,transform .12s;display:block}
.rvw_star:hover span[aria-hidden],.rvw_star:hover~.rvw_star span[aria-hidden],.rvw_star input:checked~span[aria-hidden],.rvw_star:has(input:checked)~.rvw_star span[aria-hidden]{color:var(--amber)}
.rvw_star:hover span[aria-hidden]{transform:scale(1.12)}
.rvw_star input:focus-visible~span[aria-hidden]{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.rvw_small{margin-top:1rem;font-size:.85rem;color:var(--bone-3)}
.stars i{font-style:normal;color:var(--line-2)}

/* reviews on product pages */
.reviews{display:grid;gap:1rem;margin-top:1.6rem}
.review{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.4rem}
.review .stars{color:var(--amber);letter-spacing:.1em;font-size:.95rem}
.review blockquote{margin:.6rem 0 .7rem;color:var(--bone);line-height:1.6}
.review_who{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--bone-3)}

/* back office chrome */
body.bare{background:var(--ink)}
.adm_bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem var(--gut);border-bottom:1px solid var(--line);background:var(--ink-2);flex-wrap:wrap}
.adm_bar_brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}
.adm_tabs{display:flex;gap:.2rem}
.adm_tabs a{padding:.5rem .9rem;border-radius:999px;font-size:.88rem;color:var(--bone-2)}
.adm_tabs a:hover{color:var(--bone)}
.adm_tabs a[aria-current="page"]{background:var(--ink-3);color:var(--bone)}
.adm_bar_nav{display:flex;align-items:center;gap:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.adm_bar_nav a{color:var(--bone-3)}
.adm_bar_nav a:hover{color:var(--amber-2)}
.adm_out{border:1px solid var(--line-2);color:var(--bone-3);border-radius:999px;padding:.4rem .9rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.adm_out:hover{border-color:var(--amber);color:var(--amber-2)}
.adm{padding-block:clamp(2rem,5vw,3.5rem)}
.adm h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1}
.adm_login{max-width:380px}
.adm_login form{margin-top:1.4rem}
.dash_head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.dash_sub{margin:.5rem 0 0;color:var(--bone-3);font-size:.9rem;max-width:56ch}
.adm_tools{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.adm_filters{display:flex;gap:.5rem;flex-wrap:wrap}
.adm_filters .chip{border:1px solid var(--line-2);color:var(--bone-2);border-radius:999px;padding:.5rem 1rem;font-family:var(--mono);font-size:.7rem;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:.5rem;align-items:center}
.adm_filters .chip[aria-pressed="true"]{border-color:var(--amber);color:var(--amber-2)}
/* The count is a grid box, not an inline span: an inline background paints only the font's
   content area, which cropped the digit top and bottom inside the pill. Same shape the
   header's bag counter already uses. */
.adm_filters .chip i{font-style:normal;display:inline-grid;place-items:center;background:var(--amber);color:var(--ink);border-radius:999px;min-width:1.45em;height:1.45em;padding:0 .35em;line-height:1;font-weight:500}
.adm_find{display:flex;gap:.4rem;align-items:center}
.adm_find input{background:var(--ink-2);border:1px solid var(--line-2);color:var(--bone);border-radius:999px;padding:.5rem 1rem;font:inherit;font-size:.88rem;min-width:15rem}
.adm_find input::placeholder{color:var(--bone-3)}
.adm_reload{border:1px solid var(--line-2);color:var(--bone-3);border-radius:999px;width:2.2rem;height:2.2rem;font-size:1rem;line-height:1}
.adm_reload:hover{border-color:var(--amber);color:var(--amber-2)}
.adm_reload[disabled]{opacity:.5;cursor:wait}
.adm_copy{margin-top:.5rem;border:1px solid var(--line-2);color:var(--bone-3);border-radius:999px;padding:.35rem .8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.adm_copy:hover{border-color:var(--amber);color:var(--amber-2)}
.adm_empty{padding:2rem 0;color:var(--bone-3)}

/* the order queue: a row per order, detail on demand */
.ordt{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2)}
.ordt_head,.ordt_row{display:grid;grid-template-columns:7rem 1.4fr 1.2fr 7rem 1.3fr 8rem;gap:.8rem;align-items:center}
.ordt_head{padding:.7rem 1.1rem;background:var(--ink-3);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3)}
.ordt_head .ordt_r{text-align:right}
.ordt .ord{border-bottom:1px solid var(--line)}
.ordt .ord:last-child{border-bottom:0}
.ordt .ord.is-open{background:var(--ink-3)}
.ordt_row{width:100%;padding:.85rem 1.1rem;text-align:left;cursor:pointer}
.ordt_row:hover{background:rgba(244,241,234,.035)}
.ordt_row>span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ordt_row b{font-weight:600;font-size:.92rem;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordt_row i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--bone-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordt_ref b{font-family:var(--mono);letter-spacing:.06em}
.ordt_next b{color:var(--amber-2)}
.ordt_state b{overflow:visible}
.ord_state{display:inline-block;width:fit-content;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line-2);color:var(--bone-3);font-weight:500}
.ord_state--new{border-color:var(--amber);color:var(--amber-2)}
.ord_state--shipped{border-color:var(--ok);color:var(--ok)}
.ordt_total{align-items:flex-end;text-align:right;font-family:var(--mono);color:var(--bone)}
.ordt_total>i{overflow:visible}
/* The tax line sits under the total, not beside it: inline it was the first thing to be truncated,
   and "inc $1…" is worse than no figure at all. */
.ordt_tax{font-size:.62rem;color:var(--bone-3)}
.ordt_chev{position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}
.ord.is-open .ordt_chev{transform:translateY(-50%) rotate(90deg)}
.ordt_row{position:relative;padding-right:2rem}
.ordt_chev{color:var(--bone-3);transition:transform .2s;font-size:1.1rem}
.ord_detail{padding:.2rem 1.1rem 1.2rem}
.ord_grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem}
@media (max-width:720px){.ord_grid{grid-template-columns:1fr;gap:.9rem}}
.ord_detail h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 .5rem}
.ord_line{margin:0 0 .4rem;font-size:.92rem;color:var(--bone)}
.ord_addr{margin:0 0 .5rem;font-size:.9rem;color:var(--bone);line-height:1.5}
.ord_addr--muted{color:var(--bone-3);font-size:.82rem}
.ord_act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ord_track,.ord_carrier{background:var(--ink);border:1px solid var(--line-2);color:var(--bone);border-radius:var(--r);padding:.5rem .7rem;font:inherit;font-size:.88rem}
.ord_track{flex:1 1 13rem}.ord_carrier{width:6.5rem}
.ord_note{font-family:var(--mono);font-size:.7rem;color:var(--bone-3)}
.ord_rev{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ord_rev .stars{font-size:1rem;letter-spacing:.1em;color:var(--amber)}
.ord_rev blockquote{margin:.5rem 0 .7rem;font-size:.92rem;color:var(--bone-2);line-height:1.6}
.ord_rev_state{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);margin-right:.5rem}
@media (max-width:900px){
  .ordt_head{display:none}
  .ordt_row{grid-template-columns:1fr 1fr;grid-template-areas:"ref total" "who items" "state next"}
  .ordt_ref{grid-area:ref}.ordt_total{grid-area:total}.ordt_who{grid-area:who}.ordt_items{grid-area:items}.ordt_state{grid-area:state}.ordt_next{grid-area:next}
}
@media (max-width:560px){.adm_find{width:100%}.adm_find input{min-width:0;flex:1}.ord_act .btn{width:100%}}

/* sales */
.perf{margin-top:.4rem}
.perf_top{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:2rem;align-items:end;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem}
@media (max-width:800px){.perf_top{grid-template-columns:1fr}}
.perf_big{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1;margin:.5rem 0;color:var(--bone)}
.perf_delta{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:.25rem .6rem;border-radius:999px}
.perf_delta.is-up{color:var(--ok);background:rgba(143,191,122,.12)}
.perf_delta.is-down{color:var(--warn);background:rgba(224,122,95,.12)}
.perf_delta.is-flat{color:var(--bone-3);background:var(--ink-3)}
.perf_range{margin-top:.8rem;max-width:34ch;font-size:.85rem;color:var(--bone-3)}
.perf_chart svg{width:100%;height:160px;display:block}
.perf_axis{display:flex;justify-content:space-between;margin-top:.4rem;font-family:var(--mono);font-size:.66rem;color:var(--bone-3)}
.perf_axis.is-pair{justify-content:center;gap:7.2rem}
.perf_tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.8rem;margin-top:1rem}
.tile{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem}
.tile span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3)}
.tile b{display:block;font-family:var(--mono);font-size:1.3rem;margin-top:.35rem;color:var(--bone);font-weight:500}
.tile i{display:inline-block;font-style:normal;font-family:var(--mono);font-size:.66rem;margin-top:.3rem;color:var(--bone-3)}
.tile i.is-up{color:var(--ok)}.tile i.is-down{color:var(--warn)}
.perf_split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.6rem}
@media (max-width:800px){.perf_split{grid-template-columns:1fr}}
.perf_h{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 .9rem}
.perf_notes{padding-left:1.1rem;list-style:disc;color:var(--bone-2);font-size:.92rem}
.perf_notes li{margin-bottom:.5rem}
.bars{display:grid;gap:.6rem}
.bar{display:grid;grid-template-columns:minmax(8rem,1fr) 2fr 2.5rem;gap:.8rem;align-items:center;font-size:.9rem}
.bar span{color:var(--bone-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar_track{background:var(--ink-3);border-radius:999px;height:8px;overflow:hidden}
.bar_track i{display:block;height:100%;background:var(--amber);border-radius:999px}
.bar b{color:var(--bone);text-align:right;font-family:var(--mono);font-weight:500}

/* stock */
.stk_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
.stk_card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem}
.stk_card--low{border-color:rgba(232,161,60,.5)}
.stk_card--out{border-color:rgba(224,122,95,.6)}
.stk_card_hd{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.stk_card h3{font-size:1rem;font-weight:600}
.stk_pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line-2);color:var(--bone-3)}
.stk_pill--in{border-color:var(--ok);color:var(--ok)}
.stk_pill--low{border-color:var(--amber);color:var(--amber-2)}
.stk_pill--out{border-color:var(--warn);color:var(--warn)}
.stk_big{font-family:var(--display);font-weight:800;font-size:3rem;letter-spacing:-.03em;line-height:1;margin:.9rem 0;color:var(--bone)}
.stk_big i{display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);margin-top:.4rem}
.stk_rows{margin:0 0 .8rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.85rem}
.stk_rows div{display:flex;justify-content:space-between;padding:.2rem 0}
.stk_rows dt{color:var(--bone-3)}
.stk_rows dd{color:var(--bone);font-family:var(--mono)}
.stk_says{font-size:.82rem;color:var(--bone-3)}
.stk_add,.stk_log{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.stk_form{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.stk_form .fld{margin:0;flex:1 1 12rem}
.stk_form button{flex:0 0 auto}
.stk_help{margin-top:.8rem;font-size:.85rem;color:var(--bone-3)}

/* The spec table is built for short values like "60mm", so it sets white-space:nowrap on both
   cells. A policy table holds sentences, and nowrap pushed the page 167px wider than the window. */
.spectable--prose th,.spectable--prose td{white-space:normal;vertical-align:top;padding:.7rem 0}
.spectable--prose th{width:34%;padding-right:1.6rem;color:var(--bone)}
.spectable--prose td{font-family:var(--body);font-size:.92rem;text-align:left;color:var(--bone-2);line-height:1.6}
@media (max-width:620px){
  .spectable--prose th,.spectable--prose td{display:block;width:auto;padding-right:0}
  .spectable--prose th{padding-bottom:.15rem;border-bottom:0}
  .spectable--prose td{padding-top:0}
}

/* The spec table sets white-space:nowrap, which suits "60mm" and not a phrase. Inside the spec
   block, where a value can be several words, let them wrap. */
.pending--spec .spectable{max-width:30rem;table-layout:fixed}
.pending--spec .spectable th{white-space:normal;width:48%}
.pending--spec .spectable td{white-space:normal;word-break:break-word}
.pending--spec .pending_src{max-width:30rem}

/* Audited 30 Sep 2026 at 1440 and 390. Four things the measurements turned up. */

/* The lens comparison table is wider than a phone. Only the table scrolls, never the page. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .lenstable{min-width:26rem}

/* Tap targets. WCAG 2.2 asks for 24x24 on anything that is not an inline link in a sentence; the
   bag was 19x19 on a phone and the bag is the one control a thumb has to hit. */
.hdr_bag{min-height:30px;padding-block:.3rem}
/* Below 860px the word "Bag" is hidden and only the count circle is left, which made the whole
   target 19px wide — the one control a thumb has to hit on a phone. Grow the circle instead. */
@media (max-width:860px){.hdr_bag i{min-width:26px;height:26px;font-size:.74rem}}
.ci_rm{display:inline-flex;align-items:center;min-height:24px;margin-left:.7rem}
.adm_bar_brand{min-height:28px}

/* One h1 per back-office page, hoisted above the login and the app so neither repeats it. */
.adm_title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1;margin-bottom:1.4rem}
.adm_login .eyebrow{margin-bottom:.6rem}
.adm .dash_head{align-items:flex-start}

/* legal pages + the footer's legal row */
.ftr_legal{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--bone-3)}
.ftr_legal a{transition:color .3s}
.ftr_legal a:hover{color:var(--amber)}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin:1.8rem 0 .5rem;color:var(--bone)}
.prose .spectable{margin:1.2rem 0}

/* ── scroll-scrubbed tint sequence ──────────────────────────────────────────
   One custom property does all of it. A tall track provides the runway, a
   sticky child is what you see, and js/site.js writes --p (0 to 1) on the
   track as you scroll through it. Every layer below reads var(--p) and claims
   its own slice of that range, which is how five crossfades come out of one
   number without a timeline library.
   --n is the number of tints, so the maths below never hard-codes five. */
.scrub{position:relative;background:var(--ink)}
.scrub_track{height:calc((var(--n) + 1) * 80vh)}
.scrub_pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding-block:clamp(14px,3vh,34px)}
.scrub_in{width:100%;display:flex;flex-direction:column;gap:clamp(12px,2vh,20px);align-items:center;text-align:center}
.scrub_h{margin:0}
/* The pin is exactly one viewport, so the scene must yield to the headline and
   the rail rather than overflow them. Width is capped by the shorter of the
   column and what is left vertically once the surrounding type is allowed for. */
.scrub_stage{position:relative;margin:0;width:min(100%,980px,(100vh - 290px) * 1.75);aspect-ratio:1344/768;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);isolation:isolate}
.scrub_scene,.scrub_scene img{display:block;width:100%;height:100%}
.scrub_scene img{object-fit:cover;object-position:50% 55%}
/* Each tint owns a window of --p centred on its own index. The opacity ramp is
   a triangle: 0 at a full step away, full at the centre. clamp() keeps it in
   range without a single branch in JS. */
/* --c is this tint's centre on the 0..1 track and --k is (count - 1); both are
   emitted as plain numbers at build time because calc() cannot divide by a
   calc expression, and an invalid chain here silently resolves opacity to 1. */
.scrub_tint{position:absolute;inset:0;background:var(--t);mix-blend-mode:multiply;
  --dist:max(calc(var(--c) - var(--p,0)), calc(var(--p,0) - var(--c)));
  opacity:clamp(0, calc((1 - var(--dist) * var(--k)) * var(--v)), 1)}
/* A soft lens curvature over the top so it reads as glass rather than a filter */
.scrub_glass{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.14), rgba(255,255,255,0) 46%),
             radial-gradient(100% 70% at 50% 108%, rgba(0,0,0,.26), rgba(0,0,0,0) 54%)}
.scrub_rail{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.4vw,30px);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.scrub_step{color:var(--bone-3);transition:color .35s var(--ease),opacity .35s var(--ease);opacity:1}
.scrub_step i{font-style:normal;opacity:.6;margin-right:5px}
.scrub_step.is-on{color:var(--amber)}
.scrub_cap{margin:0;font-size:14.5px;color:var(--bone-2);min-height:1.4em}
@media (max-width:760px){
  .scrub_track{height:calc((var(--n) + 1) * 64vh)}
  .scrub_stage{width:100%}
}
/* No scroll runway at all if motion is unwelcome: the sticky pin collapses and
   the first tint simply sits over the scene as a still image. */
@media (prefers-reduced-motion:reduce){
  .scrub_track{height:auto}
  .scrub_pin{position:static;height:auto;padding:clamp(28px,6vh,64px) 0}
  .scrub_tint{opacity:0}
  .scrub_tint[data-i="0"]{opacity:var(--v)}
}