/* ==========================================================================
   Kravatlı Cat — The Street Gentleman of Solana
   Palette is sampled from the original İzmir street footage.
   ========================================================================== */

:root{
  /* Street palette */
  --stone:      #A8A8A3;
  --charcoal:   #17191C;
  --tabby:      #D97B27;
  --tie:        #B52A32;
  --terra:      #A85C3B;
  --turq:       #159A91;
  --cream:      #F6E7C8;

  /* Solana */
  --sol-purple: #9945FF;
  --sol-green:  #14F195;

  /* Derived surfaces */
  --paper:      #F7F1E4;
  --paper-2:    #EFE6D4;
  --ink:        #17191C;
  --ink-2:      #3D4147;
  --ink-3:      #6A6F76;
  --line:       rgba(23,25,28,.14);
  --photo-edge: #FBF8F1;

  --shell: 1200px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 2px 6px rgba(23,25,28,.10);
  --shadow-md: 0 10px 26px -10px rgba(23,25,28,.30);
  --shadow-lg: 0 26px 60px -22px rgba(23,25,28,.45);

  --nav-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "Anton", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* Reusable paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ------------------------------ Reset ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden]{ display:none !important; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{
  outline:3px solid var(--sol-purple);
  outline-offset:3px;
  border-radius:4px;
}
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
svg{ fill:currentColor; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-160%);
  background:var(--charcoal); color:var(--cream);
  padding:12px 18px; border-radius:var(--r-sm); font-weight:700;
  transition:transform .18s var(--ease);
}
.skip-link:focus-visible{ transform:none; }

/* ------------------------------ Type ------------------------------ */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.005em;
  line-height:.92;
  text-transform:uppercase;
}
.mono{ font-family:var(--font-mono); font-variant-ligatures:none; }

.shell{ width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }
@media (min-width:900px){ .shell{ width:min(100% - 4rem, var(--shell)); } }

/* ------------------------------ Buttons ------------------------------ */
.btn{
  --btn-bg:var(--charcoal); --btn-fg:var(--cream); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.85em 1.5em;
  font-weight:800; letter-spacing:.045em; text-transform:uppercase;
  font-size:.9rem; line-height:1.1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid var(--btn-bd);
  border-radius:999px;
  box-shadow:0 4px 0 rgba(23,25,28,.30);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(23,25,28,.28); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(23,25,28,.3); }
.btn__ico{ width:1.05em; height:1.05em; flex:none; }
.btn--sm{ padding:.62em 1.15em; font-size:.78rem; }
.btn--lg{ padding:1em 1.9em; font-size:1rem; }
.btn--xl{ padding:1.15em 2.6em; font-size:clamp(1rem,1.4vw,1.2rem); }

