/* ============================================================
   CHALK — WRK-inspired redesign prototype
   Near-monochrome, documentation aesthetic, generous whitespace.
   ============================================================ */

:root{
  --paper:   #efefe7;   /* warm off-white page */
  --surface: #e9e7e0;   /* recessed panels */
  --ink:     #17150f;   /* near-black text */
  --muted:   #6f6d64;   /* secondary text */
  --faint:   #9b998f;   /* captions / hints */
  --line:    rgba(23,21,15,.14);
  --line-2:  rgba(23,21,15,.28);
  --signal:  #c9362a;   /* the single accent — used as a tick, never decoration */
  --chalk:   #ef462c;   /* brand red — the CHALK wordmark */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:500; letter-spacing:-.02em; line-height:1.04; }
p{ line-height:1.4; }

/* --- scroll reveal (content blurs + staggers in; backgrounds stay solid) --- */
.reveal{
  opacity:0; transform:translateY(18px); filter:blur(12px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform, filter;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* catalogue cards — "card stack" reveal: tilt up from a 3D angle, dealt in sequence */
.card.reveal{ filter:none; transform-origin:50% 100%; transform:perspective(1100px) rotateX(16deg) translateY(54px) scale(.96); }
.card.reveal.in{ transform:perspective(1100px) rotateX(0deg) translateY(0) scale(1); }

@media (prefers-reduced-motion:reduce){
  .reveal, .card.reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* --- shared technical drawing strokes --- */
.draw .ln, svg .ln{ stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round; }
svg .dash{ stroke-dasharray:3 3; opacity:.5; }
svg .dim{ stroke:var(--ink); stroke-width:.8; opacity:.35; }
svg .signal{ stroke:var(--signal); stroke-width:1.4; }
svg .cap{ fill:var(--faint); font-family:var(--mono); font-size:8px; letter-spacing:.04em; }

/* mono micro-labels */
.tag,.code,.fig-label,.idx,.spec dt,.log,.cart,.nav a,.mono,.foot__h{
  font-family:var(--mono);
}

/* ============ HEADER ============ */
.site-head{
  position:fixed; top:14px; left:14px; right:14px; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(16px,1.6vw,22px);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:.5px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 30px rgba(20,21,15,.10);
}
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ display:block; width:24px; height:24px; }

/* header logo — only the inner ring spins on its own axis, 3D */
.site-head svg.brand__mark path{ fill:var(--ink); }
.site-head .brand__ring{
  transform-box:fill-box; transform-origin:center;
  animation:logo-spin 10s linear infinite;
}
@keyframes logo-spin{               /* spin axis tilted 15° from vertical */
  from{ transform:perspective(120px) rotate3d(0.2588,0.9659,0,0deg); }
  to{ transform:perspective(120px) rotate3d(0.2588,0.9659,0,360deg); }
}
@media (prefers-reduced-motion:reduce){ .site-head .brand__ring{ animation:none; } }
.brand__type{ font-weight:500; letter-spacing:.22em; font-size:15px; color:var(--chalk); }
.head__right{ display:flex; align-items:center; gap:26px; }
.cart{ font-size:11px; letter-spacing:.08em; color:var(--muted); }
.cart span{ color:var(--faint); }

/* --- WRK-style "Menu" toggle --- */
.menu-toggle{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:4px 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink);
}
.menu-toggle__txt{ position:relative; }
.menu-toggle__glyph{
  position:relative; width:18px; height:8px;
}
.menu-toggle__glyph::before,
.menu-toggle__glyph::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink);
  transition:transform .3s ease, top .3s ease;
}
.menu-toggle__glyph::before{ top:1px; }
.menu-toggle__glyph::after{ top:6px; }
body.menu-open .menu-toggle__glyph::before{ top:3.5px; transform:rotate(45deg); }
body.menu-open .menu-toggle__glyph::after{ top:3.5px; transform:rotate(-45deg); }

