/* ==========================================================================
   SONDER · GLOBAL DESIGN SYSTEM
   ========================================================================== */
:root{
  --cream:#eee7df;
  --paper:#f3eee7;
  --paper-2:#efe8df;
  --cream-deep:#ddd1c4;
  --choc:#3a2930;
  --choc-deep:#181317;
  --choc-mid:#765f64;
  --choc-soft:#9b8887;
  --rose:#9b7d80;
  --rose-soft:#d8cbc4;
  --stamp:#80636a;
  --ink:#3f3235;
  --line:rgba(54,39,43,.22);
  --dust:#c7b4aa;
  --hairline:rgba(54,39,43,.22);
  --serif-display:'Playfair Display',Georgia,serif;
  --serif-body:'Lora',Georgia,serif;
  --mono:'Space Mono','Courier New',monospace;
  --wrap:1240px;
  --edge:clamp(18px,4vw,54px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif-body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}button{font-family:inherit}.wrap{max-width:var(--wrap);margin:auto;padding-inline:var(--edge);position:relative}
body:before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(77,59,64,.24) .55px,transparent .7px),radial-gradient(rgba(77,59,64,.12) .45px,transparent .65px);background-size:9px 9px,13px 13px;background-position:0 0,4px 6px;mix-blend-mode:multiply}