.btn--buy{
  --btn-fg:#0B0D10;
  background:linear-gradient(100deg,var(--sol-green) 0%, #7BE3C8 42%, var(--sol-purple) 100%);
  background-size:200% 100%;
  box-shadow:0 4px 0 #6B22C4, 0 12px 28px -14px rgba(153,69,255,.9);
}
.btn--buy:hover{ background-position:100% 0; box-shadow:0 7px 0 #6B22C4, 0 16px 34px -14px rgba(153,69,255,.95); }
.btn--buy:active{ box-shadow:0 1px 0 #6B22C4; }

.btn--ghost{ --btn-fg:var(--cream); background:rgba(246,231,200,.06); --btn-bd:rgba(246,231,200,.45); box-shadow:none; }
.btn--ghost:hover{ background:rgba(246,231,200,.14); box-shadow:none; }
.btn--ghost:active{ transform:translateY(2px); }

.btn--outline{ --btn-fg:var(--cream); background:transparent; --btn-bd:var(--cream); box-shadow:0 4px 0 rgba(246,231,200,.25); }
.btn--outline:hover{ background:var(--cream); --btn-fg:var(--charcoal); }

.btn--x{ --btn-bg:#0F1419; --btn-fg:#fff; }

/* ------------------------------ Nav ------------------------------ */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(23,25,28,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(246,231,200,.12);
  color:var(--cream);
  transition:box-shadow .25s var(--ease);
}
.nav.is-stuck{ box-shadow:0 12px 30px -18px rgba(0,0,0,.9); }
.nav__inner{
  min-height:var(--nav-h);
  display:flex; align-items:center; gap:1.2rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand__logo{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; object-position:50% 42%;
  border:2px solid var(--tie);
  box-shadow:0 0 0 2px rgba(246,231,200,.18);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--font-display); font-size:1.22rem; letter-spacing:.01em; }
.brand__ticker{ font-size:.63rem; letter-spacing:.06em; color:var(--sol-green); }

.nav__links{ display:flex; align-items:center; gap:1.55rem; margin-left:auto; }
.nav__links > a{
  position:relative; font-size:.88rem; font-weight:600; letter-spacing:.02em;
  color:rgba(246,231,200,.85); padding:.35rem 0;
  transition:color .18s var(--ease);
}
.nav__links > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--sol-green),var(--sol-purple));
  transition:right .25s var(--ease);
}
.nav__links > a:hover,.nav__links > a.is-active{ color:#fff; }
.nav__links > a:hover::after,.nav__links > a.is-active::after{ right:0; }

.nav__social{ display:flex; gap:.35rem; }
.icon-btn{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:rgba(246,231,200,.8);
  border:1px solid rgba(246,231,200,.22);
  transition:background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ background:var(--cream); color:var(--charcoal); transform:translateY(-2px); }

.nav__actions{ display:flex; align-items:center; gap:.7rem; flex:none; }
.chain-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px;
  font-size:.66rem; font-weight:700; letter-spacing:.13em;
  color:var(--cream);
  background:rgba(153,69,255,.16);
  border:1px solid rgba(153,69,255,.5);
}
.chain-badge__mark{ width:13px; height:13px; filter:drop-shadow(0 0 6px rgba(20,241,149,.55)); }
.chain-badge__mark,.ident__mark,.sep svg,.chip--sol svg,.footer__chain svg,.cta__mark svg,.sticker--built svg{ fill:url(#sol-grad); }

.burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid rgba(246,231,200,.25); }
.burger span{ display:block; width:20px; height:2px; margin:4px auto; background:var(--cream); transition:transform .25s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{ position:fixed; inset:0; z-index:80; background:rgba(9,10,12,.55); backdrop-filter:blur(2px); }

@media (max-width:1080px){
  .nav__links{ gap:1.1rem; }
  .chain-badge{ display:none; }
}
@media (max-width:900px){
  .burger{ display:block; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--charcoal);
    border-bottom:2px solid var(--tie);
    padding:.5rem 1.25rem 1.5rem;
    margin:0; z-index:85;
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; }
  .nav__links > a{ padding:.95rem .25rem; border-bottom:1px solid rgba(246,231,200,.12); font-size:1.02rem; }
  .nav__links > a::after{ display:none; }
  .nav__social{ padding-top:1rem; }
  .icon-btn{ width:44px; height:44px; }
  .brand__text{ display:none; }
}
@media (max-width:420px){
  .brand__logo{ width:38px; height:38px; }
  .nav__inner{ gap:.6rem; }
}

/* ------------------------------ Hero ------------------------------ */
.hero{ position:relative; color:var(--cream); background:var(--charcoal); padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(217,123,39,.22), transparent 58%),
    radial-gradient(90% 80% at 92% 12%, rgba(21,154,145,.16), transparent 60%),
    radial-gradient(70% 60% at 60% 105%, rgba(153,69,255,.20), transparent 70%);
}
.hero__bg::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.09; mix-blend-mode:overlay; }
.hero__inner{ position:relative; }

.hero__banner{
  position:relative;
  border-radius:var(--r-lg);
  overflow:visible;
  margin-bottom:clamp(2rem,4vw,3.25rem);
  transform:rotate(-.35deg);
}
.hero__banner img{
  width:100%; aspect-ratio:2172/724; object-fit:cover; object-position:center;
  border-radius:var(--r-lg);
  border:6px solid var(--photo-edge);
  box-shadow:var(--shadow-lg);
}
/* Small screens keep the banner's true 3:1 ratio — cropping would slice the
   wordmark in half, and stretching is not an option. */
@media (max-width:640px){
  .hero__banner img{ border-width:4px; border-radius:12px; }
  .hero__banner{ margin-bottom:2rem; }
}

.tape{
  position:absolute; width:120px; height:34px;
  background:rgba(246,231,200,.72);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  z-index:2;
}
.tape::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.35; mix-blend-mode:multiply; }
.tape--tl{ top:-14px; left:26px; transform:rotate(-6deg); clip-path:polygon(3% 12%,98% 0,100% 88%,0 100%); }
.tape--br{ bottom:-14px; right:34px; transform:rotate(4deg); clip-path:polygon(0 4%,97% 14%,100% 92%,2% 100%); }
@media (max-width:640px){ .tape{ width:82px; height:26px; } }

