/* ═══ 3lanes · Sumi-e ═══════════════════════════════════════════════
   One sheet of paper, sumi ink in five dilutions, one vermilion seal. */
@font-face{font-family:"Amalfi";src:url("../fonts/amalfi-coast-web.woff2") format("woff2"),url("../fonts/amalfi-coast.woff") format("woff");font-display:swap}

:root{
  --paper:#F2EADC;
  --ink:#1B1A18;                 /* nōboku, full ink */
  --ink-2:#3C3A37;               /* chūboku */
  --ink-3:#77736D;               /* tanboku, dilute */
  --ink-4:#B5AFA5;               /* faint */
  --ink-5:#DDD5C6;               /* the hairline */
  --seal:#C1272D;                /* vermilion */
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Newsreader",Georgia,serif;
  --script:"Amalfi",cursive;
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(1rem,.95vw + .72rem,1.15rem);line-height:1.6;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
body[data-gate="closed"]{overflow:hidden;height:100dvh}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-color:var(--ink-4);text-underline-offset:.18em}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

/* ── world ─────────────────────────────────────────────────────── */
.world{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__still{display:none;position:fixed;inset:0;z-index:0;background:var(--paper) url("../assets/warsaw-sumi-e.webp") center 40%/cover no-repeat;pointer-events:none}
.hero__still::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--paper))}
html.no-world .hero__still{display:block}
main,.nav,.foot,.mmenu{position:relative;z-index:2}
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:50;opacity:0;transition:transform .3s var(--ease),opacity .3s}
body.has-cursor.cursor-live .cursor{opacity:.75}
.cursor.is-hot{transform:scale(2.6);opacity:.35}

/* ── type ──────────────────────────────────────────────────────── */
.display{font-family:var(--serif);font-size:clamp(2.7rem,6vw,6rem);line-height:1;letter-spacing:-.018em;text-wrap:balance}
.display--lg{font-size:clamp(2.5rem,5.2vw,5rem)}
.display em,.plate__title em{font-style:italic;font-weight:400;color:var(--ink-2)}
.kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sep{color:var(--seal);margin:0 .4em}
.lede{font-size:clamp(1.05rem,1.1vw + .65rem,1.3rem);line-height:1.5;max-width:34em;color:var(--ink-2);font-weight:300}
.reveal-words .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.reveal-words .w>span{display:inline-block;transform:translateY(110%)}
html.reduce .reveal-words .w>span{transform:none}
/* no flash: hide until the choreography reveals (JS adds .js at parse time) */
html.js:not(.reduce) .reveal-words,html.js:not(.reduce) .reveal-lines,html.js:not(.reduce) .hero__foot,html.js:not(.reduce) .gate__inner>*{visibility:hidden}

/* ── seal & enso ───────────────────────────────────────────────── */
.seal{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;color:var(--seal);font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;border:2px solid var(--seal);border-radius:3px 5px 3px 6px;position:relative;isolation:isolate;line-height:1}
.seal::before{content:"";position:absolute;inset:0;background:var(--seal);opacity:.08;border-radius:inherit;z-index:-1}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.6em;font-family:var(--body);font-size:.95rem;letter-spacing:.02em;text-decoration:none;border:1px solid var(--ink);border-radius:2px;transition:color .55s var(--ease),border-color .55s var(--ease),transform .55s var(--ease)}
.btn::before{content:"";position:absolute;inset:-1px;background:var(--ink);transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.btn--ink{color:var(--paper)}
.btn--ink:hover{color:var(--ink)}
.btn--ink:hover::before{transform:scaleX(0);transform-origin:right}
.btn--line{color:var(--ink)}
.btn--line::before{transform:scaleX(0);transform-origin:right}
.btn--line:hover{color:var(--paper)}
.btn--line:hover::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:translateY(1px)}

