@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";src:url(/fonts/geist-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(/fonts/geist-latin-ext.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sc-canvas:#efeae1;--sc-surface:#fffdf8;--sc-ink:#1f1b17;--sc-ink-soft:#6a6057;
  --sc-accent:#f73760;--sc-accent-ink:#fff;
  --sc-font-display:"Outfit",system-ui,sans-serif;--sc-font-text:"Geist",system-ui,sans-serif;
  --hdr:68px;--r:28px;
}
body{margin:0;background:var(--sc-canvas);color:var(--sc-ink);font-family:var(--sc-font-text);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--sc-accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--sc-ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}

/* header */
.hdr{position:fixed;inset:0 0 auto;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 clamp(16px,3vw,40px);z-index:50;
  background:color-mix(in oklab,var(--sc-canvas) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem/1 var(--sc-font-display);letter-spacing:-.02em}
.brand svg{width:30px;height:30px}
.index{display:flex;gap:4px;margin-left:auto;font-size:.9rem}
.index a{text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--sc-ink-soft)}
@media (max-width:1360px){.index .index__item{display:none}}
.index a:hover{background:color-mix(in oklab,var(--sc-ink) 7%,transparent);color:var(--sc-ink)}
.hdr__end{display:flex;align-items:center;gap:10px}
.lang{font-size:.85rem;font-weight:600;text-decoration:none;padding:8px 10px;border-radius:999px;border:1px solid color-mix(in oklab,var(--sc-ink) 16%,transparent)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--sc-ink);color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:999px;transition:transform .2s,background .2s}
.btn:hover{background:var(--sc-accent);transform:translateY(-1px)}
.btn--sm{padding:9px 16px;font-size:.9rem}
.btn--pink{background:var(--sc-accent)}
.btn--pink:hover{background:var(--sc-ink)}
.ghost{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* labels: one schema for every object */
.tag{font:600 .72rem/1 var(--sc-font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--sc-ink-soft)}
.label{background:var(--sc-surface);border-radius:16px;padding:18px 20px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px -18px rgba(60,40,20,.35)}
.label h3{font:700 1.25rem/1.1 var(--sc-font-display);margin:6px 0 4px;letter-spacing:-.01em}
.label dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;font-size:.92rem}
.label dt{color:var(--sc-ink-soft)}
.label dd{margin:0}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:color-mix(in oklab,var(--sc-accent) 14%,#fff);color:#b0173b;font-weight:600;font-size:.82rem}

/* act 1: the retired folder */
.hero__stage{position:relative;display:grid;place-items:center;overflow:hidden}
.hero__in{position:relative;width:min(1240px,100%);min-height:100vh;min-height:100svh;padding:calc(var(--hdr) + 3vh) clamp(18px,4vw,48px) 5vh;box-sizing:border-box;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:3vw}
.hero h1{grid-column:1;grid-row:1;align-self:end;font:800 clamp(3.2rem,6.4vw,6.8rem)/.92 var(--sc-font-display);letter-spacing:-.045em;margin:0 0 4vh;z-index:1;text-wrap:balance}
.hero h1 span{color:var(--sc-accent)}
.hero__obj{grid-column:2;grid-row:1/3;position:relative;z-index:2;justify-self:end;width:min(46vw,600px);margin-right:-2vw}
.hero__obj>svg{width:100%;height:auto;display:block}
.hero__obj .label{position:absolute;right:4%;bottom:-14%;width:250px;transform:rotate(2deg)}
.hero__sheet{position:absolute;right:-7vw;bottom:-22vh;width:min(22vw,260px);z-index:3;transform-origin:center;rotate:18deg;pointer-events:none}
.hero__sheet svg{width:100%;height:auto;display:block}
.hero__foot{grid-column:1;grid-row:2;align-self:start;z-index:2;max-width:44ch}
.hero__foot p{font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);line-height:1.55;margin:0 0 22px;color:var(--sc-ink-soft);text-wrap:pretty}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* act 2: the collection rail */
.coll .sc-stage{display:flex;align-items:center;overflow:hidden}
.coll .sc-stage{align-items:flex-start}
.rail{gap:0;align-items:stretch;height:calc(100svh - var(--hdr) - 150px);margin-top:calc(var(--hdr) + 8px)}
.rail__intro{flex:0 0 38vw;box-sizing:border-box;padding:0 4vw 0 clamp(18px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.rail__intro h2{font:800 clamp(2.4rem,4.6vw,4.6rem)/.95 var(--sc-font-display);letter-spacing:-.04em;margin:10px 0 18px}
.rail__intro p{color:var(--sc-ink-soft);font-size:1.08rem;line-height:1.55;max-width:30ch;margin:0}
.item{flex:0 0 62vw;box-sizing:border-box;padding-right:4vw;display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center}
.item__art{background:var(--g);border-radius:var(--r);height:min(calc(100svh - var(--hdr) - 190px),540px);display:grid;place-items:center;position:relative}
.item__art svg{width:86%;height:auto}
.item .label{align-self:center;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}
.item .label dl{width:100%}
.item .label a{margin-top:auto!important;padding-top:16px}
.item .label .rep{margin:4px 0 10px;font-size:.95rem}
.item .label .rep s{text-decoration-color:var(--sc-accent);text-decoration-thickness:2px}
.item .label p{margin:8px 0 0;line-height:1.5;text-wrap:pretty}
.item .label a{display:inline-block;margin-top:16px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--sc-accent);padding-bottom:2px}
.item .label a:hover{color:var(--sc-accent)}

/* act 3: about */
.about{padding:clamp(90px,16vh,180px) clamp(18px,5vw,72px)}
.about__in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:start}
.about h2{font:800 clamp(2.4rem,5.4vw,5rem)/.95 var(--sc-font-display);letter-spacing:-.04em;margin:12px 0 0}
.about p{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.6;margin:0 0 20px;text-wrap:pretty}
.about__note{font-size:.95rem!important;color:var(--sc-ink-soft)}