/* --- HEADER & NAVIGATION --- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(65,48,53,.96);color:var(--cream);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 5px 18px rgba(35,24,27,.13);backdrop-filter:blur(10px)}
.topbar__row{max-width:var(--wrap);margin:auto;padding:10px var(--edge);display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}.brand__mark{font:900 20px var(--serif-display);letter-spacing:.10em}.brand__sub{font:8px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#cdbeb9}
.channel-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid rgba(255,255,255,.30);border-radius:1px;color:var(--cream);text-decoration:none;font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase}.channel-btn svg{width:12px;height:12px}
.navpills{max-width:var(--wrap);margin:auto;padding:7px var(--edge) 9px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.navpills::-webkit-scrollbar{display:none}.navpills a{flex:none;text-decoration:none;color:#d6c8c3;padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:1px;font:9px var(--mono);letter-spacing:.05em;text-transform:uppercase}.navpills a.is-active{background:var(--cream);color:var(--choc);border-color:var(--cream)}
.progress{height:2px;background:rgba(255,255,255,.08)}.progress__bar{height:100%;width:0;background:#c9b5ae}


/* --- HERO --- */
.hero{position:relative;min-height:clamp(720px,calc(100svh - 84px),900px);overflow:hidden;background:#faf8f5}
.hero:before{content:"“";position:absolute;left:30px;top:16px;z-index:4;font:900 115px/.7 var(--serif-display);color:rgba(77,59,64,.28);transform:rotate(2deg)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;background:linear-gradient(90deg,rgba(250,248,245,.02) 0%,rgba(250,248,245,.02) 40%,rgba(250,248,245,.40) 57%,rgba(250,248,245,.88) 69%,rgba(250,248,245,.15) 100%)}
.hero__swirl{position:absolute;z-index:1;width:min(720px,62vw);left:-150px;top:-150px;transform:rotate(-5deg);opacity:.82;pointer-events:none}
.hero__typewriter{position:absolute;z-index:3;width:min(980px,78vw);left:-185px;bottom:-165px;transform:rotate(-7deg);filter:contrast(.96) saturate(.75);pointer-events:none}
.hero__thread{position:absolute;z-index:4;width:min(720px,58vw);right:-170px;top:-5px;transform:rotate(10deg);opacity:.62;pointer-events:none}
.hero__note{position:absolute;z-index:5;width:min(320px,25vw);left:20px;top:72px;transform:rotate(-6deg);opacity:.94;pointer-events:none}
.hero__dock{position:absolute;z-index:7;width:92px;right:48px;top:180px;opacity:.86;pointer-events:none}
.hero__content{position:relative;z-index:10;min-height:inherit;max-width:var(--wrap);margin:auto;padding:clamp(95px,12vh,150px) var(--edge) 70px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right}
.hero__stamp{width:78px;height:78px;border:1px dashed rgba(77,59,64,.38);border-radius:50%;display:grid;place-items:center;font:8px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--choc-mid);margin:0 5% 20px 0;transform:rotate(8deg);background:rgba(250,248,245,.52)}
.hero h1{margin:0;max-width:610px;font:900 clamp(70px,10.5vw,150px)/.78 var(--serif-display);letter-spacing:-.055em;text-transform:uppercase;color:var(--choc);text-shadow:0 2px 0 rgba(255,255,255,.85)}
.hero__tagline{margin:22px 4% 13px 0;font:italic 600 clamp(17px,2vw,25px) var(--serif-display);color:var(--choc-mid)}
.hero__lead{max-width:410px;margin:0 4% 25px 0;font:13px/1.8 var(--serif-body);color:#57484b}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border:1px solid var(--choc);border-radius:0;cursor:pointer;text-decoration:none;font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:.25s var(--ease)}.btn:hover{transform:translateY(-2px)}.btn--light{background:var(--choc);color:var(--cream);box-shadow:5px 5px 0 rgba(128,99,106,.18)}.btn--outline{background:transparent;color:var(--cream);border-color:rgba(255,245,233,.5)}.btn--stamp{background:var(--stamp);color:var(--cream);border-color:var(--stamp)}
.hero__content:after{content:"SONDER / 2026";position:absolute;left:var(--edge);bottom:28px;font:8px var(--mono);letter-spacing:.22em;color:rgba(77,59,64,.48)}


/* --- SECTIONS & CONTENT --- */
section{position:relative;padding:105px 0 82px}section:not(.section--dark){background:var(--cream)}
.section--dark{background:#ebe4dc;color:var(--ink);overflow:hidden}.section--dark .eyebrow{color:var(--choc-mid)}.section--dark .eyebrow:after{background:var(--line)}.section--dark .section__desc{color:var(--choc-mid)}
.section__head{margin-bottom:34px;max-width:800px}.eyebrow{display:flex;align-items:center;gap:12px;font:9px var(--mono);letter-spacing:.20em;text-transform:uppercase}.eyebrow .num{color:var(--stamp)}.eyebrow:after{content:"";height:1px;background:var(--line);flex:1}.section__title{margin:12px 0 10px;font:700 clamp(40px,6vw,76px)/.94 var(--serif-display);letter-spacing:-.04em}.section__desc{font-size:14px;line-height:1.75;color:var(--choc-mid);max-width:52ch}

.postcard{position:relative;background:var(--paper);border:1px solid rgba(77,59,64,.13);border-radius:0;padding:34px 38px;box-shadow:10px 12px 0 rgba(77,59,64,.055);transform:rotate(-.45deg);overflow:hidden}.postcard:before{content:"";position:absolute;top:-7px;left:50%;width:11px;height:11px;border-radius:50%;transform:translateX(-50%);background:#aaa09b;box-shadow:0 2px 4px rgba(0,0,0,.18)}.postcard__quote{position:absolute;width:105px;left:18px;top:14px;opacity:.16;pointer-events:none}.postcard__stampword{position:absolute;width:190px;right:-35px;bottom:-22px;opacity:.10;transform:rotate(-8deg);pointer-events:none}.postcard p{font-size:14px;line-height:1.85;margin:0 0 12px}.postcard p:last-child{margin-bottom:0}.postcard strong{color:var(--stamp)}

.stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:32px 0 40px}.card{position:relative;background:rgba(251,248,243,.90);color:var(--ink);border:1px solid rgba(77,59,64,.14);border-radius:0;box-shadow:7px 8px 0 rgba(77,59,64,.055);overflow:hidden;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.stack .card:nth-child(3n+1){--tilt:-.55deg}.stack .card:nth-child(3n+2){--tilt:.45deg}.stack .card:nth-child(3n+3){--tilt:-.2deg}.card:hover,.card.is-open{transform:translateY(-3px) rotate(0);box-shadow:10px 13px 0 rgba(77,59,64,.08)}.card__pin{position:absolute;top:8px;left:20px;width:7px;height:7px;border-radius:50%;background:#aaa09b;box-shadow:0 1px 2px rgba(0,0,0,.25)}.card__row{width:100%;display:flex;align-items:center;gap:15px;padding:25px 18px 21px 20px;background:none;border:0;cursor:pointer;text-align:left;color:inherit}.card__num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--choc);color:var(--cream);font:700 10px var(--mono)}.card__title{flex:1;font:700 17px/1.2 var(--serif-display)}.card__plus{flex:none;color:var(--stamp);transition:.3s}.card__plus svg{width:15px;height:15px}.card.is-open .card__plus{transform:rotate(135deg)}.card__panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}.card__panel-inner{padding:0 24px 24px 72px;font-size:13px;line-height:1.75}.card__panel-inner p{margin:0 0 10px}.card__panel-inner ul{margin:0;padding-left:18px}.card__panel-inner li{margin-bottom:7px}
.section--dark .card{background:rgba(251,248,243,.82);color:var(--ink);border-color:rgba(77,59,64,.14)}.section--dark .card__panel-inner{color:var(--ink)}.section--dark .card__num{background:var(--choc);color:var(--cream)}.section--dark .card__title{color:var(--ink)}
.tick-list{list-style:none;margin:0;padding:0}.tick-list li{position:relative;padding-left:18px;margin-bottom:9px}.tick-list li:before{content:"—";position:absolute;left:0;color:var(--stamp)}.subhead{font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);margin:36px 0 7px}
.note-tag,.stampnote{position:relative;background:#e6ddd3;border:1px dashed rgba(128,99,106,.42);border-radius:0;padding:17px 20px;margin:22px 0;font-size:13px;line-height:1.65;box-shadow:6px 7px 0 rgba(77,59,64,.05)}.note-tag{display:inline-block;transform:rotate(1deg);max-width:760px}.note-tag:before{content:"";position:absolute;top:-6px;left:25px;width:10px;height:10px;border-radius:50%;background:#aaa09b;box-shadow:0 2px 3px rgba(0,0,0,.3)}.stampnote{display:flex;gap:14px;align-items:flex-start;background:rgba(128,99,106,.08)}.section--dark .stampnote{background:rgba(128,99,106,.08);border-color:rgba(128,99,106,.30)}.stampnote__icon{flex:none;width:38px;height:38px;border:1px solid var(--stamp);border-radius:50%;display:grid;place-items:center;color:var(--stamp);font:700 14px var(--serif-display)}.stampnote p{margin:0;font-size:13.5px;line-height:1.6}.stampnote strong{display:block;font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin-bottom:5px}
.section__thread{position:absolute;right:-150px;top:30px;width:520px;opacity:.16;transform:rotate(8deg);pointer-events:none}
.deco-inline{position:relative;display:flex;align-items:center;gap:20px;margin:30px 0}.deco-inline img{display:block;width:105px;height:auto;transform:rotate(-8deg)}.deco-inline span{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--choc-soft)}


/* --- FOOTER --- */
.footer{position:relative;background:var(--choc);color:var(--cream);padding:100px 0 150px;text-align:center;overflow:hidden}.footer:before{content:"SONDER";position:absolute;left:-4%;bottom:-9%;font:900 25vw/.8 var(--serif-display);letter-spacing:-.06em;color:rgba(255,245,233,.035);pointer-events:none}.footer .wrap{position:relative;z-index:2}.footer__wreath{position:absolute;width:420px;right:-80px;bottom:-80px;opacity:.35;transform:rotate(8deg);pointer-events:none}.footer__badge{width:70px;height:70px;margin:0 auto 22px;border:1px solid rgba(255,245,233,.45);border-radius:50%;display:grid;place-items:center;font:700 28px var(--serif-display);color:var(--cream);transform:rotate(-7deg)}.footer h2{font:700 clamp(32px,5vw,60px)/1 var(--serif-display);margin:0 0 12px}.footer p.sub{font-size:14px;line-height:1.7;color:rgba(255,245,233,.66);max-width:520px;margin:0 auto 28px}.accept-wrap{min-height:60px}.accept-confirm{display:none;align-items:center;justify-content:center;gap:8px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rose-soft)}.accept-confirm.is-visible{display:flex;animation:fadein .4s ease}.btn-accept.is-done{display:none}.footer__links{margin-top:32px;display:flex;justify-content:center}.footer__meta{margin-top:45px;display:flex;justify-content:space-between;gap:15px;font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,.35)}


/* --- FLOATING CONTROLS --- */
.floaters{position:fixed;left:0;right:0;bottom:0;z-index:55;pointer-events:none}.floaters__row{max-width:var(--wrap);margin:auto;padding:0 var(--edge) 18px;display:flex;justify-content:space-between;align-items:flex-end}.totop{pointer-events:auto;width:42px;height:42px;border-radius:0;background:var(--choc);border:1px solid rgba(255,245,233,.3);color:var(--cream);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);transition:.3s var(--ease)}.totop.is-visible{opacity:1;transform:none}.totop svg{width:16px;height:16px}.vinyl{pointer-events:auto;width:58px;height:58px;border-radius:50%;position:relative;cursor:pointer;background:radial-gradient(circle,var(--stamp) 0 13%,transparent 13.2%),repeating-radial-gradient(circle,#241419 0 2px,#3a252c 2px 4px);box-shadow:0 10px 22px -8px rgba(0,0,0,.55);display:grid;place-items:center;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:vinylSpin 5s linear infinite;animation-play-state:paused}.vinyl.is-playing{animation-play-state:running}@keyframes vinylSpin{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(0,0,0) rotate(360deg)}}.vinyl__label{font:700 9px var(--serif-display);color:var(--cream)}.vinyl__icon{position:absolute;bottom:-5px;right:-5px;width:21px;height:21px;border-radius:50%;background:var(--cream);color:var(--choc);display:grid;place-items:center;pointer-events:none}.vinyl__icon svg{width:9px;height:9px}.vinyl__hint{display:none}


/* --- RESPONSIVE --- */
@media(max-width:900px){.hero__typewriter{width:820px;left:-240px}.hero__swirl{width:600px;left:-180px}.hero__note{width:250px}.hero__content{padding-top:120px}.hero h1{font-size:clamp(64px,12vw,112px)}}
@media(max-width:760px){.hero{min-height:760px}.hero:after{background:linear-gradient(180deg,rgba(250,248,245,.02) 18%,rgba(250,248,245,.18) 42%,rgba(250,248,245,.90) 67%,rgba(250,248,245,.98) 100%)}.hero__typewriter{width:760px;left:-265px;bottom:60px;transform:rotate(-7deg)}.hero__swirl{width:500px;left:-180px;top:-70px}.hero__note{width:210px;left:8px;top:70px}.hero__thread{width:500px;right:-220px;top:20px}.hero__dock{width:72px;right:18px;top:170px}.hero__content{justify-content:flex-end;text-align:center;align-items:center;padding-top:430px;padding-bottom:70px}.hero h1{font-size:clamp(58px,18vw,92px)}.hero__stamp{margin-right:0;width:64px;height:64px;font-size:7px}.hero__tagline,.hero__lead{margin-right:0}.hero__lead{max-width:370px;font-size:12.5px}.stack{grid-template-columns:1fr}section{padding:72px 0 56px}.section__title{font-size:46px}.postcard{padding:29px 24px}.section__thread{right:-230px;top:60px;width:450px}.footer__meta{flex-direction:column}.topbar__row{padding-block:9px}.navpills{padding-bottom:8px}}
@media(max-width:480px){.brand__sub{display:none}.channel-btn{padding:7px 9px}.hero{min-height:700px}.hero__typewriter{width:650px;left:-250px;bottom:85px}.hero__note{width:175px}.hero__dock{display:none}.hero__content{padding-top:370px}.hero h1{font-size:66px}.hero__lead{font-size:12px;max-width:320px}.hero__swirl{width:430px;left:-190px}.hero__thread{opacity:.4}.section__title{font-size:41px}.card__title{font-size:16px}.card__panel-inner{padding-left:25px}.footer{padding-bottom:120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.9), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(115,79,68,.055), transparent 28%),
    var(--cream);
}

.topbar {
  animation: topbarIn .9s cubic-bezier(.2,.8,.2,1) both;
  backdrop-filter: blur(12px);
}

.topbar__brand {
  transition: transform .35s ease, letter-spacing .35s ease;
}
.topbar__brand:hover {
  transform: translateX(4px);
  letter-spacing: .08em;
}

.nav__link {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, color .3s ease, background .3s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.nav__link:hover {
  transform: translateY(-2px);
}
.nav__link:hover::after {
  transform: scaleX(1);
}

.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 67%, rgba(255,255,255,.52) 82%, transparent),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(75,48,42,.012) 6px 7px);
  pointer-events: none;
  z-index: -1;
}

