/* ===========================================================================
   SKYLR.ai
   Dark. Warm. Sophisticated. Candlelit room, bourbon in a crystal glass.
   No cold blues. No corporate gradients.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Warm charcoals — every neutral is pulled toward amber, never blue. */
  --ink:        #0B0A09;
  --charcoal:   #13100E;
  --surface:    #191512;
  --surface-2:  #221C17;
  --line:       #2E271F;
  --line-soft:  #231D18;

  /* Candlelight. --gold is the voice; --ember is the wordmark's own orange,
     used sparingly so it stays a signature rather than a theme. */
  --gold:       #D9A441;
  --gold-bright:#EFC479;
  --gold-deep:  #8C6A2B;
  --ember:      #FC6201;

  /* Type — warm white, never #FFF. */
  --white:      #F7F2E9;
  --text:       #E4DCD0;
  --muted:      #9B9084;
  --faint:      #6B635A;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Author `display:` beats the UA's [hidden] rule — several components below
   set display on a class that also carries `hidden`. Keep hidden meaning hidden. */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

::selection{ background:rgba(217,164,65,.28); color:var(--white); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:1rem; z-index:200;
  background:var(--gold); color:var(--ink); padding:.6rem 1rem;
  border-radius:3px; font-size:.85rem; font-weight:500; text-decoration:none;
}
.skip:focus{ left:1rem; }

/* Film grain. Warmth you feel rather than see. */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- layout -- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{ max-width:820px; }

.section{
  position:relative;
  padding-block:clamp(5.5rem, 12vw, 10rem);
}

.kicker{
  margin:0 0 1.4rem;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.kicker::after{
  content:''; display:block; width:2.2rem; height:1px;
  margin-top:.85rem; background:linear-gradient(90deg,var(--gold),transparent);
}

.h2{
  margin:0 0 1.2rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--white);
}

.lede{
  margin:0 0 3rem;
  max-width:46ch;
  color:var(--muted);
}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.92rem 1.9rem;
  border:1px solid transparent;
  border-radius:2px;
  background:none;
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.btn--sm{ padding:.6rem 1.15rem; font-size:.7rem; }

.btn--gold{
  background:var(--gold);
  color:#1A1309;
  box-shadow:0 0 0 rgba(217,164,65,0);
}
.btn--gold:hover{
  background:var(--gold-bright);
  transform:translateY(-1px);
  box-shadow:0 10px 34px -14px rgba(217,164,65,.7);
}

.btn--outline{
  border-color:rgba(217,164,65,.42);
  color:var(--gold);
}
.btn--outline:hover{
  border-color:var(--gold);
  background:rgba(217,164,65,.08);
  transform:translateY(-1px);
}

.btn--ghost{
  border-color:var(--line);
  color:var(--text);
}
.btn--ghost:hover{
  border-color:rgba(217,164,65,.5);
  color:var(--gold);
}

.link{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--gold); font-size:.82rem; letter-spacing:.06em;
  transition:color .3s var(--ease), letter-spacing .3s var(--ease);
}
.link:hover{ color:var(--gold-bright); letter-spacing:.09em; }

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,10,9,.82);
  backdrop-filter:blur(16px) saturate(120%);
  border-bottom-color:var(--line-soft);
}

.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:1.1rem var(--pad);
  display:flex; align-items:center; gap:2rem;
}

.nav__brand{ flex:none; text-decoration:none; }

/* The supplied wordmark art exists only as a blue chrome lockup (ruled out)
   plus an orange A/I overlay, so the mark is set in type. The ember .ai keeps
   the brand's own "Attitude. Intelligence." conceit. */
.mark{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.34em;
  color:var(--white);
  transition:color .4s var(--ease);
}
.mark__tld{ color:var(--ember); letter-spacing:.06em; }
.nav__brand:hover .mark{ color:var(--gold-bright); }
.mark--lg{ font-size:1.5rem; letter-spacing:.36em; }

.nav__links{
  margin-left:auto;
  display:flex; gap:2.1rem;
}
.nav__links a{
  position:relative;
  color:var(--muted); text-decoration:none;
  font-size:.78rem; letter-spacing:.1em;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-.4rem;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; align-items:center; gap:.75rem; }

