:root{
  /* Water */
  --harbour:#193062;
  --fathom:#005598;
  --signal:#3399FF;
  --shoal:#64CCC9;
  --beacon:#FFCD00;
  --flare:#DC3513;
  --ember:#AB2328;
  --channel:#369DA0;
  --cedar:#125252;
  --amber:#B97000;
  --clay:#76232F;
  --dusk:#5D4E8E;
  --frost:#F2F4F6;
  --haze:#CCD9E5;
  --granite:#B1B7B3;

  /* Shoreline, added to this system */
  --linen:#FDFAF3;
  --straw:#F2E5CD;
  --rope:#E8D4B2;
  --timber:#7A694C;

  /* Derived tints of Harbour. Not palette colours, screen depth only. */
  --harbour-lift:#234276;
  --harbour-shade:#12244B;

  --rule-dark:rgba(253,250,243,.16);
  --rule-light:rgba(25,48,98,.16);

  --sans:"TT Norms","Figtree","Helvetica Neue",Arial,sans-serif;
  --script:"Fineday","Brush Script MT",cursive;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ticker-h:46px;
  --swell-dur:13s;
  --feat-dur:6s;
  
  --cloud-floor:10px;
  --gut:clamp(20px,5vw,72px);
  --max:1340px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--harbour);
  color:var(--linen);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--beacon);color:var(--harbour)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}

/* ---------- type scale ---------- */
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  margin:0;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.02em;line-height:.94}
h3{font-weight:700}h4{font-weight:700}
h2{font-size:clamp(2.4rem,6.2vw,5.6rem);text-transform:uppercase}
h3{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.05;letter-spacing:-.015em}
h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.005em;line-height:1.3}
p{margin:0}
.lede{font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.45;font-weight:400;letter-spacing:-.01em;max-width:30ch}
.body{max-width:62ch}
.muted{opacity:.72}
.mono{font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(72px,11vh,150px)}
.on-harbour{background:var(--harbour);color:var(--linen)}
.on-cedar{background:var(--cedar);color:var(--linen)}
.on-straw{background:var(--straw);color:var(--harbour)}
.on-linen{background:var(--linen);color:var(--harbour)}

.sec-head{display:flex;flex-direction:column;gap:clamp(14px,2vw,26px);margin-bottom:clamp(36px,5vw,72px)}
.sec-head .eyebrow{color:var(--beacon)}
.on-straw .sec-head .eyebrow,.on-linen .sec-head .eyebrow{color:var(--ember)}
.sec-head .lede{max-width:36ch;opacity:.85}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--harbour);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:9px var(--gut);
  display:flex;align-items:center;gap:clamp(12px,3vw,40px);
}
.nav-mark{width:72px;flex:0 0 auto;color:var(--linen);display:block}
.home{transition:opacity .25s var(--ease)}
.home:hover{opacity:.72}
.nav-mark svg{width:100%;height:auto}
.nav-links{display:flex;gap:clamp(12px,2.2vw,30px);margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--linen);opacity:.6;transition:opacity .25s var(--ease),color .25s var(--ease);
  padding:6px 0;
}
.nav-links a:hover,.nav-links a.on{opacity:1;color:var(--beacon)}
.nav-links a.soon{opacity:.28;pointer-events:none}
.nav-ver{font-family:var(--mono);font-size:.68rem;opacity:.45;letter-spacing:.08em;display:none}
@media(min-width:1100px){.nav-ver{display:block}}
@media(max-width:900px){
  .nav-links a.soon{display:none}
  .nav-in{gap:14px;padding:7px var(--gut)}
  .nav-mark{width:60px}
  .nav-links{gap:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start;min-width:0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:.66rem;letter-spacing:.1em;white-space:nowrap}
}
@media(max-width:560px){
  .nav-mark{width:54px}
  .nav-links a{font-size:.62rem;letter-spacing:.08em}
}