.hero__swirl,
.hero__typewriter,
.hero__thread,
.hero__note,
.hero__dock {
  will-change: transform;
}

.hero__typewriter {
  animation: typewriterFloat 8s ease-in-out infinite;
  transform-origin: 48% 52%;
  transition: filter .5s ease;
}
.hero__typewriter:hover {
  filter: contrast(1.04) sepia(.12);
}

.hero__swirl {
  animation: swirlDrift 12s ease-in-out infinite alternate;
}
.hero__thread {
  animation: threadFloat 7s ease-in-out infinite;
}
.hero__note {
  animation: paperBob 6s ease-in-out infinite;
}
.hero__dock {
  animation: dockFloat 5s ease-in-out infinite;
  transition: filter .4s ease, transform .4s ease;
}
.hero__dock:hover {
  filter: contrast(1.08);
}

.hero__copy {
  animation: copyReveal 1.1s .2s cubic-bezier(.2,.8,.2,1) both;
}

.hero__eyebrow {
  animation: letterReveal 1s .45s ease both;
}


.hero__cta {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.hero__cta:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 14px 28px rgba(70,40,38,.16);
}
.hero__cta:active {
  transform: translateY(-1px) scale(.98);
}


.card {
  position: relative;
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .35s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: skewX(-15deg);
  transition: left .7s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-7px) rotate(-.25deg);
  box-shadow: 0 18px 34px rgba(58,38,35,.12);
}
.card:hover::before {
  left: 135%;
}