.nav__toggle{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--line); border-radius:2px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{
  display:block; width:16px; height:1px; background:var(--text);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.nav__mobile{
  display:none;
  padding:.5rem var(--pad) 1.6rem;
  background:rgba(11,10,9,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav__mobile a{
  display:block; padding:.85rem 0;
  color:var(--text); text-decoration:none;
  font-family:var(--serif); font-size:1.2rem; font-weight:300;
  border-bottom:1px solid var(--line-soft);
}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}

/* Candlelight: warm radial pools, no linear "tech" gradient anywhere. */
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 60% at 74% 44%, rgba(217,164,65,.17), transparent 68%),
    radial-gradient(42% 46% at 22% 72%, rgba(252,98,1,.07), transparent 70%),
    radial-gradient(90% 80% at 50% 118%, rgba(11,10,9,.96), transparent 60%);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding:9rem var(--pad) 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:end;
  gap:2rem;
}

.hero__copy{ padding-bottom:clamp(4rem, 12vh, 9rem); }

.hero__eyebrow{
  margin:0 0 1.6rem;
  font-size:.74rem; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted);
}
.hero__eyebrow .dot{ color:var(--ember); }

.hero__line{
  margin:0 0 2.6rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.35rem, 1.1rem + 4.6vw, 4.6rem);
  line-height:1.03;
  letter-spacing:-.028em;
  color:var(--white);
  text-wrap:balance;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Ambient sound — off by default, the spec is explicit. */
.ambient{
  margin-top:2.6rem;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:0; background:none; border:0; cursor:pointer;
  color:var(--faint);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.ambient:hover{ color:var(--muted); }
.ambient[aria-pressed="true"]{ color:var(--gold); }

.ambient__bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.ambient__bars i{
  width:2px; height:3px; background:currentColor;
  transition:height .3s var(--ease);
}
.ambient[aria-pressed="true"] .ambient__bars i{
  animation:eq 1.1s ease-in-out infinite;
}
.ambient[aria-pressed="true"] .ambient__bars i:nth-child(2){ animation-delay:.18s; }
.ambient[aria-pressed="true"] .ambient__bars i:nth-child(3){ animation-delay:.36s; }
.ambient[aria-pressed="true"] .ambient__bars i:nth-child(4){ animation-delay:.1s; }
@keyframes eq{
  0%,100%{ height:3px; }
  50%{ height:12px; }
}

/* ---- the avatar stage: she has to feel alive ---- */
.hero__stage{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:640px;
  perspective:1400px;
}

.hero__halo{
  position:absolute; left:50%; bottom:6%;
  width:86%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,164,65,.22), rgba(252,98,1,.07) 42%, transparent 66%);
  filter:blur(22px);
  animation:halo 7.5s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{ opacity:.68; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.06); }
}

.hero__avatar{
  position:relative;
  width:100%; height:auto;
  transform-origin:50% 88%;
  /* breath: two stacked rhythms so it never reads as a loop */
  animation:breathe 5.6s ease-in-out infinite, sway 13s ease-in-out infinite;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.66))
         drop-shadow(0 0 46px rgba(217,164,65,.09));
  transition:filter .7s var(--slow);
}
.hero__stage:hover .hero__avatar{
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.66))
         drop-shadow(0 0 60px rgba(217,164,65,.2));
}

@keyframes breathe{
  0%,100%{ transform:translateY(0)      scale(1); }
  50%    { transform:translateY(-.55%)  scale(1.0085); }
}
@keyframes sway{
  0%,100%{ rotate:0deg; }
  33%    { rotate:.32deg; }
  66%    { rotate:-.26deg; }
}

/* JS writes --tx/--ty/--ry on the stage; she leans toward the cursor. */
.hero__stage{
  --tx:0px; --ty:0px; --ry:0deg;
}
.hero__avatar{
  translate:var(--tx) var(--ty);
  rotate:y var(--ry);
  transition:translate .9s var(--slow), rotate .9s var(--slow), filter .7s var(--slow);
}

.hero__scroll{
  position:absolute; left:50%; bottom:1.9rem; z-index:3;
  translate:-50% 0;
  width:1px; height:56px;
  background:linear-gradient(var(--line), transparent);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:linear-gradient(var(--gold), transparent);
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%  { transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ------------------------------------------------------------ who i am -- */
.section--who{ background:var(--charcoal); }

.pull{
  margin:0 0 clamp(3.5rem, 8vw, 6rem);
  max-width:24ch;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.55rem, .9rem + 2.4vw, 2.9rem);
  line-height:1.24;
  letter-spacing:-.017em;
  color:var(--white);
  text-wrap:pretty;
}

.triad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-soft);
}
.triad__col h3{
  margin:1.4rem 0 .6rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  letter-spacing:-.01em;
  color:var(--white);
}
.triad__col p{ margin:0; color:var(--muted); font-size:.95rem; }

