/* ================================================================
   MOGI — main site  ·  visual system v2 "PINNED WALL"
   Warm plaster ground, marker ink, one colour pop per section,
   paper panels held up with pins. Photography wears line art.
   ================================================================ */
:root{
  /* ground */
  --wall:#f2efe7;        /* warm plaster */
  --wall-2:#e9e5d9;      /* panel tint */
  --wall-3:#ded9cb;      /* recessed */
  --paper:#faf8f2;       /* the pinned sheet */
  --ink:#14110f;         /* marker black */
  --graphite:#575049;    /* pencil shading */
  --muted:#8b847a;

  /* the pops — one per section, never all at once */
  --pop-blue:#2f4fa8;
  --pop-red:#d8402f;
  --pop-gold:#e0a233;
  --pop-navy:#23306b;
  --flag:#e02020;        /* the red underline */
  --lamp:#f6d78a;        /* warm lamp glow */
  --sea:#0f1c36;

  --accent:var(--pop-gold);   /* overridden per section */

  --hand:'Permanent Marker',cursive;
  --note:'Caveat',cursive;
  --mono:'Courier Prime','Courier New',monospace;
  --ease:cubic-bezier(.2,.8,.25,1);
  --rule:1px solid rgba(20,17,15,.55);
  /* slightly-off corners: a box drawn by hand never closes square */
  --sketch-a:14px 4px 16px 5px/5px 16px 4px 14px;
  --sketch-b:5px 16px 4px 14px/14px 4px 16px 5px;

  /* one rough marker stroke, used as a mask so it can take any colour */
  --stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-4 78 2 118-1s84-4 122 1c22 3 40 1 56-2' stroke='%23000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--wall);color:var(--ink);
  font:400 17px/1.6 'Archivo','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--flag);font-weight:600}

/* ---------------- type ---------------- */
.mono{font-family:var(--mono);letter-spacing:.12em}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
.kicker--light{color:var(--lamp)}
.display{font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(46px,9.5vw,124px)}
.display--light{color:#f6f3ec}
.display .dot{color:var(--accent)}
.lede{font-size:clamp(17px,2.1vw,21px);line-height:1.5;max-width:50ch;margin-top:20px;color:#2e2924}
.lede--light{color:rgba(246,243,236,.84)}

/* hand-drawn section header, marker stroke underneath */
.section-h{
  font-family:var(--hand);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,46px);line-height:1.1;letter-spacing:.01em;
  margin:clamp(52px,8vw,96px) 0 30px;padding-bottom:22px;position:relative;
}
.section-h::after{
  content:"";position:absolute;left:0;bottom:0;width:min(100%,340px);height:12px;
  background:var(--accent);
  -webkit-mask:var(--stroke) no-repeat left bottom/100% 100%;
          mask:var(--stroke) no-repeat left bottom/100% 100%;
}
#v-about .section-h{margin-bottom:18px}
.note{font-family:var(--note);font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:var(--graphite)}

/* ================================================================
   THE WALL — plaster ground with grain
   ================================================================ */
.paper-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--wall);
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 6%,rgba(255,255,255,.65),transparent 62%),
    radial-gradient(ellipse 70% 60% at 88% 88%,rgba(20,17,15,.05),transparent 60%),
    repeating-linear-gradient(112deg,rgba(20,17,15,.014) 0 2px,transparent 2px 6px);
}
.paper-grid::after{  /* film grain — keeps flat colour from reading as digital */
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* ---------------- shared motifs ---------------- */
/* white pushpin holding a sheet to the wall */
.pin{
  position:absolute;top:-8px;left:50%;translate:-50% 0;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff,#e2ddd1 55%,#a9a294);
  box-shadow:0 4px 6px rgba(20,17,15,.3),inset 0 -1px 2px rgba(0,0,0,.18);
  z-index:6;pointer-events:none;
}
.pin--l{left:22px;translate:0 0}
.pin--r{left:auto;right:22px;translate:0 0}

/* triptych — hairline rules between panes, like the pinned mural sheets */
.trip{display:grid;border:var(--rule);background:var(--paper)}
.trip>*{padding:clamp(22px,3vw,34px);position:relative}
.trip>*+*{border-left:var(--rule)}

/* ================================================================
   BUTTONS — marker-drawn, fill with the section pop on hover
   ================================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  padding:16px 26px;letter-spacing:.02em;border-radius:var(--sketch-a);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover,.btn:focus-visible{
  transform:translate(-3px,-5px) rotate(-.6deg);
  box-shadow:9px 11px 0 var(--ink);background:var(--accent);color:var(--paper);outline:none;
}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
/* the marker went round twice */
.btn::before{content:"";position:absolute;inset:-6px -4px -3px -6px;pointer-events:none;
  border:1.5px solid var(--ink);border-radius:var(--sketch-b);opacity:.22;
  transition:opacity .25s var(--ease)}
.btn:hover::before{opacity:.4}

.btn--lg{width:100%;justify-content:flex-start;padding:26px 30px;font-size:clamp(24px,4.6vw,44px)}
.btn--lg .btn__i{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);
  align-self:flex-start;margin-top:8px;transition:color .35s}
