@font-face{
  font-family:"Chewy";
  src:url("assets/fonts/Chewy-Regular.woff2") format("woff2"),
      url("assets/fonts/Chewy-Regular.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("assets/fonts/bricolage-grotesque-wght.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("assets/fonts/space-grotesk-wght.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
}

:root{
  --paper:#F4F2ED;--cream:#FBF9F4;--ink:#232322;
  --teal:#00A8A0;--teal-deep:#007A74;--muted:#777771;
  --line:rgba(35,35,34,.14);
  --head:"Chewy","Bricolage Grotesque",system-ui,cursive,sans-serif;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper)}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--teal);color:#fff}

.bar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:1.4rem;
  padding:1rem clamp(1.2rem,4vw,3rem);
}
.bar img{height:28px;width:auto;filter:grayscale(1) brightness(0)}
.bar .back{
  color:var(--ink);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.85;
}
.bar .back:hover{opacity:1}
.bar .spacer{flex:1}
.bar .count{
  color:var(--ink);font-family:var(--disp);font-size:.72rem;
  font-variant-numeric:tabular-nums;letter-spacing:.24em;
}
.bar a:focus-visible,.btn:focus-visible,.scroll-cue:focus-visible,.menu-return:focus-visible{
  outline:2px solid var(--teal);outline-offset:5px;
}
.rail{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:50}
.rail__fill{
  height:100%;width:100%;background:var(--teal);
  transform:scaleX(0);transform-origin:left center;
}
.menu-return{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  display:inline-flex;align-items:center;padding:.85rem 1.15rem;border-radius:999px;
  color:#fff;background:rgba(35,35,34,.86);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.2);
  font-size:.7rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
}
.menu-return:hover{background:var(--teal-deep)}
.menu-return[hidden]{display:none}

.stage{position:relative}
.viewport{position:static;min-height:100vh;min-height:100dvh;overflow:visible}
.track{
  display:block;width:100%;min-height:100vh;min-height:100dvh;
  padding:0 clamp(1rem,4vw,4.5rem) clamp(5rem,9vw,8rem);
}
.panel{width:100%;max-width:1480px;margin-inline:auto}

.cover{
  min-height:100vh;min-height:100svh;max-width:1180px;
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 0 4rem;
}
.cover .kick{
  margin-bottom:1.35rem;color:var(--teal-deep);font-size:.75rem;
  letter-spacing:.34em;text-transform:uppercase;
}
.cover h1{font:400 clamp(4rem,9vw,7.8rem)/.88 var(--head);letter-spacing:0}
.cover h1 em,.closing h2 em{color:var(--teal-deep);font-style:normal}
.cover p{max-width:46ch;margin-top:1.8rem;color:var(--muted);font-size:1.06rem}
.scroll-cue{
  display:inline-flex;align-items:center;gap:.75rem;margin-top:2.4rem;
  border:0;background:transparent;cursor:pointer;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
}
.scroll-cue:hover{color:var(--teal-deep)}
.scroll-cue.is-hidden{opacity:0;pointer-events:none}
.scroll-cue__arrow{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid currentColor;border-radius:50%;
}
.scroll-cue__arrow svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;
}
.intro{
  max-width:1480px;padding:clamp(5.5rem,10vw,9rem) 0 2rem;
}
.intro .no{color:var(--teal);font:300 clamp(4rem,10vw,8.5rem)/.8 var(--disp);opacity:.9}
.intro h2{margin:.5rem 0 1.2rem;font:400 clamp(2.5rem,5vw,4.2rem)/.96 var(--head)}
.intro p{max-width:38ch;color:var(--muted);font-size:1.04rem}
.intro .rule{width:64px;height:1px;margin-top:1.8rem;background:var(--line)}

/* True vertical masonry: three columns on desktop, two on compact screens. */
.cluster{
  display:block;columns:3;column-gap:clamp(.7rem,1.2vw,1rem);
  max-width:1480px;height:auto;margin-inline:auto;
}
.tile{
  position:relative;display:inline-block;width:100%;height:auto;
  margin:0 0 clamp(.7rem,1.2vw,1rem);overflow:hidden;
  break-inside:avoid;vertical-align:top;
  border-radius:8px;background:#e6e2da;contain:paint style;
}
.tile::after{content:"";position:absolute;inset:0;z-index:1}
.tile.t,.tile.b{width:100%;height:auto}
.tile img{
  position:static;width:100%;height:auto;max-width:100%;
  object-fit:contain;
}
.tile img:not([src]){visibility:hidden}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.4rem .9rem .75rem;color:#fff;
  background:linear-gradient(transparent,rgba(15,16,16,.74));
  font-size:.78rem;opacity:1;
}
.tile.is-target{
  outline:3px solid var(--teal);outline-offset:3px;
  box-shadow:0 14px 38px rgba(0,122,116,.2);
}
.tile.is-target figcaption{opacity:1}

.closing{
  min-height:78vh;min-height:78svh;max-width:1180px;
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 0 2rem;
}
.closing h2{font:400 clamp(3rem,7.5vw,6.2rem)/.92 var(--head)}
.closing p{max-width:42ch;margin-top:1.4rem;color:var(--muted)}
.closing .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.btn{
  padding:1rem 1.7rem;border-radius:999px;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--teal-deep)}
.btn--wa{background:var(--teal);color:#fff}
.btn--wa:hover{background:var(--teal-deep)}
.btn--ghost{border:1.5px solid var(--ink)}
.btn--ghost:hover{border-color:var(--teal-deep);color:var(--teal-deep)}
.noscript{padding:7rem 2rem;text-align:center}

@media(max-width:960px){
  .cluster{columns:2}
  .intro .no{font-size:clamp(4rem,14vw,6.5rem)}
}

@media(max-width:760px){
  .bar{gap:.8rem;padding:.85rem 1rem}
  .bar .back{font-size:.66rem;letter-spacing:.14em}
  .bar .count{font-size:.66rem;letter-spacing:.16em}
  .track{padding-inline:1rem}
  .cover{width:100%;padding:5.5rem 0 3rem}
  .cover h1{font-size:clamp(3.7rem,18vw,5.6rem)}
  .cover p{max-width:34ch;margin-top:1.3rem;font-size:.94rem}
  .cover .kick{margin-bottom:1rem;font-size:.67rem}
  .scroll-cue{margin-top:1.7rem}
  .intro{padding:4rem 0 1.5rem}
  .intro h2{font-size:clamp(2.8rem,13vw,4.2rem)}
  .cluster{column-gap:.6rem}
  .tile{margin-bottom:.6rem}
  .tile figcaption{padding:2.2rem .7rem .6rem;font-size:.68rem}
  .closing{min-height:82vh;min-height:82svh;padding:5rem 0 3rem}
  .closing h2{font-size:clamp(3.2rem,15vw,5.1rem)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}