/* ---------- hero: the sky ---------- */
.hero{
  position:relative;min-height:min(53vh,472px);
  display:grid;place-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--fathom) 0%,var(--signal) 68%,var(--haze) 100%);
}
.sky-layer{position:absolute;top:0;bottom:var(--cloud-floor);left:0;right:0}
.cloud{will-change:transform}
.cloud{position:absolute;left:0;color:#fff}
.cloud svg{width:100%;height:auto}
.sky-far{z-index:1}
.sky-mid{z-index:2}
.sky-near{z-index:3}
/* Overhead reads as near: large, fast, translucent. The horizon reads as far: small, slow, solid. */
.sky-far{opacity:.86}
.sky-mid{opacity:.66}
.sky-near{opacity:.46}

.feature{position:relative;z-index:5;width:min(92vw,560px)}
.feature-card{
  background:var(--linen);color:var(--harbour);
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.2vw,44px) clamp(18px,2.2vw,26px);
  border-radius:4px;
}
.feature-slides{position:relative}
.fslide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.fslide.is-on{position:relative;opacity:1;transform:none;pointer-events:auto}
.fslide .eyebrow{color:var(--flare)}
.fslide h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.04;letter-spacing:-.02em;font-weight:800}
.fscript{font-family:var(--script);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1;color:var(--fathom);margin-top:-4px}
.fbody{font-size:.95rem;line-height:1.55;opacity:.78;max-width:44ch}
.fbtn{
  margin-top:8px;font-size:1.2rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--signal);color:var(--harbour);padding:15px 26px;border-radius:999px;
  transition:transform .25s var(--ease);
}
.feature:hover .fbtn{transform:translateY(-2px)}
.fdots{display:flex;gap:8px;margin-top:clamp(16px,2vw,24px)}
.fdot{
  flex:1;height:3px;border:none;padding:0;cursor:pointer;border-radius:2px;
  background:var(--rope);position:relative;overflow:hidden;
}
.fdot[aria-selected="true"]{background:var(--reed)}
.fdot[aria-selected="true"]::after{
  content:"";position:absolute;inset:0;transform-origin:left;background:var(--signal);
  animation:fbar var(--feat-dur) linear forwards;
}
.feature.paused .fdot[aria-selected="true"]::after{animation-play-state:paused}
@keyframes fbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .fslide{transition:none}
  .fdot[aria-selected="true"]::after{animation:none;transform:scaleX(1)}
}