.btn--lg:hover .btn__i{color:var(--paper)}
.btn--lg .btn__note{margin-left:auto;font-family:var(--note);font-weight:400;font-size:21px;
  text-transform:lowercase;color:var(--muted);rotate:-4deg;
  transition:color .35s,scale .25s var(--ease)}
.btn--lg:hover .btn__note{color:var(--paper);scale:1.1}
.btn--sm{flex:1;justify-content:center;font-size:clamp(14px,2.4vw,19px);padding:16px 20px}
.btn--nav{font-size:13px;padding:13px 20px;box-shadow:4px 4px 0 var(--ink)}
.btn--tag{background:var(--accent);color:var(--paper);font-size:15px}
.btn--tag:hover{background:var(--ink);color:var(--accent)}
.btn--ghost{background:transparent;color:#f6f3ec;border-color:#f6f3ec;
  box-shadow:5px 5px 0 var(--accent);font-size:15px}
.btn--ghost:hover{background:#f6f3ec;color:var(--ink)}
.btn--heat{--accent:var(--pop-red)}

.back{
  position:sticky;top:clamp(16px,3vw,28px);z-index:20;display:inline-block;
  border-radius:var(--sketch-a);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  border:2px solid var(--ink);padding:9px 17px;background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .2s var(--ease),background .5s var(--ease),
             color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.back:hover{transform:translateX(-5px) rotate(-1.5deg);background:var(--accent);color:var(--paper)}
.back--light{background:transparent;color:#f6f3ec;border-color:#f6f3ec;box-shadow:4px 4px 0 var(--accent)}
.back--light:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}

/* ================================================================
   VIEW ROUTING + per-section colour pop
   ================================================================ */
.view{display:none;min-height:100vh;padding:clamp(24px,5vw,56px) clamp(20px,5vw,64px) 110px}
.view.is-active{display:block}
#v-menu {--accent:var(--pop-gold)}
#v-about{--accent:var(--pop-blue)}
#v-stock{--accent:var(--pop-red)}
#v-owner{--accent:var(--pop-navy)}
#v-drop0{--accent:var(--pop-gold)}
.view--drop{background:var(--ink)}

/* ================================================================
   00 · MENU — the wall, the tag, four pinned cards
   ================================================================ */
.view--menu{display:none;place-items:center;min-height:100vh;
  padding:80px clamp(20px,5vw,64px);position:relative}
.view--menu.is-active{display:grid}
.menu{width:100%;max-width:640px;text-align:center;position:relative;z-index:2}
.menu__logo{width:min(88%,440px);margin:0 auto 6px;animation:tilt 7s ease-in-out infinite;
  filter:drop-shadow(0 12px 10px rgba(20,17,15,.16))}
/* strip of tape over the tag, like the pinned sheets */
.menu__sheet{position:relative;padding:clamp(20px,4vw,34px) clamp(16px,3vw,28px) clamp(14px,2vw,20px);
  background:var(--paper);border:var(--rule);border-radius:var(--sketch-b);
  box-shadow:0 16px 34px -22px rgba(20,17,15,.7);rotate:-.5deg}
.menu__sheet::before{content:"";position:absolute;top:-13px;left:50%;translate:-50% 0;
  width:112px;height:28px;background:rgba(216,204,172,.85);rotate:-2.2deg;
  box-shadow:0 2px 4px rgba(20,17,15,.16);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent);
          mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent)}