/* ── gate ──────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:100;background:var(--paper);overflow:hidden;display:grid;align-items:end;padding:var(--gutter)}
body[data-gate="open"] .gate{display:none}
.gate__sun{position:absolute;width:min(66vmin,36rem);aspect-ratio:1;right:10vw;top:12vh;opacity:0;transform:scale(.8);mix-blend-mode:multiply}
.gate__sun .ink-sun{opacity:1}
.gate__inner{position:relative;display:grid;gap:1rem;max-width:34rem;padding-bottom:6vh}
.gate__script{font-family:var(--script);font-size:clamp(3.4rem,9vw,6.5rem);line-height:1;color:var(--ink);margin:0 0 .35em -.06em}
.gate__kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.gate__title{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.05;margin-top:.6rem}
.gate__actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:.5rem}
.gate__no{font-size:.9rem;color:var(--ink-3)}
.gate__sub{color:var(--ink-4);font-size:.9rem;font-style:italic}
.seal--gate{position:absolute;right:var(--gutter);bottom:var(--gutter);opacity:0;transform:scale(1.5) rotate(-8deg)}

/* ── nav ───────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--gutter);z-index:20;transition:transform .5s var(--ease),opacity .4s;mix-blend-mode:multiply}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{font-family:var(--script);font-size:1.9rem;line-height:1;text-decoration:none;color:var(--ink)}
.nav__links{display:flex;gap:2rem;font-size:.88rem}
.nav__links a{text-decoration:none;color:var(--ink-2);position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-.3em;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{font-size:.85rem;text-decoration:none;padding:.6em 1.1em;border:1px solid var(--ink);border-radius:2px;color:var(--ink);transition:background-color .5s var(--ease),color .5s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--paper)}
.nav__burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav__burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:15;background:var(--paper);display:grid;align-content:center;gap:1.6rem;padding:var(--gutter);font-family:var(--serif);font-size:2rem}
.mmenu[hidden]{display:none}
.mmenu a{text-decoration:none}
.mmenu__cta{font-family:var(--body);font-size:1rem;margin-top:1rem;text-decoration:underline}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{min-height:100dvh;display:grid;grid-template-rows:1fr auto;padding:clamp(6rem,14vh,9rem) var(--gutter) 2.2rem}
.hero__copy{display:grid;gap:1.4rem;max-width:38rem;align-self:start;margin-top:clamp(0rem,4vh,3rem)}
.hero__copy .display{font-size:clamp(2.8rem,5.4vw,5.6rem)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero__foot{display:flex;justify-content:space-between;align-items:end;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.scrollcue{display:inline-flex;align-items:center;gap:.7rem}
.scrollcue i{display:block;width:1px;height:2.6rem;background:var(--ink-3);transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── lanes ─────────────────────────────────────────────────────── */
.lanes{padding:clamp(7rem,16vh,12rem) var(--gutter) clamp(5rem,12vh,9rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.lanes__copy{display:grid;gap:1.3rem;max-width:40rem}
.lanes__list{display:grid;gap:2.2rem;margin-top:2.4rem;border-top:1px solid var(--ink-5);padding-top:2.4rem}
.lane{display:grid;grid-template-columns:3.2rem 1fr;gap:1.2rem;align-items:start}
.lane__n{font-family:var(--serif);font-style:italic;font-size:2.2rem;line-height:1;color:var(--seal)}
.lane h3{font-family:var(--serif);font-size:clamp(1.5rem,2vw,2rem);line-height:1.05;margin-bottom:.4rem}
.lane p{color:var(--ink-2);font-weight:300;max-width:30em}
.lanes__art{aspect-ratio:1;max-height:82vh;justify-self:end;width:100%}
.ink{width:100%;height:100%;overflow:visible}

/* ── plates ────────────────────────────────────────────────────── */
.plate{min-height:230vh;position:relative}
.plate__pin{position:sticky;top:0;height:100dvh;padding:clamp(5rem,12vh,7rem) var(--gutter) 2rem;display:grid;align-items:center;overflow:hidden}
.plate__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.55fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;width:100%}
.plate__copy{display:grid;gap:1.1rem;max-width:32rem}
.plate__title{font-family:var(--serif);font-size:clamp(3rem,6.6vw,6.6rem);line-height:.95;letter-spacing:-.02em}
.plate__sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.4vw,1.5rem);color:var(--ink-2)}
.plate__story{color:var(--ink-2);font-weight:300;max-width:30em}
.notes{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.86rem;color:var(--ink-3);letter-spacing:.04em}
.notes li{position:relative;padding-left:1em}
.notes li::before{content:"";position:absolute;left:0;top:.62em;width:.4em;height:.4em;border-radius:50%;background:var(--seal);opacity:.85}
.plate__copy .btn{justify-self:start;margin-top:.4rem}
.plate__stage{height:min(78vh,52rem);position:relative}
.slot{position:absolute;inset:0}
.specs{display:grid;gap:1.3rem;justify-self:end;border-left:1px solid var(--ink-5);padding-left:1.6rem}
.specs dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.specs dd{margin:.15rem 0 0;font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.6rem);line-height:1}
.specs small{display:block;font-family:var(--body);font-size:.82rem;color:var(--ink-3);margin-top:.2rem;font-style:italic}
.seal--plate{position:absolute;right:var(--gutter);bottom:2rem}
.plate__art{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;transform:translate(-50%,-52%);pointer-events:none}
.plate__art .ink-sun,.lanes__art .ink-sun{opacity:0}
.plate__art .ink-strokes path{stroke-dasharray:1;stroke-dashoffset:1}
.plate__art .ink-leaves,.plate__art .ink-fruit{opacity:0}
.ink-sun,.ink-figure,.ink-splash,.ink-cliff,.trade__art .ink-fruit{opacity:0}
.ink-figure{transform:translateY(8px)}
.gate__sun .ink-sun{opacity:1}
.trade__art .ink-strokes path{stroke-dasharray:1;stroke-dashoffset:1}
html.reduce .ink-sun,html.reduce .ink-figure,html.reduce .ink-splash,html.reduce .ink-cliff,html.reduce .trade__art .ink-fruit{opacity:1;transform:none}
html.reduce .trade__art .ink-strokes path{stroke-dasharray:none}
html.reduce .plate__art .ink-sun,html.reduce .plate__art .ink-leaves,html.reduce .plate__art .ink-fruit{opacity:1;transform:none}
html.reduce .plate__art .ink-strokes path{stroke-dasharray:none}