.sticker{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem; border-radius:6px;
  font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.1em;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7);
}
.sticker svg{ width:14px; height:14px; }
.sticker--built{
  right:-10px; top:-18px;
  background:var(--charcoal); color:var(--cream);
  border:1px solid rgba(20,241,149,.55);
  transform:rotate(4deg);
}
.sticker--tie{
  left:-12px; bottom:-16px;
  background:var(--tie); color:#fff;
  transform:rotate(-5deg);
}
@media (max-width:760px){ .sticker--built{ right:2px; top:-14px; } .sticker--tie{ left:4px; bottom:-14px; } }

.hero__content{ max-width:960px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.22em;
  color:var(--sol-green); text-transform:uppercase; margin-bottom:1rem;
}
.eyebrow__dot{ width:8px; height:8px; border-radius:50%; background:var(--tie); box-shadow:0 0 0 4px rgba(181,42,50,.25); }

.hero__title{ font-size:clamp(2.8rem,8.4vw,6.6rem); margin-bottom:1.1rem; }
.accent-bars{ display:flex; gap:6px; margin-bottom:1.4rem; }
.accent-bars i{ display:block; width:56px; height:6px; border-radius:3px; }
.accent-bars i:nth-child(1){ background:var(--sol-purple); }
.accent-bars i:nth-child(2){ background:var(--sol-green); width:30px; }
.accent-bars i:nth-child(3){ background:var(--tie); width:16px; }

.hero__lede{ font-size:clamp(1.02rem,1.5vw,1.25rem); color:rgba(246,231,200,.86); max-width:62ch; margin-bottom:1.8rem; }

.hero__idents{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
.ident{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.6rem 1rem; border-radius:var(--r-sm);
  background:rgba(246,231,200,.07); border:1px solid rgba(246,231,200,.16);
}
.ident__k{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.14em; color:rgba(246,231,200,.55); text-transform:uppercase; }
.ident__v{ font-weight:700; font-size:.95rem; }
.ident--sol{ border-color:rgba(153,69,255,.45); background:rgba(153,69,255,.12); align-items:center; }
.ident__mark{ width:15px; height:15px; flex:none; }

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

.ca{
  display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .7rem .55rem 1rem; border-radius:999px;
  background:rgba(0,0,0,.35); border:1px dashed rgba(246,231,200,.3);
  max-width:100%; margin-bottom:1.6rem;
}
.ca__label{ font-size:.6rem; letter-spacing:.16em; color:rgba(246,231,200,.55); }
.ca__value{ font-size:.78rem; word-break:break-all; color:var(--cream); }
.ca[data-state="unset"] .ca__value{ color:rgba(246,231,200,.55); font-style:italic; }
.ca[data-state="set"]{ border-style:solid; border-color:rgba(20,241,149,.4); }
.ca__copy{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .8rem; border-radius:999px;
  background:var(--sol-green); color:#07110C;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .14s var(--ease), background-color .18s var(--ease);
}
.ca__copy svg{ width:12px; height:12px; }
.ca__copy:hover{ transform:translateY(-1px); }
.ca__copy:active{ transform:translateY(1px); }
.ca__copy.is-done{ background:var(--cream); }

.stamp{
  display:inline-block;
  font-family:var(--font-display); font-size:clamp(.95rem,1.9vw,1.35rem);
  letter-spacing:.02em; text-transform:uppercase;
  padding:.45rem 1rem;
  color:var(--tabby);
  border:2px solid rgba(217,123,39,.6);
  border-radius:4px;
  transform:rotate(-1.4deg);
  background:rgba(217,123,39,.07);
}
.hero__meme{ margin-top:.3rem; }

/* ------------------------------ Ticker ------------------------------ */
.ticker{
  background:var(--charcoal);
  border-block:2px solid rgba(246,231,200,.14);
  color:var(--cream);
  overflow:hidden; padding:.85rem 0;
  position:relative;
}
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0;  background:linear-gradient(90deg,var(--charcoal),transparent); }
.ticker::after{  right:0; background:linear-gradient(270deg,var(--charcoal),transparent); }
.ticker__track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.ticker__group{
  display:flex; align-items:center; gap:1.5rem; padding-right:1.5rem;
  font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.6rem);
  letter-spacing:.04em; white-space:nowrap; text-transform:uppercase;
}
.ticker__group b{ color:var(--sol-green); font-size:.8em; }
/* keep the ticker's dotless ı intact — uppercasing would turn "$KravatlıCat" into "$KRAVATLICAT" */
.ticker__group .mono{ text-transform:none; font-size:.82em; }
.ticker__group span:nth-child(4n+3){ color:var(--tabby); }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ------------------------------ Sections ------------------------------ */
.section{ padding:clamp(3.5rem,8vw,7rem) 0; position:relative; }
.section--paper{ background:var(--paper); }
.section--paper::before{
  content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.045; pointer-events:none;
}
.section--dark{ background:var(--charcoal); color:var(--cream); }
.section--stone{
  background:linear-gradient(180deg,#B4B4AF 0%, var(--stone) 45%, #9C9C97 100%);
  color:var(--charcoal);
}
.section--stone::before{
  content:""; position:absolute; inset:0; opacity:.18; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(23,25,28,.25) 1px, transparent 1px);
  background-size:118px 62px;
}