/* ============ MENU OVERLAY (inset panel, WRK-style) ============ */
.menu{
  position:fixed; inset:0; z-index:55;
  background:rgba(15,14,10,.5);              /* scrim dims the page behind */
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.menu[hidden]{ display:block; }              /* visibility handles show/hide */
body.menu-open .menu{ opacity:1; visibility:visible; }

.menu__panel{
  position:absolute; inset:14px;
  background:#1D1E1C; color:#F0EFE9; border-radius:12px;
  padding:clamp(22px,2.6vw,40px) clamp(22px,3vw,52px) clamp(20px,2.4vw,34px);
  display:flex; flex-direction:column; overflow:auto;
  opacity:0; transform:scale(.985) translateY(12px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
body.menu-open .menu__panel{ opacity:1; transform:none; }

/* top bar */
.menu__bar{ display:flex; align-items:center; justify-content:space-between; }
.menu__close{
  background:none; border:none; cursor:pointer; color:#F0EFE9; padding:6px;
  display:inline-flex; transition:transform .3s ease, opacity .2s;
}
.menu__close svg{ stroke:currentColor; stroke-width:1.4; }
.menu__close:hover{ transform:rotate(90deg); }

/* columns */
.menu__cols{
  flex:1; display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(30px,5vw,90px);
  margin-top:clamp(40px,7vh,90px); align-content:start;
}
.menu__h{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(240,239,233,.4); display:block; margin-bottom:clamp(18px,3vh,34px);
}

/* primary nav — large arrowed voices */
.menu__primary{ display:flex; flex-direction:column; }
.menu__primary a{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(4px,1vh,10px) 0; color:#F0EFE9;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease, color .2s;
}
body.menu-open .menu__primary a{ opacity:1; transform:none; }
body.menu-open .menu__primary a:nth-of-type(1){ transition-delay:.10s; }
body.menu-open .menu__primary a:nth-of-type(2){ transition-delay:.16s; }
body.menu-open .menu__primary a:nth-of-type(3){ transition-delay:.22s; }
body.menu-open .menu__primary a:nth-of-type(4){ transition-delay:.28s; }
.menu__word{
  font-family:var(--mono); font-weight:300; line-height:1.12;
  font-size:clamp(22px,2.8vw,38px); letter-spacing:8px; text-transform:uppercase;
  transition:opacity .2s;
}
.menu__arrow{ color:rgba(240,239,233,.4); font-size:18px; transition:transform .25s, color .2s; }
.menu__primary a:hover .menu__arrow{ transform:translateX(6px); color:#F0EFE9; }
.menu__primary:hover a:not(:hover) .menu__word{ opacity:.35; }

/* quick links — ruled rows */
.menu__col{ display:flex; flex-direction:column; }
.menu__link{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(240,239,233,.65); padding:16px 0;
  border-bottom:.5px solid rgba(240,239,233,.16);
  display:flex; justify-content:space-between; align-items:center; transition:color .2s;
}
.menu__link:hover{ color:#F0EFE9; }

/* social pills */
.menu__social{
  margin-top:clamp(28px,5vh,56px); padding-top:clamp(20px,3vh,30px);
  border-top:.5px solid rgba(240,239,233,.16);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transition:opacity .5s ease .34s;
}
body.menu-open .menu__social{ opacity:1; }
.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(240,239,233,.7); transition:color .2s;
}
.pill:hover{ color:#F0EFE9; }
.pill__num{ color:rgba(240,239,233,.4); }
.menu__slash{ color:rgba(240,239,233,.3); font-family:var(--mono); }

/* lighten the logo mark on the dark panel */
.brand--ondark .brand__mark{ filter:invert(1) brightness(1.15); }

/* hide the page header while the overlay is open */
body.menu-open .site-head{ opacity:0; pointer-events:none; transition:opacity .3s ease; }

@media (prefers-reduced-motion:reduce){
  .menu, .menu__panel, .menu__primary a, .menu__social{ transition:opacity .2s; transform:none; }
}

/* ============ HERO ============ */
.hero{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:84vh;
  border-bottom:.5px solid var(--line);
}
.hero__text{
  display:flex; flex-direction:column; justify-content:center;
  gap:30px; padding:clamp(40px,7vw,90px) var(--gut);
}
.tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.14em; color:var(--muted);
}
.dot{ position:relative; width:6px; height:6px; border-radius:50%; background:var(--signal); }
.dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--signal); animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{
  0%{ transform:scale(1); opacity:.55; }
  70%,100%{ transform:scale(3.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .dot::after{ animation:none; } }
.hero h1{ font-size:clamp(28px,4vw,46px); }
.lede{ max-width:38ch; color:var(--muted); font-size:15px; }

.spec{
  display:grid; grid-template-columns:repeat(4,auto); gap:clamp(20px,4vw,48px);
  border-top:.5px solid var(--line); padding-top:18px;
}
.spec dt{ font-size:10px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
.spec dd{ font-family:var(--mono); font-size:17px; margin-top:5px; }
.spec--inline{ grid-template-columns:repeat(3,auto); }

.link-arrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:gap .2s,border-color .2s;
}
.link-arrow:hover{ gap:15px; border-color:var(--ink); }
.link-arrow--alt{ margin-top:40px; }

.hero__fig{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--surface);
}
.fig-label{
  position:absolute; font-size:10px; letter-spacing:.1em; color:var(--faint);
}
.fig-tl{ top:18px; left:18px; }
.fig-br{ bottom:18px; right:18px; }
.draw{ width:min(46%,300px); height:auto; }

/* hero figure as full-bleed product photo */
.hero__fig--photo{ background:var(--ink); overflow:hidden; }
.hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__fig--photo .fig-label{ color:rgba(243,242,238,.7); z-index:2; }
.hero__fig--photo .fig-tl{ color:#1d1e1c; }

/* EP01 buy-hero ("EP01 · field pack") photo — fades in from the right on scroll.
   Animates the inner .hero__photo (the figure has overflow:hidden, so it clips — no h-scroll).
   .fx-in is added by the inline scroll-check in ep01.html / layout-ep01.php. */
#ep01-hero .hero__fig--photo .hero__photo{
  opacity:0; transform:translateX(8%);
  transition:opacity .9s ease, transform 1s cubic-bezier(.22,.61,.36,1); }
#ep01-hero .hero__fig--photo.fx-in .hero__photo{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  #ep01-hero .hero__fig--photo .hero__photo{ opacity:1; transform:none; transition:none; } }

/* ============ BLOCK (sections) ============ */
.block{ padding:clamp(64px,9vw,128px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.block--alt{ background:var(--surface); max-width:none; }
.block--alt > *{ max-width:var(--maxw); margin-inline:auto; }

/* dark block — #1D1E1C ground, #F0EFE9 ink */
.block--dark{ background:#1D1E1C; color:#F0EFE9; }
.block--dark .block__head p{ color:rgba(240,239,233,.6); }
.block--dark .log{ border-top-color:rgba(240,239,233,.3); }
.block--dark .log__row{ border-bottom-color:rgba(240,239,233,.14); }
.block--dark .log__row:hover{ background:rgba(240,239,233,.05); }
.block--dark .log__row--head{ color:rgba(240,239,233,.45); }
.block--dark .log__row--head:hover{ background:none; }
.block--dark .log__row [data-l="cond"]{ color:rgba(240,239,233,.6); }
.block--dark .log__row [data-l]::before{ color:rgba(240,239,233,.45); }
.block--dark .link-arrow{ color:#F0EFE9; }
.block--dark .link-arrow:hover{ border-color:#F0EFE9; }
/* dark catalogue grid */
.block--dark .grid{ border-top-color:rgba(240,239,233,.16); border-left-color:rgba(240,239,233,.16); }
.block--dark .card{ border-right-color:rgba(240,239,233,.16); border-bottom-color:rgba(240,239,233,.16); }
.block--dark .card:hover{ background:rgba(240,239,233,.05); }
.block--dark .card__fig{ border-bottom-color:rgba(240,239,233,.16); }
.block--dark .card__meta p{ color:rgba(240,239,233,.6); }
.block__head{ max-width:60ch; margin-bottom:clamp(40px,6vw,72px); }
.idx{ font-size:11px; color:var(--signal); letter-spacing:.1em; display:block; margin-bottom:18px; }
.block h2{ font-size:clamp(28px,4vw,46px); margin-bottom:18px; }
.block__head p{ color:var(--muted); font-size:15px; max-width:48ch; }

/* ============ GEAR GRID ============ */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:.5px solid var(--line); border-left:.5px solid var(--line);
}
.card{
  border-right:.5px solid var(--line); border-bottom:.5px solid var(--line);
  display:flex; flex-direction:column;
  transition:background .25s;
}
.card:hover{ background:var(--surface); }
/* single-product order card — one horizontal panel, centred */
.grid--single{ display:block; border:none; max-width:720px; margin:0 auto; }
.grid--single .card{ display:grid; grid-template-columns:1.05fr 1fr; border:.5px solid var(--line); }
.grid--single .card__fig{ border-right:.5px solid var(--line); border-bottom:none; }
.grid--single .card__meta{ justify-content:center; gap:10px; padding:clamp(24px,3vw,40px); }
@media (max-width:560px){
  .grid--single .card{ grid-template-columns:1fr; }
  .grid--single .card__fig{ border-right:none; border-bottom:.5px solid var(--line); }
}
.card__fig{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-bottom:.5px solid var(--line); overflow:hidden;
}
.card__fig svg{ width:54%; transition:transform .35s; }
.card:hover .card__fig svg{ transform:scale(1.06); }
.card__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.card:hover .card__fig img{ transform:scale(1.04); }
.card__meta{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.code{ font-size:10px; letter-spacing:.12em; color:var(--signal); text-transform:uppercase; }
.card h3{ font-size:19px; }
.card__meta p{ font-size:13px; color:var(--muted); flex:1; }
.price{ font-family:var(--mono); font-size:13px; margin-top:6px; }

/* ============ LOG TABLE ============ */
.log{ border-top:.5px solid var(--line-2); font-family:var(--mono); }
.log__row{
  display:grid; grid-template-columns:2.1fr 1.2fr 1.5fr .7fr 1fr;
  gap:18px; padding:16px 4px;
  border-bottom:.5px solid var(--line); align-items:center;
  font-size:13px; transition:background .2s,padding-left .2s;
}
.log__row:hover{ background:rgba(23,21,15,.03); padding-left:12px; }
.log__row--head{ font-size:10px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
.log__row--head:hover{ background:none; padding-left:4px; }
.log__row span:first-child{ font-weight:500; display:flex; align-items:center; gap:12px; }
.log__row .dot{ flex:0 0 auto; }
.log__row .thumb{
  position:relative; flex:0 0 auto; width:192px; aspect-ratio:16/9; border-radius:4px;
  overflow:hidden; background:rgba(240,239,233,.06);
  display:flex; align-items:center; justify-content:center;
}
.log__row .thumb::before{
  content:"+"; font-family:var(--mono); font-size:16px; color:rgba(240,239,233,.28);
}
.log__row .thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.log__row:hover .thumb img{ transform:scale(1.06); }
.log__row:nth-of-type(3) .dot::after{ animation-delay:.5s; }
.log__row:nth-of-type(4) .dot::after{ animation-delay:1s; }
.log__row:nth-of-type(5) .dot::after{ animation-delay:1.5s; }
.log__row:nth-of-type(6) .dot::after{ animation-delay:2s; }
.log__row [data-l="cond"]{ color:var(--muted); }

/* ============ FEATURE ============ */
.feature{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:84vh;
  border-top:.5px solid var(--line); border-bottom:.5px solid var(--line);
}
.feature__fig{
  position:relative; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  padding:60px;
}
.feature__fig .draw{ width:min(78%,360px); }
.feature__text{
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding:clamp(48px,7vw,96px) var(--gut);
}
.feature__text h2{ font-size:clamp(28px,4vw,46px); }
.feature__text p{ color:var(--muted); font-size:15px; max-width:42ch; }

/* feature figure as full-bleed video */
.feature__fig--media{ padding:0; overflow:hidden; background:#efefe7; }
.feature__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.feature__fig--media .fig-label{ color:rgba(23,21,15,.5); z-index:2; }

/* ============ ETHOS ============ */
.ethos{
  padding:clamp(80px,12vw,180px) var(--gut);
  max-width:var(--maxw); margin:0 auto; text-align:center;
}
.ethos .idx{ margin-bottom:34px; }
.ethos__statement{
  font-size:clamp(24px,3.4vw,42px); line-height:1.1; letter-spacing:-.02em;
  max-width:34ch; margin:0 auto; font-weight:500;
}
.ethos__statement span{ color:var(--faint); }
/* dark variant — full-width dark statement band */
.ethos--dark{ background:#1D1E1C; color:#F0EFE9; max-width:none; }
.ethos--dark .ethos__statement{ color:#F0EFE9; }
.ethos--dark .ethos__statement span{ color:rgba(240,239,233,.42); }

/* split variant — video on one side, statement on the other */
.ethos--split{
  background:var(--paper); color:var(--ink); max-width:none; padding:0; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.ethos__media{
  position:relative; overflow:hidden; min-height:clamp(360px,56vh,720px);
  border-right:.5px solid var(--line);
}
.ethos__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none;
}
.ethos__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,96px) var(--gut);
}
.ethos--split .idx{ margin-bottom:28px; }
.ethos--split .ethos__statement{ margin:0; max-width:24ch; color:#c9362a; }
.ethos--split .ethos__statement span{ color:#1d1e1c; }
/* on-load reveal (index ethos) — snappier than the global .reveal so it doesn't linger */
#ethos .ethos__statement.reveal{ transition-duration:.5s; }

/* ============ SIGNUP ============ */
.signup{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:center;
  padding:clamp(48px,6vw,80px) var(--gut);
  background:var(--ink); color:var(--paper);
}
.signup h2{ font-size:clamp(22px,3vw,32px); }
.signup p{ color:rgba(243,242,238,.6); font-size:14px; margin-top:8px; max-width:40ch; }
.signup__form{ display:flex; gap:0; border-bottom:1px solid rgba(243,242,238,.4); }
.signup__form input{
  background:none; border:none; color:var(--paper);
  font-family:var(--mono); font-size:14px; padding:12px 4px; min-width:240px; outline:none;
}
.signup__form input::placeholder{ color:rgba(243,242,238,.4); }
.signup__form button{
  background:none; border:none; color:var(--paper); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  display:inline-flex; gap:8px; align-items:center; padding:12px; transition:gap .2s;
}
.signup__form button:hover{ gap:14px; }

/* ============ FOOTER ============ */
.site-foot{
  padding:clamp(56px,7vw,96px) var(--gut) 28px;
  display:grid; grid-template-columns:1.4fr 2fr; gap:48px;
  border-top:.5px solid var(--line);
}
.brand--foot{ display:inline-flex; margin-bottom:16px; }
.foot__brand p{ font-size:13px; color:var(--muted); }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.foot__h{ display:block; font-size:10px; letter-spacing:.12em; color:var(--faint);
  text-transform:uppercase; margin-bottom:14px; }
.foot__cols a{ display:block; font-size:13px; color:var(--muted); padding:4px 0; transition:color .2s; }
.foot__cols a:hover{ color:var(--ink); }
.foot__base{
  grid-column:1 / -1; display:flex; justify-content:space-between;
  border-top:.5px solid var(--line); margin-top:24px; padding-top:20px;
  font-size:11px; color:var(--faint);
}
.foot__base .mono{ letter-spacing:.06em; }

/* ============ STACKED PANELS (Obys-style, transform-driven — no sticky) ============ */
.panel{ position:relative; overflow:hidden; min-height:100vh; will-change:transform; transform-origin:center top; }
.hero.panel, .feature.panel{ background:var(--paper); }     /* solid bg so panels occlude */
/* ascending z so each panel rises over the previous; post-stack sections sit on top */
#ethos.panel{ z-index:1; }
#field.panel{ z-index:2; }
.hero.panel{ z-index:3; }
#ponchos.panel{ z-index:4; }
#gear.panel{ z-index:5; }
.signup, .site-foot{ position:relative; z-index:6; }
.panel__cover{                              /* darken overlay as the panel is covered (JS sets --cover) */
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background:#14150f; opacity:var(--cover,0);
}
@media (prefers-reduced-motion:reduce){
  .panel{ transform:none !important; }
  .panel__cover{ display:none; }
}

/* ============ OUR STORY PAGE ============ */
.feature__text h1{ font-size:clamp(40px,6vw,78px); line-height:1.02; letter-spacing:-.02em; }
.feature__eyebrow{ margin-bottom:4px; }
.feature__lead{ color:var(--muted); font-size:16px; max-width:42ch; }
.feature__text .byline{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
/* numbered sub-feature list (used in the dark submersion feature) */
.subfeats{ list-style:none; display:flex; flex-direction:column; margin:4px 0; }
.subfeats li{ display:flex; gap:18px; align-items:baseline; padding:16px 0;
  border-top:.5px solid rgba(240,239,233,.16); }
.subfeats li:last-child{ border-bottom:.5px solid rgba(240,239,233,.16); }
.subfeats__n{ flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--signal); }
.subfeats h3{ font-size:16px; letter-spacing:.01em; font-weight:500; color:#F0EFE9; margin-bottom:6px; }
.subfeats li p{ font-size:13px; line-height:1.5; color:rgba(240,239,233,.6); max-width:44ch; }

/* dark split variant */
.feature--dark.panel{ background:#1D1E1C; }
.feature--dark{ background:#1D1E1C; color:#F0EFE9; }   /* bg also for non-panel dark features (e.g. EP01 page) */
.feature--dark .feature__text p,
.feature--dark .feature__lead{ color:rgba(240,239,233,.6); }
.feature--dark .tag{ color:rgba(240,239,233,.65); }
.feature--dark .byline{ color:rgba(240,239,233,.45); }
.feature--dark .spec{ border-top-color:rgba(240,239,233,.18); }
.feature--dark .spec dt{ color:rgba(240,239,233,.45); }
.feature--dark .link-arrow:hover{ border-color:#F0EFE9; }
.feature--dark .feature__fig--media{ background:#1D1E1C; }
.feature--dark .feature__fig--media .fig-label{ color:rgba(240,239,233,.5); }
/* story page: images sit as inset plates, framed by the panel bg (not full-bleed) */
.story .feature__fig--media{ padding:clamp(40px,5vw,84px); }
.story .plate{ display:flex; flex-direction:column; align-items:flex-start; max-width:100%; }
.story .feature__fig--media .hero__photo{
  position:static; inset:auto;
  width:auto; height:auto; max-width:100%; max-height:62vh;
  object-fit:cover;
}
.story .plate .fig-label{          /* caption above the image, aligned to its left edge */
  position:static; order:-1; margin-bottom:10px;
}

/* story figure-side motion: photo wipe-in + caption fade + hover zoom (added 2026-06-22) */
.story .plate{ overflow:hidden; }
.story .feature__fig--media .hero__photo{
  transform-origin:center;
  transition:clip-path .9s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.story .feature__fig--media .hero__photo.fx-wipe{ clip-path:inset(0 0 100% 0); }
.story .feature__fig--media .hero__photo.fx-wipe.in{ clip-path:inset(0 0 0 0); }
.story .plate:hover .hero__photo.fx-wipe.in{ transform:scale(1.035); }
.story .plate .fig-label.fx-cap{
  opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease;
}
.story .plate .fig-label.fx-cap.in{ opacity:1; transform:none; }
/* spec hover: the value picks up the signal accent */
.story .spec > div dd{ transition:color .2s ease; }
.story .spec > div:hover dd{ color:var(--signal); }
@media (prefers-reduced-motion:reduce){
  .story .feature__fig--media .hero__photo.fx-wipe{ clip-path:none; }
  .story .plate:hover .hero__photo.fx-wipe.in{ transform:none; }
  .story .plate .fig-label.fx-cap{ opacity:1; transform:none; }
}

/* ============ FULL-BLEED INTERSTITIAL (image break between sections) ============ */
.interstitial{ position:relative; min-height:100vh; overflow:hidden; background:var(--ink); display:block; }
.interstitial__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.06); transition:transform 8s ease-out;   /* gentle ken-burns when in view */
}
.interstitial.in .interstitial__img{ transform:scale(1); }
/* legibility scrim under the caption */
.interstitial::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(to top, rgba(18,19,16,.55), transparent); z-index:1;
}
.interstitial__cap{
  position:absolute; z-index:2; left:clamp(22px,4vw,52px); bottom:clamp(22px,4vw,52px);
  display:flex; flex-direction:column; gap:7px; max-width:38ch;
}
.interstitial__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--signal); display:inline-flex; align-items:center; gap:10px;
}
.interstitial__txt{ font-size:clamp(20px,2.4vw,30px); line-height:1.12; color:#F0EFE9; letter-spacing:-.01em; max-width:26ch; }
.interstitial__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(240,239,233,.6); }
@media (prefers-reduced-motion: reduce){
  .interstitial__img{ transform:none; transition:none; }
}
/* embedded PDF dossier section */
.doc{ background:var(--paper); color:var(--ink); padding:clamp(64px,9vw,128px) var(--gut); }
.doc__head{ max-width:var(--maxw); margin:0 auto clamp(28px,4vw,48px); }
.doc__head .tag{ margin-bottom:18px; }
.doc__head h2{ font-size:clamp(28px,4vw,46px); margin-bottom:14px; }
.doc__head p{ color:var(--muted); font-size:15px; max-width:48ch; margin-bottom:18px; }
.flip-wrap{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.flip{ width:100%; touch-action:pan-y; }
.flip .stf__parent{ margin:0 auto; box-shadow:0 18px 50px rgba(20,21,15,.18); }
.doc__note{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:22px; text-align:center; }
.doc__note a{ color:var(--ink); border-bottom:1px solid var(--line); }

/* numbers band */
.numbers{ display:flex; flex-direction:column; justify-content:center; }
.numbers__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,4vw,48px);
  border-top:.5px solid var(--line); padding-top:clamp(28px,4vw,48px); }
.numbers__n{ font-size:clamp(40px,6vw,78px); font-weight:500; letter-spacing:-.02em; line-height:1; }
.numbers__l{ display:block; margin-top:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .numbers__grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } }

/* ============ DARK PICTURE HERO (opens the product page, WRK-style) ============ */
@font-face{                                   /* custom display face for the EP01 wordmark */
  font-family:"EP01";
  src:url("../font/EP01-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
.phero{ position:relative; height:100vh; min-height:560px; overflow:hidden; background:#0a0a0a; }
.phero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.phero__overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(22px,3.4vh,40px); text-align:center; padding:0 var(--gut); }
.phero__overlay::before{ content:""; position:absolute; inset:0; z-index:0;   /* legibility vignette */
  background:radial-gradient(125% 85% at 50% 46%, rgba(0,0,0,.12), rgba(0,0,0,.52)); }
.phero__title,.phero__cue,.phero__tag,.phero__corners{ position:relative; z-index:1; }
.phero__title{ font-family:"EP01", var(--sans); font-size:clamp(52px,11vw,180px);
  line-height:.86; letter-spacing:0; color:#fff; }
.phero__tag{ position:absolute; left:0; right:0; bottom:clamp(76px,13vh,128px); margin:0 auto;
  font-family:var(--mono); font-size:13px; letter-spacing:.05em; color:rgba(255,255,255,.64); line-height:1.55; }
.phero__corners{ position:absolute; left:0; right:0; bottom:clamp(22px,4vh,38px);
  padding:0 clamp(20px,5vw,52px); display:flex; justify-content:space-between; align-items:center; }
.phero__corners span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.52); border:.5px solid rgba(255,255,255,.2); border-radius:100px; padding:7px 15px 6px;
  line-height:1; text-indent:.14em; }
/* scroll button (bottom-centre, replaces the old centre cue) */
.phero__scroll{ pointer-events:auto; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); border:.5px solid var(--signal); border-radius:100px; padding:9px 20px;
  transition:background .22s ease, color .22s ease, border-color .22s ease; }
.phero__scroll:hover{ background:var(--signal); color:#fff; border-color:var(--signal); }
.phero__scroll svg{ stroke:currentColor; stroke-width:1.6; fill:none; display:block;
  animation:cueBob 1.9s ease-in-out infinite; }
@media (max-width:620px){ .phero__corners span{ display:none; } .phero__corners{ justify-content:center; } }

/* ============ SCROLL-SCRUB PRODUCT HERO ============ */
.scrub{ position:relative; height:360vh; background:#fff; }      /* tall scroll track drives the scrub */
.scrub__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; }
.scrub__video{ width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.scrub__canvas{ width:100%; height:100%; display:block; background:#fff; }
.scrub__overlay{ position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px,3.4vh,40px);
  text-align:center; padding:0 var(--gut); }
.scrub__title{ font-size:clamp(78px,17vw,280px); line-height:.86; letter-spacing:-.03em;
  color:#fff; mix-blend-mode:difference; }   /* inverts over the product → legible on white & on the dark pack */
.scrub__eyebrow{ position:absolute; top:clamp(96px,14vh,150px); left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); }
/* orange circular scroll-down cue (WRK-style) */
.scrub__cue{ pointer-events:auto; width:54px; height:54px; border-radius:50%;
  border:1px solid var(--signal); color:var(--signal);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease; }
.scrub__cue:hover{ background:var(--signal); color:#fff; }
.scrub__cue svg{ stroke:currentColor; stroke-width:1.5; fill:none; display:block;
  animation:cueBob 1.9s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(3px); } }
/* tagline pinned low, over the white floor */
.scrub__tag{ position:absolute; left:0; right:0; bottom:clamp(76px,13vh,128px); margin:0 auto;
  font-family:var(--mono); font-size:13px; letter-spacing:.05em; color:var(--muted); line-height:1.55; }
/* corner labels along the bottom */
.scrub__corners{ position:absolute; left:0; right:0; bottom:clamp(22px,4vh,38px);
  padding:0 clamp(20px,5vw,52px); display:flex; justify-content:space-between; pointer-events:none; }
.scrub__corners span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); border:.5px solid var(--line); border-radius:100px; padding:6px 15px; }
@media (max-width:620px){ .scrub__corners span:nth-child(2){ display:none; } }
@media (prefers-reduced-motion: reduce){
  .scrub{ height:100vh; }                     /* no scroll track — static product, no scrub */
  .scrub__cue svg{ animation:none; }
}

/* numbered product section nav (in the header on the product page) */
.prodnav{ display:none; }
@media (min-width:1000px){
  .prodnav{ display:flex; gap:clamp(22px,2.6vw,44px); }
  .prodnav a{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); display:inline-flex; align-items:baseline; gap:8px; transition:color .2s; }
  .prodnav a:hover{ color:var(--ink); }
  .prodnav__n{ color:var(--faint); }
}

/* ============ SCROLL CALLOUTS (annotations over the rotating product) ============ */
.callouts{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.callout{ position:absolute; transform:translate(-50%,-50%);   /* left/top set in px by JS, tracking the rendered frame */
  opacity:0; transition:opacity .5s ease; will-change:opacity; }
.callout__dot{ position:relative; display:block; width:12px; height:12px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 0 6px rgba(201,54,42,.14); }
.callout__dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--signal); animation:calloutPulse 2.1s ease-out infinite; }
@keyframes calloutPulse{ 0%{ transform:scale(.55); opacity:.7; } 100%{ transform:scale(2); opacity:0; } }
.callout__label{ position:absolute; top:50%; left:30px; transform:translateY(-50%); white-space:nowrap;
  display:flex; flex-direction:column; gap:4px; font-family:var(--mono);
  background:rgba(255,255,255,.7); padding:11px 16px;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.callout__label::before{ content:""; position:absolute; top:50%; left:-20px; width:20px; height:1px;
  background:var(--line-2); }
.callout__t{ font-size:14px; letter-spacing:.03em; color:var(--ink); }
.callout__n{ color:var(--signal); margin-right:9px; }
.callout__d{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.callout--left .callout__label{ left:auto; right:30px; align-items:flex-end; text-align:right; }
.callout--left .callout__label::before{ left:auto; right:-20px; }
@media (prefers-reduced-motion:reduce){ .callout__dot::after{ animation:none; } }
@media (max-width:760px){ .callouts{ display:none; } }   /* labels would crowd small screens */

/* ============ PRODUCT PAGE (WRK-product style) ============ */
/* solid buy button */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:var(--paper);
  padding:14px 24px; border:.5px solid var(--ink); cursor:pointer;
  transition:background .2s,color .2s; }
.btn:hover{ background:transparent; color:var(--ink); }
.feature--dark .btn,.block--dark .btn{ background:#F0EFE9; color:#1D1E1C; border-color:#F0EFE9; }
.feature--dark .btn:hover,.block--dark .btn:hover{ background:transparent; color:#F0EFE9; }
.buy{ display:flex; align-items:center; gap:clamp(18px,2vw,28px); flex-wrap:wrap; }
.buy .price{ font-size:22px; letter-spacing:-.01em; color:inherit; margin-top:0; }

/* EP01 technical view diagrams (light line-art on the dark datasheet) */
.ep01-diagrams{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,40px);
  align-items:center; margin:clamp(8px,1.5vw,20px) auto clamp(40px,5vw,64px); }
.ep01-diagrams figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; }
.ep01-diagrams__img{ display:block; width:100%; height:clamp(220px,30vw,360px);
  background-position:center; background-repeat:no-repeat; background-size:contain; }
.ep01-diagrams figcaption{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(240,239,233,.45); }
@media (max-width:680px){ .ep01-diagrams{ grid-template-columns:1fr; gap:36px; } }

/* Datasheet diagrams — "drawn-in" stroke-reveal: a left→right clip wipe with a travelling red
   ink edge, staggered across the three views, so each diagram appears to be inked on screen.
   (.in is added by an inline scroll-check in ep01.html when the row enters view.) */
.ep01-diagrams figure{ position:relative; }
.ep01-diagrams__img{ clip-path:inset(0 100% 0 0); }                 /* start fully clipped from the right */
.ep01-diagrams.in .ep01-diagrams__img{ animation:ep01Draw 1.5s cubic-bezier(.66,0,.28,1) forwards; }
.ep01-diagrams.in figure:nth-child(2) .ep01-diagrams__img{ animation-delay:.3s; }
.ep01-diagrams.in figure:nth-child(3) .ep01-diagrams__img{ animation-delay:.6s; }
@keyframes ep01Draw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
/* the travelling ink nib */
.ep01-diagrams figure::after{
  content:""; position:absolute; top:0; bottom:38px; left:0; width:2px; opacity:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--signal) 16%, var(--signal) 84%, transparent);
  box-shadow:0 0 12px 1px rgba(201,54,42,.55); }
.ep01-diagrams.in figure::after{ animation:ep01Nib 1.5s cubic-bezier(.66,0,.28,1) forwards; }
.ep01-diagrams.in figure:nth-child(2)::after{ animation-delay:.3s; }
.ep01-diagrams.in figure:nth-child(3)::after{ animation-delay:.6s; }
@keyframes ep01Nib{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .ep01-diagrams__img{ clip-path:none; animation:none; }
  .ep01-diagrams figure::after{ display:none; } }

/* datasheet — weights & materials table */
.dsheet{ border-top:.5px solid var(--line-2); font-family:var(--mono); }
.dsheet__row{ display:grid; grid-template-columns:2.2fr 1.6fr .8fr; gap:18px; padding:14px 4px;
  border-bottom:.5px solid var(--line); font-size:13px; align-items:baseline;
  transition:background .2s,padding-left .2s; }
.dsheet__row:not(.dsheet__row--head):not(.dsheet__row--total):hover{ background:rgba(23,21,15,.03); padding-left:12px; }
.dsheet__row span:last-child{ text-align:right; }
.dsheet__row--head{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.dsheet__c{ color:var(--muted); }
.dsheet__row--total{ border-bottom:none; border-top:.5px solid var(--line-2); font-size:15px;
  color:var(--ink); padding-top:18px; }
.dsheet__row--total span:first-child{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.block--dark .dsheet{ border-top-color:rgba(240,239,233,.3); }
.block--dark .dsheet__row{ border-bottom-color:rgba(240,239,233,.14); }
.block--dark .dsheet__row:not(.dsheet__row--head):not(.dsheet__row--total):hover{ background:rgba(240,239,233,.05); }
.block--dark .dsheet__c{ color:rgba(240,239,233,.6); }
.block--dark .dsheet__row--total{ color:#F0EFE9; border-top-color:rgba(240,239,233,.3); }
@media (max-width:560px){
  .dsheet__row{ grid-template-columns:1fr auto; gap:4px 14px; }
  .dsheet__c{ grid-column:1 / -1; order:3; }
}

/* ============ SPORTS PONCHOS explore page ============ */
.ponchos .phero__title{ font-family:var(--sans); font-weight:500; letter-spacing:-.03em; }
/* hero footage is bright/snowy — strengthen the scrim + add a bottom gradient for legibility */
.ponchos .phero__overlay::before{ background:
  radial-gradient(120% 92% at 50% 42%, rgba(0,0,0,.22), rgba(0,0,0,.62)),
  linear-gradient(to top, rgba(0,0,0,.55), transparent 30%); }
.ponchos .phero__tag{ color:rgba(255,255,255,.82); }
.ponchos .phero__corners span{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.32); }
/* hero scroll-behind (like EP01): pin the hero, the content slides up over it as you scroll.
   On load the content also slides DOWN to expose the hero. backwards fill → no persistent transform. */
.ponchos #ponchos-hero{ position:sticky; top:0; z-index:1; }
.ponchos-reveal{ position:relative; z-index:2; background:var(--paper);
  animation:ponchosReveal 1.2s cubic-bezier(.22,.61,.36,1) .05s backwards; }
@keyframes ponchosReveal{ from{ transform:translateY(calc(-1 * max(100vh,560px))); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .ponchos-reveal{ animation:none; } }
/* technical line drawings (white-on-black) — blend the black away on the dark datasheet; two up */
.ponchos .poncho-drawings{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,4vw,56px);
  align-items:end; max-width:660px; margin:clamp(16px,3vw,40px) auto clamp(28px,4vw,52px); }
.ponchos .poncho-drawings figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ponchos .poncho-drawings img{ width:100%; max-width:300px; height:auto; mix-blend-mode:lighten; }
.ponchos .poncho-drawings figcaption{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(240,239,233,.45); }
/* same "drawn-in" stroke-reveal as the EP01 datasheet diagrams (reuses ep01Draw / ep01Nib) */
.ponchos .poncho-drawings figure{ position:relative; }
.ponchos .poncho-drawings img{ clip-path:inset(0 100% 0 0); }
.ponchos .poncho-drawings.in img{ animation:ep01Draw 1.5s cubic-bezier(.66,0,.28,1) forwards; }
.ponchos .poncho-drawings.in figure:nth-child(2) img{ animation-delay:.3s; }
.ponchos .poncho-drawings figure::after{
  content:""; position:absolute; top:0; bottom:34px; left:0; width:2px; opacity:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--signal) 16%, var(--signal) 84%, transparent);
  box-shadow:0 0 12px 1px rgba(201,54,42,.55); }
.ponchos .poncho-drawings.in figure::after{ animation:ep01Nib 1.5s cubic-bezier(.66,0,.28,1) forwards; }
.ponchos .poncho-drawings.in figure:nth-child(2)::after{ animation-delay:.3s; }
@media (prefers-reduced-motion:reduce){
  .ponchos .poncho-drawings img{ clip-path:none; animation:none; }
  .ponchos .poncho-drawings figure::after{ display:none; } }
/* compare datasheet: spec | Storm | Shoreline, all left-aligned */
.ponchos .compare .dsheet__row{ grid-template-columns:1.4fr 1fr 1fr; }
.ponchos .compare .dsheet__row span:last-child{ text-align:left; }
.ponchos .compare .dsheet__row--head span{ color:rgba(240,239,233,.5); }
/* finish swatches shown in a feature */
.ponchos .finishes{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.ponchos .finish{ display:inline-flex; align-items:center; gap:8px; }
.ponchos .fdot{ width:14px; height:14px; border-radius:50%; display:inline-block; border:.5px solid rgba(0,0,0,.18); }
.ponchos .feature--dark .finishes{ color:rgba(240,239,233,.6); }
.ponchos .feature--dark .fdot{ border-color:rgba(255,255,255,.25); }
/* feature media fade in from the side on scroll (clipped by .feature__fig--media overflow:hidden) */
.product .fx-left .hero__photo, .product .fx-left .feature__video,
.product .fx-right .hero__photo, .product .fx-right .feature__video{
  opacity:0; transition:opacity .9s ease, transform 1s cubic-bezier(.22,.61,.36,1); }
.product .fx-left .hero__photo, .product .fx-left .feature__video{ transform:translateX(-9%); }
.product .fx-right .hero__photo, .product .fx-right .feature__video{ transform:translateX(9%); }
.product .fx-left.fx-in .hero__photo, .product .fx-left.fx-in .feature__video,
.product .fx-right.fx-in .hero__photo, .product .fx-right.fx-in .feature__video{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .product .fx-left .hero__photo, .product .fx-left .feature__video,
  .product .fx-right .hero__photo, .product .fx-right .feature__video{ opacity:1!important; transform:none!important; transition:none; } }

/* order grid holds 2 products (not the default 4) — 2 cols so the grid's top/left border matches the cards */
.ponchos #order .grid{ grid-template-columns:repeat(2,1fr); }
@media (max-width:620px){ .ponchos #order .grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .ponchos .compare .dsheet__row{ grid-template-columns:1fr; gap:3px 0; padding:16px 4px; }
  .ponchos .compare .dsheet__row--head{ display:none; }
  .ponchos .compare .dsheet__row span{ text-align:left; }
  .ponchos .compare .dsheet__row span:first-child{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(240,239,233,.5); margin-bottom:2px; }
  .ponchos .compare .dsheet__row span:nth-child(2)::before{ content:"Storm — "; color:rgba(240,239,233,.45); }
  .ponchos .compare .dsheet__row span:nth-child(3)::before{ content:"Shoreline — "; color:rgba(240,239,233,.45); }
}

/* ============ DOCUMENT / POLICY PAGES (shipping, returns, …) ============ */
/* One clear reading column: the lede, every section heading, body text, tables,
   steps and address all share the same width and left edge — deliberately plain. */
.doc-page{ --doc-w:680px; }
.doc-page .research-lede,
.doc-page .block{ max-width:calc(var(--doc-w) + 2 * var(--gut)); margin-inline:auto; }
/* --alt keeps its full-width background but pads to the SAME centered column,
   content left-aligned (not per-child centered) so it lines up with normal blocks. */
.doc-page .block--alt{ max-width:none; padding-inline:max(var(--gut), calc((100% - var(--doc-w)) / 2)); }
.doc-page .block--alt > *{ max-width:none; margin-inline:0; }
.doc-page .research-lede h1,
.doc-page .block__head,
.doc-page .block__head p,
.doc-page .ship-intro,
.doc-page .note,
.doc-page .doc-steps,
.doc-page .spec--inline{ max-width:none; }

.doc-page .research-lede{ padding-bottom:clamp(36px,6vh,80px); }
/* lede entrance on load — idx then headline rise + fade in (same motion as the store lede) */
.doc-page .research-lede .idx{ animation:storeRise .8s cubic-bezier(.22,.61,.36,1) .1s backwards; }
.doc-page .research-lede h1{ animation:storeRise .9s cubic-bezier(.22,.61,.36,1) .22s backwards; }
@media (prefers-reduced-motion:reduce){
  .doc-page .research-lede .idx,
  .doc-page .research-lede h1{ animation:none; }
}
/* long legal / terms document — numbered clauses flowing in the single column */
.doc-page .updated{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:0 0 clamp(28px,4vw,44px); }
.doc-page .legal__item{ padding:clamp(22px,3.2vw,34px) 0; border-bottom:.5px solid var(--line); }
.doc-page .legal__item:first-child{ padding-top:0; }
.doc-page .legal__item:last-child{ border-bottom:none; }
.doc-page .legal__h{ display:flex; gap:14px; align-items:baseline; margin:0 0 14px;
  font-size:clamp(17px,1.7vw,21px); letter-spacing:-.01em; line-height:1.25; color:var(--ink); }
.doc-page .legal__n{ font-family:var(--mono); font-size:12px; color:var(--signal); letter-spacing:.04em; flex:0 0 auto; min-width:26px; }
.doc-page .legal p{ color:var(--muted); line-height:1.65; font-size:15px; margin:0 0 .85em; }
.doc-page .legal p:last-child{ margin-bottom:0; }
.doc-page .legal__sub{ margin:16px 0 0; padding-left:40px; }
.doc-page .legal__sub + .legal__sub{ margin-top:18px; }
.doc-page .legal__subh{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink);
  text-transform:uppercase; margin:0 0 7px; }
/* dot lists (data categories, principles, rights) + retention notes */
.doc-page .dlist{ list-style:none; margin:10px 0 0; padding:0; }
.doc-page .dlist li{ position:relative; padding:6px 0 6px 20px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.doc-page .dlist li::before{ content:""; position:absolute; left:0; top:12px; width:5px; height:5px; border-radius:50%; background:var(--signal); }
.doc-page .legal__ret{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--faint); margin:12px 0 0; }
/* cookie / opt-out preferences page — per-service blocks, cookie lists, consent categories */
.cookies .svc{ margin-top:clamp(22px,3.2vw,36px); padding-top:clamp(22px,3.2vw,36px); border-top:.5px solid var(--line); }
.cookies .svc:first-of-type{ border-top:none; padding-top:6px; margin-top:6px; }
.cookies .svc__h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin:0 0 8px; }
.cookies .svc__name{ font-size:clamp(16px,1.7vw,20px); letter-spacing:-.01em; color:var(--ink); }
.cookies .svc__cat{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); }
.cookies .svc > p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 .4em; max-width:64ch; }
.cookies .ck-list{ list-style:none; margin:14px 0 0; padding:0; border-top:.5px solid var(--line); }
.cookies .ck-list li{ display:grid; grid-template-columns:1.3fr .8fr 1.7fr; gap:6px 16px; padding:10px 2px; border-bottom:.5px solid var(--line); align-items:baseline; }
.cookies .ck-list code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); word-break:break-all; }
.cookies .ck-list .ck-exp{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; }
.cookies .ck-list .ck-fn{ color:var(--muted); font-size:13.5px; line-height:1.5; }
.cookies .ck-names{ display:flex; flex-wrap:wrap; gap:7px 8px; margin:14px 0 0; }
.cookies .ck-names code{ font-family:var(--mono); font-size:11px; color:var(--muted); border:.5px solid var(--line); border-radius:5px; padding:4px 9px; word-break:break-all; }
.cookies .consent{ margin-top:16px; border-top:.5px solid var(--line); }
.cookies .consent__row{ padding:18px 2px; border-bottom:.5px solid var(--line); }
.cookies .consent__h{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin:0 0 7px; }
.cookies .consent__name{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.cookies .consent__state{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); border:.5px solid currentColor; border-radius:100px; padding:3px 11px; }
.cookies .consent p{ color:var(--muted); font-size:14px; line-height:1.6; max-width:72ch; margin:0; }
.cookies .synced{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); margin-top:clamp(28px,4vw,44px); }
.cookies .svc p a, .cookies .ck-list a, .cookies .consent p a{ color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--signal); text-decoration-thickness:1px; }
.cookies .svc p a:hover, .cookies .ck-list a:hover, .cookies .consent p a:hover{ color:var(--signal); }
.cookies .ck-names a{ text-decoration:none; }
@media (max-width:560px){
  .cookies .ck-list li{ grid-template-columns:1fr; gap:3px; padding:12px 2px; }
  .cookies .ck-list .ck-exp{ order:3; }
}
.doc-page .ship-intro{ max-width:66ch; color:var(--muted); line-height:1.6; font-size:15px; margin:0 0 clamp(26px,4vw,40px); }
.doc-page .ship-intro:last-child{ margin-bottom:0; }
.doc-page .note{ max-width:64ch; color:var(--muted); line-height:1.6; font-size:14px; margin:18px 0 0; }
.doc-page .addr{ font-style:normal; font-family:var(--mono); font-size:14px; line-height:1.85; color:var(--ink); margin:4px 0 0; }
/* numbered steps (e.g. late/missing refund) */
.doc-page .doc-steps{ list-style:none; counter-reset:s; margin:4px 0 0; padding:0; max-width:66ch; }
.doc-page .doc-steps li{ counter-increment:s; position:relative; padding:15px 0 15px 46px;
  border-bottom:.5px solid var(--line); color:var(--muted); line-height:1.6; font-size:15px; }
.doc-page .doc-steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:17px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--signal); }
.doc-page .ship-holidays{ list-style:none; margin:clamp(8px,1.5vw,16px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 40px; font-family:var(--mono); font-size:13px; }
.doc-page .ship-holidays li{ display:flex; align-items:baseline; gap:11px; padding:12px 2px;
  border-bottom:.5px solid var(--line); color:var(--ink); }
.doc-page .ship-holidays li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); flex:0 0 auto; transform:translateY(-1px); }
.doc-page .ship-cta{ display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; margin-top:8px; }
.doc-page .ship-intro a, .doc-page .note a, .doc-page .doc-steps a{ color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--signal); text-decoration-thickness:1px; }
.doc-page .ship-intro a:hover, .doc-page .note a:hover, .doc-page .doc-steps a:hover{ color:var(--signal); }
@media (min-width:561px){
  .doc-page .ship-table .dsheet__row{ grid-template-columns:3.2fr 1fr 1fr; }
}