.marquee{
  position:relative;z-index:6;
  background:var(--rope);
  overflow:hidden;padding-block:clamp(22px,3.2vh,34px);
}
.marquee-track{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.marquee-set{display:flex;flex:0 0 auto}
.marquee span{
  font-size:clamp(1rem,1.3vw,1.25rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--harbour);padding-inline:clamp(16px,1.8vw,30px);white-space:nowrap;
}


@media(max-width:760px){
  .hero{min-height:min(46vh,340px)}
  .cloud{transform:scale(1.6);transform-origin:left bottom}
}


/* ---------- water: whitecaps running to shore ---------- */
.water{
  position:relative;height:var(--ticker-h);overflow:hidden;
  background:linear-gradient(180deg,var(--fathom) 0%,var(--signal) 60%,var(--shoal) 100%);
}
.cap{
  position:absolute;left:0;right:0;height:2px;
  background:rgba(255,255,255,.95);
  opacity:0;
  animation:swell var(--swell-dur) cubic-bezier(.5,.02,.78,.5) var(--delay) infinite;
}
@keyframes swell{
  0%   {transform:translate3d(0,calc(var(--ticker-h) * .17),0) scaleY(.4);opacity:0}
  20%  {opacity:.16}
  60%  {opacity:.66}
  88%  {opacity:1}
  100% {transform:translate3d(0,var(--ticker-h),0) scaleY(2.6);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .cap{animation:none;opacity:.6}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- brand ---------- */
.pull{
  font-size:clamp(2rem,5.4vw,4.6rem);font-weight:800;line-height:.98;letter-spacing:-.025em;
  text-wrap:balance;max-width:16ch;
}
.pull em{font-style:normal;color:var(--flare)}
.cols{display:grid;gap:clamp(24px,3.4vw,56px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pillar{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid var(--harbour)}
.pillar .eyebrow{color:var(--ember)}
.pillar p{opacity:.82;font-size:.98rem}
.split{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

.voice{display:grid;gap:2px;background:var(--rule-light);border:1px solid var(--rule-light)}
.voice div{background:var(--straw);padding:clamp(16px,2vw,24px);display:flex;gap:16px;align-items:baseline}
.voice b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;flex:0 0 42px;color:var(--timber);font-weight:500}
.voice.dark div{background:var(--harbour)}
.voice.dark{background:var(--rule-dark);border-color:var(--rule-dark)}
.voice.dark b{color:var(--shoal)}

.notlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.notlist li{display:flex;gap:14px;align-items:baseline;font-size:1rem}
.notlist li::before{content:"";flex:0 0 22px;height:2px;background:var(--flare);transform:translateY(-5px)}
.on-straw .notlist li::before,.on-linen .notlist li::before{background:var(--ember)}

/* ---------- logo explorer ---------- */
.explorer{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr}
@media(min-width:1000px){.explorer{grid-template-columns:minmax(0,1fr) 300px}}
.stage{
  position:relative;display:grid;place-items:center;
  min-height:clamp(340px,52vh,560px);
  padding:clamp(28px,5vw,72px);
  border:1px solid var(--rule-dark);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.stage[data-ground="navy"]{background:var(--harbour);color:var(--linen)}
.stage[data-ground="sand"]{background:var(--straw);color:var(--harbour)}
.stage[data-ground="paper"]{background:var(--linen);color:var(--harbour)}
.mark{width:100%;display:grid;place-items:center}
.mark svg{width:100%;height:auto}
.mark[data-lock="seal"],.mark[data-lock="badge"]{max-width:min(56%,360px)}
.mark[data-lock="seal"] svg{border-radius:50%}
.clearspace .cs-mark svg,.minrow .m1 svg{border-radius:50%}
.mark[data-lock="horizontal"]{max-width:min(94%,760px)}
.mark.mono svg path{fill:currentColor}
.stage-warn{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ember);color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 18px;display:none;
}
.stage.warn .stage-warn{display:block}
.stage.warn .mark{opacity:.3}

.ctrls{display:flex;flex-direction:column;gap:22px}
.ctrl .eyebrow{opacity:.5;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.03em;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  background:transparent;color:inherit;
  border:1.5px solid var(--rule-dark);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.opt:hover{border-color:var(--signal)}
.opt[aria-pressed="true"]{background:var(--linen);color:var(--harbour);border-color:var(--linen)}
.on-straw .opt,.on-linen .opt{border-color:var(--rule-light)}
.on-straw .opt[aria-pressed="true"],.on-linen .opt[aria-pressed="true"]{background:var(--linen);color:var(--harbour);border-color:var(--linen)}

.btn{
  font:inherit;font-size:clamp(1.2rem,1.35vw,1.35rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:22px 38px;border-radius:999px;border:none;cursor:pointer;
  background:var(--signal);color:var(--harbour);
  display:inline-flex;align-items:center;gap:12px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  box-shadow:0 0 0 0 rgba(51,153,255,.5);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 -4px rgba(51,153,255,.45)}
.btn:active{transform:translateY(0)}
.dl{display:flex;flex-direction:column;gap:8px}
.btn-sm{
  font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  padding:13px 16px;border-radius:10px;cursor:pointer;text-align:left;
  background:transparent;color:inherit;border:1.5px solid var(--rule-dark);
  display:flex;align-items:baseline;gap:10px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.btn-sm i{font-style:normal;font-family:var(--mono);font-size:.64rem;opacity:.5;letter-spacing:.03em;margin-left:auto}
.btn-sm:hover{border-color:var(--signal);background:rgba(51,153,255,.1)}
.btn-sm[disabled]{opacity:.32;cursor:not-allowed}
.opt[data-off]{opacity:.28;pointer-events:none}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor}
.btn.ghost:hover{background:currentColor;color:var(--harbour);box-shadow:none}

.patchwork{display:grid;gap:clamp(24px,3.6vw,56px);grid-template-columns:1fr;align-items:start;margin-top:clamp(44px,6vw,88px)}
@media(min-width:920px){.patchwork{grid-template-columns:1.05fr .95fr}}
.patch-left{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px)}
.patch-rec{max-width:430px;padding-top:clamp(2px,1vw,10px)}
.patch-figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.pfig{margin:0;display:flex;flex-direction:column;gap:14px}
.pfig .art{aspect-ratio:1;border-radius:4px;background-image:var(--patchimg);
  background-size:78%;background-position:center;background-repeat:no-repeat}
.pfig .art.on-sand{background-color:var(--straw)}
.pfig .art.on-navy{background-color:var(--harbour);box-shadow:inset 0 0 0 1px rgba(253,250,243,.14)}
.pfig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;line-height:1.8;opacity:.55}
.patch-spec{display:flex;flex-direction:column;gap:18px}
.patch-spec .eyebrow{color:var(--shoal)}
.patch-spec h3{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.05;letter-spacing:-.02em;font-weight:800}
.patch-spec p{font-size:.95rem;opacity:.82;max-width:46ch}
.threads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em}
.threads{max-width:430px}
.threads li{display:grid;grid-template-columns:16px 1fr auto;gap:14px;align-items:center}
.threads .sw{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(253,250,243,.18)}
.threads b{font-weight:500}
.threads i{font-style:normal;opacity:.5;text-align:right}
.patch-spec p.ptnote{font-size:.7rem;opacity:.5;line-height:1.9;max-width:52ch}
@media(max-width:919px){.patch-spec{order:-1}}
@media(max-width:640px){
  .threads li{grid-template-columns:16px 1fr;gap:4px 12px}
  .threads i{grid-column:2;text-align:left;opacity:.42}
}
.specs{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:clamp(40px,6vw,88px)}
.spec{display:flex;flex-direction:column;gap:14px}
.spec .eyebrow{color:var(--shoal)}
.on-straw .spec .eyebrow,.on-linen .spec .eyebrow{color:var(--timber)}
.spec p{font-size:.95rem;opacity:.82}

.clearspace{position:relative;aspect-ratio:1;padding:12.5%;border:1.5px dashed rgba(25,48,98,.3);background:var(--linen);display:grid;place-items:center}
.clearspace::before{content:"";position:absolute;inset:12.5%;border:1.5px solid var(--flare);opacity:.75;border-radius:50%}
.clearspace .cs-mark{width:100%}
.clearspace .cs-mark svg{width:100%;height:auto}
.minrow .m1 svg,.minrow .m2 svg{width:100%;height:auto}
.cs-tag{position:absolute;top:7px;left:10px;font-family:var(--mono);font-size:.64rem;color:var(--timber);letter-spacing:.06em}

.minrow{display:flex;align-items:flex-end;gap:26px}
.minrow figure{margin:0}
.minrow .m1{width:128px}.minrow .m2{width:72px}
.minlist{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin:4px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em}
.minlist dt{opacity:.55}
.minlist dd{margin:0;font-variant-numeric:tabular-nums}

/* ---------- colour ---------- */
.group{margin-bottom:clamp(34px,4.4vw,64px)}
.group-head{display:flex;align-items:baseline;gap:18px;padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--rule-light)}
.group-head h3{flex:0 0 auto}
.group-head p{font-size:.92rem;opacity:.7;max-width:52ch}
.swatches{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.group.core .swatches{grid-template-columns:minmax(240px,400px)}
.group.core .sw-chip{height:clamp(150px,17vw,220px)}
@media(min-width:1120px){.group.series .swatches{grid-template-columns:repeat(6,1fr)}}
.sw{
  border:none;padding:0;font:inherit;text-align:left;cursor:pointer;background:none;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease);
}
.sw:hover{transform:translateY(-5px)}
.sw-chip{height:clamp(110px,13vw,164px);border-radius:3px 3px 0 0;position:relative;display:grid;place-items:end start;padding:14px;box-shadow:inset 0 0 0 1px rgba(25,48,98,.14)}
.sw-chip span{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;opacity:0;transition:opacity .25s var(--ease)}
.sw:hover .sw-chip span,.sw:focus-visible .sw-chip span{opacity:.9}
.sw-body{padding:12px 2px 0;display:flex;flex-direction:column;gap:5px;border-top:2px solid currentColor}
.sw-name{font-weight:800;font-size:1rem;letter-spacing:-.01em}
.sw-name i{font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:400;opacity:.45;letter-spacing:.04em;margin-left:6px}
.sw-role{font-size:.83rem;opacity:.66;line-height:1.4}
.sw-data{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.sw-data code{font-family:var(--mono);font-size:.7rem;opacity:.72;letter-spacing:.02em}

.scroller{overflow-x:auto}

/* ---------- type ---------- */
.spec-row{display:grid;gap:clamp(10px,2vw,30px);grid-template-columns:1fr;padding-block:clamp(18px,2.4vw,32px);border-bottom:1px solid var(--rule-dark);align-items:baseline}
@media(min-width:820px){.spec-row{grid-template-columns:130px minmax(0,1fr) 210px}}
.spec-row .lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;opacity:.55;text-transform:uppercase}
.spec-row .meta{font-family:var(--mono);font-size:.68rem;line-height:1.7;opacity:.55}
.w950{font-weight:950}.w900{font-weight:900}.w800{font-weight:800}.w700{font-weight:700}.w400{font-weight:400}
.sz-display{font-size:clamp(3rem,10vw,8rem);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;font-weight:900}
.sz-h2{font-size:clamp(2rem,5vw,3.6rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;font-weight:800}
.sz-h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.015em;font-weight:700}
.sz-lede{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45;font-weight:400;letter-spacing:-.01em}
.sz-body{font-size:1.0625rem;line-height:1.6;font-weight:400}
.sz-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

.script-demo{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px)}
.script-art{width:min(100%,780px);color:var(--beacon)}
.script-art svg{width:100%;height:auto}
.fineday-hero{font-family:var(--script);font-weight:400;color:var(--beacon);font-size:clamp(4rem,13vw,11rem);line-height:1.05;letter-spacing:0;margin:0}
.fineday-set{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:baseline}
.fineday-line{font-family:var(--script);font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.25;color:var(--linen)}
.fd-swash{font-feature-settings:'ss04' 1}
.fd-pair{display:grid;gap:8px}
.fd-pair .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;opacity:.5;text-transform:uppercase}
.fineday-alpha{font-family:var(--script);font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.5;opacity:.8;word-spacing:.04em;overflow-wrap:anywhere}
.warnbox{border-left:3px solid var(--beacon);padding:4px 0 4px 20px;display:flex;flex-direction:column;gap:8px}
.warnbox .eyebrow{color:var(--beacon)}

/* ---------- open items ---------- */
.items{display:flex;flex-direction:column}
.item{display:grid;gap:6px 26px;grid-template-columns:1fr;padding-block:clamp(20px,2.6vw,32px);border-top:1px solid var(--rule-dark)}
@media(min-width:820px){.item{grid-template-columns:56px minmax(0,1fr) minmax(0,.85fr)}}
.item .n{font-family:var(--mono);font-size:.72rem;opacity:.4;padding-top:4px}
.item p{font-size:.95rem;opacity:.8}
.item .rec{font-size:.95rem;color:var(--beacon)}
.item .rec b{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:5px;color:var(--linen)}

/* ---------- foot ---------- */
.foot{border-top:1px solid var(--rule-dark);padding-block:clamp(40px,6vw,80px)}
.foot-in{align-items:center}
.foot-in{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.foot-mark{width:86px;color:var(--linen);display:block}
.foot-mark svg{width:100%;height:auto}
.foot p{font-family:var(--mono);font-size:.72rem;opacity:.5;line-height:1.8}

.toast{font-size:.8rem;
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,calc(100% + 44px));
  background:var(--signal);color:var(--harbour);
  padding:14px 26px;border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  z-index:99;transition:transform .4s var(--ease);pointer-events:none;
}
.toast.show{transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}


@font-face{font-family:"TT Norms";font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/6029ca2bd3.woff2) format("woff2")}
@font-face{font-family:"TT Norms";font-style:normal;font-weight:800;font-display:swap;src:url(../../assets/fonts/e18973297b.woff2) format("woff2")}
@font-face{font-family:"TT Norms";font-style:normal;font-weight:900;font-display:swap;src:url(../../assets/fonts/dea444e7e7.woff2) format("woff2")}
@font-face{font-family:"TT Norms";font-style:normal;font-weight:950;font-display:swap;src:url(../../assets/fonts/4fbecf48cb.woff2) format("woff2")}
@font-face{font-family:"TT Norms";font-style:normal;font-weight:300 500;font-display:swap;src:url(../../assets/fonts/57fd1acf8d.woff2) format("woff2")}
@font-face{font-family:"Fineday";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/ebe100f8ed.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/1a0430d405.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../../assets/fonts/f425382cda.woff2) format("woff2")}