.triad__icon{
  display:grid; place-items:center;
  width:50px; height:50px;
  color:var(--gold);
  border:1px solid rgba(217,164,65,.25);
  border-radius:50%;
  transition:border-color .5s var(--ease), background .5s var(--ease),
             transform .5s var(--ease);
}
.triad__icon svg{ width:22px; height:22px; }
.triad__col:hover .triad__icon{
  border-color:rgba(217,164,65,.6);
  background:rgba(217,164,65,.07);
  transform:translateY(-3px);
}

/* ----------------------------------------------------------- what i do -- */
.section--what{ background:var(--ink); }

.cards{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}

.card{
  all:unset;
  cursor:pointer;
  display:block;
  aspect-ratio:1/1.18;
  perspective:1100px;
  border-radius:3px;
}
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.card__inner{
  position:relative; display:block;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .8s var(--slow);
}
.card:hover .card__inner,
.card.is-flipped .card__inner{ transform:rotateY(180deg); }

.card__face{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:1.5rem;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:border-color .6s var(--ease);
}
.card:hover .card__face{ border-color:rgba(217,164,65,.42); }

.card__num{
  font-size:.66rem; letter-spacing:.24em;
  color:var(--gold-deep);
}
.card__title{
  margin-top:auto;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.22rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--white);
  text-wrap:balance;
}
.card__hint{
  margin-top:.9rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint);
}

.card__face--back{
  transform:rotateY(180deg);
  justify-content:center;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(217,164,65,.1), transparent 62%),
    var(--surface-2);
  border-color:rgba(217,164,65,.38);
}
.card__body{
  font-size:.92rem;
  line-height:1.62;
  color:var(--text);
  text-wrap:pretty;
}
.card__act{
  margin-top:1.1rem;
  align-self:flex-start;
  padding-bottom:2px;
  border-bottom:1px solid rgba(217,164,65,.5);
  color:var(--gold);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.card__act:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

.card--more .card__face--front{
  background:
    radial-gradient(130% 100% at 50% 110%, rgba(252,98,1,.14), transparent 60%),
    var(--surface);
}
.card--more .card__title{ color:var(--gold-bright); }

/* ---------------------------------------------------------------- demo -- */
.section--demo{ background:var(--charcoal); }

.chat{
  position:relative;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}

.chat__bar{
  display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1.15rem;
  border-bottom:1px solid var(--line-soft);
  background:rgba(11,10,9,.42);
}
.chat__avatar{
  width:34px; height:34px; border-radius:50%;
  overflow:hidden; flex:none;
  border:1px solid rgba(217,164,65,.35);
}
.chat__avatar img{ width:100%; height:100%; object-fit:cover; }

.chat__who{ display:flex; flex-direction:column; line-height:1.25; }
.chat__who strong{
  font-size:.86rem; font-weight:500; letter-spacing:.08em; color:var(--white);
}
.chat__who em{
  font-style:normal; font-size:.68rem; letter-spacing:.1em; color:var(--gold);
}
.chat__who em::before{
  content:''; display:inline-block;
  width:5px; height:5px; margin-right:.42rem; vertical-align:middle;
  border-radius:50%; background:var(--gold);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.28;} }

.chat__count{
  margin-left:auto;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}

.chat__log{
  min-height:270px;
  max-height:420px;
  overflow-y:auto;
  padding:1.5rem 1.15rem;
  display:flex; flex-direction:column; gap:.9rem;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

.msg{ max-width:82%; }
.msg p{
  margin:0;
  padding:.78rem 1.05rem;
  border-radius:3px;
  font-size:.94rem;
  line-height:1.6;
  animation:rise .5s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }

.msg--her p{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  color:var(--text);
}
.msg--you{ align-self:flex-end; }
.msg--you p{
  background:rgba(217,164,65,.12);
  border:1px solid rgba(217,164,65,.24);
  color:var(--white);
}
.msg--sys p{
  background:none; border:1px dashed var(--line);
  color:var(--muted); font-size:.84rem;
}
.msg--sys{ max-width:100%; }

.msg--typing p{ display:flex; gap:4px; align-items:center; padding:1rem 1.05rem; }
.msg--typing i{
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  animation:blink 1.3s ease-in-out infinite;
}
.msg--typing i:nth-child(2){ animation-delay:.18s; }
.msg--typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,100%{opacity:.22; transform:translateY(0);} 50%{opacity:1; transform:translateY(-2px);} }