/* ============ GLOBE HERO (rotating wireframe globe + location pins) ============ */
.globe-hero{ position:sticky; top:0; z-index:0; height:100vh; background:#0c0c0b; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,2.5vh,32px);
  padding:clamp(84px,12vh,128px) var(--gut) clamp(36px,6vh,72px); text-align:center; }
/* content layer scrolls up over the pinned hero (hero disappears behind it) */
.ft-content{ position:relative; z-index:1; background:var(--paper);
  /* on-load reveal: content covers the globe hero, then slides down to expose it (same as contact/EP01).
     fill-mode:backwards → no transform persists, so the sticky globe + scroll-away stay intact. */
  animation:ftReveal 1.2s cubic-bezier(.22,.61,.36,1) .05s backwards; }
@keyframes ftReveal{ from{ transform:translateY(-100vh); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .ft-content{ animation:none; } }

/* homepage opening reveal: a cover (matching the dark section that follows) slides down on load to
   expose the .ethos opening section. A standalone overlay — decoupled from the .panel stack system.
   z-index 40 sits above the panels (1–6) but below the floating header (60). */
.home-cover{ position:fixed; inset:0; z-index:40; background:#1D1E1C; pointer-events:none;
  animation:homeCover 1.2s cubic-bezier(.22,.61,.36,1) .05s forwards; }
@keyframes homeCover{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce){ .home-cover{ display:none; } }

/* ============ STORE ============ */
/* dark page (like ambassadors) — catalogue block uses .block--dark; footer stays light */
.store{ background:#1D1E1C; color:#F0EFE9; }
/* cinematic video hero — plain sans title, scrim fades into the dark catalogue below */
.store .phero{ background:#1D1E1C; }
.store .phero__overlay::before{ background:
  radial-gradient(120% 95% at 50% 42%, rgba(0,0,0,.26), rgba(0,0,0,.6)),
  linear-gradient(to top, #1D1E1C, rgba(29,30,28,0) 34%); }
.store .phero__tag{ color:rgba(255,255,255,.82); }
.store .phero__corners span{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.32); }
/* hero scroll-behind (same as ponchos): pin the hero, the dark catalogue slides up over it */
.store #store-hero{ position:sticky; top:0; z-index:1; }
.store-reveal{ position:relative; z-index:2; background:#1D1E1C;
  animation:ponchosReveal 1.2s cubic-bezier(.22,.61,.36,1) .05s backwards; }
@media (prefers-reduced-motion:reduce){ .store-reveal{ animation:none; } }
.store .store-reveal .research-lede{ padding-top:clamp(52px,8vh,110px); }
.store .research-lede h1{ color:#F0EFE9; }
.store .research-lede h1 em{ color:rgba(240,239,233,.5); }
.store .site-foot{ background:var(--paper); color:var(--ink); }
.store .grid{ grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,30px); border:none; }
.store .card{ color:inherit; border:.5px solid rgba(240,239,233,.16); }
.store .card__meta{ padding:24px 24px 28px; gap:9px; }
.store .card h3{ font-size:22px; }
.store .card .price{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; }
.store .card .price .arrow{ margin-left:auto; color:inherit; transition:transform .25s; }
.store a.card:hover .price .arrow{ transform:translateX(5px); }
@media (max-width:640px){ .store .grid{ grid-template-columns:1fr; } }
/* store animations: lede entrance on load + smooth card reveal/hover */
.store .research-lede .idx{ animation:storeRise .8s cubic-bezier(.22,.61,.36,1) .1s backwards; }
.store .research-lede h1{ animation:storeRise .9s cubic-bezier(.22,.61,.36,1) .2s backwards; }
@keyframes storeRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.store .card{ transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease, background .25s ease; }
.store a.card:hover{ transform:translateY(-6px); }
@media (prefers-reduced-motion:reduce){
  .store .research-lede .idx, .store .research-lede h1{ animation:none; }
  .store a.card:hover{ transform:none; }
}
.globe-hero__canvas{ display:block; width:min(72vmin,56vh,600px); height:min(72vmin,56vh,600px);
  cursor:grab; touch-action:none; }
.globe-hero__canvas:active{ cursor:grabbing; }
.globe-hero__eyebrow{ order:-1; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal); display:inline-flex; align-items:center; gap:11px; }
.globe-hero__line{ font-family:var(--mono); font-size:clamp(13px,1.5vw,15px); letter-spacing:.04em;
  line-height:1.6; color:rgba(240,239,233,.6); max-width:40ch; }
.globe-hero__line em{ font-style:normal; color:#F0EFE9; }

/* ============ FIELD RESEARCH INDEX (WRK-research style) ============ */
/* opening statement */
.research-lede{ padding:clamp(96px,18vh,200px) var(--gut) clamp(18px,2.5vw,32px); max-width:var(--maxw); margin:0 auto; }
/* ambassadors lede: matching top/bottom space (no grid follows it like on field-testing) */
.ambassadors .research-lede{ padding-bottom:clamp(96px,18vh,200px); }
/* ambassadors lede: same on-load rise as the store/doc ledes (storeRise defined above) */
.ambassadors .research-lede .idx{ animation:storeRise .8s cubic-bezier(.22,.61,.36,1) .1s backwards; }
.ambassadors .research-lede h1{ animation:storeRise .9s cubic-bezier(.22,.61,.36,1) .22s backwards; }
@media (prefers-reduced-motion:reduce){
  .ambassadors .research-lede .idx, .ambassadors .research-lede h1{ animation:none; }
}

/* ============ AMBASSADORS PAGE — dark ============ */
.ambassadors{ background:#1D1E1C; color:#F0EFE9; }
.ambassadors .research-lede h1{ color:#F0EFE9; }
.ambassadors .research-lede h1 em{ color:rgba(240,239,233,.5); }
.ambassadors .feature{ border-color:rgba(240,239,233,.14); }
/* footer stays light — its own paper band at the foot of the dark page */
.ambassadors .site-foot{ background:var(--paper); color:var(--ink); }
/* portraits slide + fade in from their respective sides (left / right / left) */
.ambassadors .feature__fig--media .hero__photo{
  transition:transform 1s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
  will-change:transform, opacity;
}
.ambassadors .fx-left .hero__photo{ opacity:0; transform:translateX(-8%); }
.ambassadors .fx-right .hero__photo{ opacity:0; transform:translateX(8%); }
.ambassadors .fx-left.fx-in .hero__photo,
.ambassadors .fx-right.fx-in .hero__photo{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ambassadors .feature__fig--media .hero__photo{ transition:none !important; opacity:1 !important; transform:none !important; }
}
#reports{ padding-top:clamp(8px,1.5vw,18px); }
.research-lede .idx{ margin-bottom:26px; }
.research-lede h1{ font-size:clamp(26px,3.4vw,46px); line-height:1.18; letter-spacing:-.01em;
  font-weight:400; max-width:none; }
.research-lede h1 em{ font-style:normal; color:var(--muted); }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  border-top:.5px solid var(--line); border-left:.5px solid var(--line); }
.contact-card{ display:flex; flex-direction:column; gap:14px; color:inherit;
  padding:clamp(30px,4vw,52px) clamp(24px,2.6vw,40px);
  min-height:clamp(220px,26vw,320px);
  border-right:.5px solid var(--line); border-bottom:.5px solid var(--line);
  transition:background .25s; }
a.contact-card:hover{ background:var(--surface); }
.contact-card__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); display:inline-flex; align-items:center; gap:10px; }
.contact-card__big{ font-size:clamp(18px,1.8vw,22px); letter-spacing:-.015em; line-height:1.15;
  margin-top:auto; white-space:nowrap; }
.contact-card__addr{ font-style:normal; font-size:clamp(17px,1.7vw,21px); line-height:1.45; margin-top:auto; }
.contact-card__note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
  line-height:1.6; max-width:32ch; }
.contact-card .arrow{ font-family:var(--mono); font-size:12px; color:var(--faint); transition:transform .25s, color .2s; }
a.contact-card:hover .arrow{ transform:translateX(5px); color:var(--ink); }
@media (max-width:1000px){ .contact-grid{ grid-template-columns:1fr; } }
/* contact image bands: shorter than the full-screen field-report interstitials */
.contact .interstitial{ min-height:clamp(360px,66vh,600px); }
/* on-load reveal: the Contact content covers the hero, then slides down to expose it from behind */
.contact #break-hello{ position:relative; z-index:1; }
.contact-reveal{ position:relative; z-index:2; background:var(--paper);
  animation:contactReveal 1.2s cubic-bezier(.22,.61,.36,1) .05s both; }
@keyframes contactReveal{
  from{ transform:translateY(calc(-1 * clamp(360px,66vh,600px))); }
  to{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){ .contact-reveal{ animation:none; } }

/* EP01 hero reveal on load — same idea: the product content slides down to expose the dark hero from
   behind it. fill-mode:backwards so NO transform persists after the reveal (keeps .scrub sticky intact). */
/* The hero is also STICKY (top:0, z-index:1) so on scroll it stays pinned and the white .ep01-reveal
   layer (z-index:2 — the scroll-scrub section is its first child) rises up and covers it: the hero
   slides BEHIND the scrub. Sticky adds no transform, so .scrub__sticky scrubbing stays intact. */
.product #ep01-hero-img{ position:sticky; top:0; z-index:1; }
.ep01-reveal{ position:relative; z-index:2; background:#fff;
  animation:ep01Reveal 1.2s cubic-bezier(.22,.61,.36,1) .05s backwards; }
@keyframes ep01Reveal{
  from{ transform:translateY(calc(-1 * max(100vh, 560px))); }
  to{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){ .ep01-reveal{ animation:none; } }

/* reports grid — dated, image-backed entry cards */
.reports{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.4vw,40px); }
.report{ display:flex; flex-direction:column; gap:16px; color:inherit; }
.report__fig{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface); }
.report__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease; }
.report:hover .report__img{ transform:scale(1.04); }
.report__title{ font-size:19px; line-height:1.22; }
.report__meta{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  display:flex; align-items:center; gap:10px; }
.report__meta .arrow{ margin-left:auto; transition:transform .25s; color:var(--ink); }
.report:hover .report__meta .arrow{ transform:translateX(5px); }

/* archive — filterable list */
.filters{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); margin-bottom:30px; }
.filters__group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filters__label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-right:4px; }
.chip{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; background:none;
  border:.5px solid var(--line-2); color:var(--muted); padding:5px 13px; border-radius:100px;
  cursor:pointer; transition:color .2s,background .2s,border-color .2s; }
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.arch{ border-top:.5px solid var(--line-2); font-family:var(--mono); }
.arch__row{ display:grid; grid-template-columns:1.1fr 2.6fr 1fr .7fr; gap:18px; padding:16px 4px;
  border-bottom:.5px solid var(--line); align-items:center; font-size:13px;
  transition:background .2s,padding-left .2s; }