:root{
  --harbour:#193062; --fathom:#005598; --signal:#3399FF;
  --beacon:#FFCD00;
  --frost:#F2F4F6; --linen:#FDFAF3; --straw:#F2E5CD; --rope:#E8D4B2;
  --sans:"TT Norms",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Fineday","TT Norms",cursive;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,4vw,56px);
  --rule:rgba(25,48,98,.18);
}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--fathom);outline-offset:3px;border-radius:3px}
.swch:focus-visible,.pt:focus-visible{outline-offset:6px}
body{margin:0;background:var(--linen);color:var(--harbour);
  font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}

.hb{max-width:1320px;margin:0 auto;padding:clamp(26px,4vw,68px) var(--gut) clamp(50px,7vw,110px)}
.hb-grid{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:1fr;align-items:start}
@media(min-width:940px){.hb-grid{grid-template-columns:1.1fr .9fr}}

/* ---------- stage ---------- */
.shot{position:relative;aspect-ratio:1/1;cursor:zoom-in}
.shot .pcap{width:100%;position:absolute;inset:0}
.shot .patch{position:absolute}
.shot .pcap,.shot .patch{transition:opacity .34s var(--ease)}
.shot.out .pcap,.shot.out .patch{opacity:0}
.zoomtag{position:absolute;right:2px;bottom:-2px;z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;pointer-events:none;transition:opacity .22s var(--ease)}
.shot:hover .zoomtag{opacity:.9}

