/* =============================================================
   TONY VAPES — grungy / neon  ·  design tokens
   ============================================================= */
@font-face{
  font-family:'Anton';src:url('../fonts/anton.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Special Elite';src:url('../fonts/special-elite.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --pink:#f52777;        /* primary neon */
  --pink-2:#e23878;
  --blue:#3b82ff;  --mint:#35ffb8;  --purple:#a852ea;  --gold:#d39e55;
  --cream:#ffeeb8; --orange:#ff922e; --cyan:#3ac9ff;
  --rainbow:linear-gradient(100deg,#ff5a5a,#ff9a3d,#ffe24d,#46ff9e,#36c5ff,#a86bff,#ff5bb0); /* "Buntes Zeug" */
  --ink:#0a0a0a;         /* near-black bg */
  --ink-2:#141415;
  --panel:#191919;
  --line:#2a2a2c;
  --white:#f4f4f5;
  --grey:#adadb2;        /* ≥4.5:1 on near-black */

  --accent:#f52777;      /* dynamic — flavor theme */
  --accent-soft:rgba(245,39,119,.16);

  --display:'thunderhouse-pro','Anton',Impact,'Haettenschweiler',sans-serif;
  --type:'p22-typewriter','Special Elite','Courier New',ui-monospace,monospace;

  --pad:clamp(20px,5vw,90px);
  --maxw:1680px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* =============================================================
   RESET
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--type);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh;height:100dvh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
[hidden]{display:none!important} /* author img{display:block} otherwise overrides the [hidden] attr */
/* keyboard focus — visible on the dark theme */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}
.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}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em}
.pink{color:var(--pink)}
::selection{background:var(--pink);color:#fff}

/* static neon backdrop — fallback behind the live fluid (shown on reduced-motion / no-WebGL) */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(55% 45% at 22% 28%, rgba(53,255,184,.10), transparent 60%),
    radial-gradient(55% 45% at 78% 68%, rgba(245,39,119,.16), transparent 62%),
    radial-gradient(120% 85% at 50% -10%, #18181d 0%, #0c0c0e 55%, #000 100%);
}
/* the live neon fluid simulation — opaque, sits behind all content */
.fx-fluid{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:block}
.no-fluid .fx-fluid{display:none}
/* header depth — a dark-grey radial glow ABOVE the opaque fluid (so it's visible) but behind
   content; anchored top-centre behind the logo, fading into the black base for a sense of depth */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 78% at 50% 4%, rgba(64,64,74,.66) 0%, rgba(34,34,40,.34) 32%, rgba(8,8,10,0) 62%);
}

/* =============================================================
   FX LAYERS — grain / vignette / scanlines
   ============================================================= */
.fx-grain{
  position:fixed;inset:-150%;z-index:9000;pointer-events:none;opacity:.06;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;will-change:transform;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}
  30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,10%)}50%{transform:translate(-10%,5%)}
  60%{transform:translate(10%,0)}70%{transform:translate(0,8%)}80%{transform:translate(-8%,-5%)}
  90%{transform:translate(8%,5%)}100%{transform:translate(0,0)}
}
.fx-vignette{
  position:fixed;inset:0;z-index:8990;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}
.fx-scanlines{
  position:fixed;inset:0;z-index:8995;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply;
}