.arch__row--head{ font-size:10px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
.arch__row:not(.arch__row--head):hover{ background:rgba(23,21,15,.03); padding-left:12px; }
.arch__row[hidden]{ display:none; }
.arch__title{ color:var(--ink); }
.arch__row [data-c="type"],.arch__row [data-c="prod"]{ color:var(--muted); }
.arch__empty{ font-family:var(--mono); font-size:13px; color:var(--muted); padding:22px 4px; }
/* archive on the dark ground (matches homepage field-testing section) */
.block--dark .filters__label{ color:rgba(240,239,233,.45); }
.block--dark .chip{ border-color:rgba(240,239,233,.22); color:rgba(240,239,233,.62); }
.block--dark .chip:hover{ color:#F0EFE9; border-color:#F0EFE9; }
.block--dark .chip.is-active{ background:#F0EFE9; color:#1D1E1C; border-color:#F0EFE9; }
.block--dark .arch{ border-top-color:rgba(240,239,233,.3); }
.block--dark .arch__row{ border-bottom-color:rgba(240,239,233,.14); }
.block--dark .arch__row--head{ color:rgba(240,239,233,.45); }
.block--dark .arch__row:not(.arch__row--head):hover{ background:rgba(240,239,233,.05); }
.block--dark .arch__title{ color:#F0EFE9; }
.block--dark .arch__row [data-c="type"],.block--dark .arch__row [data-c="prod"]{ color:rgba(240,239,233,.6); }
.block--dark .arch__empty{ color:rgba(240,239,233,.6); }

/* ============ FIELD REPORT (detail page, e.g. Antarctica) ============ */
/* hero reuses .phero shell — plain sans title (not the EP01 face) + light eyebrow */
.phero__title--plain{ font-family:var(--sans); font-weight:500; letter-spacing:-.03em; }
/* scroll-away hero: pin it behind, let the report content scroll up and over it */
.field-report .phero{ position:sticky; top:0; z-index:0; }
.fr-content{ position:relative; z-index:1; background:var(--paper); }
.phero .tag{ color:rgba(255,255,255,.92); }
/* the report hero photo is brighter than the EP01 one — add top+bottom scrims so the
   eyebrow, scroll cue, tagline and corner tags stay legible over clouds/water */
.field-report .phero__overlay::before{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.22) 30%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.74)),
    radial-gradient(120% 88% at 50% 46%, rgba(0,0,0,.28), rgba(0,0,0,.52));
}
/* the scrim (::before) is positioned at z-index:0 — which paints ABOVE non-positioned
   overlay children. The title/tagline/corners are lifted to z-index:1 already, but the
   eyebrow and scroll cue are not, so the stronger scrim was covering them. Lift them. */
.field-report .phero .tag,
.field-report .phero__scroll{ position:relative; z-index:1; }
/* the tagline + corner tags live OUTSIDE .phero__overlay (siblings of it) and are only
   z-index:1, while the overlay carrying the scrim is z-index:2 — so the scrim was painting
   over them. Lift them above the overlay (the scrim still darkens the photo behind). */
.field-report .phero__tag,
.field-report .phero__corners{ z-index:3; }
/* scroll cue in white to match the rest of the hero text (not the brand orange) */
.field-report .phero__scroll{ color:#fff; border-color:rgba(255,255,255,.55); }
.field-report .phero__scroll:hover{ background:#fff; color:var(--ink); border-color:#fff; }
/* all hero text white; a shadow so it reads over the bright water/clouds */
.field-report .phero .tag,
.field-report .phero__tag{ color:#fff; }
.field-report .phero__tag{ text-align:center; }
/* eyebrow ping dot stays the brand red — the one non-white hero accent */
.field-report .phero__corners span{ color:#fff; border-color:rgba(255,255,255,.45); }
.field-report .phero .tag,
.field-report .phero__tag,
.field-report .phero__corners span,
.field-report .phero__scroll{ text-shadow:0 1px 18px rgba(0,0,0,.85); }
.field-report .phero__title{ text-shadow:0 2px 40px rgba(0,0,0,.45); }
/* back crumb at the top of the lede */
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;
  transition:color .2s, gap .2s; }
.crumb:hover{ color:var(--ink); gap:12px; }
.research-lede h2{ font-size:clamp(26px,3.4vw,46px); line-height:1.18; letter-spacing:-.01em;
  font-weight:400; max-width:none; }
.research-lede h2 em{ font-style:normal; color:var(--muted); }
/* dossier — labelled field-report metadata */
.dossier{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,40px); border-top:.5px solid var(--line); padding-top:clamp(22px,3vw,32px); }
.dossier dt{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); }
.dossier dd{ font-family:var(--mono); font-size:14px; line-height:1.45; color:var(--ink); margin-top:7px; }
/* the log body — constrained editorial column */
.logbody{ max-width:60ch; margin-top:clamp(40px,6vw,72px); }
.logbody__label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-bottom:16px; }
.logbody p{ font-size:clamp(16px,1.55vw,19px); line-height:1.5; color:var(--ink); }
.logbody p + p{ margin-top:1.05em; }
/* the key finding — red-ruled pull-quote */
.pull{ margin:clamp(36px,5vw,60px) 0 0; padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-left:2px solid var(--signal); background:var(--surface); max-width:60ch; }
.pull p{ font-size:clamp(17px,1.8vw,22px); line-height:1.35; letter-spacing:-.01em; color:var(--ink); }
.pull .pull__l{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-bottom:12px; }
/* field footage — grid of looping clips */
.clips{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(26px,3vw,40px); }
.clips--3{ grid-template-columns:repeat(3,1fr); }   /* 3-up gallery row */
.clip{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#111; }
.clip video,.clip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.clip::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 42%); pointer-events:none; }
.clip figcaption{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85);
  display:flex; align-items:center; gap:9px; }