.views{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,14px);
  margin-top:clamp(6px,1vw,12px);max-width:60%}
.views button{display:block;width:100%;padding-bottom:9px;
  border-bottom:2px solid transparent;transition:border-color .25s var(--ease)}
.views button:hover{border-bottom-color:var(--rule)}
.views button[aria-pressed="true"]{border-bottom-color:var(--harbour)}
.views .frame{display:block;position:relative;aspect-ratio:1/1}
.views .pcap{width:100%;position:absolute;inset:0}
.views .patch{position:absolute}
.vlab{display:none}

/* ---------- modes ---------- */
.modes{display:flex;gap:10px;margin-bottom:clamp(18px,2.4vw,32px);flex-wrap:wrap}
.modes button{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 22px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);opacity:.82;
  transition:box-shadow .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease)}
.modes button:hover{opacity:1;box-shadow:inset 0 0 0 1px rgba(25,48,98,.45)}
.modes button[aria-pressed="true"]{opacity:1;background:var(--harbour);color:var(--linen);box-shadow:none}
.hb-grid[hidden],.allgrid[hidden]{display:none}

/* ---------- every combination on one page ---------- */
.ag-list{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
.ag-head{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(1.3rem,2.4vw,1.8rem);
  font-weight:800;letter-spacing:-.02em}
.ag-row{display:grid;gap:clamp(20px,2.6vw,36px);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(min-width:820px){.ag-row{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px)}}
.ag{display:grid;gap:12px;justify-items:center;width:100%}
.ag .frame{display:block;position:relative;aspect-ratio:1/1;width:100%;
  transition:transform .22s var(--ease)}
.ag:hover .frame{transform:translateY(-4px)}
.ag .pcap{width:100%;position:absolute;inset:0}
.ag .patch{position:absolute}
.ag em{font-style:normal;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;
  line-height:1.5;text-align:center;opacity:.72;transition:opacity .2s var(--ease)}
.ag:hover em{opacity:1}

/* ---------- panel ---------- */
.panel{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fathom);margin:0}
h1{margin:0;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:.98;letter-spacing:-.03em;
  font-weight:800;text-wrap:balance}