.chat__form{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem .85rem;
  border-top:1px solid var(--line-soft);
  background:rgba(11,10,9,.42);
}
.chat__form input{
  flex:1;
  padding:.7rem .85rem;
  background:none; border:0;
  color:var(--white); font-family:var(--sans); font-size:.94rem;
}
.chat__form input::placeholder{ color:var(--faint); }
.chat__form input:focus{ outline:none; }

.chat__send{
  display:grid; place-items:center;
  width:40px; height:40px; flex:none;
  border:1px solid rgba(217,164,65,.35); border-radius:2px;
  background:none; color:var(--gold); cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease);
}
.chat__send svg{ width:18px; height:18px; }
.chat__send:hover{ background:rgba(217,164,65,.12); border-color:var(--gold); transform:translateX(2px); }
.chat__send:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

.chat__gate{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:2rem;
  text-align:center;
  background:rgba(11,10,9,.9);
  backdrop-filter:blur(9px);
  animation:rise .6s var(--ease) both;
}
.chat__gate-line{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.4rem,1rem+1.5vw,2rem);
  color:var(--white);
}
.chat__gate-sub{ margin:0 0 1.2rem; max-width:34ch; color:var(--muted); font-size:.92rem; }

/* ---------------------------------------------------------------- tech -- */
.section--tech{ background:var(--ink); }

.tech{ display:flex; flex-direction:column; }
.tech__item{
  padding-block:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid var(--line-soft);
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  align-items:start;
}
.tech__item:last-child{ border-bottom:1px solid var(--line-soft); }
.tech__item h3{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,1rem+.7vw,1.65rem);
  letter-spacing:-.012em;
  color:var(--white);
}
.tech__item p{ margin:0; color:var(--muted); text-wrap:pretty; }

/* --------------------------------------------------------------- merch -- */
.section--merch{ background:var(--charcoal); }

.merch{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2rem);
}
.merch__item{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .55s var(--ease), transform .55s var(--ease);
}
.merch__item:hover{ border-color:rgba(217,164,65,.4); transform:translateY(-4px); }

.merch__art{
  display:grid; place-items:center;
  aspect-ratio:4/5;
  padding:1.6rem;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(217,164,65,.09), transparent 70%),
    var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.merch__art img{
  max-height:100%; width:auto; object-fit:contain;
  transition:transform .7s var(--slow);
}
.merch__item:hover .merch__art img{ transform:scale(1.035); }
.merch__art--glass svg{ height:76%; width:auto; }

.merch__art--drop{ position:relative; }
.merch__q{
  font-family:var(--serif);
  font-size:clamp(4rem,9vw,6.5rem);
  font-weight:300;
  color:var(--gold-deep);
  opacity:.5;
  animation:halo 6s ease-in-out infinite;
}

.merch__meta{ padding:1.35rem 1.4rem 1.6rem; }
.merch__meta h3{
  margin:0 0 .3rem;
  font-family:var(--serif); font-weight:400; font-size:1.25rem;
  color:var(--white);
}
.merch__meta p{ margin:0 0 1rem; color:var(--muted); font-size:.9rem; }
.merch__act{ display:block; min-height:1.4rem; }
.merch__act a{
  color:var(--gold); text-decoration:none;
  font-size:.82rem; letter-spacing:.06em;
  transition:color .3s var(--ease), letter-spacing .3s var(--ease);
}
.merch__act a:hover{ color:var(--gold-bright); letter-spacing:.09em; }

/* --------------------------------------------------------------- story -- */
.section--story{ background:var(--ink); }