/* =============================================================
   CUSTOM CURSOR
   ============================================================= */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__ring{
  position:absolute;width:42px;height:42px;border:1.5px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s;
}
.cursor__dot{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__label{
  position:absolute;transform:translate(-50%,-50%);font-family:var(--type);font-size:11px;letter-spacing:.1em;
  color:#000;text-transform:uppercase;opacity:0;white-space:nowrap;
}
.cursor.is-hover .cursor__ring{width:74px;height:74px;background:#fff}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.is-hover .cursor__label{opacity:1}
@media (hover:none){.cursor{display:none}}

/* =============================================================
   SCROLL PROGRESS
   ============================================================= */
.progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9300;background:rgba(255,255,255,.06)}
.progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--accent));box-shadow:0 0 14px var(--accent);transition:background .6s}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--type);font-size:.95rem;letter-spacing:.04em;
  padding:.85em 1.5em;text-transform:lowercase;
  border:1.5px solid var(--pink);color:var(--white);overflow:hidden;
  transition:color .35s var(--ease),border-color .35s;
  will-change:transform;
}
.btn::after{content:"";position:absolute;inset:0;background:var(--pink);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover{color:#0a0a0a}
.btn:hover::after{transform:translateY(0)}
.btn--solid{background:var(--pink);color:#0a0a0a;border-color:var(--pink)}
.btn--solid::after{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.35)}
.btn--ghost::after{background:#fff}
.btn--line{border-color:rgba(255,255,255,.3);color:var(--white)}
.btn--line::after{background:var(--pink)}
.btn--dark{border-color:#0a0a0a;color:#0a0a0a}
.btn--dark::after{background:#0a0a0a}
.btn--dark:hover{color:var(--pink)}

/* =============================================================
   AGE GATE / PRELOADER
   ============================================================= */
.entry{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;background:#060606;overflow:hidden;text-align:center}
.entry__texture{position:absolute;inset:0;background:url('../assets/texture2.png') center/cover;opacity:.18;mix-blend-mode:screen;filter:contrast(1.3)}
.entry::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 40%,rgba(245,39,119,.18),transparent 70%)}
.entry__inner{position:relative;z-index:2;padding:30px;max-width:620px}
.entry__logo{width:200px;margin:0 auto 30px;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6))}
.entry__kicker{font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;color:var(--pink);margin-bottom:14px}
/* age-gate headline — brand display face (thunderhouse-pro) at weight 400 to match the hero.
   NB: this is an <h1>, so without font-weight it defaults to bold (700), which maps to a much
   grittier/spikier thunderhouse-pro cut — pin 400 so it renders the same clean-grunge as .display */
.entry__title{font-family:var(--display);font-weight:400;font-size:clamp(54px,11vw,112px);text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin-bottom:18px}
.entry__copy{color:var(--grey);max-width:420px;margin:0 auto 30px}
.entry__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.entry__count{font-family:var(--display);font-size:clamp(50px,11vw,110px);color:#fff;line-height:1}
.entry__count i{color:var(--pink);font-style:normal;margin:0 .1em}
.entry__track{width:min(420px,80vw);height:4px;background:rgba(255,255,255,.12);margin:22px auto 14px;overflow:hidden}
.entry__fill{display:block;height:100%;width:0;background:var(--pink);box-shadow:0 0 16px var(--pink)}
.entry__loadword{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.entry__deny p{font-size:clamp(20px,4vw,30px)}
.entry.is-hidden{opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}

/* =============================================================
   NAV
   ============================================================= */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:7000;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:36px var(--pad) 20px;
  transition:transform .5s var(--ease),background .5s,backdrop-filter .5s,padding .5s,gap .5s;
}
.nav.is-scrolled{background:rgba(8,8,8,.72);backdrop-filter:blur(12px);padding-top:14px;padding-bottom:14px;gap:6px;border-bottom:1px solid var(--line)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__brand img{width:168px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));transition:width .5s var(--ease),transform .4s var(--ease)}
.nav.is-scrolled .nav__brand img{width:96px}
.nav__brand:hover img{transform:rotate(-3deg) scale(1.05)}
.nav__links{display:flex;gap:clamp(18px,2.5vw,42px);align-items:center;justify-content:center}
.nav__link{position:relative;font-size:1rem;letter-spacing:.02em;padding:6px 2px;overflow:hidden;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.nav__link span{display:inline-block;transition:transform .4s var(--ease)}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link:hover span{transform:translateY(-2px)}
.nav__link--shop{border:1.5px solid var(--pink);padding:6px 18px;color:var(--pink)}
.nav__link--shop::after{display:none}
.nav__link--shop:hover{background:var(--pink);color:#0a0a0a}
.nav__burger{display:none;position:relative;z-index:3;flex-direction:column;gap:6px;width:34px;height:30px;justify-content:center;align-items:flex-end}
.nav__burger i{display:block;width:30px;height:2px;background:#fff;transition:.35s var(--ease)}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-8px) rotate(-45deg);width:30px}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:160px var(--pad) 80px;overflow:hidden}
/* two splatter halves — parallaxed at different speeds (see startHero) for layered depth */
.hero__splatter{position:absolute;top:0;height:auto;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 24px rgba(245,39,119,.5));will-change:transform}
.hero__splatter--left{left:0;width:40.4vw;opacity:.78}   /* slower layer — reads farther back */
.hero__splatter--right{right:0;width:45.2vw;opacity:.92}  /* faster layer — reads closer/foreground */
.hero__grid{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,72px);align-items:center}
.hero__kicker{font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:24px}
.hero__title{font-size:clamp(56px,9vw,168px);margin-bottom:30px;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hero__title .line{display:block}
.hero__title .pink{text-shadow:0 0 36px rgba(245,39,119,.7),0 0 80px rgba(245,39,119,.35)}
.hero__tag{font-size:clamp(17px,1.5vw,22px);max-width:30ch;color:#d7d7da;margin-bottom:38px;min-height:3.4em}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__media{justify-self:stretch;position:relative}
.hero__media::before{content:"";position:absolute;inset:-14% -10%;z-index:0;
  background:radial-gradient(60% 60% at 62% 42%,var(--accent-soft),transparent 70%);
  filter:blur(44px);pointer-events:none}
/* max-height reserves room for the fixed nav + breathing space, so on short viewports the tall
   portrait centers BELOW the nav links instead of rising under them. On tall viewports the
   width-driven 4/5 height (~630px) is smaller than this cap, so the big layout is unaffected. */
.hero__frame{position:relative;z-index:2;width:100%;max-width:min(42vw,520px);margin-inline:auto;aspect-ratio:4/5;max-height:calc(100svh - 480px);border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.hero__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero__frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(245,39,119,.35);mix-blend-mode:screen}
.hero__frame-tag{position:absolute;bottom:12px;left:14px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:5px 10px;backdrop-filter:blur(4px);z-index:3}
.hero__frame-no{position:absolute;top:12px;left:14px;z-index:3;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:5px 10px;backdrop-filter:blur(4px)}
.hero__caption-rail{position:absolute;top:50%;right:-22px;transform:translateY(-50%);z-index:3;
  writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);pointer-events:none;white-space:nowrap}
.hero__scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--grey)}
.hero__scroll-word{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;writing-mode:vertical-rl}
.hero__scroll-arrow{width:1px;height:46px;background:linear-gradient(var(--pink),transparent);position:relative;overflow:hidden}
.hero__scroll-arrow::after{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:var(--pink);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
/* short desktop viewports: the 4/5 ratio + height cap would narrow the frame and re-empty the
   column. Drop the ratio here so it fills the column width at a capped height that clears the nav. */
@media (min-width:1081px) and (max-height:1080px){
  .hero__frame{aspect-ratio:auto;height:calc(100svh - 480px)}
}

/* =============================================================
   PRODUCT
   ============================================================= */
.product{position:relative;background:rgba(9,9,11,0.55);padding:clamp(90px,12vw,180px) var(--pad);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.product__texture{position:absolute;inset:-14% 0;background:url('../assets/texture2.png') center/cover;opacity:.10;mix-blend-mode:screen;pointer-events:none;filter:contrast(1.4)}
.product__stage{position:relative;display:grid;place-items:center;min-height:min(72vh,640px)}
.product__bottle{position:relative;width:min(80%,520px);will-change:transform;z-index:2}
.product__bottle img{width:100%;filter:drop-shadow(0 50px 70px rgba(0,0,0,.7))}
.product__glow{position:absolute;inset:6% 10%;z-index:0;background:radial-gradient(50% 50% at 50% 50%,rgba(245,39,119,.42),transparent 70%);filter:blur(48px);will-change:transform}
.product__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:none;cursor:grab}
.product__stage.has-3d{min-height:min(78vh,700px)}
/* widen the 3D render frame past the stage cell (into the section padding/gap) so the bigger,
   wide bottle composition has horizontal room and isn't clipped at the canvas edge on narrower
   viewports — height is unchanged so the bottles keep their size */
/* centre the bottles toward the copy (camera fit-to-frame handles size, so width only sets position/aspect) */
.product__stage.has-3d .product__canvas{display:block;left:11%;width:96%}
.product__stage.has-3d .product__bottle{display:none}
.product__copy{position:relative;z-index:2}
.product__kicker,.sec-kicker{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:22px}
.product__title{font-size:clamp(46px,7vw,108px);margin-bottom:30px}
.product__lead{font-size:clamp(16px,1.3vw,20px);color:#cfcfd2;max-width:46ch;margin-bottom:34px}
.product__facts{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:26px}
.product__facts li{font-size:.95rem;color:var(--grey);letter-spacing:.04em}
.product__facts b{color:var(--white)}

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee{background:var(--pink);color:#0a0a0a;padding:16px 0;overflow:hidden;border-top:2px solid #0a0a0a;border-bottom:2px solid #0a0a0a;position:relative;z-index:2}
.marquee__track{display:flex;align-items:center;gap:34px;white-space:nowrap;width:max-content;font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,4vw,52px)}
.marquee__track i{font-style:normal;font-size:.6em;opacity:.7}

/* =============================================================
   STREET WALL — horizontal scroll
   ============================================================= */
.wall{position:relative;background:rgba(0,0,0,0.4)}
.wall__sticky{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* fallback when the pin can't run (reduced-motion / no GSAP / touch): native horizontal scroll */
.wall--scroll .wall__sticky{height:auto;padding:80px 0;overflow:visible}
.wall--scroll .wall__track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:20px;transform:none!important}
.wall--scroll .wall__panel{scroll-snap-align:center}
.wall__head{padding:0 var(--pad);margin-bottom:40px;max-width:var(--maxw)}
.wall__title{font-size:clamp(40px,6vw,96px)}
.wall__sub{color:var(--grey);max-width:48ch;margin-top:16px;font-size:clamp(15px,1.2vw,18px)}
.wall__track{display:flex;gap:30px;padding:0 var(--pad);width:max-content;will-change:transform}
.wall__panel{position:relative;width:clamp(280px,42vw,620px);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);flex:none}
.wall__panel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(1.1)}
.wall__panel:hover img{transform:scale(1.06)}
.wall__panel figcaption{position:absolute;bottom:14px;left:16px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:6px 12px;backdrop-filter:blur(4px)}
.wall__panel--quote{display:grid;place-items:center;background:linear-gradient(135deg,#101010,#1c1c1c);border-color:var(--pink)}
.wall__panel--quote blockquote{font-size:clamp(30px,4vw,64px);text-align:center;padding:30px;line-height:1}

/* =============================================================
   COMING-SOON / COLLAB TEASER  (interlude between Street Wall + Sortiment)
   ============================================================= */
.tease{position:relative;overflow:hidden;padding:clamp(94px,14vw,190px) var(--pad);
  background:radial-gradient(82% 82% at 50% 50%, rgba(8,8,11,.78), rgba(8,8,11,.34) 60%, transparent 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* giant faded display word — editorial depth behind the content */
.tease__watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;
  font-size:min(42vw,580px);line-height:.7;letter-spacing:.04em;color:#fff;opacity:.035;
  pointer-events:none;white-space:nowrap;user-select:none}
.tease__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,84px);align-items:center}
.tease__copy{position:relative}
.tease__kicker{margin-bottom:22px}
.tease__title{font-size:clamp(40px,6.4vw,116px);margin-bottom:28px;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.tease__title .pink{text-shadow:0 0 36px rgba(245,39,119,.6),0 0 80px rgba(245,39,119,.3)}
.tease__lead{font-size:clamp(16px,1.3vw,21px);color:#cfcfd2;max-width:48ch;margin-bottom:36px}
.tease__row{display:flex;align-items:center;gap:clamp(18px,2vw,28px);flex-wrap:wrap}
.tease__status{display:inline-flex;align-items:center;gap:11px;font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey)}
.tease__status i{width:9px;height:9px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 12px var(--pink);animation:teasePulse 1.8s var(--ease) infinite}
@keyframes teasePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}
/* the draped-silk reveal — a transparent PNG floating on the dark bg (a hard frame would clip the cloth) */
.tease__media{position:relative;justify-self:center;display:flex;justify-content:center;align-items:center;width:100%}
.tease__glow{position:absolute;inset:-8% -6%;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(54% 54% at 50% 46%, rgba(245,39,119,.42), rgba(245,39,119,.12) 46%, transparent 72%);
  filter:blur(48px)}
.tease__reveal{position:relative;z-index:1;width:min(88%,520px);will-change:transform;animation:teaseFloat 7s ease-in-out infinite}
.tease__reveal img{width:100%;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(245,39,119,.28))}
@keyframes teaseFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(-1.1deg)}}
.tease__rail{position:absolute;top:50%;right:-18px;transform:translateY(-50%);z-index:2;
  writing-mode:vertical-rl;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
  pointer-events:none;white-space:nowrap}