.clip figcaption::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--signal); }
/* full-bleed interstitial can hold a looping video as well as an <img> */
.interstitial__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; transform:scale(1.06); transition:transform 9s ease-out; }
.interstitial.in .interstitial__video{ transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .interstitial__video{ transform:none; transition:none; } }
/* related links row */
.related{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); border-top:.5px solid var(--line);
  padding-top:clamp(26px,3vw,38px); }
@media (max-width:640px){ .clips{ grid-template-columns:1fr; } }

/* ============ APPLE-STYLE BUY EXPERIENCE (EP01 prototype) ============ */
/* colourway / finish picker */
.colourways{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; background:none;
  border:.5px solid var(--line-2); border-radius:100px; padding:6px 15px 6px 7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
  transition:border-color .2s, color .2s; }
.swatch__dot{ width:17px; height:17px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2); }
.swatch:hover{ color:var(--ink); border-color:var(--ink); }
.swatch.is-active{ color:var(--ink); border-color:var(--ink); }

/* order configurator (image | finish + price + add-to-bag) */
.order-config{ display:grid; grid-template-columns:1fr 1fr; border:.5px solid var(--line); }
.order-config__media{ background:var(--surface); display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,4vw,56px); border-right:.5px solid var(--line); overflow:hidden; }
.order-config__media img{ width:100%; max-width:440px; transition:opacity .3s ease; }
.order-config__panel{ display:flex; flex-direction:column; gap:18px; justify-content:center;
  padding:clamp(32px,4.5vw,64px); }
