/* ==========================================================================
   UNBOUND - core.css
   tokens / reset / typography / site chrome (loader, cursor, nav, cart, footer)
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  /* ink + paper */
  --ink:          #0b0b0b;
  --ink-2:        #161614;
  --ink-3:        #2a2a26;
  --paper:        #f2efe6;
  --paper-2:      #e7e2d5;
  --paper-3:      #d8d2c2;

  /* accents */
  --flame:        #ff3d10;
  --acid:         #d9ff2e;
  --sky:          #1736ff;

  /* semantic (flipped by [data-theme="dark"]) */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-mute:      #6b6b60;
  --line:         rgba(11,11,11,.16);
  --line-strong:  rgba(11,11,11,.4);
  --card:         var(--paper-2);

  /* type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Space Mono", "SFMono-Regular", Consolas, monospace;

  --fs-micro: 0.6875rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --fs-xl:    clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  --fs-h3:    clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  --fs-h2:    clamp(2.6rem, 1.2rem + 5.6vw, 6rem);
  --fs-h1:    clamp(3.6rem, .5rem + 12vw, 13rem);

  /* space + motion */
  --gut:  clamp(1rem, .5rem + 2.2vw, 2.5rem);
  --sec:  clamp(4.5rem, 3rem + 7vw, 11rem);
  --rail: 1600px;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-in:   cubic-bezier(.6,0,.4,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: .25s;
  --t-med:  .55s;
  --t-slow: .9s;

  --nav-h: 68px;
}

[data-theme="dark"]{
  --bg:          var(--ink);
  --fg:          var(--paper);
  --fg-mute:     #8b8b80;
  --line:        rgba(242,239,230,.18);
  --line-strong: rgba(242,239,230,.45);
  --card:        var(--ink-2);
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html.is-locked, body.is-locked{ overflow:hidden }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.5;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; padding:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0 }
hr{ border:0; border-top:1px solid var(--line); margin:0 }
::selection{ background:var(--flame); color:var(--paper) }
:focus-visible{ outline:2px solid var(--flame); outline-offset:3px }

.skip{
  position:fixed; top:8px; left:8px; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font:600 var(--fs-xs)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transform:translateY(-200%); transition:transform var(--t-fast);
}
.skip:focus{ transform:none }
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* --- typography --------------------------------------------------------- */
.d1,.d2,.d3{
  font-family:var(--display);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.d1{ font-size:var(--fs-h1) }
.d2{ font-size:var(--fs-h2) }
.d3{ font-size:var(--fs-h3); line-height:.92 }

.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-micro);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-mute);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:currentColor; opacity:.6; flex:none;
}
.eyebrow--plain::before{ display:none }

.lede{ font-size:var(--fs-lg); line-height:1.45; max-width:34ch }
.muted{ color:var(--fg-mute) }
.mono{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase }
.center{ text-align:center }

/* --- layout ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--rail); margin-inline:auto; padding-inline:var(--gut) }
.wrap--wide{ max-width:none }
.section{ padding-block:var(--sec); position:relative }
.section--tight{ padding-block:calc(var(--sec) * .55) }
.panel{ background:var(--bg); color:var(--fg) }
.grid{ display:grid; gap:var(--gut) }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
.g12{ grid-template-columns:repeat(12,1fr) }
@media (max-width:900px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr) }
  .g2{ grid-template-columns:1fr }
}

.rule{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:clamp(1.5rem,1rem + 2vw,3rem);
  border-bottom:1px solid var(--line);
}


/* --- buttons ------------------------------------------------------------ */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.7rem; padding:1.05rem 1.9rem; overflow:hidden; isolation:isolate;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  border:1px solid var(--btn-bg); border-radius:0;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--flame);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover::after{ transform:translateY(0) }
.btn:hover{ color:#fff }
.btn:disabled{ opacity:.4; cursor:not-allowed }
.btn:disabled::after{ transform:translateY(101%) }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--fg); border-color:var(--line-strong) }
.btn--ghost:hover{ border-color:var(--flame) }
.btn--paper{ --btn-bg:var(--paper); --btn-fg:var(--ink) }
.btn--block{ width:100% }
.btn--lg{ padding:1.25rem 2.4rem }
.btn__ico{ transition:transform .4s var(--ease) }
.btn:hover .btn__ico{ transform:translateX(5px) }