@keyframes tilt{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
.menu__tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--muted)}
.menu__sheet{margin-bottom:clamp(30px,5vw,46px)}
.menu__tag .ink-mark{color:var(--accent)}
.menu__nav{display:flex;flex-direction:column;gap:16px}
.menu__nav .btn--lg:nth-child(1){rotate:-.4deg}
.menu__nav .btn--lg:nth-child(2){rotate:.35deg}
.menu__row{display:flex;gap:15px}
.menu__foot{font-family:var(--note);font-size:20px;color:var(--muted);margin-top:32px;rotate:-1deg}

/* pinned cut-outs drifting on the wall */
.stickers{position:absolute;inset:0;pointer-events:none;z-index:1}
.sticker{position:absolute;opacity:.92;will-change:transform;
  filter:drop-shadow(0 14px 12px rgba(20,17,15,.24))}
.float{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
               50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 3deg))}}
.s1{width:clamp(70px,9vw,130px);top:9%;left:5%;--r:-12deg;animation-delay:-.4s}
.s2{width:clamp(90px,12vw,175px);top:15%;right:4%;--r:9deg;animation-delay:-2.1s}
.s3{width:clamp(80px,11vw,160px);bottom:12%;left:6%;--r:7deg;animation-delay:-3.4s}
.s4{width:clamp(85px,11vw,170px);bottom:8%;right:6%;--r:-8deg;animation-delay:-1.3s}
@media(max-width:900px){.s1,.s2,.s3,.s4{opacity:.3}}

/* ================================================================
   01 · ABOUT
   ================================================================ */
.rail{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,5vw,52px) 0 clamp(34px,5vw,62px)}
.rail__dot{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:400 15px/1 var(--hand);letter-spacing:.02em;text-transform:uppercase;
  background:transparent;border:2px solid rgba(20,17,15,.22);
  padding:11px 16px;color:var(--muted);
  transition:background .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease),transform .2s var(--ease);
;border-radius:var(--sketch-b)}
.rail__dot span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:rgba(20,17,15,.14);color:var(--ink);font:700 11px/1 var(--mono);
  transition:background .5s var(--ease),color .5s var(--ease)}
.rail__dot:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.rail__dot.is-on{border-color:var(--ink);color:var(--paper);background:var(--accent)}
.rail__dot.is-on span{background:var(--ink);color:var(--paper)}

/* each chapter carries its own pop */
.ch[data-ch="0"]{--accent:var(--pop-blue)}
.ch[data-ch="1"]{--accent:var(--pop-gold)}
.ch[data-ch="2"]{--accent:var(--lamp)}

.ch{display:none;max-width:1440px;margin:0 auto}
.ch.is-on{display:block;animation:swipe .5s var(--ease)}
@keyframes swipe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ch__head{margin-bottom:clamp(42px,6vw,76px)}
.ch__nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:clamp(52px,7vw,96px)}

/* ================================================================
   ABOUT v3 — a wall, not a slide deck
   Hand lettering, taped margin notes at odd angles, a speech bubble
   off the mascot, captions burned into the photograph.
   ================================================================ */
.display--hand{
  font-family:var(--hand);font-weight:400;text-transform:none;letter-spacing:-.005em;
  line-height:.96;font-size:clamp(40px,8vw,96px);
}

/* the mascot says it, in a drawn bubble */
.say{display:flex;align-items:flex-end;gap:clamp(10px,2vw,28px);
  margin-bottom:clamp(44px,6vw,76px)}