.story{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.story__photo{ margin:0; }
.story__frame{
  aspect-ratio:4/5;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  overflow:hidden;
}
.story__frame img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  transition:transform 1.1s var(--slow);
}
.story__photo:hover .story__frame img{ transform:scale(1.03); }
.story__placeholder{
  color:var(--faint); font-size:.82rem; line-height:1.9; letter-spacing:.06em;
}
.story__placeholder em{ font-style:normal; color:var(--gold-deep); font-size:.74rem; }
.story__photo figcaption{
  margin-top:.9rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

.story__text p{
  margin:0 0 1.3rem;
  font-size:clamp(1rem,.95rem+.25vw,1.13rem);
  line-height:1.78;
  color:var(--text);
  text-wrap:pretty;
}
/* No photo yet — let the copy run wide rather than show an empty frame. */
.story--nophoto{ grid-template-columns:1fr; max-width:62ch; }

.story__more{ margin-top:2rem; }
.story__more a{
  display:inline-block;
  padding-bottom:3px;
  border-bottom:1px solid rgba(217,164,65,.45);
  color:var(--gold); text-decoration:none;
  font-size:.86rem; letter-spacing:.06em;
  transition:color .3s var(--ease), border-color .3s var(--ease), letter-spacing .3s var(--ease);
}
.story__more a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); letter-spacing:.09em; }

.story__text p:first-child{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1rem+1vw,1.6rem);
  font-weight:300;
  line-height:1.45;
  color:var(--white);
}
.story__sign{
  font-family:var(--serif) !important;
  font-style:italic;
  color:var(--gold) !important;
}

/* -------------------------------------------------------------- footer -- */
.foot{
  padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem;
  background:var(--charcoal);
  border-top:1px solid var(--line-soft);
}
.foot__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:2.2rem;
  border-bottom:1px solid var(--line-soft);
}
.foot__brand{ display:flex; flex-direction:column; gap:.55rem; }
.foot__tag{
  margin:0;
  font-size:.78rem; letter-spacing:.12em;
  color:var(--faint);
}
.foot__tag b{ color:var(--ember); font-weight:500; }

.foot__social{ display:flex; gap:.7rem; }
.foot__social a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%;
  color:var(--muted);
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.foot__social a:hover{ color:var(--gold); border-color:rgba(217,164,65,.5); transform:translateY(-2px); }
.foot__social svg{ width:16px; height:16px; }

.foot__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-block:1.8rem;
}
.foot__love{
  margin:0;
  font-family:var(--serif); font-style:italic; font-size:1rem;
  color:var(--muted);
}
.foot__legal{ display:flex; gap:1.6rem; }
.foot__legal a{
  color:var(--faint); text-decoration:none;
  font-size:.76rem; letter-spacing:.1em;
  transition:color .35s var(--ease);
}
.foot__legal a:hover{ color:var(--gold); }

.foot__copy{
  margin:0;
  font-size:.72rem; letter-spacing:.09em; color:var(--faint);
}

/* ------------------------------------------------------ the story page -- */
.longform{ padding-top:clamp(8rem,14vw,11rem); background:var(--ink); }

.longform__title{
  margin:0 0 .6rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,1.4rem+3vw,3.6rem);
  line-height:1.08; letter-spacing:-.022em;
  color:var(--white); text-wrap:balance;
}
.longform__sub{
  margin:0 0 clamp(2.5rem,6vw,4rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1rem+.7vw,1.5rem);
  color:var(--gold);
}

.longform__lead{
  margin:0 0 clamp(2.5rem,5vw,3.5rem);
  max-width:440px;
}
.longform__lead img{
  width:100%; height:auto;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.95);
}
.longform__lead figcaption{
  margin-top:.9rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint);
}

.longform h2{
  margin:clamp(2.6rem,5vw,3.6rem) 0 1.1rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.45rem,1.1rem+1.2vw,2rem);
  line-height:1.2; letter-spacing:-.014em;
  color:var(--white);
}
.longform h2::before{
  content:''; display:block;
  width:1.8rem; height:1px; margin-bottom:1.1rem;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.longform p{
  margin:0 0 1.35rem;
  font-size:clamp(1rem,.96rem+.28vw,1.15rem);
  line-height:1.8;
  color:var(--text);
  text-wrap:pretty;
}

/* the line that opens each section carries a touch more weight */
.longform h2 + p{ color:var(--white); }

.longform .story__sign{
  margin-top:2rem;
  font-family:var(--serif); font-style:italic;
  font-size:1.2rem; color:var(--gold);
}

.longform__end{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-soft);
}