/* underline link */
.ulink{
  position:relative; display:inline-block; padding-bottom:2px;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
}
.ulink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.ulink:hover::after{ transform:scaleX(1) }
.ulink--on::after{ transform:scaleX(1) }

/* --- marquee ------------------------------------------------------------ */
.marquee{
  --speed:28s;
  position:relative; display:flex; overflow:hidden; width:100%;
  user-select:none; -webkit-user-select:none;
}
.marquee__track{
  display:flex; flex:none; align-items:center; gap:0;
  min-width:100%; animation:slide var(--speed) linear infinite;
  will-change:transform;
}
.marquee--rev .marquee__track{ animation-direction:reverse }
.marquee:hover .marquee__track{ animation-play-state:paused }
@keyframes slide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-100%,0,0)} }
.marquee__item{
  display:inline-flex; align-items:center; gap:clamp(1rem,2vw,2.2rem);
  padding-right:clamp(1rem,2vw,2.2rem); white-space:nowrap;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,5.5rem); line-height:1;
}
.marquee__item span{ display:inline-block }
.marquee__star{ color:var(--flame); font-size:.42em; transform:translateY(-.12em) }
.marquee--sm .marquee__item{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.22em; gap:2.2rem; padding-right:2.2rem;
}
.marquee-band{
  border-block:1px solid var(--line);
  background:var(--bg); color:var(--fg); padding-block:.55rem;
}
.marquee-band--ink{ background:var(--ink); color:var(--paper); border-color:transparent }
.marquee-band--flame{ background:var(--flame); color:#fff; border-color:transparent }

/* --- rotating stamp ----------------------------------------------------- */
.stamp{ width:clamp(96px,11vw,150px); aspect-ratio:1; position:relative; flex:none }
.stamp > svg{ width:100%; height:100%; animation:spin 22s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.stamp__core{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-size:.78rem; letter-spacing:.06em;
}

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); overflow:hidden;
}
.loader[hidden]{ display:none }
.loader__inner{ position:relative; width:min(90vw,1100px); text-align:center }
.loader__word{
  display:flex; justify-content:center; gap:.015em;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(3rem,13vw,10rem); line-height:.9;
}
.loader__word i{ overflow:hidden; display:inline-block; font-style:normal }
.loader__word i > span{
  display:inline-block; transform:translateY(110%);
  animation:letterUp .9s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 55ms);
}
@keyframes letterUp{ to{ transform:translateY(0) } }
.loader__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:2rem; margin-top:1.4rem;
  font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.24em; text-transform:uppercase; color:#8b8b80;
  opacity:0; animation:fadeIn .6s .5s var(--ease) forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.loader__bar{
  position:relative; height:1px; margin-top:.9rem;
  background:rgba(242,239,230,.22); overflow:hidden;
}
.loader__fill{
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:var(--paper); transition:transform .25s linear;
}
.loader__count{ font-variant-numeric:tabular-nums }
.loader.is-out{ animation:loaderOut .9s var(--ease-out) forwards }
@keyframes loaderOut{ to{ clip-path:inset(0 0 100% 0) } }

