: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,.dz: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:1fr .82fr}}

.shot{position:relative;aspect-ratio:1500/1875;cursor:zoom-in}
.shot .gm{width:100%;position:absolute;inset:0;transition:opacity .34s var(--ease)}
.shot.out .gm{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:56%}
.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:1500/1875}
.views .gm{width:100%;position:absolute;inset:0}
.vlab{display:none}

.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}
.ratelink{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;
  letter-spacing:.04em;color:inherit;text-decoration:none;opacity:.82}
.ratelink:hover{opacity:1}

.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}

.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px clamp(12px,1.6vw,18px)}
.dz{display:grid;justify-items:center;gap:8px;width:100%;min-width:0}
.dz .pa{display:grid;place-items:center;height:66px;width:100%;
  background:var(--frost);border-radius:4px;padding:10px 14px}
.dz img{max-width:100%;max-height:46px;width:auto}
.dz.later{opacity:.4;cursor:default}
.dz.later .pa{box-shadow:inset 0 0 0 1px var(--rule)}

.pswatches{display:flex;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.swch{width:100px;display:grid;justify-items:center;gap:12px;align-content:start}
.psw{width:56px;height:56px;border-radius:999px;
  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)}
.swch em,.dz 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,.dz[aria-pressed="true"] em{opacity:1;border-bottom-color:var(--harbour)}

.sizes{display:flex;gap:9px;flex-wrap:wrap}
.sz{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;padding:11px 16px;
  border-radius:4px;box-shadow:inset 0 0 0 1px var(--rule);opacity:.8;
  transition:box-shadow .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease)}
.sz:hover{opacity:1;box-shadow:inset 0 0 0 1px rgba(25,48,98,.45)}
.sz[aria-pressed="true"]{opacity:1;background:var(--harbour);color:var(--linen);box-shadow:none}

.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}

.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 .go{background:var(--signal);box-shadow:none;font-weight:800}
.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{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{max-width:none;max-height:none;margin:0;cursor:zoom-out}

.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:.72;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}

.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){
  .pstage{position:sticky;top:var(--barh,54px);z-index:5;background:var(--linen);
    padding:10px 0 18px;box-shadow:0 14px 18px -14px rgba(11,26,54,.5)}
  .shot{width:min(56vw,260px);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}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}


.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}}

/* ---------- 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 already carries the artwork's, 1500/1875,
   and a square wrapper around a 4:5 picture is dead space by definition. It
   cost 84px under the hoodie on a phone, where .shot is deliberately held to
   56vw so the sticky stage stays out of the way, and the square kept the box at
   the full column width regardless. */
.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{--art:78px;gap:10px 14px;max-width:300px}
.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}

/* ---------- the second view ----------------------------------------------
   The toggle and the grid it opens were only ever styled on the cap page,
   because the hoodie had no second view. Same rules, same page, so they read
   as one shop rather than two that happen to share a nav. */
.modes{display:flex;gap:10px;flex-wrap:wrap}
.modes button{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 18px;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}

.ag-list{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,40px)}
.ag-head{margin:0 0 clamp(8px,1vw,14px);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))}
/* One row per design, however many colourways there are. Five was hard coded
   when there were five, so the sixth orphaned onto a row of its own with four
   empty cells beside it, three times over. The count comes from the data now,
   capped so the tiles cannot shrink to nothing. */
@media(min-width:900px){.ag-row{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px)}}
.ag{display:grid;gap:12px;justify-items:center;width:100%}
/* A cap photograph is square and a hoodie's is not, so the tile takes its
   height from the garment rather than forcing one. Pinned to a square frame the
   images ran past the bottom edge and sat on their own labels. */
.ag .frame{display:block;width:100%;transition:transform .22s var(--ease)}
.ag:hover .frame{transform:translateY(-4px)}
.ag .gm{display:block;width:100%;height:auto;position:static}
.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}

/* ---------- 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}