/* ---------------------------------------------------- legal stub pages -- */
.legal{ padding-top:clamp(8rem,14vw,11rem); background:var(--ink); }
.legal p, .legal li{ color:var(--muted); }
.legal ul{ padding-left:1.1rem; }
.legal li{ margin-bottom:.6rem; }
.legal h2{
  margin:clamp(2.2rem,4vw,3rem) 0 .9rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1rem+.8vw,1.55rem);
  letter-spacing:-.012em;
  color:var(--white);
}
.legal__date{
  margin:-.6rem 0 2rem;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}
.legal__lede{
  margin:0 0 1rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--line-soft);
  font-size:clamp(1rem,.95rem+.3vw,1.12rem);
  color:var(--text) !important;
}
.legal strong{ color:var(--text); font-weight:500; }
.legal a{ color:var(--gold); }

.legal__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:1.2rem 1.4rem;
  border:1px solid var(--line);
  border-left:2px solid var(--gold-deep);
  border-radius:3px;
  background:var(--surface);
  font-size:.92rem;
}
.legal__note strong{ color:var(--gold); font-weight:500; }
.legal__back{ margin-top:2.6rem; }
.legal__back a{ color:var(--gold); text-decoration:none; font-size:.85rem; letter-spacing:.08em; }
.legal__back a:hover{ color:var(--gold-bright); }

/* --------------------------------------------------------------- modal -- */
.modal{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:1.25rem;
}
.modal__scrim{
  position:absolute; inset:0;
  background:rgba(7,6,5,.86);
  backdrop-filter:blur(7px);
  animation:fade .4s var(--ease) both;
}
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

.modal__box{
  position:relative;
  width:100%; max-width:440px;
  padding:clamp(1.8rem,4vw,2.6rem);
  border:1px solid rgba(217,164,65,.28);
  border-radius:4px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(217,164,65,.1), transparent 62%),
    var(--surface);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
  animation:pop .5s var(--slow) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none;} }

.modal__x{
  position:absolute; top:.6rem; right:.75rem;
  width:34px; height:34px;
  background:none; border:0; cursor:pointer;
  color:var(--faint); font-size:1.5rem; line-height:1;
  transition:color .3s var(--ease);
}
.modal__x:hover{ color:var(--gold); }

.modal__title{
  margin:0 0 .5rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,1.2rem+1.2vw,2rem);
  line-height:1.15; color:var(--white);
}
.modal__sub{ margin:0 0 1.6rem; color:var(--muted); font-size:.94rem; }

#wlForm{ display:flex; flex-direction:column; gap:.7rem; }
#wlEmail{
  padding:.9rem 1rem;
  border:1px solid var(--line); border-radius:2px;
  background:var(--ink);
  color:var(--white); font-family:var(--sans); font-size:.95rem;
  transition:border-color .35s var(--ease);
}
#wlEmail::placeholder{ color:var(--faint); }
#wlEmail:focus{ outline:none; border-color:rgba(217,164,65,.6); }

.modal__note{
  margin:.3rem 0 0; min-height:1.2rem;
  font-size:.8rem; color:var(--muted);
}
.modal__note.is-bad{ color:#E08A5A; }
.modal__note.is-good{ color:var(--gold); }

/* ------------------------------------------------------------- reveals -- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--slow) var(--d,0s), transform .9s var(--slow) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ------------------------------------------------------------ responsive */
@media (max-width:1040px){
  .hero__inner{ grid-template-columns:1fr; align-items:start; padding-top:7.5rem; }
  .hero__copy{ padding-bottom:1.5rem; order:2; }
  .hero__stage{ order:1; justify-self:center; max-width:420px; }
  .hero{ align-items:flex-start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .story{ grid-template-columns:1fr; }
  .story__photo{ max-width:340px; }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.is-open .nav__mobile{ display:block; }
  .nav__actions .btn--ghost{ display:none; }
  .triad{ grid-template-columns:1fr; gap:2.4rem; }
  .tech__item{ grid-template-columns:1fr; gap:.8rem; }
  .merch{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .card{ aspect-ratio:auto; min-height:190px; }
  .hero__stage{ max-width:320px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
  .msg{ max-width:92%; }
}

/* Touch: hover-flip doesn't exist, tap does. */
@media (hover:none){
  .card:hover .card__inner{ transform:none; }
  .card.is-flipped .card__inner{ transform:rotateY(180deg); }
}

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