/* act 4: the visitor's label */
.hello{padding:clamp(80px,14vh,160px) clamp(18px,5vw,72px) 40px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column}
.plate{margin:auto;max-width:620px;width:100%;padding:clamp(26px,4vw,48px);border-radius:24px;transform:rotate(-1.2deg)}
.plate h2{font:800 clamp(2.6rem,6vw,4.8rem)/.95 var(--sc-font-display);letter-spacing:-.04em;margin:8px 0 14px}
.plate p{font-size:1.12rem;line-height:1.55;margin:0}
.plate dl{font-size:1rem}
.plate .row{margin-top:26px}
.plate .mail{font-weight:600;text-decoration:none;border-bottom:2px solid color-mix(in oklab,var(--sc-ink) 20%,transparent)}
.small{margin-top:64px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.82rem;color:var(--sc-ink-soft);border-top:1px solid color-mix(in oklab,var(--sc-ink) 12%,transparent);padding-top:20px}
.small a{text-decoration:none;font-weight:600;color:var(--sc-ink)}

/* signature: the desk keeps losing paper while the collection passes */
.desk{position:absolute;left:clamp(18px,5vw,72px);bottom:34px;width:min(420px,40vw);z-index:5}
.desk__cap{margin:0 0 14px;font:700 1.15rem/1.2 var(--sc-font-display);letter-spacing:-.01em;transition:color .3s}
.desk.is-empty .desk__cap{color:#b0173b}
.desk__stack{position:relative;height:62px}
.note{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fffdf8;border-radius:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 22px -14px rgba(60,40,20,.55);font-size:.95rem;white-space:nowrap;overflow:hidden;
  z-index:calc(10 - var(--k));translate:calc(var(--k) * 6px) calc(var(--k) * 5px);rotate:calc((var(--k) - 1.5) * .7deg);
  transition:transform 1s cubic-bezier(.3,.7,.2,1),opacity .8s ease .15s}
.note i{flex:0 0 26px;height:32px;border-radius:3px;background:repeating-linear-gradient(#f3ede1 0 5px,#d9cfbe 5px 7px)}
.note span{overflow:hidden;text-overflow:ellipsis}
.note.is-gone{transform:translate(36vw,-75svh) rotate(-28deg);opacity:0}
.desk.is-empty .desk__stack{border:2px dashed color-mix(in oklab,var(--sc-ink) 18%,transparent);border-radius:10px;box-sizing:border-box}

/* reduced motion: the collection becomes a plain vertical list */
.rm .coll .sc-stage{position:relative;height:auto;overflow:visible}
.rm .rail{flex-direction:column;height:auto;transform:none!important;margin-top:0}
.rm .rail__intro,.rm .item{flex-basis:auto;width:100%;padding:28px clamp(18px,5vw,72px)}
.rm .item__art{height:min(52vh,460px)}
.rm .desk{position:sticky;left:auto;bottom:16px;margin:0 clamp(18px,5vw,72px) 24px;background:var(--sc-canvas);padding:10px 0}

/* mobile composition */
@media (max-width:820px){
  :root{--hdr:58px}
  .index{display:none}
  .hdr__end{margin-left:auto}
  .hero__in{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;row-gap:22px;padding-top:calc(var(--hdr) + 20px);padding-bottom:48px}
  .hero h1{grid-column:1;grid-row:1;align-self:start;margin:0;font-size:clamp(3rem,15vw,5.2rem)}
  .hero__foot{align-self:end}
  .hero__obj{grid-column:1;grid-row:2;justify-self:center;width:min(78vw,360px);margin:0 0 26px}
  .hero__obj .label{width:180px;right:-4%;left:auto;bottom:-12%;padding:10px 14px}
  .hero__obj .label h3{font-size:1.05rem}
  .hero__obj .label dl{display:none}
  .hero__sheet{display:none}
  .hero__foot{grid-row:3}
  .hero__foot p{font-size:1rem;margin-bottom:16px}
  .rail{height:calc(100svh - var(--hdr) - 118px)}
  .rail__intro{flex-basis:86vw;padding:0 8vw 0 6vw}
  .item{flex-basis:86vw;grid-template-columns:1fr;grid-template-rows:auto auto;gap:14px;padding-right:6vw;align-content:center}
  .item__art{height:30svh}
  .item__art svg{width:78%}
  .about__in{grid-template-columns:1fr}
  .desk{left:6vw;right:6vw;width:auto;bottom:22px}
  .rm .desk{margin:0 6vw 16px}
  .rm .item__art{height:30vh}
  .desk__cap{font-size:.95rem;margin-bottom:10px}
  .desk__stack{height:52px}
  .note{font-size:.88rem}
}
@media (max-width:820px) and (max-height:760px){ .item__art{height:22svh} .item .label dl{display:none} .item .label{padding:14px 16px} .item .label a{margin-top:10px} }
@media (prefers-reduced-motion:reduce){ .note{transition:opacity .4s}.note.is-gone{transform:none} .btn{transition:none} }