.bubble{
  position:relative;flex:1;max-width:44ch;background:var(--paper);
  border:2.5px solid var(--ink);border-radius:26px 30px 24px 28px/28px 24px 30px 26px;
  padding:clamp(22px,3vw,32px) clamp(24px,3vw,36px);
  box-shadow:0 14px 28px -20px rgba(20,17,15,.7);rotate:-.6deg;
}
.bubble p{font-size:clamp(17px,2.1vw,22px);line-height:1.45}
.bubble p+p{margin-top:.7em;font-family:var(--hand);font-size:clamp(17px,2.2vw,24px)}
.bubble::before,.bubble::after{content:"";position:absolute;bottom:26px;
  clip-path:polygon(0 0,100% 46%,4% 100%)}
.bubble::before{right:-31px;bottom:23px;width:40px;height:32px;background:var(--ink)}
.bubble::after {right:-26px;width:34px;height:26px;background:var(--paper)}
.say__mascot{width:clamp(96px,15vw,190px);align-self:flex-end;rotate:5deg;
  filter:drop-shadow(0 14px 12px rgba(20,17,15,.25))}
@media(max-width:700px){
  .say{flex-direction:column;align-items:flex-start}
  .bubble::before,.bubble::after{right:auto;left:38px;bottom:-22px;
    clip-path:polygon(0 0,86% 0,18% 100%)}
  .bubble::before{bottom:-27px;left:33px}
  .say__mascot{align-self:flex-end;margin-top:-6px}
}

/* margin notes — taped up crooked, never a tidy grid */
.notes{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,26px);
  margin-bottom:clamp(44px,6vw,76px)}
.notes__n{
  position:relative;background:var(--paper);border:var(--rule);
  border-radius:var(--sketch-b);padding:26px 24px 22px;
  font-size:16.5px;line-height:1.5;max-width:430px;
  box-shadow:0 12px 24px -18px rgba(20,17,15,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),rotate .28s var(--ease);
}
.notes__n::before{ /* strip of tape */
  content:"";position:absolute;top:-11px;left:26px;width:62px;height:22px;rotate:-6deg;
  background:rgba(216,204,172,.85);box-shadow:0 2px 4px rgba(20,17,15,.15);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);
          mask:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);
}
.notes__n u{text-decoration:none;
  background:linear-gradient(var(--flag),var(--flag)) no-repeat left 92%/100% 3px;
  padding-bottom:2px}
.notes__n:nth-child(1){flex:1 1 300px;rotate:-.9deg}
.notes__n:nth-child(2){flex:1 1 260px;rotate:.7deg;margin-top:18px}
.notes__n:nth-child(3){flex:1 1 230px;rotate:-.4deg}
.notes__n:nth-child(4){flex:1 1 330px;rotate:1deg;margin-top:-10px}
.notes__n:nth-child(2)::before{left:auto;right:30px;rotate:5deg}
.notes__n:nth-child(4)::before{left:auto;right:24px;rotate:-4deg}
.notes__n:hover{transform:translateY(-7px);rotate:0deg;
  box-shadow:0 26px 38px -22px rgba(20,17,15,.65)}

/* the run-on, written straight onto the wall */
.scrawl{
  font-family:var(--note);font-size:clamp(26px,4.6vw,50px);line-height:1.22;
  max-width:24ch;margin:clamp(40px,6vw,76px) 0 0;rotate:-.7deg;
}
.scrawl__red{color:var(--flag);
  background:linear-gradient(var(--flag),var(--flag)) no-repeat left 94%/100% 3px}

/* three photos, hard black dividers — the mural sheets / Goyard panels */
.trip--photo{grid-template-columns:repeat(3,1fr)}
.trip--photo>figure{padding:0;overflow:hidden}
.trip--photo img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.09);transition:filter .5s,transform .7s var(--ease)}
.trip--photo figure:hover img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
/* the mascot drawn over the photo — greyscale + line art until you hover,
   then the drawing lifts off and the colour comes back (same as .worn) */