.card:nth-child(2n) {
  transition-delay: .04s;
}
.card:nth-child(3n) {
  transition-delay: .08s;
}


.progress {
  transform-origin: left center;
  transition: transform .25s ease;
}


.vinyl {
  transition: filter .45s ease;
}
.vinyl:hover {
  filter: sepia(.1);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-35px) rotate(-1deg);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(35px) rotate(1deg);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

@keyframes topbarIn {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes copyReveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes letterReveal {
  from { opacity: 0; letter-spacing: .35em; }
  to { opacity: 1; letter-spacing: .12em; }
}
@keyframes typewriterFloat {
  0%, 100% { transform: rotate(-8deg) translate3d(0,0,0); }
  50% { transform: rotate(-7.2deg) translate3d(9px,-7px,0); }
}
@keyframes swirlDrift {
  from { transform: rotate(-7deg) translate3d(-4px,0,0); }
  to { transform: rotate(-5deg) translate3d(12px,-10px,0); }
}
@keyframes threadFloat {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(6px,-8px,0) rotate(.5deg); }
}
@keyframes paperBob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-8px); }
}
@keyframes dockFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(1deg); }
}


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

@media (max-width: 760px) {
  :root {
    --edge: 16px;
  }

  html {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--edge);
  }

  .topbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
  }

  .topbar__row {
    min-height: 48px;
    padding: 8px 14px;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    gap: 5px;
  }

  .brand__mark {
    font-size: 17px;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .brand__sub {
    font-size: 6.5px;
    letter-spacing: .13em;
    white-space: nowrap;
  }

  .channel-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 9px;
    gap: 5px;
    font-size: 7.5px;
    letter-spacing: .04em;
  }

  .channel-btn svg {
    width: 11px;
    height: 11px;
  }

  .navpills {
    width: 100%;
    padding: 6px 14px 8px;
    gap: 6px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .navpills a {
    scroll-snap-align: start;
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    font-size: 7px;
    letter-spacing: .025em;
    white-space: nowrap;
  }

  .progress {
    height: 2px;
  }

  .hero {
    width: 100%;
    min-height: 720px;
    height: min(780px, calc(100svh - 92px));
    max-height: 820px;
    background:
      linear-gradient(
        180deg,
        #faf8f5 0%,
        #faf8f5 42%,
        #f6f0ea 72%,
        #f1e8e0 100%
      );
    overflow: hidden;
  }

  .hero:before {
    left: 10px;
    top: 10px;
    font-size: 76px;
    z-index: 9;
    opacity: .75;
  }

  .hero:after {
    z-index: 8;
    background:
      linear-gradient(
        180deg,
        rgba(250,248,245,0) 0%,
        rgba(250,248,245,.02) 28%,
        rgba(250,248,245,.08) 42%,
        rgba(250,248,245,.55) 61%,
        rgba(250,248,245,.94) 75%,
        rgba(250,248,245,.99) 100%
      );
  }

  .hero__swirl {
    width: 112vw;
    max-width: none;
    left: -32vw;
    top: -13vw;
    opacity: .56;
    transform: rotate(-5deg);
  }

  .hero__typewriter {
    width: 151vw;
    max-width: none;
    left: -38vw;
    bottom: 78px;
    transform: rotate(-7deg);
    filter: contrast(.94) saturate(.68);
  }

  .hero__thread {
    width: 118vw;
    max-width: none;
    right: -50vw;
    top: 2px;
    opacity: .38;
  }

  .hero__note {
    width: 39vw;
    max-width: 180px;
    left: 7px;
    top: 58px;
    opacity: .78;
    transform: rotate(-6deg);
  }

  .hero__dock {
    width: 58px;
    right: 12px;
    top: 112px;
    opacity: .72;
  }

  .hero__content {
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding:
      350px
      18px
      40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
  }

  .hero__stamp {
    width: 58px;
    height: 58px;
    margin: 0 0 12px;
    font-size: 6px;
    transform: rotate(6deg);
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(56px, 18vw, 76px);
    line-height: .78;
    letter-spacing: -.065em;
  }

  .hero__tagline {
    margin: 13px 0 7px;
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .hero__lead {
    width: min(100%, 340px);
    max-width: 340px;
    margin: 0 auto 17px;
    font-size: 11.5px;
    line-height: 1.65;
  }

  .hero__cta {
    min-height: 42px;
    padding: 11px 17px;
    font-size: 8px;
  }

  .hero__swirl,
  .hero__typewriter,
  .hero__thread,
  .hero__note,
  .hero__dock {
    translate: none !important;
  }

  section {
    width: 100%;
    padding: 58px 0 48px;
  }

  .section__head {
    margin-bottom: 25px;
  }

  .eyebrow {
    gap: 8px;
    font-size: 7px;
    letter-spacing: .14em;
  }

  .section__title {
    margin: 10px 0 9px;
    font-size: clamp(38px, 12vw, 52px);
    line-height: .93;
  }

  .section__desc {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
  }

  .stack {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 13px;
    margin: 24px 0 30px;
  }

  .card {
    width: 100%;
    max-width: 100%;
    transform: rotate(0deg);
    box-shadow: 5px 6px 0 rgba(77,59,64,.055);
  }

  .stack .card:nth-child(3n+1),
  .stack .card:nth-child(3n+2),
  .stack .card:nth-child(3n+3) {
    --tilt: 0deg;
  }

  .card:hover,
  .card.is-open {
    transform: translateY(-2px);
    box-shadow: 7px 9px 0 rgba(77,59,64,.07);
  }

  .card__row {
    min-height: 68px;
    padding: 17px 14px 16px;
    gap: 11px;
  }

  .card__pin {
    top: 7px;
    left: 13px;
    width: 6px;
    height: 6px;
  }

  .card__num {
    width: 31px;
    height: 31px;
    font-size: 10px;
  }

  .card__title {
    min-width: 0;
    font-size: 15px;
    line-height: 1.2;
  }


  .card__panel-inner {
    padding: 0 17px 20px 17px;
  }

  .card__panel-inner p,
  .card__panel-inner li {
    font-size: 12px;
    line-height: 1.7;
  }

  .postcard {
    width: calc(100% - 4px);
    margin: 0 auto;
    padding: 29px 20px 25px;
    transform: rotate(-.3deg);
    box-shadow: 6px 8px 0 rgba(77,59,64,.055);
  }

  .postcard p {
    font-size: 12.5px;
    line-height: 1.75;
  }

  .postcard__quote {
    width: 76px;
    left: 8px;
    top: 8px;
  }

  .postcard__stampword {
    width: 130px;
    right: -28px;
    bottom: -15px;
  }

  .mini-grid {
    grid-template-columns: 1fr !important;
    gap: 13px !important;
  }






  .section__thread {
    width: 130vw;
    max-width: none;
    right: -62vw;
    top: 45px;
    opacity: .3;
  }

  .footer {
    padding: 72px 0 125px;
  }

  .footer:before {
    left: -8%;
    bottom: 1%;
    font-size: 38vw;
  }

  .footer__wreath {
    width: 280px;
    right: -95px;
    bottom: -45px;
    opacity: .22;
  }

  .footer__badge {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .footer h2 {
    font-size: clamp(31px, 9vw, 45px);
  }

  .footer p.sub {
    font-size: 12px;
    line-height: 1.65;
  }

  .footer__meta {
    margin-top: 32px;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    font-size: 7px;
    line-height: 1.5;
  }

  .floaters {
    z-index: 110;
  }

  .floaters__row {
    padding: 0 14px 12px;
  }

  .totop {
    width: 38px;
    height: 38px;
  }

  .hero__typewriter {
    animation-duration: 10s;
  }

  .hero__note {
    animation-duration: 7s;
  }

  .hero__dock {
    animation-duration: 6s;
  }

  .card::before {
    display: none;
  }
}

@media (max-width: 390px) {
  .topbar__row {
    padding-inline: 11px;
  }

  .brand__mark {
    font-size: 15px;
  }

  .brand__sub {
    display: none;
  }

  .channel-btn {
    padding-inline: 8px;
    font-size: 7px;
  }

  .hero {
    min-height: 690px;
    height: 690px;
  }

  .hero__typewriter {
    width: 164vw;
    left: -44vw;
    bottom: 82px;
  }

  .hero__swirl {
    width: 125vw;
    left: -38vw;
  }

  .hero__note {
    width: 43vw;
    top: 53px;
  }

  .hero__dock {
    width: 51px;
    right: 8px;
    top: 105px;
  }

  .hero__content {
    padding: 342px 15px 33px;
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero__lead {
    font-size: 11px;
    max-width: 300px;
  }

  section {
    padding-top: 51px;
  }

  .section__title {
    font-size: 39px;
  }

  .card__row {
    padding-inline: 12px;
  }

  .card__title {
    font-size: 14px;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .hero {
    min-height: 560px;
    height: 560px;
  }

  .hero__typewriter {
    width: 105vw;
    left: -28vw;
    bottom: -90px;
  }

  .hero__content {
    padding: 150px 18px 30px;
    align-items: flex-end;
    text-align: right;
  }

  .hero__lead {
    margin-left: auto;
    margin-right: 0;
  }

  .hero__note {
    width: 25vw;
    top: 35px;
  }
}


/* --- TEXTURE & OVERLAYS --- */
.screen-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background-image:url("assets/noise-tile.png");
  background-repeat:repeat;
  background-size:280px 280px;
  mix-blend-mode:screen;
  opacity:1;
  animation:filmJitter 8s steps(2,end) infinite;
}

.vignette-overlay{
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
  background-image:url("assets/vignette.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
  opacity:.68;
}

.topbar,.floaters{z-index:9999}

body{
  background:#e8e0d7;
  color:var(--ink);
}

.wrap{
  width:100%;
  padding-inline:16px;
}

.topbar{
  position:sticky;
  top:0;
  background:rgba(38,27,32,.94);
  border-bottom:1px solid rgba(255,255,255,.13);
  box-shadow:0 8px 28px rgba(25,16,19,.16);
}

.topbar__row{
  min-height:52px;
  padding:8px 14px;
}

.brand__mark{
  font-size:18px;
  letter-spacing:.16em;
}
.brand__sub{
  font-size:6px;
  letter-spacing:.16em;
}
.channel-btn{
  padding:8px 9px;
  font-size:7px;
  letter-spacing:.07em;
}
.navpills{
  padding:6px 14px 8px;
  gap:6px;
}
.navpills a{
  min-height:29px;
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  font-size:7px;
  border-color:rgba(255,255,255,.14);
}

.hero{
  min-height:760px;
  height:calc(100svh - 87px);
  max-height:850px;
  background:
    radial-gradient(circle at 88% 11%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(160deg,#eee8e1 0%,#f4efe9 44%,#d8c8c0 100%);
  overflow:hidden;
  isolation:isolate;
}

.hero:before{
  left:9px;
  top:15px;
  z-index:12;
  font-size:83px;
  color:rgba(58,41,48,.38);
}

.hero:after{
  z-index:9;
  background:
    linear-gradient(180deg,
      rgba(238,232,225,.03) 0%,
      rgba(238,232,225,.02) 27%,
      rgba(238,232,225,.10) 42%,
      rgba(238,232,225,.48) 57%,
      rgba(238,232,225,.91) 72%,
      rgba(238,232,225,.98) 100%);
}

.hero__swirl{
  width:130vw;
  max-width:none;
  left:-38vw;
  top:-12vw;
  opacity:.68;
  z-index:1;
  mix-blend-mode:multiply;
}

.hero__typewriter{
  width:163vw;
  max-width:none;
  left:-44vw;
  bottom:88px;
  z-index:3;
  transform:rotate(-7deg);
  filter:sepia(.12) contrast(.98) saturate(.65);
  animation:typewriterPhone 10s ease-in-out infinite;
}

.hero__thread{
  width:122vw;
  max-width:none;
  right:-55vw;
  top:-8px;
  opacity:.45;
  z-index:4;
}

.hero__note{
  width:43vw;
  max-width:180px;
  left:3px;
  top:62px;
  opacity:.76;
  z-index:6;
  animation:paperBobPhone 7s ease-in-out infinite;
}

.hero__dock{
  width:54px;
  right:9px;
  top:105px;
  opacity:.78;
  z-index:11;
}

.hero__content{
  min-height:100%;
  padding:335px 16px 44px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  position:relative;
}

.hero__stamp{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  font-size:6px;
  border-color:rgba(58,41,48,.42);
  background:rgba(246,240,234,.55);
}

.hero h1{
  max-width:none;
  width:100%;
  font-size:clamp(57px,18vw,78px);
  line-height:.76;
  letter-spacing:-.065em;
  text-shadow:1px 2px 0 rgba(255,255,255,.82),5px 6px 0 rgba(58,41,48,.055);
}

.hero__tagline{
  margin:14px 0 8px;
  font-size:clamp(14px,4.4vw,19px);
}
.hero__lead{
  max-width:340px;
  margin:0 auto 17px;
  font-size:11.5px;
  line-height:1.7;
  color:#504147;
}

.btn--light{
  background:#35262c;
  box-shadow:5px 5px 0 rgba(122,91,91,.2);
}

.hero__content:after{
  left:16px;
  bottom:21px;
  font-size:7px;
  letter-spacing:.18em;
}

.hero__ticker{
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:6px;
  z-index:11;
  display:flex;
  gap:28px;
  overflow:hidden;
  white-space:nowrap;
  transform:rotate(-2deg);
  color:rgba(48,35,40,.30);
  font:7px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  pointer-events:none;
}
.hero__ticker span{
  flex:0 0 auto;
  animation:tickerMove 22s linear infinite;
}

.hero__corner{
  position:absolute;
  z-index:12;
  color:rgba(48,35,40,.42);
  font:6px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__corner--tl{
  left:7px;
  top:205px;
  transform:rotate(180deg);
}
.hero__corner--br{
  right:7px;
  bottom:130px;
}

section{
  padding:65px 0 54px;
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),
    var(--cream);
}

.section__head{
  margin-bottom:25px;
}
.eyebrow{
  font-size:7px;
  letter-spacing:.17em;
}
.section__title{
  margin:9px 0 9px;
  font-size:clamp(38px,12vw,53px);
  line-height:.88;
}
.section__desc{
  max-width:330px;
  font-size:11.5px;
  line-height:1.7;
}

.postcard{
  width:calc(100% - 4px);
  margin:0 auto 24px;
  padding:26px 19px 23px;
  background:
    linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)),
    #f8f1e9;
  box-shadow:7px 9px 0 rgba(54,39,43,.065);
  transform:rotate(-.8deg);
}
.postcard:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(72,52,57,.10);
  pointer-events:none;
}
.postcard p{
  font-size:12px;
  line-height:1.75;
}

.stack{
  width:100%;
  grid-template-columns:1fr;
  gap:12px;
  margin:23px 0 28px;
}

.card{
  width:100%;
  transform:rotate(0deg);
  background:
    linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),
    #f7f0e8;
  border:1px solid rgba(63,45,49,.18);
  box-shadow:4px 6px 0 rgba(63,45,49,.055);
}
.card:nth-child(odd){
  transform:rotate(-.35deg);
}
.card:nth-child(even){
  transform:rotate(.3deg);
}
.card:hover{
  transform:translateY(-3px) rotate(0deg);
}
.card__row{
  min-height:67px;
  padding:16px 13px;
}
.card__num{
  width:30px;
  height:30px;
  font-size:9px;
  background:#e4d7cf;
  border-color:rgba(58,41,48,.22);
}
.card__title{
  font-size:14px;
  line-height:1.2;
}
.card__panel-inner{
  padding:0 16px 20px;
}
.card__panel-inner p,
.card__panel-inner li{
  font-size:11.5px;
  line-height:1.72;
}

.section--dark{
  background:
    radial-gradient(circle at 80% 20%, rgba(160,128,126,.16), transparent 28%),
    linear-gradient(145deg,#2d2026,#443039 58%,#271b20);
  color:#f0e7df;
}
.section--dark .section__desc{
  color:#cbbab3;
}
.section--dark .card{
  background:rgba(241,231,222,.94);
  color:var(--ink);
}
.section--dark .eyebrow{
  color:#d5bdb6;
}
.section--dark .section__thread{
  opacity:.20;
}

.note-tag{
  margin-top:25px;
  padding:15px 16px;
  border-left:2px solid var(--rose);
  background:rgba(73,51,57,.045);
  font-size:10px;
  line-height:1.7;
}

.mini-grid{
  grid-template-columns:1fr !important;
  gap:12px !important;
}


.footer{
  padding:70px 0 120px;
}
.footer h2{
  font-size:clamp(32px,10vw,48px);
}

.btn,
.card__row,
.navpills a,
.channel-btn,
.totop{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.card__row:active,
.btn:active,
.channel-btn:active,
.navpills a:active{
  transform:scale(.975);
}

@keyframes tickerMove{
  from{transform:translateX(0)}
  to{transform:translateX(-115%)}
}
@keyframes filmJitter{
  0%,100%{background-position:0 0}
  25%{background-position:13px -8px}
  50%{background-position:-7px 11px}
  75%{background-position:8px 4px}
}
@keyframes typewriterPhone{
  0%,100%{transform:rotate(-7deg) translate3d(0,0,0)}
  50%{transform:rotate(-6.2deg) translate3d(8px,-7px,0)}
}
@keyframes paperBobPhone{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-7px)}
}

@media (min-width:761px){
  .wrap{max-width:var(--wrap);padding-inline:var(--edge)}
  .topbar__row{padding:10px var(--edge)}
  .navpills{padding:7px var(--edge) 9px}

  .hero{
    min-height:clamp(720px,calc(100svh - 84px),900px);
    height:auto;
  }
  .hero__swirl{
    width:min(720px,62vw);
    left:-150px;
    top:-150px;
  }
  .hero__typewriter{
    width:min(980px,78vw);
    left:-185px;
    bottom:-165px;
    animation:typewriterFloat 8s ease-in-out infinite;
  }
  .hero__thread{
    width:min(720px,58vw);
    right:-170px;
  }
  .hero__note{
    width:min(320px,25vw);
    left:20px;
    top:72px;
  }
  .hero__dock{
    width:92px;
    right:48px;
    top:180px;
  }
  .hero__content{
    min-height:inherit;
    padding:clamp(95px,12vh,150px) var(--edge) 70px;
    align-items:flex-end;
    justify-content:center;
    text-align:right;
  }
  .hero__stamp{
    width:78px;
    height:78px;
    margin:0 5% 20px 0;
    font-size:8px;
  }
  .hero h1{
    max-width:610px;
    font-size:clamp(70px,10.5vw,150px);
  }
  .hero__tagline{
    margin:22px 4% 13px 0;
    font-size:clamp(17px,2vw,25px);
  }
  .hero__lead{
    max-width:410px;
    margin:0 4% 25px 0;
    font-size:13px;
  }
  .hero__ticker{bottom:10px}
  .hero__corner--tl{left:20px;top:170px}
  .hero__corner--br{right:18px;bottom:110px}

  section{padding:105px 0 82px}
  .section__head{margin-bottom:34px}
  .section__title{font-size:clamp(40px,6vw,76px)}
  .section__desc{max-width:700px;font-size:13px}
  .stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
  }
  .postcard{
    max-width:900px;
    padding:35px 42px 30px;
  }
  .card__row{padding:20px 18px}
  .card__title{font-size:16px}
  .card__panel-inner{padding:0 22px 24px}
  .card__panel-inner p,.card__panel-inner li{font-size:12.5px}
  .mini-grid{grid-template-columns:repeat(3,1fr)!important}
}

@media (min-width:391px) and (max-width:760px){
  .hero{
    min-height:800px;
    height:calc(100svh - 87px);
  }
  .hero__content{padding-top:355px}
  .hero__typewriter{bottom:82px}
}

@media (max-width:360px){
  .brand__sub{display:none}
  .channel-btn{padding-inline:7px;font-size:6.5px}
  .hero{min-height:700px}
  .hero__content{padding-top:330px}
  .hero h1{font-size:57px}
  .hero__lead{font-size:10.5px}
  .hero__corner{font-size:5.5px}
}

@media (prefers-reduced-motion:reduce){
  .screen-overlay,
  .hero__typewriter,
  .hero__note,
  .hero__ticker span{
    animation:none !important;
  }
}

@keyframes fadein{from{opacity:0}to{opacity:1}}