@media (max-width:1080px){
  .tease__inner{grid-template-columns:1fr;gap:46px;text-align:center}
  .tease__media{order:-1}
  .tease__lead{margin-inline:auto}
  .tease__row{justify-content:center}
  .tease__rail{display:none}
}

/* =============================================================
   FLAVOR EXPLORER
   ============================================================= */
.flavors{position:relative;padding:clamp(90px,12vw,170px) var(--pad);max-width:var(--maxw);margin:0 auto;
  background:radial-gradient(78% 62% at 50% 42%, rgba(6,6,9,0.74), rgba(6,6,9,0.3) 62%, transparent 100%)}
.flavors__head{text-align:center;margin-bottom:clamp(40px,6vw,80px)}
.flavors__title{font-size:clamp(46px,8vw,130px)}
.flavors__sub{color:var(--grey);margin-top:14px}
.flavors__head .sec-kicker{text-align:center}

.explorer{display:grid;grid-template-columns:1fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.explorer__stage{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid var(--line);padding:clamp(28px,4vw,56px);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:60vh}
.explorer__stage::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 70% at 30% 30%,var(--accent-soft),transparent 70%);transition:background .6s}
.explorer__index{position:absolute;top:24px;right:30px;font-size:clamp(22px,2.4vw,34px);letter-spacing:.06em;color:var(--grey);z-index:2}
.explorer__index em{font-style:normal;color:var(--accent);transition:color .5s}
.explorer__art{position:relative;z-index:1;display:grid;place-items:center;min-height:clamp(360px,46vh,520px)}
/* the bottle outline is the hero of the preview; the graffiti logo sits on it like a product label.
   the logo is centred with left+margin (NOT transform) so the GSAP scale/rotate pop in select() is free */