.trip--photo figure::after{
  content:"";position:absolute;top:0;left:0;width:100%;aspect-ratio:3/4;z-index:1;
  background:url("assets/lineart-white.png") no-repeat center 46%/58% auto;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.6));
  opacity:.8;pointer-events:none;
  transition:opacity .45s var(--ease),scale .45s var(--ease);
}
.trip--photo figure:hover::after{opacity:0;scale:1.14}
.trip--photo figcaption{position:relative;z-index:2;
  display:block;padding:16px 18px 20px;border-top:var(--rule);
  font-family:var(--hand);font-size:16px;text-transform:lowercase;background:var(--paper)}
.trip--photo figcaption span{display:block;margin-top:6px;font-family:'Archivo',sans-serif;
  font-size:14px;line-height:1.45;color:var(--graphite);text-transform:none}
@media(max-width:820px){.trip--photo{grid-template-columns:1fr}}

/* nothing on this page shouts in caps */
#v-about .rail__dot{text-transform:lowercase;font-size:16px}
#v-about .kicker{text-transform:lowercase;letter-spacing:.14em}

/* ================================================================
   01c · THE SEA — chapter 3
   ================================================================ */
.ch--sea{max-width:none}
.sea{position:relative;border:var(--rule);background:var(--sea);
  min-height:min(80vh,660px);overflow:hidden;display:flex;align-items:flex-end}
.sea__svg{position:absolute;inset:0;width:100%;height:100%}
.sea::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,16,32,.94) 0%,rgba(9,16,32,.8) 30%,rgba(9,16,32,0) 56%)}
.sea__copy{position:relative;z-index:3;padding:clamp(26px,4vw,52px);max-width:min(52%,560px)}
.sea__copy .display{font-size:clamp(30px,4.4vw,60px)}
.sea__copy .lede{font-size:clamp(15px,1.5vw,18px)}
.hint{font-family:var(--note);font-size:20px;color:var(--lamp);margin-top:24px;rotate:-1deg}
.sea__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.boat{animation:sail 5.2s ease-in-out infinite;transform-origin:900px 430px}
@keyframes sail{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-14px) rotate(1.1deg)}}
.wave{animation:swell 7s ease-in-out infinite}
.wave--far{animation-duration:11s}
.wave--mid{animation-duration:8s;animation-delay:-1.5s}
.wave--near{animation-duration:6s;animation-delay:-3s}
@keyframes swell{0%,100%{transform:translateX(-40px)}50%{transform:translateX(40px)}}
.ghosts{animation:fade 6s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:.75}50%{opacity:1}}
.seat{animation:pulse 2.4s ease-in-out infinite;cursor:pointer}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* paper cut-outs: white fill, marker outline — the ears and cap need the line to read */
.crewmates{fill:#f6f3ec;stroke:#101d38;stroke-width:5;stroke-linejoin:round}
.crew-hit rect{stroke:none}   /* invisible tap target, never drawn */
.crew-hit{cursor:pointer;transition:transform .25s var(--ease)}
.crew-hit use{transition:fill .25s}
.crew-hit:hover,.crew-hit:focus-visible{transform:translateY(-12px);outline:none}
.crew-hit:hover use,.crew-hit:focus-visible use{fill:var(--lamp)}
.crew-hit.is-sel use{fill:var(--lamp)}

.crew-card{
  position:absolute;left:0;top:0;z-index:6;
  width:min(300px,72vw);background:var(--paper);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--lamp);padding:24px;animation:swipe .3s var(--ease);
;border-radius:var(--sketch-a)}
.crew-card__x{position:absolute;top:0;right:0;width:44px;height:44px;background:none;border:0;
  cursor:pointer;font-size:14px;line-height:44px}   /* 44px so it can actually be tapped */
.crew-card p.mono{font-size:10px;letter-spacing:.2em;color:var(--pop-red)}
.crew-card #ccBio{margin-top:10px;font-size:15px;color:var(--graphite)}
.ch__nav--sea{max-width:1440px;margin-inline:auto}

/* ================================================================
   02 · STOCK
   ================================================================ */