.script{font-family:var(--script);font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.12;
  color:var(--fathom);margin:-10px 0 0}
.blurb{margin:0;font-size:1.08rem;line-height:1.65;opacity:.92;max-width:44ch}
.price{margin:0;font-family:var(--mono);font-size:1.12rem;letter-spacing:.04em}

.grp{display:flex;flex-direction:column;gap:14px;
  padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--rule)}
.plab{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:.78}

.pswatches{display:flex;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.swch{width:96px;display:grid;justify-items:center;gap:12px;align-content:start}
.psw{width:56px;height:56px;border-radius:999px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(25,48,98,.45),0 3px 7px rgba(11,26,54,.14);
  transition:transform .22s var(--ease)}
.swch:hover .psw{transform:translateY(-2px)}
.psw span{position:absolute;inset:0}
.psw span+span{clip-path:polygon(100% 0,100% 100%,0 100%)}
.swch em,.pt em{font-style:normal;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;
  line-height:1.45;text-align:center;opacity:.72;padding-bottom:6px;
  border-bottom:2px solid transparent;transition:opacity .22s var(--ease)}
.swch[aria-pressed="true"] em,.pt[aria-pressed="true"] em{opacity:1;border-bottom-color:var(--harbour)}

.patches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,30px);max-width:400px}
.pt{min-width:0;display:grid;grid-template-rows:var(--art,134px) auto;justify-items:center;gap:12px}
.pt.wide{grid-column:1 / -1}
.pt .pa{display:grid;place-items:center;height:var(--art,134px);width:100%}
.pt img{max-width:100%;height:auto;
  filter:drop-shadow(0 3px 6px rgba(11,26,54,.16));transition:transform .22s var(--ease)}
.pt:hover img{transform:translateY(-2px)}

.add{background:var(--signal);color:var(--harbour);border-radius:999px;
  padding:20px 30px;font-size:1.15rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .22s var(--ease),background .22s var(--ease)}
.add:hover{transform:translateY(-2px);background:#4FA6FF}
.ships{margin:0;font-family:var(--script);font-size:1.5rem;line-height:1.2;
  color:var(--fathom);text-align:center}

.pspec{display:grid;grid-template-columns:auto 1fr;gap:7px 22px;margin:0;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;
  padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--rule)}
.pspec dt{opacity:.62}
.pspec dd{margin:0}
.sku{margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;opacity:.6}

/* ---------- close look ---------- */
.lens{position:fixed;inset:0;z-index:200;background:var(--frost);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease)}
.lens.on{opacity:1;pointer-events:auto}
.lens-bar{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);
  padding:clamp(13px,1.8vw,20px) clamp(16px,3vw,34px);border-bottom:1px solid var(--rule)}
.lens-name{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;opacity:.72;
  margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lens-bar button{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.lens-bar button:hover{box-shadow:inset 0 0 0 1px var(--harbour)}
.lens-bar .go{background:var(--signal);box-shadow:none;font-weight:800}
.lens-bar .go:hover{background:#4FA6FF;box-shadow:none}
.lens-stage{flex:1 1 auto;min-height:0;overflow:auto;display:flex;
  align-items:center;justify-content:center;padding:clamp(14px,2.6vw,36px)}
.lens-stage img,.lens-stage canvas{max-width:100%;max-height:100%;width:auto;height:auto;
  flex:0 0 auto;margin:auto;cursor:zoom-in}
.lens.big .lens-stage{align-items:flex-start;justify-content:flex-start}
.lens.big .lens-stage img,.lens.big .lens-stage canvas{max-width:none;max-height:none;margin:0;cursor:zoom-out}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,calc(100% + 44px));
  background:var(--harbour);color:var(--linen);padding:14px 26px;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  z-index:210;transition:transform .38s var(--ease);pointer-events:none}
.toast.show{transform:translate(-50%,0)}
@media(max-width:939px){
  /* the cap stays put while the choices scroll under it, so every selection is
     visible at the moment it is made */
  .pstage{position:sticky;top:var(--barh,58px);z-index:5;background:var(--linen);
    padding:10px 0 18px;box-shadow:0 14px 18px -14px rgba(11,26,54,.5)}
  .shot{width:min(62vw,290px);margin:0 auto}
  .zoomtag{display:none}
  .views{max-width:none;grid-template-columns:repeat(2,auto);justify-content:center;
    gap:10px;margin-top:10px}
  .views .frame{display:none}
  .views button{width:auto;padding:6px 20px 8px}
  .vlab{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
    text-transform:uppercase;opacity:.7}
  .views button[aria-pressed="true"] .vlab{opacity:1}
  .pswatches{gap:16px}
}

.crumb{max-width:1320px;margin:0 auto;padding:clamp(16px,2.2vw,26px) var(--gut) 0;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;opacity:.6}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(25,48,98,.3)}
.crumb a:hover{opacity:1;border-bottom-color:var(--harbour)}