/* ── launch ────────────────────────────────────────────────────── */
.launch{position:relative;padding:clamp(6rem,14vh,10rem) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;border-top:1px solid var(--ink-5);align-items:start;isolation:isolate}
.launch__head,.launch .steps,.launch>.btn{position:relative;z-index:1}
.launch__head{display:grid;gap:1.3rem;max-width:44rem}
/* painted pieces: multiply onto the paper, edges washed away, revealed by scroll */
.art{margin:0;position:relative}
.art img{width:100%;height:100%;object-fit:contain;display:block;will-change:clip-path,opacity}
.launch__art{position:absolute;right:calc(var(--gutter) * -.4);top:0;bottom:0;width:min(64vw,62rem);z-index:0;pointer-events:none}
.launch__art img{object-fit:contain;object-position:right center}
.route{isolation:isolate;overflow:hidden}
.route__head,.stops{position:relative;z-index:1}
.route__art{width:min(104%,100rem);margin:-14vh auto -26vh;aspect-ratio:16/9;max-height:84vh;z-index:0;pointer-events:none}

.launch>.btn{justify-self:start}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);max-width:54rem}
.step{display:grid;gap:.6rem;align-content:start;border-top:1px solid var(--ink-5);padding-top:1.4rem}
.step__n{font-family:var(--serif);font-style:italic;font-size:2rem;line-height:1;color:var(--seal)}
.step h3{font-family:var(--serif);font-size:clamp(1.3rem,1.6vw,1.7rem);line-height:1.1}
.step p{color:var(--ink-2);font-weight:300;font-size:.98rem}
.launch>.btn{justify-self:start}

/* ── route ─────────────────────────────────────────────────────── */
.route{padding:clamp(6rem,14vh,10rem) var(--gutter) clamp(5rem,12vh,9rem);display:grid;gap:2rem;overflow:hidden}
.route__head{display:grid;gap:1.3rem;max-width:52rem}