/* page curtain (link transitions) */
.curtain{
  position:fixed; inset:0; z-index:980; pointer-events:none;
  background:var(--ink); transform:translateY(100%);
}
.curtain.is-in{ animation:curtainIn .5s var(--ease-in) forwards }
.curtain.is-out{ animation:curtainOut .7s var(--ease-out) forwards }
@keyframes curtainIn{ from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes curtainOut{ from{transform:translateY(0)} to{transform:translateY(-100%)} }

/* ==========================================================================
   CURSOR
   ========================================================================== */
/* Structure:   .cursor  (moves, never scales)
                ├ .cursor__ring  (scales, never moves)
                ├ .cursor__dot   (scales, never moves)
                └ .cursor__label
   The individual `scale` property is applied on top of `transform`. With
   both on one element, shrinking the dot to .3 also shrank its POSITION to
   .3 — it was drawn at 30% of the pointer's coordinates and slid toward the
   top-left corner. Movement and size now live on different elements.

   The dot is drawn at its LARGEST size and scaled down, so it stays crisp
   instead of being an upscaled 12px raster when it grows. No blend modes. */
.cursor{
  --s:.143;        /* dot: 84px x .143 = 12px at rest */
  --rs:1;          /* ring                            */
  --press:1;       /* click squash                    */
  position:fixed; left:0; top:0; z-index:950; pointer-events:none;
  width:0; height:0;
  will-change:transform;
  transition:opacity .2s linear;
}
.cursor__dot,
.cursor__ring{ position:absolute; left:0; top:0; border-radius:50% }
.cursor__dot{
  width:84px; height:84px; margin:-42px 0 0 -42px;
  background:var(--flame);
  scale:calc(var(--s) * var(--press));
  transition:scale .28s var(--ease);
}
.cursor__ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1.5px solid var(--flame); opacity:.5;
  scale:calc(var(--rs) * var(--press));
  transition:scale .3s var(--ease), opacity .2s linear;
}
.cursor__label{
  position:absolute; left:0; top:0; translate:-50% -50%;
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  white-space:nowrap; opacity:0; transition:opacity .2s linear;
}
/* over a link: dot swells to fill the ring, ring closes in and fades */
.cursor.is-link{ --s:.45; --rs:.6 }
.cursor.is-link .cursor__ring{ opacity:0 }
/* over an image: a solid disc with a word in it */
.cursor.is-label{ --s:1; --rs:.6 }
.cursor.is-label .cursor__ring{ opacity:0 }
.cursor.is-label .cursor__label{ opacity:1 }
.cursor.is-down{ --press:.82 }
.cursor.is-hidden{ opacity:0 }

/* Visibility is driven by JS (html.has-cursor), set the moment a real mouse
   moves. A media query cannot be trusted here: a touchscreen laptop reports
   `pointer: coarse` even with a mouse attached, which hid this entirely. */
.cursor{ display:none }
html.has-cursor .cursor{ display:block }
html.has-cursor, html.has-cursor *{ cursor:none !important }
/* keep a real caret where people actually type */
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select,
html.has-cursor [contenteditable]{ cursor:auto !important }

/* ==========================================================================
   NAV
   ========================================================================== */
/* No blend mode and no backdrop-filter. Both are applied to a fixed bar, so
   the browser had to re-blend / re-blur the strip under it on every frame of
   scrolling. Every page with a see-through nav has a dark hero, so plain
   paper-coloured text does the same job for free. */