/* ---------- reviews ---------- */
.revs{background:var(--frost);margin-top:clamp(46px,7vw,110px)}
.revs-in{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,86px) var(--gut)}
.revs-head{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr;
  align-items:end;margin-bottom:clamp(28px,4vw,54px)}
@media(min-width:820px){.revs-head{grid-template-columns:1fr auto}}
.revs h2{margin:0;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;
  letter-spacing:-.03em;font-weight:800}
.revs .eyebrow{margin-bottom:12px}
.score{display:flex;align-items:baseline;gap:14px;font-family:var(--mono)}
.score b{font-family:var(--sans);font-size:clamp(2.4rem,4vw,3.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1}
.score span{font-size:.8rem;letter-spacing:.04em;opacity:.7;line-height:1.7}
.stars{display:flex;gap:3px}
.stars svg{width:17px;height:17px;color:var(--beacon)}
.rev-list{display:grid;gap:clamp(20px,2.6vw,34px);align-items:start;
  grid-template-columns:1fr}
@media(min-width:780px){.rev-list{grid-template-columns:repeat(2,1fr)}}
.rev{display:flex;flex-direction:column;gap:12px;background:var(--linen);
  border-radius:5px;padding:clamp(22px,2.6vw,32px)}
.rev h3{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.rev p{margin:0;font-size:1rem;line-height:1.62;opacity:.88;white-space:pre-line}
.rev .who{padding-top:6px;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.03em;opacity:.62;line-height:1.7}
.ratelink{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.04em;color:inherit;text-decoration:none;opacity:.8}
.ratelink:hover{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}


/* ---------- the shop, inside the site ---------- */
.nav-links a.bag{opacity:.85;padding:8px 16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(253,250,243,.34)}
.nav-links a.bag:hover{opacity:1;color:var(--linen);background:rgba(253,250,243,.12)}
.crumb{max-width:var(--max);margin:0 auto;padding:clamp(20px,2.6vw,34px) var(--gut) 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;opacity:.62}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(25,48,98,.3)}
.foot-in{gap:30px}
.foot p.foot-tag{font-family:var(--script);font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--beacon);line-height:1.1;opacity:1}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{color:inherit;text-decoration:none;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;opacity:.62}
.foot-nav a:hover{opacity:1}
.fbtn{border:none;cursor:pointer;font-family:inherit}
@media(max-width:900px){.nav-links a.bag{display:none}}
@media(max-width:939px){.pstage{top:var(--barh,54px)}}

/* ---------- product page density ----------------------------------------
   Measured before this: the Add to bag button sat 1709px down a 1000px
   viewport. 397 of that was spent before the product appeared at all, and
   .pstage and .panel were the largest single cause: they are <section>
   elements, so they inherited section{padding-block:clamp(72px,11vh,150px)},
   which is the rhythm for the content sections further down the page. A
   product hero is not a content section. That alone was 110px of nothing
   above the cap and 110 above its name, rising to 150 on a large display. */
.hb .pstage,.hb .panel,.hb .allgrid{padding-block:0}
.hb{padding:clamp(14px,1.4vw,22px) var(--gut) clamp(50px,7vw,110px)}

/* The breadcrumb and the view switch were two stacked bars doing one job.
   One toolbar row says the same thing and gives back 75px. */
.pbar{display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(20px,3.5vw,52px);flex-wrap:wrap;margin-bottom:clamp(12px,1.4vw,20px)}
.pbar .modes{margin:0}
.modes button{padding:9px 18px}

/* The frame was square and the cap is not, so it held an empty band above and
   below the product. The patch is positioned in percentages of .shot, and a
   percentage top resolves against its height, so reshaping .shot would drag
   the patch off the cap. The square stays; a clip crops it. One seventh off
   each edge takes 1:1 to 7:5. Percentage margins resolve against width, which
   is what makes the arithmetic exact at any size. */