.page-head{max-width:1440px;margin:clamp(28px,5vw,56px) auto 0}
.view--stock .section-h,.view--stock .stock-grid,.view--stock>.lede,
.view--stock .released,.view--stock .worn{max-width:1440px;margin-inline:auto}
.released{display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr;
  gap:clamp(20px,2.6vw,32px);align-items:start}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.6vw,32px)}

.item{position:relative;border:var(--rule);background:var(--paper);
  box-shadow:0 10px 22px -16px rgba(20,17,15,.55);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);border-radius:var(--sketch-b)}
.item:hover{transform:translateY(-7px);box-shadow:0 24px 36px -20px rgba(20,17,15,.6)}
.item__ph{position:relative;background:var(--wall-2);aspect-ratio:1;display:grid;place-items:center;
  overflow:hidden;border-bottom:var(--rule)}
.item__ph img{width:86%;height:86%;object-fit:contain;transition:transform .55s var(--ease)}
.item:hover .item__ph img{transform:scale(1.05) rotate(-1.5deg)}
.item__ph--empty{font-family:var(--hand);font-size:64px;color:var(--wall-3)}
.item--photo .item__ph{aspect-ratio:4/5}
.item--photo .item__ph img{width:100%;height:100%;object-fit:cover}
.item__meta{padding:20px}
.item__meta h3{font-family:var(--hand);font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.desc{font-size:15px;color:var(--graphite);margin:6px 0 12px}
.status{font-family:var(--mono);font-size:10px;letter-spacing:.18em}
.status--gone{color:var(--pop-red)}
.status--soon{color:var(--pop-navy)}

/* sold out — drained, hatched, stamped */
.item--gone .item__ph{background:var(--wall-3)}
.item--gone .item__ph img{filter:grayscale(1) contrast(.9) opacity(.5)}
.item--gone:hover .item__ph img{filter:grayscale(1) contrast(1) opacity(.68)}
.item--gone .item__ph::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(20,17,15,.075) 12px 24px)}
.stamp{position:absolute;z-index:2;font-family:var(--hand);font-size:clamp(20px,3vw,32px);
  color:var(--pop-red);border:4px solid var(--pop-red);padding:8px 20px;rotate:-11deg;opacity:.9}

/* registry — a pinned ledger */
.registry{position:relative;border:var(--rule);background:var(--paper);padding:26px 24px;
  box-shadow:0 10px 22px -16px rgba(20,17,15,.55);border-radius:var(--sketch-a)}
.registry__h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--pop-red);
  padding-bottom:14px;border-bottom:var(--rule)}
.registry__list{list-style:none;columns:2;column-gap:28px;margin:16px 0 14px}
.registry__list li{display:flex;gap:10px;padding:7px 0;
  border-bottom:1px dotted rgba(20,17,15,.22);font-family:var(--mono);font-size:13px;
  break-inside:avoid;transition:color .18s,transform .18s var(--ease)}
.registry__list li:hover{color:var(--pop-red);transform:translateX(4px)}
.registry__list b{color:var(--ink);min-width:34px}
.registry__note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}

/* worn — photography split like the pinned mural sheets, wearing line art */
.worn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:0;border:var(--rule)}
.worn figure:nth-child(2n){border-left:var(--rule)}
.worn figure:nth-child(n+3){border-top:var(--rule)}
.worn figure{position:relative;overflow:hidden;background:var(--wall-2)}

.worn img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.07);transition:transform .7s var(--ease),filter .5s}
.worn figure:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.worn figure::after{
  content:"";position:absolute;left:50%;top:40%;translate:-50% -50%;width:56%;aspect-ratio:1;
  background:url("assets/lineart-white.png") no-repeat center/contain;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.6));
  opacity:.8;transition:opacity .45s var(--ease),scale .45s var(--ease);pointer-events:none;
}
.worn figure:hover::after{opacity:0;scale:1.15}
.worn figcaption{position:relative;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--graphite);padding:14px 16px;
  border-top:var(--rule);background:var(--paper)}

/* ================================================================
   03 · OWNER
   ================================================================ */