.nav{
  position:fixed; inset:0 0 auto; z-index:800; height:var(--nav-h);
  display:flex; align-items:center; color:var(--paper);
  transition:transform .5s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.nav.is-solid{
  color:var(--ink);
  background:rgba(242,239,230,.97);
  border-bottom:1px solid var(--line);
}
.nav.is-up{ transform:translateY(-110%) }
.nav__inner{
  width:100%; max-width:var(--rail); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.nav__logo{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.02em;
  text-transform:uppercase; line-height:1; justify-self:start;
  display:flex; align-items:flex-start; gap:.2rem;
}
.nav__logo em{ font-style:normal; color:var(--flame); font-size:.5em; line-height:1 }
.nav__links{ display:flex; gap:clamp(1rem,2.4vw,2.6rem); justify-self:center }
.nav__link{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; position:relative; padding:.4rem 0;
}
.nav__link span{ display:block; overflow:hidden; height:1.15em }
.nav__link span i{ display:block; font-style:normal; transition:transform .45s var(--ease) }
.nav__link span i::after{ content:attr(data-t); display:block; color:var(--flame) }
.nav__link:hover span i{ transform:translateY(-100%) }
.nav__link.is-active::after{
  content:""; position:absolute; left:50%; bottom:-1px; translate:-50% 0;
  width:4px; height:4px; background:var(--flame); border-radius:50%;
}
.nav__right{ display:flex; align-items:center; gap:1.1rem; justify-self:end }
.nav__cart{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; display:flex; gap:.45rem; align-items:center;
}
.nav__cart b{
  min-width:1.5em; height:1.5em; display:grid; place-items:center; border-radius:50%;
  background:var(--flame); color:#fff; font-size:.62rem;
}
.nav__cart.is-bump b{ animation:bump .5s var(--ease) }
@keyframes bump{ 0%,100%{transform:scale(1)} 35%{transform:scale(1.5)} }
.nav__burger{ display:none; width:30px; height:14px; position:relative }
.nav__burger i{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger i:first-child{ top:0 }
.nav__burger i:last-child{ bottom:0 }
html.menu-open .nav__burger i:first-child{ transform:translateY(6px) rotate(45deg) }
html.menu-open .nav__burger i:last-child{ transform:translateY(-6px) rotate(-45deg) }
@media (max-width:860px){
  .nav__links{ display:none }
  .nav__burger{ display:block }
  .nav__cart span{ display:none }
}

/* fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:790; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:.1rem;
  padding:calc(var(--nav-h) + 2rem) var(--gut) var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-out);
  pointer-events:none;
}
html.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto }
.menu__link{
  font-family:var(--display); font-size:clamp(2.6rem,13vw,5rem); line-height:1.05;
  text-transform:uppercase; display:block; overflow:hidden;
}
.menu__link > span{
  display:block; transform:translateY(105%); transition:transform .7s var(--ease-out);
  transition-delay:calc(var(--i) * 60ms + .1s);
}
html.menu-open .menu__link > span{ transform:translateY(0) }
.menu__foot{
  margin-top:auto; padding-top:2rem; display:flex; flex-wrap:wrap; gap:1.4rem;
  border-top:1px solid rgba(242,239,230,.2);
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.scrim{
  position:fixed; inset:0; z-index:810; background:rgba(11,11,11,.55);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
/* blur only exists while the bag is open, so it costs nothing while browsing */
html.cart-open .scrim{
  opacity:1; pointer-events:auto;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.cart{
  position:fixed; top:0; right:0; z-index:820; height:100%;
  width:min(440px,100%); display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  transform:translateX(101%); transition:transform .6s var(--ease-out);
  box-shadow:-20px 0 60px rgba(11,11,11,.18);
}
html.cart-open .cart{ transform:translateX(0) }
.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem var(--gut); border-bottom:1px solid var(--line); flex:none;
}
.cart__title{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase }
.cart__close{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase }
.cart__close:hover{ color:var(--flame) }
.cart__body{ flex:1; overflow-y:auto; padding:var(--gut); display:grid; gap:1.4rem; align-content:start }
.cart__empty{ display:grid; gap:1.1rem; justify-items:start; padding-top:1rem }
.cart__empty .d3{ max-width:12ch }
.cline{ display:grid; grid-template-columns:84px 1fr; gap:1rem; align-items:start }
.cline__img{ aspect-ratio:4/5; background:#fff; overflow:hidden }
.cline__img img{ width:100%; height:100%; object-fit:cover }
.cline__top{ display:flex; justify-content:space-between; gap:.8rem }
.cline__name{ font-weight:650; font-size:var(--fs-sm); line-height:1.25 }
.cline__opt{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); margin-top:.3rem;
}
.cline__price{ font-family:var(--mono); font-size:var(--fs-xs); white-space:nowrap }
.cline__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.7rem }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line) }
.qty button{ width:28px; height:28px; display:grid; place-items:center; font-size:.9rem; line-height:1 }
.qty button:hover{ background:var(--ink); color:var(--paper) }
.qty span{ min-width:28px; text-align:center; font-family:var(--mono); font-size:var(--fs-xs) }
.cline__rm{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); text-decoration:underline;
}
.cline__rm:hover{ color:var(--flame) }
.cart__foot{ flex:none; padding:var(--gut); border-top:1px solid var(--line); display:grid; gap:.9rem }
.cart__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
}
.cart__row b{ font-size:var(--fs-lg); font-family:var(--sans) }
.cart__note{
  font-size:var(--fs-micro); color:var(--fg-mute); font-family:var(--mono);
  letter-spacing:.06em; line-height:1.6;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 0; z-index:900;
  background:var(--ink); color:var(--paper); padding:.9rem 1.3rem;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  display:flex; gap:.8rem; align-items:center;
  opacity:0; transform:translate(-50%,16px); transition:opacity .4s, transform .5s var(--ease);
  pointer-events:none; max-width:calc(100vw - 2rem); text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0) }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); color:var(--paper); padding-top:clamp(3rem,6vw,6rem) }