/* The crop cut the brim off, which is a bad trade for vertical space. Fitting
   the whole square into a narrower box costs nothing instead: a 500px square is
   the same height as the 626px frame was after cropping to 5:4, so the page is
   no taller and the cap is entire. The image group, the zoom label and the two
   views all take the same width and centre together, so the left column reads
   as one block rather than three things that happen to be stacked. */
.pstage{--media:min(100%,500px)}
/* No aspect ratio of its own. .shot carries the artwork's, and a square wrapper
   around a picture that is already sized is dead space: 117px of it under the
   cap on a phone, where .shot is held to 56vw so the stage stays small. Same
   leftover the hoodie page had, from the same abandoned crop. */
.shotclip{position:relative;width:var(--media);margin-inline:auto;cursor:zoom-in}
.shotclip .shot{cursor:inherit}
/* the label sat below the square before and has to stay below the crop, or it
   lands on the brim */
.pstage>.zoomtag{position:static;display:block;width:var(--media);margin:6px auto 0;
  text-align:right;opacity:.78}
.pstage>.views{width:var(--media);max-width:none;margin-inline:auto;
  grid-template-columns:repeat(2,minmax(0,1fr))}
/* it was hidden below the tablet breakpoint and moving it out of .shot brought
   it back, where it failed contrast at .55. There is no zoom on a touch screen
   to advertise anyway. */
@media(max-width:820px){.pstage>.zoomtag{display:none}}

/* The panel used one 26px gap between every child, so a heading sat as far
   from the thing it labels as two unrelated blocks sit from each other. */
.panel{gap:clamp(12px,1.3vw,16px)}
.script{margin:-8px 0 2px}
.grp{gap:10px;padding-top:clamp(10px,1.1vw,14px)}
.pswatches{gap:8px}
/* Seven colourways in one row rather than four and three. 66px each plus a
   10px gap is 522 against a column that measures about 540, so the palette
   reads as one set of choices instead of two rows that look like groups. */
.swch{width:62px;gap:7px}
.psw{width:44px;height:44px}
.swch em,.pt em{font-size:.64rem;line-height:1.35;padding-bottom:4px}
.patches{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;max-width:none}
.pt.wide{grid-column:auto}
.pt{gap:6px}
.add{padding:17px 28px;margin-top:4px}
.ships{font-size:1.32rem}

/* The description now sits under the button, where a customer who has already
   decided reads it, rather than between the price and the thing they came to
   choose. Their son's idea, and better than moving it out of the column. */
/* Price and rating on one line. They are the same kind of fact, both read at a
   glance, and stacking them spent 36px on a gap between two short strings. */
.pmeta{display:flex;align-items:baseline;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.pmeta .price,.pmeta .ratelink{margin:0}
.panel .blurb{margin-top:2px}
.panel .pspec{margin-top:2px}

/* ---------- one boundary, one space ---------------------------------------
   Between the bottom of the buy panel and the Reviews heading there were 416px
   of nothing, and no single rule was to blame: .hb ends with 110px of padding,
   .revs adds a 110px margin, .revs is a <section> so it takes another 110 from
   the section rule, and .revs-in adds 86 of its own. Four spacers doing one
   job, each defensible on its own and absurd stacked. The band's own padding
   owns the gap now and the other three stand down. */
.hb{padding-bottom:clamp(28px,3.5vw,52px)}
.revs{margin-top:0;padding-block:clamp(44px,5.5vw,76px)}
.revs-in{padding-block:0}

/* ---------- a patch is not drawn until it is placed -----------------------
   The artwork is up to 1469px across and the cap it sits on is about 500. An
   <img> that has been given a src but not yet a width paints at its natural
   size, so for however long the script takes to place it, the patch covers the
   whole frame. Every path here sets src and width in the same task, which is
   why it never showed up in a test: there is no paint between two statements.
   It shows up on a real machine, where a slow decode, a cold cache or a busy
   main thread can put a paint in that gap.

   So placement, not speed, is the condition. A patch starts hidden and is
   revealed by whatever positions it. There is no ordering left to get wrong. */
.shot .patch,.views .patch,.ag .patch{display:none}

/* ---------- mobile: one scroll, no frame ----------------------------------
   The stage was sticky, so it carried a shadow to separate itself from the
   panel scrolling underneath. That is a frame, and a frame is only needed
   because the two halves move independently. Compact enough, they do not: the
   picture, the choices and the button read as one column and one scroll, which
   is what the page is actually for.

   Off comes the sticky, the shadow and the padding that went with them. */
@media(max-width:939px){
  .pstage{position:static;top:auto;z-index:auto;box-shadow:none;padding:0 0 4px}
}