.section__head{ max-width:62ch; margin-bottom:clamp(2.2rem,4.5vw,3.6rem); position:relative; }
.section__head--center{ margin-inline:auto; text-align:center; }
.kicker{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.24em;
  color:var(--tie); margin-bottom:.85rem; text-transform:uppercase;
}
.section--dark .kicker{ color:var(--sol-green); }
.section--stone .kicker{ color:#5C1F24; }
.section__title{ font-size:clamp(2.1rem,5.6vw,4rem); margin-bottom:1rem; }
.section__lede{ font-size:clamp(1rem,1.3vw,1.14rem); color:var(--ink-2); }
.section--dark .section__lede{ color:rgba(246,231,200,.82); }
.section--stone .section__lede{ color:#2B2E32; }

.sep{ display:flex; align-items:center; gap:.8rem; margin-top:1.6rem; }
.section__head--center .sep{ justify-content:center; }
.sep i{ height:3px; width:64px; border-radius:2px; background:linear-gradient(90deg,var(--sol-purple),var(--sol-green)); }
.sep i:last-child{ background:linear-gradient(90deg,var(--sol-green),var(--sol-purple)); }
.sep svg{ width:20px; height:20px; }

/* ------------------------------ Timeline ------------------------------ */
.timeline{ position:relative; display:grid; gap:clamp(1.6rem,3vw,2.6rem); }
@media (min-width:900px){
  .timeline{ padding-left:64px; }
  .timeline::before{
    content:""; position:absolute; left:23px; top:14px; bottom:14px; width:3px; border-radius:2px;
    background:linear-gradient(180deg,var(--tabby),var(--tie) 45%,var(--sol-purple));
    opacity:.6;
  }
}
.chapter{ position:relative; }
.chapter__node{ display:none; }
@media (min-width:900px){
  .chapter__node{
    display:block; position:absolute; left:-52px; top:34px;
    width:19px; height:19px; border-radius:50%;
    background:var(--paper); border:4px solid var(--tie);
    box-shadow:0 0 0 5px rgba(181,42,50,.14);
  }
}
.chapter__card{
  display:grid; gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chapter__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
@media (min-width:700px){
  .chapter__card{ grid-template-columns:minmax(0,300px) minmax(0,1fr); }
}
.chapter__media{ overflow:hidden; background:var(--stone); }
.chapter__media img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s var(--ease); }
.chapter__card:hover .chapter__media img{ transform:scale(1.035); }
@media (max-width:699px){ .chapter__media img{ aspect-ratio:16/10; } }

.chapter__body{ padding:clamp(1.3rem,2.6vw,2rem); position:relative; }
.chapter__num{
  position:absolute; right:1.1rem; top:.6rem;
  font-size:clamp(2.6rem,6vw,4rem); color:rgba(23,25,28,.07); line-height:1;
}
.chapter__title{ font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.9rem); letter-spacing:.01em; margin-bottom:.7rem; text-transform:uppercase; }
.chapter__body p{ color:var(--ink-2); max-width:58ch; }
.chapter__caption{
  margin-top:1.1rem !important;
  display:inline-block;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  color:#5C1F24 !important;
  background:rgba(181,42,50,.09);
  border-left:4px solid var(--tie);
  padding:.6rem .9rem;
  border-radius:0 6px 6px 0;
  transform:rotate(-.3deg);
}

/* ------------------------------ Video / embed ------------------------------ */
.walk{ position:relative; max-width:640px; margin-inline:auto; }
.walk__frame{
  position:relative; z-index:2;
  background:rgba(246,231,200,.05);
  border:1px solid rgba(246,231,200,.18);
  border-radius:var(--r-lg);
  padding:clamp(.9rem,2vw,1.4rem);
  box-shadow:var(--shadow-lg);
  min-height:220px;
}
.embed{ display:flex; justify-content:center; }
.embed :is(blockquote,iframe,twitter-widget){ max-width:100% !important; margin:0 auto !important; }
.embed--frame{ width:100%; }
.embed--frame iframe{ display:block; width:100%; max-width:550px; border:0; color-scheme:normal; }
.embed .twitter-tweet{
  color:rgba(246,231,200,.8); font-size:.9rem; text-align:center;
}
.embed .twitter-tweet a{ color:var(--sol-green); text-decoration:underline; }

.embed-loading{ display:grid; justify-items:center; gap:.9rem; padding:2.6rem 1rem; }
.embed-loading p{ font-size:.72rem; letter-spacing:.12em; color:rgba(246,231,200,.5); text-transform:uppercase; }
.embed-loading__spin{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(246,231,200,.2);
  border-top-color:var(--sol-green);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.embed-fallback{ text-align:center; padding:clamp(1.4rem,3vw,2.4rem) 1rem; }
.embed-fallback__ico{ width:34px; height:34px; margin:0 auto 1rem; color:var(--cream); }
.embed-fallback h3{ font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; margin-bottom:.6rem; }
.embed-fallback p{ color:rgba(246,231,200,.72); font-size:.95rem; max-width:44ch; margin:0 auto 1.4rem; }

.walk__note{ text-align:center; font-size:.7rem; letter-spacing:.1em; color:rgba(246,231,200,.45); margin-top:1.2rem; text-transform:uppercase; }

.quote-sticker{
  position:absolute; z-index:3;
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.08em;
  padding:.55rem .85rem; border-radius:4px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.9);
  white-space:nowrap;
}
.quote-sticker--a{ background:var(--cream); color:var(--charcoal); top:-22px; left:-58px; transform:rotate(-6deg); }
.quote-sticker--b{ background:var(--turq); color:#02201E; top:38%; right:-70px; transform:rotate(5deg); }
.quote-sticker--c{ background:var(--tabby); color:#241205; bottom:34px; left:-72px; transform:rotate(3deg); }
@media (max-width:1000px){
  .quote-sticker{ position:static; display:inline-block; transform:rotate(-1deg); margin:0 .35rem .6rem 0; }
  .walk{ text-align:center; }
  .walk__frame{ text-align:left; }
}

/* ------------------------------ Polaroid board ------------------------------ */
.board{
  display:flex; gap:1rem;
  overflow-x:auto; overflow-y:hidden;
  padding:1.5rem .25rem 2.5rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.board__hint{ text-align:center; font-size:.7rem; letter-spacing:.16em; color:rgba(23,25,28,.55); text-transform:uppercase; }

.polaroid{
  position:relative; flex:0 0 78%; max-width:300px;
  scroll-snap-align:center;
  background:var(--photo-edge);
  padding:12px 12px 0;
  border-radius:3px;
  box-shadow:0 14px 30px -14px rgba(23,25,28,.7), 0 2px 4px rgba(23,25,28,.2);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  cursor:pointer;
  border:0; text-align:left;
  display:block;
}
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--stone); }
.polaroid__cap{
  display:block; padding:.85rem .2rem 1.05rem;
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  color:#33373C; line-height:1.4;
}
.polaroid__badge{
  position:absolute; z-index:4; top:-12px; right:-10px;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem .6rem; border-radius:999px;
  font-family:var(--font-mono); font-size:.55rem; font-weight:700; letter-spacing:.08em;
  background:var(--charcoal); color:var(--cream);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7);
  transform:rotate(6deg);
}
.polaroid__badge svg{ width:11px; height:11px; }
.polaroid__badge--sol{ background:#0B0D10; border:1px solid rgba(20,241,149,.6); }
.polaroid__badge--sol svg{ fill:url(#sol-grad); }
.polaroid__badge--tie{ background:var(--tie); }
.polaroid__badge--turq{ background:var(--turq); color:#02201E; }
.polaroid__tape{
  position:absolute; top:-12px; left:50%; width:96px; height:26px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(246,231,200,.8); box-shadow:0 2px 6px rgba(0,0,0,.25);
  clip-path:polygon(2% 10%,99% 0,100% 90%,0 100%);
  z-index:3;
}
.polaroid:hover,.polaroid:focus-visible{
  transform:rotate(0deg) translateY(-12px) scale(1.02) !important;
  box-shadow:0 30px 50px -18px rgba(23,25,28,.8);
  z-index:10;
}

@media (min-width:900px){
  .board{
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:0; overflow:visible; padding:3rem .75rem 3.5rem;
    align-items:start;
  }
  /* Overlap maths: each card is (column + 40px) wide and every card after the
     first pulls 50px left, so the row still ends inside its container — the
     board overlaps without ever producing horizontal overflow. */
  .polaroid{ flex:none; max-width:none; width:calc(100% + 40px); }
  .polaroid:nth-child(n+2){ margin-left:-50px; }
  .polaroid:nth-child(1){ transform:rotate(-5.5deg) translateY(6px);   z-index:1; }
  .polaroid:nth-child(2){ transform:rotate(3.4deg)  translateY(-14px); z-index:2; }
  .polaroid:nth-child(3){ transform:rotate(-2.2deg) translateY(18px);  z-index:3; }
  .polaroid:nth-child(4){ transform:rotate(5.8deg)  translateY(-8px);  z-index:4; }
  .polaroid:nth-child(5){ transform:rotate(-3.6deg) translateY(12px);  z-index:5; }
  .board__hint{ display:none; }
}

/* ------------------------------ Masonry gallery ------------------------------ */
/* Grid rather than CSS columns: columns fill top-to-bottom, which would scramble
   the narrative order of the five story frames. Rows are top-aligned so images
   of differing heights keep their natural aspect ratio without being stretched. */
.masonry{ display:grid; grid-template-columns:1fr; gap:1.1rem; align-items:start; }
@media (min-width:640px){ .masonry{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .masonry{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }

.tile{
  margin:0;
  position:relative; display:block; width:100%;
  border:0; padding:0; text-align:left;
  border-radius:var(--r-md); overflow:hidden;
  background:#fff;
  box-shadow:0 3px 10px -4px rgba(23,25,28,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer;
}
.tile img{ width:100%; display:block; transition:transform .6s var(--ease); background:var(--paper-2); }
.tile:hover,.tile:focus-visible{ transform:translateY(-5px); box-shadow:0 18px 34px -16px rgba(23,25,28,.55); }
.tile:hover img{ transform:scale(1.04); }

.tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .95rem .85rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.05em;
  color:var(--cream);
  background:linear-gradient(0deg, rgba(11,13,16,.92) 30%, transparent);
  transform:translateY(10px); opacity:.92;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{ transform:translateY(0); opacity:1; }
.tile__flag{
  position:absolute; top:.7rem; left:.7rem;
  font-family:var(--font-mono); font-size:.55rem; font-weight:700; letter-spacing:.1em;
  padding:.28rem .55rem; border-radius:999px;
  background:rgba(11,13,16,.78); color:var(--cream);
  text-transform:uppercase;
}

/* ------------------------------ Meme quote ------------------------------ */
.section--quote{ background:var(--charcoal); color:var(--cream); overflow:hidden; }
.quote__inner{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
@media (min-width:900px){ .quote__inner{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }

.quote__media{ position:relative; }
.quote__media img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-md);
  border:8px solid var(--photo-edge);
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.6deg);
}
.quote__tag{
  position:absolute; bottom:-12px; left:14px;
  background:var(--tie); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  padding:.4rem .8rem; border-radius:4px; transform:rotate(-2deg);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.8);
}

.quote__title{
  font-size:clamp(2rem,5.4vw,4.2rem);
  margin-bottom:1.8rem;
  text-transform:none;
  /* roomy enough that the gradient underline never collides with the next line */
  line-height:1.22;
}
.quote__title em{
  font-style:normal; white-space:nowrap;
  background-image:linear-gradient(90deg,var(--sol-green),var(--sol-purple));
  background-repeat:no-repeat;
  background-size:100% .07em;
  background-position:0 calc(100% - .04em);
}
.quote__lines{ display:grid; gap:.75rem; }
.quote__lines li{
  font-size:clamp(1rem,1.5vw,1.2rem); font-weight:600;
  color:rgba(246,231,200,.85);
  padding-left:1.1rem; border-left:3px solid var(--tabby);
}
.quote__lines li:nth-child(2){ border-color:var(--turq); }
.quote__lines li:nth-child(3){ border-color:var(--sol-purple); }

/* ------------------------------ Chips ------------------------------ */
.chips{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.chip{
  --c-bg:var(--charcoal); --c-fg:var(--cream); --c-bd:transparent;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.35rem; border-radius:999px;
  background:var(--c-bg); color:var(--c-fg);
  border:2px solid var(--c-bd);
  font-family:var(--font-display); font-size:clamp(.85rem,1.5vw,1.05rem);
  letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 4px 0 rgba(23,25,28,.22);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  cursor:default;
}
.chip svg{ width:18px; height:18px; flex:none; }
.chip:hover{ transform:translateY(-4px) rotate(-1.6deg); box-shadow:0 9px 0 rgba(23,25,28,.18); }
.chip:nth-child(even):hover{ transform:translateY(-4px) rotate(1.6deg); }

.chip--orange{ --c-bg:var(--tabby); --c-fg:#241205; }
.chip--red{    --c-bg:var(--tie); --c-fg:#fff; }
.chip--turq{   --c-bg:var(--turq); --c-fg:#02201E; }
.chip--cream{  --c-bg:var(--cream); --c-fg:var(--charcoal); --c-bd:rgba(23,25,28,.18); }
.chip--terra{  --c-bg:var(--terra); --c-fg:#fff; }
.chip--black{  --c-bg:var(--charcoal); --c-fg:var(--cream); }
.chip--green{  --c-bg:var(--sol-green); --c-fg:#04150E; }
.chip--sol{
  --c-bg:#0B0D10; --c-fg:#fff; --c-bd:transparent;
  background:
    linear-gradient(#0B0D10,#0B0D10) padding-box,
    linear-gradient(100deg,var(--sol-green),var(--sol-purple)) border-box;
  border:2px solid transparent;
}
.chip--sol svg{ filter:drop-shadow(0 0 6px rgba(20,241,149,.6)); }

.chips__note{
  text-align:center; max-width:56ch; margin:1.8rem auto 0;
  font-size:.85rem; color:var(--ink-3);
}

.social-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.8rem; }
.social-card{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.6rem; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  min-width:min(100%,272px);
}
.social-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--charcoal); }
.social-card > svg{ width:26px; height:26px; flex:none; color:#0F1419; }
.social-card--tg > svg{ color:#229ED9; }
.social-card__t{ font-weight:800; display:block; }
.social-card__h{ font-size:.72rem; color:var(--ink-3); display:block; }
.social-card > span{ display:block; }
.social-card > span + span{ margin-top:-2px; }

/* ------------------------------ Steps ------------------------------ */
.steps{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1.3rem; } }

.step{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(23,25,28,.16);
  border-radius:var(--r-md);
  padding:2.1rem 1.4rem 1.5rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.step__n{
  position:absolute; top:-16px; left:1.3rem;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.35rem; line-height:1;
  background:var(--charcoal); color:var(--cream);
  border:3px solid var(--paper);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.8);
}
.step:nth-child(4) .step__n{ background:linear-gradient(120deg,var(--sol-green),var(--sol-purple)); color:#08120C; }
.step__ico{ width:26px; height:26px; color:var(--tie); margin:.4rem 0 .9rem; }
.step:nth-child(2) .step__ico{ color:var(--tabby); }
.step:nth-child(3) .step__ico{ color:var(--turq); }
.step:nth-child(4) .step__ico{ color:var(--sol-purple); }
.step h3{ font-family:var(--font-display); font-size:1.16rem; text-transform:uppercase; letter-spacing:.015em; margin-bottom:.5rem; }
.step p{ font-size:.93rem; color:var(--ink-2); }

.buy-final{ text-align:center; margin-top:clamp(2.4rem,5vw,3.6rem); }
.notice{
  max-width:70ch; margin:1.4rem auto 0;
  font-size:.85rem; line-height:1.6; color:#2B2E32;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(23,25,28,.18);
  border-left:4px solid var(--tie);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.9rem 1.1rem; text-align:left;
}

/* ------------------------------ Final CTA ------------------------------ */
.cta{ position:relative; padding:clamp(4rem,9vw,7.5rem) 0; background:var(--charcoal); color:var(--cream); overflow:hidden; text-align:center; }
.cta__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 20% 20%, rgba(153,69,255,.28), transparent 60%),
    radial-gradient(70% 70% at 82% 78%, rgba(20,241,149,.18), transparent 62%),
    radial-gradient(60% 50% at 50% 100%, rgba(217,123,39,.20), transparent 70%);
}
.cta__bg::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.08; }
.cta__inner{ position:relative; }
.cta__mark{ display:block; width:42px; margin:0 auto 1.4rem; }
.cta__mark svg{ width:42px; height:42px; filter:drop-shadow(0 0 16px rgba(20,241,149,.5)); }
.cta__title{ font-size:clamp(2.2rem,6.4vw,5rem); max-width:18ch; margin:0 auto 1.2rem; }
.cta__body{ max-width:56ch; margin:0 auto 2.2rem; font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(246,231,200,.84); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* ------------------------------ Footer ------------------------------ */
.footer{ background:#101215; color:rgba(246,231,200,.78); padding:clamp(2.8rem,5vw,4rem) 0 2rem; border-top:2px solid rgba(246,231,200,.1); }
.footer__inner{ display:grid; gap:2.4rem; }
@media (min-width:800px){ .footer__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.footer__brand{ display:flex; gap:1rem; align-items:flex-start; }
.footer__brand img{ width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:50% 42%; border:2px solid var(--tie); }
.footer__name{ font-size:1.6rem; color:var(--cream); }
.footer__ticker{ font-size:.76rem; color:var(--sol-green); letter-spacing:.05em; }
.footer__chain{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.5rem; font-size:.8rem; }
.footer__chain svg{ width:14px; height:14px; }

.footer__nav{ display:grid; grid-template-columns:repeat(2,minmax(140px,1fr)); gap:2rem; }
.footer__col h3{ font-size:.66rem; letter-spacing:.2em; color:rgba(246,231,200,.45); margin-bottom:.85rem; font-weight:700; }
.footer__col a{ display:block; padding:.3rem 0; font-size:.92rem; transition:color .16s var(--ease), transform .16s var(--ease); }
.footer__col a:hover{ color:var(--sol-green); transform:translateX(3px); }

.footer__legal{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(246,231,200,.12); }
.footer__legal p{ font-size:.78rem; line-height:1.6; color:rgba(246,231,200,.5); max-width:92ch; }
.footer__signoff{ margin-top:1.4rem !important; color:var(--tabby); border-color:rgba(217,123,39,.5); }

/* ------------------------------ Lightbox ------------------------------ */
.lightbox{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; }
.lightbox[hidden]{ display:none; }
.lightbox__scrim{ position:absolute; inset:0; background:rgba(8,9,11,.94); backdrop-filter:blur(4px); animation:fade .2s var(--ease); }
.lightbox__ui{ position:relative; width:min(100% - 2rem,1100px); max-height:100dvh; display:grid; place-items:center; padding:3.4rem 0; }
.lightbox__fig{ display:grid; gap:1rem; justify-items:center; animation:pop .24s var(--ease); }
.lightbox__fig img{
  max-width:100%; max-height:calc(100dvh - 12rem);
  width:auto; object-fit:contain;
  border-radius:var(--r-sm);
  border:6px solid var(--photo-edge);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.lightbox__cap{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.82rem; color:var(--cream); text-align:center;
}
.lightbox__count{ color:rgba(246,231,200,.5); font-size:.72rem; }
.lightbox__btn{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  background:rgba(246,231,200,.1); color:var(--cream);
  border:1px solid rgba(246,231,200,.3);
  transition:background-color .18s var(--ease), transform .18s var(--ease);
}
.lightbox__btn svg{ width:17px; height:17px; }
.lightbox__btn:hover{ background:var(--cream); color:var(--charcoal); }
.lightbox__btn--close{ top:.6rem; right:.2rem; }
.lightbox__btn--prev{ left:.2rem; top:50%; transform:translateY(-50%) rotate(180deg); }
.lightbox__btn--next{ right:.2rem; top:50%; transform:translateY(-50%); }
.lightbox__btn--prev:hover{ transform:translateY(-50%) rotate(180deg) scale(1.06); }
.lightbox__btn--next:hover{ transform:translateY(-50%) scale(1.06); }
@media (max-width:700px){
  .lightbox__btn--prev{ left:50%; top:auto; bottom:.6rem; transform:translateX(-90%) rotate(180deg); }
  .lightbox__btn--next{ right:50%; top:auto; bottom:.6rem; transform:translateX(90%); }
  .lightbox__btn--prev:hover{ transform:translateX(-90%) rotate(180deg); }
  .lightbox__btn--next:hover{ transform:translateX(90%); }
  .lightbox__ui{ padding:3.4rem 0 5rem; }
  .lightbox__fig img{ max-height:calc(100dvh - 15rem); }
}
body.is-locked{ overflow:hidden; }

@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }

/* ------------------------------ Toast ------------------------------ */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:180;
  transform:translate(-50%,140%);
  background:var(--charcoal); color:var(--cream);
  border:1px solid rgba(20,241,149,.5);
  padding:.7rem 1.2rem; border-radius:999px;
  font-family:var(--font-mono); font-size:.78rem;
  box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease); pointer-events:none;
}
.toast.is-on{ transform:translate(-50%,0); }

/* ------------------------------ Motion ------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.05s; }
.reveal:nth-child(3){ transition-delay:.1s; }
.reveal:nth-child(4){ transition-delay:.15s; }

.float{ animation:float 6s ease-in-out infinite; }
.float--slow{ animation-duration:8.5s; animation-delay:-2s; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-7px) rotate(var(--rot,0deg)); }
}
.sticker--built{ --rot:4deg; }
.sticker--tie{ --rot:-5deg; }
.quote-sticker--a{ --rot:-6deg; }
.quote-sticker--b{ --rot:5deg; }
.quote-sticker--c{ --rot:3deg; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ticker__track{ animation:none; transform:none; }
  .ticker{ overflow-x:auto; }
  .float{ animation:none; }
}

/* ------------------------------ Print ------------------------------ */
@media print{
  .nav,.ticker,.lightbox,.toast,.cta__bg,.skip-link{ display:none !important; }
  body{ background:#fff; color:#000; }
}