.foot a:hover{ color:var(--flame) }
.foot__grid{
  display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--gut);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
@media (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr } }
.foot__head{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.22em;
  text-transform:uppercase; color:#8b8b80; margin-bottom:1.1rem;
}
.foot__list{ display:grid; gap:.6rem; font-size:var(--fs-sm) }
.foot__sign{
  display:flex; align-items:center; border-bottom:1px solid rgba(242,239,230,.3);
  max-width:420px; margin-top:1rem;
}
.foot__sign input{
  flex:1; min-width:0; background:none; border:0; padding:.7rem 0; outline:none;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em;
}
.foot__sign input::placeholder{ color:#6b6b60; text-transform:uppercase }
.foot__sign button{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.5rem 0 .5rem 1rem; flex:none;
}
.foot__sign button:hover{ color:var(--flame) }
.foot__word{
  font-family:var(--display); text-transform:uppercase; line-height:.78;
  font-size:clamp(3.5rem,18.5vw,16rem); letter-spacing:-.02em;
  border-top:1px solid rgba(242,239,230,.2); padding-top:.25em;
  display:flex; justify-content:space-between; overflow:hidden;
}
.foot__bar{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-block:1.4rem; border-top:1px solid rgba(242,239,230,.2); margin-top:1.5rem;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:#8b8b80;
}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
[data-reveal]{
  --d:0ms;
  transition:opacity .9s var(--ease-out) var(--d),
             transform 1s var(--ease-out) var(--d),
             clip-path 1.1s var(--ease-out) var(--d);
}
[data-reveal="up"]{ opacity:0; transform:translateY(34px) }
[data-reveal="fade"]{ opacity:0 }
[data-reveal="scale"]{ opacity:0; transform:scale(1.06) }
[data-reveal="clip"]{ clip-path:inset(0 0 100% 0) }
[data-reveal="left"]{ opacity:0; transform:translateX(-34px) }
[data-reveal="right"]{ opacity:0; transform:translateX(34px) }
[data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0) }

/* parallax drift, composable with other transforms on the same element */
[data-parallax]{ transform:translate3d(0,var(--py,0px),0) }

.line{ display:block; overflow:hidden }
.line > span{
  display:block; transform:translateY(105%);
  transition:transform .95s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + var(--d,0ms));
}
.is-in .line > span, .line.is-in > span{ transform:translateY(0) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important }
  .line > span{ transform:none !important }
  .cursor{ display:none !important }
  html.has-cursor,html.has-cursor *{ cursor:auto !important }
}