.explorer__product{position:relative;height:clamp(300px,42vh,480px);aspect-ratio:96/304;filter:drop-shadow(0 26px 48px rgba(0,0,0,.55))}
.explorer__bottle{position:absolute;inset:0;width:100%;height:100%;opacity:.95;filter:drop-shadow(0 0 14px var(--accent-soft));transition:filter .5s}
.explorer__neon{position:absolute;left:50%;margin-left:-40%;top:53%;width:80%;filter:drop-shadow(0 0 16px var(--accent));transition:filter .5s}
.explorer__neon-text{position:absolute;left:50%;margin-left:-43%;top:54%;width:86%;font-size:clamp(20px,2vw,30px);line-height:.92;text-align:center;color:var(--accent);
  text-shadow:0 0 18px var(--accent),0 0 44px var(--accent-soft);transition:color .5s,text-shadow .5s}
.explorer__neon-text[hidden]{display:none}
.explorer__info{position:relative;z-index:1}
.explorer__name{font-size:clamp(30px,3.4vw,58px);color:var(--accent);margin-bottom:8px;transition:color .5s;text-shadow:0 0 30px var(--accent-soft)}
.explorer__meta{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.explorer__desc{color:#cfcfd2;min-height:5.5em;margin-bottom:22px;font-size:clamp(15px,1.1vw,18px)}
.explorer__bar{height:8px;background:rgba(255,255,255,.08);margin-bottom:28px;overflow:hidden}
.explorer__bar span{display:block;height:100%;width:100%;background:var(--accent);box-shadow:0 0 16px var(--accent);transform-origin:left;transition:background .5s}
.explorer__buy{--pink:var(--accent)}

.explorer__rail{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.flav-chip{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color .35s,background .35s,transform .35s var(--ease);overflow:hidden}
.flav-chip::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease)}
.flav-chip:hover,.flav-chip.is-active{border-color:var(--c);background:rgba(255,255,255,.04);transform:translateX(4px)}
.flav-chip:hover::before,.flav-chip.is-active::before{transform:scaleY(1)}
.flav-chip__dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);flex:none}
.flav-chip__name{font-size:1.02rem;letter-spacing:.02em;flex:1}
.flav-chip__num{font-size:.78rem;color:var(--grey);letter-spacing:.1em}
.flav-chip.is-active .flav-chip__name{color:var(--c)}