.order-config__panel h3{ font-size:clamp(22px,2.6vw,30px); }
.order-config__row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.order-config .price{ font-family:var(--mono); font-size:18px; margin-top:0; }
@media (max-width:760px){
  .order-config{ grid-template-columns:1fr; }
  .order-config__media{ border-right:none; border-bottom:.5px solid var(--line); }
}

/* sticky buy bar — slides up once you scroll past the hero */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:55;
  transform:translateY(110%); transition:transform .42s cubic-bezier(.22,.61,.36,1);
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); border-top:.5px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px clamp(16px,3vw,44px); }
.buybar.show{ transform:translateY(0); }
.buybar__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.buybar__name{ font-size:14px; letter-spacing:-.01em; }
.buybar__sub{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.buybar__right{ display:flex; align-items:center; gap:clamp(12px,2vw,24px); }
.buybar__price{ font-family:var(--mono); font-size:15px; white-space:nowrap; }
.buybar .btn{ padding:11px 22px; }
@media (max-width:560px){ .buybar__sub{ display:none; } .buybar .btn span{ display:none; } }

/* slide-out cart drawer + backdrop */
.cart-backdrop{ position:fixed; inset:0; z-index:70; background:rgba(12,12,11,.55);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.cart-backdrop.open{ opacity:1; visibility:visible; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(440px,92vw);
  background:var(--paper); color:var(--ink); transform:translateX(100%);
  transition:transform .44s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.22); }
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer__head{ display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:.5px solid var(--line); }
.cart-drawer__title{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.cart-drawer__close{ background:none; border:none; cursor:pointer; color:var(--ink); display:flex; padding:4px; }
.cart-drawer__close svg{ stroke:currentColor; stroke-width:1.4; fill:none; }
.cart-drawer__body{ flex:1; overflow-y:auto; padding:4px 24px; }
.cart-drawer__empty{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:40px 0; text-align:center; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:start;
  padding:20px 0; border-bottom:.5px solid var(--line); }
.cart-item__img{ width:64px; aspect-ratio:1; object-fit:cover; background:var(--surface); }
.cart-item__name{ font-size:15px; line-height:1.2; }
.cart-item__opt{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.cart-item__ctrl{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.cart-item__step{ display:inline-flex; align-items:center; border:.5px solid var(--line-2); }
.cart-item__step button{ background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:13px;
  width:26px; height:26px; color:var(--ink); }
.cart-item__step span{ font-family:var(--mono); font-size:12px; min-width:20px; text-align:center; }
.cart-item__remove{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); background:none; border:none; cursor:pointer; transition:color .2s; }
.cart-item__remove:hover{ color:var(--signal); }
.cart-item__price{ font-family:var(--mono); font-size:13px; white-space:nowrap; }
.cart-drawer__foot{ padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:.5px solid var(--line); }
.cart-drawer__line{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:13px; margin-bottom:6px; }
.cart-drawer__line--total{ font-size:15px; color:var(--ink); margin-bottom:18px; }
.cart-drawer__note{ font-family:var(--mono); font-size:10px; color:var(--faint); margin-bottom:16px; letter-spacing:.04em; }
.cart-drawer__checkout{ width:100%; justify-content:center; }
.cart-drawer__cont{ display:block; text-align:center; margin-top:12px; font-family:var(--mono);
  font-size:11px; letter-spacing:.06em; color:var(--muted); cursor:pointer; background:none; border:none; width:100%; }
.cart-drawer__cont:hover{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){
  .buybar, .cart-drawer, .cart-backdrop{ transition:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__fig{ border-left:none; border-top:.5px solid var(--line); min-height:340px; padding:40px; }
  .ethos--split{ grid-template-columns:1fr; }
  .ethos__media{ min-height:300px; border-right:none; border-bottom:.5px solid var(--line); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .feature{ grid-template-columns:1fr; }
  .feature__fig{ border-right:none; border-bottom:.5px solid var(--line); padding:48px; min-height:320px; }
  .log__row{ grid-template-columns:1fr 1fr; gap:6px 18px; }
  .log__row--head{ display:none; }
  .log__row [data-l]::before{ content:attr(data-l) " — "; color:var(--faint); }
  .log__row [data-l="location"]::before{ content:""; }
  .site-foot{ grid-template-columns:1fr; }
  .reports{ grid-template-columns:repeat(2,1fr); }
  .arch__row{ grid-template-columns:1fr 1fr; gap:6px 18px; }
  .arch__row--head{ display:none; }
  .arch__row [data-c]::before{ content:attr(data-c) " — "; color:var(--faint); }
  .arch__row .arch__title{ grid-column:1 / -1; }
  .arch__row [data-c="year"]::before{ content:""; }
}
@media (max-width:760px){
  .menu__cols{ grid-template-columns:1fr; gap:clamp(34px,6vh,56px); margin-top:clamp(32px,5vh,60px); }
  .menu__word{ font-size:clamp(26px,7vw,40px); letter-spacing:5px; }
}
@media (max-width:560px){
  .cart{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .reports{ grid-template-columns:1fr; }
  .spec{ grid-template-columns:repeat(2,1fr); gap:18px 32px; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
}