.stops{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);counter-reset:stop}
.stop{display:grid;gap:.5rem;align-content:start;border-top:1px solid var(--ink-4);padding-top:1.4rem;position:relative}
.stop__n{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-3);height:1.6rem;display:flex;align-items:center}
.stop__sun{display:block;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--seal)}
.stop h3{font-family:var(--serif);font-size:clamp(1.6rem,2.2vw,2.3rem);line-height:1}
.stop p{color:var(--ink-2);font-weight:300;font-size:.98rem}
.stop--here{border-top-color:var(--seal)}

/* ── trade ─────────────────────────────────────────────────────── */
.trade{position:relative;padding:clamp(6rem,14vh,10rem) var(--gutter);border-top:1px solid var(--ink-5);overflow:hidden}
.trade__art{position:absolute;right:0;top:0;bottom:0;width:clamp(24rem,42vw,46rem);pointer-events:none}
.trade__art .ink{position:absolute;inset:0;width:100%;height:100%}
.trade__grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(3rem,6vw,7rem);align-items:start}
.trade__copy{display:grid;gap:1.3rem}
.trade__mail{color:var(--ink-3)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem;align-content:start}
.form label{display:grid;gap:.5rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.form input,.form select,.form textarea{font:inherit;font-family:var(--body);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-4);padding:.5rem 0;border-radius:0;outline:none;transition:border-color .3s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink)}
.form textarea{resize:vertical}
.form__wide{grid-column:1/-1}
.form .btn{grid-column:1/-1;justify-self:start}
.form__status{grid-column:1/-1;font-style:italic;color:var(--ink-3);min-height:1.4em}

/* ── footer ────────────────────────────────────────────────────── */
.foot{padding:4rem var(--gutter) 2rem;border-top:1px solid var(--ink-5);display:grid;gap:2rem;color:var(--ink-3);font-size:.9rem}
.foot__row{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.foot__script{font-family:var(--script);font-size:clamp(3rem,7vw,5.5rem);line-height:1;color:var(--ink)}
.foot__tag{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.foot__row--small{font-size:.82rem}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .hero{padding-top:7rem}
  .hero__copy{margin-top:0}
  .lanes{grid-template-columns:1fr;gap:3rem}
  .lanes__art{max-height:60vw;justify-self:center;order:-1}
  .steps,.stops{grid-template-columns:1fr 1fr;gap:2rem}
  .launch{overflow:hidden}
  .launch__art{right:-6vw;width:92vw;top:2rem;bottom:auto;height:64vh}
  .route__art{aspect-ratio:4/3;width:100%;margin:-4vh auto -16vh}
  .route__art img{object-fit:cover}
  .trade__art{width:78vw}
  .trade__copy,.form{position:relative}
  .trade__art .ink-strokes .b1{stroke-width:3.2}
  .trade__art .ink-strokes .b2{stroke-width:1.5}
  .lanes__art{margin-bottom:-14%}
  .lanes__copy,.steps,.launch>.btn{position:relative}
  .gate__sun{right:-10vw;top:8vh;width:70vw}
  .gate__inner{padding-bottom:2vh}
  .plate{min-height:200vh}
  .plate__pin{padding-top:5.5rem;align-items:start}
  .plate__grid{grid-template-columns:1fr;gap:1rem}
  .plate__stage{order:-1;height:38vh}
  .plate__title{font-size:clamp(2.6rem,11vw,4rem)}
  .plate__story{display:none}
  .specs{grid-template-columns:repeat(4,auto);gap:1rem;border-left:0;padding-left:0;justify-self:start;border-top:1px solid var(--ink-5);padding-top:1rem}
  .specs dd{font-size:1.4rem}
  .seal--plate{display:none}
  .plate__art{width:108%;transform:translate(-50%,-50%)}
  .trade__grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .scrollcue i{animation:none}
  .reveal-words .w>span{transform:none}
  .lane{opacity:1;transform:none}
}