.soon{max-width:640px;margin:clamp(56px,12vh,120px) auto;text-align:center;position:relative;
  padding:clamp(40px,6vw,68px) clamp(24px,4vw,48px);
  background:var(--paper);border:var(--rule);border-radius:var(--sketch-a);
  box-shadow:0 18px 38px -24px rgba(20,17,15,.7);rotate:-.5deg}
.soon::after{ /* ruled lines waiting for the bio */
  content:"";position:absolute;left:12%;right:12%;bottom:clamp(22px,4vw,38px);height:74px;
  background:repeating-linear-gradient(180deg,transparent 0 23px,rgba(20,17,15,.14) 23px 24px);
  pointer-events:none}
.soon__mark{width:clamp(90px,14vw,150px);margin:0 auto 30px;--r:-6deg;
  filter:drop-shadow(0 14px 12px rgba(20,17,15,.22))}
.soon .lede{margin-inline:auto}
.soon .btn{margin-top:32px;margin-bottom:96px}

/* ================================================================
   04 · DROP 0 — the dark room
   ================================================================ */
.drop-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;
  max-width:1440px;margin:clamp(24px,5vw,60px) auto 0}
.drop-hero__art{width:100%;filter:invert(1) drop-shadow(0 0 26px rgba(224,162,51,.3));
  animation:tilt 8s ease-in-out infinite}
.drop-stat{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);margin-top:26px}
.drop-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap:clamp(20px,3vw,42px);max-width:1440px;margin:clamp(56px,9vw,110px) auto 0}
.drop-shots figure{background:var(--paper);border:2px solid var(--accent);padding:26px;overflow:hidden;
  transition:transform .32s var(--ease)}
.drop-shots figure:hover{transform:translateY(-9px) rotate(-1deg)}
/* the flats keep their mount; the photographs run to the edge of it */
.drop-shots figure:has(img[src$=".jpg"]){padding:0}
.drop-shots figure:has(img[src$=".jpg"]) img{aspect-ratio:3/4;object-fit:cover;width:100%}
.drop-shots figure:has(img[src$=".jpg"]) figcaption{padding:14px 16px 16px;margin-top:0}
.drop-shots figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--muted);margin-top:16px;text-align:center}
.drop-out{max-width:1440px;margin:clamp(56px,9vw,100px) auto 0;padding-top:34px;
  border-top:1px solid rgba(246,243,236,.24)}
.drop-out .lede{color:rgba(246,243,236,.84)}
.drop-out .btn{margin-top:24px}
.drop-hero__txt .btn{margin-top:28px}
.view--drop .kicker{color:var(--lamp)}

/* ================================================================
   FOOTER
   ================================================================ */