/* "Buntes Zeug" — rainbow theme instead of a single accent (gradient can't go in colour-only
   props like box-shadow/border-color, so those get a neutral glow; the bottle stroke gradient
   lives in bottle-buntes-zeug.svg) */
.explorer__stage.is-rainbow .explorer__name,
.explorer__stage.is-rainbow .explorer__index em{
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
}
.explorer__stage.is-rainbow .explorer__bar span{background:var(--rainbow);box-shadow:0 0 16px rgba(255,255,255,.22)}
.explorer__stage.is-rainbow .explorer__buy{background:var(--rainbow);border-color:transparent;color:#0a0a0a}
.explorer__stage.is-rainbow::before{background:radial-gradient(62% 72% at 36% 36%,rgba(255,120,120,.10),rgba(70,200,255,.08) 45%,rgba(168,107,255,.07) 70%,transparent 82%)}
.explorer__stage.is-rainbow .explorer__bottle{filter:drop-shadow(0 0 14px rgba(255,255,255,.16))}
.explorer__stage.is-rainbow .explorer__neon{filter:drop-shadow(0 0 16px rgba(255,255,255,.18))}
/* the Buntes Zeug rail chip */
.flav-chip--rainbow .flav-chip__dot{background:var(--rainbow);box-shadow:0 0 12px rgba(255,255,255,.3)}
.flav-chip--rainbow::before{background:var(--rainbow)}
.flav-chip--rainbow:hover,.flav-chip--rainbow.is-active{border-color:transparent;border-image:var(--rainbow) 1}
.flav-chip--rainbow.is-active .flav-chip__name{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* =============================================================
   ABOUT
   ============================================================= */
/* Brand Peaks parent-brand panel — their deep indigo-purple (#241e46) + gold (#d3ae64) identity */
.about{position:relative;overflow:hidden;color:#f4f4f5;padding:clamp(90px,14vw,200px) var(--pad);
  background:radial-gradient(125% 100% at 50% 0%, #322a5e 0%, #241e46 50%, #16122c 100%)}
/* faint filmic grit — soft-light/overlay textures the purple without muddying it */
.about__bg{position:absolute;inset:-18% 0;z-index:0;background:url('../assets/footer-bg.jpg') center/cover;opacity:.10;mix-blend-mode:soft-light;will-change:transform}
.about::after{content:"";position:absolute;inset:0;z-index:0;background:url('../assets/texture2.png') center/cover;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
/* warm gold bloom behind the logo ties in the Brand Peaks accent */
.about::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 40%, rgba(211,174,100,.12), transparent 62%)}
/* centered parent-brand signature — balances the block + flows into the centered footer */
.about__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.about__kicker{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:#d3ae64;margin-bottom:20px}
.about__title{font-size:clamp(34px,5vw,88px);margin-bottom:24px;letter-spacing:.01em;color:#f4f4f5}
/* Brand Peaks signature — the headline reads "eine marke von" + this white logomark */
.about__logo{display:block;width:min(90%,600px);height:auto;margin:0 0 40px;filter:drop-shadow(0 10px 28px rgba(0,0,0,.45))}
.about__copy{font-size:clamp(17px,1.4vw,21px);line-height:1.8;max-width:46ch;margin-bottom:40px;font-weight:400;color:#d8d6e4}
/* CTA → Brand Peaks gold on the dark panel */
.about__cta{border-color:#d3ae64;color:#f4f4f5}
.about__cta::after{background:#d3ae64}
.about__cta:hover{color:#241e46}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:rgba(0,0,0,0.55);padding:clamp(70px,9vw,130px) var(--pad) 40px;border-top:2px solid var(--pink)}
.footer__cta{text-align:center;margin-bottom:80px}
.footer__big{font-size:clamp(40px,8vw,120px);margin-bottom:34px}
.footer__form{display:flex;gap:12px;justify-content:center;max-width:520px;margin:0 auto;flex-wrap:wrap}
.footer__form input{flex:1;min-width:220px;background:transparent;border:1.5px solid var(--line);color:#fff;padding:.85em 1.2em;font-family:var(--type);font-size:1rem}
.footer__form input:focus{outline:none;border-color:var(--pink)}
.footer__formnote{margin-top:16px;color:var(--pink);min-height:1.4em;font-size:.9rem}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:50px;margin-bottom:50px}
.footer__col h4{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;letter-spacing:.05em;margin-bottom:18px;color:var(--pink)}
.footer__col a{display:block;color:var(--grey);padding:5px 0;transition:color .3s,transform .3s}
.footer__col a:hover{color:#fff;transform:translateX(4px)}
.footer__col--brand img{width:110px;margin-bottom:18px}
.footer__col--brand p{color:var(--grey);max-width:30ch}
.footer__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;color:var(--grey);letter-spacing:.04em;border-top:1px solid var(--line);padding-top:24px}
.footer__age{color:var(--pink)}

/* =============================================================
   SECTION PAGER
   ============================================================= */
.pager{position:fixed;right:var(--pad);bottom:30px;z-index:6000;display:flex;align-items:baseline;gap:6px;font-family:var(--display);text-transform:uppercase;mix-blend-mode:difference;pointer-events:none}
.pager__num{font-size:34px;color:#fff;min-width:1.3ch;text-align:right}
.pager__sep,.pager__total{font-size:18px;color:#fff;opacity:.6}
.pager__label{font-family:var(--type);font-size:.7rem;letter-spacing:.2em;margin-left:10px;align-self:center;color:#fff}

/* =============================================================
   REVEAL helpers
   ============================================================= */
[data-reveal]{will-change:transform,opacity}
.char{display:inline-block;will-change:transform}
.word{display:inline-block;white-space:nowrap}
[data-reveal="line"]{overflow:hidden}
[data-reveal="line"] > span{display:block}
.tw-caret{color:var(--pink);font-weight:700;margin-left:1px}
@keyframes blink{50%{opacity:0}}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__media{justify-self:start;display:none}
  .product{grid-template-columns:1fr;text-align:left}
  .product__stage{min-height:auto;order:-1}
  .explorer{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:20px}
  .nav__links{
    position:fixed;inset:0;background:rgba(6,6,6,.97);backdrop-filter:blur(12px);
    flex-direction:column;justify-content:center;gap:30px;font-size:1.6rem;
    transform:translateX(100%);transition:transform .5s var(--ease);z-index:2;
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav{flex-direction:row;justify-content:center;padding:14px var(--pad)}
  .nav__brand img{width:108px}
  .nav.is-scrolled .nav__brand img{width:70px}
  .nav__burger{display:flex;position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
  .nav.is-scrolled{padding:10px var(--pad)}
  .hero{padding-top:100px}
  .hero__title{font-size:clamp(54px,16vw,90px)}
  .explorer__stage{grid-template-columns:1fr;text-align:center}
  .explorer__art{min-height:auto}
  .explorer__product{height:clamp(260px,42vh,360px)}
  .explorer__rail{grid-template-columns:1fr}
  .explorer__desc{min-height:auto}
  .wall__sticky{height:auto;padding:80px 0}
  .wall__track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:20px}
  .wall__panel{scroll-snap-align:center}
  .footer__grid{grid-template-columns:1fr}
  .footer__legal{flex-direction:column;gap:8px;text-align:center}
  .pager{display:none}
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .fx-grain{animation:none}
  .hero__scroll-arrow::after{animation:none}
}

/* =============================================================
   FLAVOR DETAIL PAGE (flavor.html)  — themed in each flavor's own
   colour via --accent / --pink (set on :root by flavor.js)
   ============================================================= */
.fp-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:170px var(--pad) 100px;overflow:hidden}
.fp-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 72% 34%,var(--accent-soft),transparent 66%)}
.fp-hero__watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;
  font-size:min(30vw,440px);line-height:.8;letter-spacing:.02em;color:var(--accent);opacity:.045;white-space:nowrap;pointer-events:none}
/* accent-tinted paint splats (recoloured to the flavour accent by flavor.js), like the home hero */
.fp-hero__splatter{position:absolute;top:0;height:auto;z-index:1;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .8s var(--ease);filter:drop-shadow(0 0 22px var(--accent-glow));will-change:transform}
.fp-hero__splatter--left{left:0;width:40.4vw}
.fp-hero__splatter--right{right:0;width:45.2vw}
.fp-hero__splatter--left.is-on{opacity:.72}
.fp-hero__splatter--right.is-on{opacity:.9}
.fp-hero__grid{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.fp-hero__copy{position:relative}
.fp-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.fp-back i{font-style:normal;transition:transform .3s var(--ease)}
.fp-back:hover{color:var(--accent)}
.fp-back:hover i{transform:translateX(-4px)}
.fp-hero__kicker{font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.fp-hero__name{font-size:clamp(42px,5.6vw,88px);margin-bottom:18px;color:var(--white);text-shadow:0 6px 40px rgba(0,0,0,.55)}
.fp-hero__line{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,1.9vw,28px);line-height:1.04;letter-spacing:.01em;color:var(--accent);margin-bottom:22px;text-shadow:0 0 28px var(--accent-soft)}
.fp-hero__desc{font-size:clamp(15px,1.2vw,19px);color:#cfcfd2;max-width:46ch;margin-bottom:34px}
.fp-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.fp-hero__media{position:relative;justify-self:center;display:flex;justify-content:center;align-items:center}
.fp-hero__media::before{content:"";position:absolute;inset:-14% -8%;z-index:0;
  background:radial-gradient(52% 56% at 50% 46%,var(--accent-soft),transparent 70%);filter:blur(46px);pointer-events:none}
.fp-product{position:relative;z-index:1;height:clamp(320px,54vh,560px);aspect-ratio:96/304;display:grid;place-items:center;filter:drop-shadow(0 30px 54px rgba(0,0,0,.6))}
.fp-product__bottle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px var(--accent-soft))}
/* graffiti logo sits on the lower body of the bottle, like the home explorer preview */
.fp-product__label{position:absolute;left:50%;top:51%;transform:translateX(-50%);width:74%;z-index:2;filter:drop-shadow(0 0 18px var(--accent))}
.fp-hero__rail{position:absolute;top:50%;left:-26px;transform:translateY(-50%);writing-mode:vertical-rl;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);pointer-events:none;white-space:nowrap}

/* shared section scaffold */
.fp-sec__head{margin-bottom:clamp(32px,4vw,56px)}
.fp-sec__title{font-size:clamp(34px,5vw,76px);color:var(--white)}
.fp-mini{font-family:var(--type);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.fp-mini--moods{margin-top:34px}
.fp-taste__inner,.fp-specs__inner,.fp-buy__inner,.fp-more__inner{max-width:var(--maxw);margin:0 auto}

/* TASTE */
.fp-taste{position:relative;background:rgba(9,9,11,.5);padding:clamp(80px,10vw,150px) var(--pad)}
.fp-taste__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.fp-notes{display:flex;flex-wrap:wrap;gap:12px}
.fp-note{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:.95rem;letter-spacing:.02em}
.fp-note::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.fp-moods{display:flex;flex-wrap:wrap;gap:10px}
.fp-mood{padding:8px 15px;border:1px dashed rgba(255,255,255,.18);border-radius:40px;font-size:.84rem;color:var(--grey)}
.fp-bars{display:flex;flex-direction:column;gap:20px}
.fp-bar{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;align-items:center;gap:16px}
.fp-bar__label{font-size:.95rem;letter-spacing:.02em;color:var(--white)}
.fp-bar__track{height:10px;background:rgba(255,255,255,.07);overflow:hidden}
.fp-bar__fill{display:block;height:100%;width:var(--v);background:var(--accent);box-shadow:0 0 14px var(--accent);will-change:transform}
.fp-bar__val{font-family:var(--display);font-size:1.15rem;color:var(--accent);min-width:2ch;text-align:right}

/* SPECS */
.fp-specs{position:relative;padding:clamp(80px,10vw,150px) var(--pad)}
.fp-specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fp-spec{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.fp-spec__k{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.fp-spec__v{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2vw,30px);color:var(--white)}
.fp-specs__note{margin-top:26px;color:var(--grey);max-width:62ch;font-size:.95rem}

/* BUY — our own shop (Alpha Steam, echter Laden in Nürnberg) */
.fp-buy{position:relative;background:rgba(0,0,0,.4);padding:clamp(80px,10vw,150px) var(--pad)}
.fp-shop{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
  padding:clamp(28px,4vw,46px);border:1px solid var(--line);background:rgba(255,255,255,.025);overflow:hidden;transition:border-color .35s,background .35s}
.fp-shop::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fp-shop:hover{border-color:var(--accent);background:rgba(255,255,255,.05)}
.fp-shop:hover::before{transform:scaleX(1)}
.fp-shop__text{display:flex;flex-direction:column;gap:10px;max-width:48ch}
.fp-shop__brand{font-size:clamp(30px,4vw,56px);color:var(--white);line-height:.95}
.fp-shop__tag{color:var(--grey);font-size:clamp(15px,1.2vw,18px)}
.fp-shop__cta{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.fp-shop__cta i{font-style:normal;transition:transform .3s var(--ease)}
.fp-shop:hover .fp-shop__cta i{transform:translate(3px,-3px)}

/* MORE */
.fp-more{position:relative;padding:clamp(80px,10vw,150px) var(--pad)}
.fp-morerail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* rainbow flavor (Buntes Zeug) — gradient where a single colour can't go */
body.is-rainbow .fp-hero__name,body.is-rainbow .fp-hero__line,body.is-rainbow .fp-hero__kicker,body.is-rainbow .sec-kicker,body.is-rainbow .fp-bar__val{
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
body.is-rainbow .btn--solid{background:var(--rainbow);border-color:transparent;color:#0a0a0a}
body.is-rainbow .fp-note::before,body.is-rainbow .fp-bar__fill{background:var(--rainbow);box-shadow:0 0 14px rgba(255,255,255,.25)}
body.is-rainbow .fp-shop::before,body.is-rainbow .progress__bar{background:var(--rainbow);box-shadow:none}

@media (max-width:1080px){
  .fp-hero__grid{grid-template-columns:1fr;gap:34px}
  .fp-hero__media{order:-1}
  .fp-taste__grid{grid-template-columns:1fr;gap:44px}
  .fp-specgrid{grid-template-columns:repeat(2,1fr)}
  .fp-morerail{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .fp-hero{padding-top:118px}
  .fp-hero__rail{display:none}
  .fp-product{height:clamp(260px,40vh,360px)}
  .fp-specgrid{grid-template-columns:1fr 1fr}
  .fp-morerail{grid-template-columns:1fr}
}