.foot{position:relative;background:var(--ink);color:#f6f3ec;padding:46px clamp(20px,5vw,64px) 40px}
.foot::before{ /* the mascot tagged into the corner, white marker on ink */
  content:"";position:absolute;right:clamp(16px,4vw,70px);top:-34px;width:clamp(96px,11vw,150px);
  aspect-ratio:1;background:url("assets/lineart-white.png") no-repeat center/contain;
  opacity:.16;rotate:-7deg;pointer-events:none}
.foot__sign{font-family:var(--note);font-size:clamp(21px,2.6vw,30px);color:rgba(246,243,236,.6);
  margin-bottom:26px;rotate:-.8deg}
.foot__row{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;max-width:1280px;margin:0 auto}
.foot__row a{font-family:var(--hand);font-size:17px;display:inline-block;
  transition:color .2s,transform .2s var(--ease)}
.foot__row a:hover{color:var(--pop-gold);transform:translateY(-3px) rotate(-3deg)}
.foot__legal{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:rgba(246,243,236,.45)}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ================================================================
   SEA MODE — chapter 3 floods the whole page
   ================================================================ */
body{transition:background-color .9s var(--ease)}
body.sea-mode{background:var(--sea)}
.paper-grid{transition:opacity .9s var(--ease)}
body.sea-mode .paper-grid{opacity:0}

body.sea-mode .back{background:transparent;color:#f6f3ec;border-color:#f6f3ec;box-shadow:4px 4px 0 var(--lamp)}
body.sea-mode .back:hover{background:var(--lamp);color:var(--ink);border-color:var(--lamp)}
body.sea-mode .rail__dot{border-color:rgba(246,243,236,.28);color:rgba(246,243,236,.6)}
body.sea-mode .rail__dot span{background:rgba(246,243,236,.16);color:#f6f3ec}
body.sea-mode .rail__dot:hover{border-color:#f6f3ec;color:#f6f3ec}
body.sea-mode .rail__dot.is-on{background:var(--lamp);border-color:var(--lamp);color:var(--ink)}
body.sea-mode .rail__dot.is-on span{background:var(--ink);color:var(--lamp)}
body.sea-mode .btn--nav{background:transparent;color:#f6f3ec;border-color:#f6f3ec;box-shadow:4px 4px 0 var(--lamp)}
body.sea-mode .btn--nav:hover{background:var(--lamp);color:var(--ink);border-color:var(--lamp)}

body.sea-mode .ch--sea{margin-inline:calc(-1 * clamp(20px,5vw,64px))}  /* 100vw overshoots by the scrollbar */
body.sea-mode .ch__nav--sea{padding-inline:clamp(20px,5vw,64px)}
body.sea-mode .sea{border:0;min-height:calc(100vh - 190px)}
body.sea-mode .sea::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,var(--sea) 0,rgba(15,28,54,0) 15%),
    linear-gradient(0deg,var(--sea) 0,rgba(15,28,54,0) 13%);
}

.ch--sea.is-on{animation:none}
body.sea-mode .sea{animation:flood 1.1s var(--ease) both}
@keyframes flood{
  0%  {clip-path:inset(49% 0 49% 0);opacity:.2;transform:scale(1.06)}
  55% {opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:scale(1)}
}
.sea__flash{position:absolute;left:0;right:0;top:50%;height:2px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lamp),transparent)}
body.sea-mode .sea__flash{animation:horizon 1.1s var(--ease) both}
@keyframes horizon{0%{opacity:0;scale:.1 1}25%{opacity:1;scale:1 1}100%{opacity:0;scale:1 1}}

body.sea-mode .sea__copy>*{animation:surface .7s var(--ease) both}
body.sea-mode .sea__copy>*:nth-child(1){animation-delay:.50s}
body.sea-mode .sea__copy>*:nth-child(2){animation-delay:.58s}
body.sea-mode .sea__copy>*:nth-child(3){animation-delay:.66s}
body.sea-mode .sea__copy>*:nth-child(4){animation-delay:.74s}
body.sea-mode .sea__copy>*:nth-child(5){animation-delay:.82s}
@keyframes surface{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:820px){
  .drop-hero{grid-template-columns:1fr}
  .released{grid-template-columns:1fr}
  .registry__list{columns:1}
  .goals__list li{grid-template-columns:1fr;gap:8px}
  .btn--lg .btn__note{display:none}
  .trip{grid-template-columns:1fr}
  .trip>*+*{border-left:0;border-top:var(--rule)}
  .worn{grid-template-columns:1fr}
  .worn figure+figure{border-left:0;border-top:var(--rule)}
  .sea{min-height:auto;display:block}
  .sea::before{background:linear-gradient(180deg,rgba(9,16,32,0) 40%,rgba(9,16,32,.92) 62%)}
  .sea__svg{position:relative;width:100%;height:auto;aspect-ratio:1/1}
  .sea__copy{padding:24px;max-width:none}
  .crew-card{width:min(270px,78vw);padding:18px}
  .foot__legal{margin-left:0;width:100%}
  body.sea-mode .sea{min-height:auto}
}
@media(max-width:520px){
  .menu__row{flex-direction:column}
  .stock-grid{grid-template-columns:1fr}
}

@media(hover:none){
  .btn,.rail__dot,.crew-hit,.crew-card__x{-webkit-tap-highlight-color:transparent}
  .worn figure img,.trip--photo img{filter:none}
  .worn figure::after,.trip--photo figure::after{opacity:0}
}

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