/* =================================================================
   LEMONeD SILVER RING – hide SERIES  /  Special LP
   Theme: 925 Silver luxury × hide punk wit
   Type : Fraunces (EN display) + Zen Kaku Gothic New (JP gothic) + JetBrains Mono
   ================================================================= */

:root{
  --bg:        #0A0A0C;
  --surface:   #141418;
  --surface-2: #1B1B20;
  --ink:       #F4F4F2;
  --muted:     #8E8E96;
  --line:      #2A2A30;
  --silver-hi: #EAEAEE;
  --silver-mid:#A6A6AE;
  --silver-lo: #6A6A74;
  --accent:    #E6005A;          /* hide magenta — used sparingly */
  --accent-dim:#9c0a45;

  --font-display: "Fraunces", serif;
  --font-mincho:  "Noto Serif JP", serif;
  --font-jp:      "Zen Kaku Gothic New", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --pad:  clamp(1.25rem, 5vw, 6rem);
  --maxw: 1280px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:300;
  line-height:1.95;
  letter-spacing:.02em;
  overflow-x:hidden;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(120,120,135,.10), transparent 60%),
    radial-gradient(80% 50% at 90% 18%, rgba(230,0,90,.045), transparent 60%),
    linear-gradient(180deg, #0c0c0f 0%, #0a0a0c 40%, #08080a 100%);
  background-attachment:fixed;
  position:relative;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* content floats ABOVE the fixed hero slideshow which stays visible while scrolling */
main{ position:relative; z-index:2; background:transparent; }

.section{ position:relative; z-index:2; padding-block:clamp(5rem,12vw,11rem); padding-inline:var(--pad); }
.sec-index{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.34em;
  color:var(--accent); text-transform:uppercase; margin-bottom:2.2rem;
}

/* =================================================================
   00 LOADER
   ================================================================= */
.loader{ position:fixed; inset:0; z-index:200; background:#FBFBF8;
  display:grid; place-items:center; transition:opacity 1s var(--ease), visibility 1s; }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__logo{ width:min(66vw,300px); height:auto; margin:0 auto; opacity:0; transform:scale(.95);
  animation:loaderLogo 1.8s var(--ease) forwards .25s; }
@keyframes loaderLogo{ 0%{ opacity:0; transform:scale(.94); } 60%{ opacity:1; } 100%{ opacity:1; transform:scale(1); } }

/* =================================================================
   SIGNATURE — thread / stitch line
   ================================================================= */
.threadline{ position:fixed; top:0; left:clamp(14px,3.2vw,46px); width:20px; height:100vh;
  z-index:5; pointer-events:none; opacity:0; transition:opacity .6s; }
.threadline.is-on{ opacity:.9; }
#threadPath{ filter:drop-shadow(0 0 4px rgba(230,0,90,.5)); }
/* mobile: pin the stitch line to the very edge so it never overlaps left-aligned text */
@media (max-width:768px){ .threadline{ left:0; width:8px; } }

/* =================================================================
   SIDE NAV
   ================================================================= */
.sidenav{ position:fixed; right:clamp(12px,2vw,30px); top:50%; transform:translateY(-50%); z-index:40; }
.sidenav ul{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.sidenav a{ display:flex; align-items:center; gap:.7rem; justify-content:flex-end; }
.sidenav a span{ width:9px; height:9px; border:1px solid var(--silver-lo); border-radius:50%;
  transition:all .35s var(--ease); display:block; }
.sidenav a::before{ content:attr(data-label); font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.2em; color:var(--muted); opacity:0; transform:translateX(6px); transition:all .35s var(--ease); }
.sidenav a:hover::before{ opacity:1; transform:translateX(0); }
.sidenav a.is-active span{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px rgba(230,0,90,.7); }
@media (max-width:768px){ .sidenav{ display:none; } }

/* =================================================================
   FLOATING BUY (sticky CTA)
   ================================================================= */
.floatbuy{ position:fixed; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,34px); z-index:90;
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.16em; color:var(--bg);
  background:linear-gradient(160deg,var(--silver-hi),var(--silver-mid));
  padding:1.05em 1.7em; border-radius:40px; box-shadow:0 12px 34px -10px rgba(0,0,0,.7);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease), background .3s, color .3s; }
.floatbuy.is-on{ opacity:1; transform:none; pointer-events:auto; }
.floatbuy.is-on.is-hidden{ opacity:0; transform:translateY(16px); pointer-events:none; }
.floatbuy:hover,.floatbuy:focus-visible{ background:var(--accent); color:#fff; box-shadow:0 14px 40px -8px rgba(230,0,90,.6); }
.floatbuy svg{ width:18px; height:18px; }
.floatbuy__txt b{ font-weight:700; }
@media (max-width:560px){
  .floatbuy{ left:clamp(16px,4vw,40px); right:clamp(16px,4vw,40px); bottom:14px; justify-content:center; padding:1.1em; }
}

/* =================================================================
   01 HERO + SLIDESHOW
   ================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:var(--pad); z-index:2; }
/* slideshow fixed as a backdrop — content scrolls over it */
.hero__slides{ position:fixed; inset:0; z-index:0; background:var(--bg); }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 2.2s var(--ease); will-change:opacity; }
.hero__slide.is-active{ opacity:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:contrast(1.03) brightness(.74) saturate(.9); transform:scale(1.06); }
.hero__slide.is-active img{ animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.14); } }
.hero__veil{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,.58) 50%, rgba(8,8,10,.74) 100%),
    radial-gradient(80% 80% at 30% 45%, transparent, rgba(8,8,10,.5)); }
/* halftone dot screen over the backdrop — mutes imagery so text pops (zilqy-style) */
.hero__veil::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.55) 0.9px, transparent 1.3px);
  background-size:4px 4px; }
@media (max-width:768px){
  .hero__veil{ background:
    linear-gradient(180deg, rgba(8,8,10,.6) 0%, rgba(8,8,10,.66) 50%, rgba(8,8,10,.8) 100%),
    radial-gradient(80% 80% at 30% 45%, transparent, rgba(8,8,10,.55)); }
  .hero__veil::after{ background-image:radial-gradient(circle, rgba(0,0,0,.62) 0.9px, transparent 1.3px); background-size:3.5px 3.5px; }
}

.hero__content{ position:relative; z-index:2; max-width:min(900px,92%); }
.hero__logo{ width:clamp(78px,9vw,118px); height:auto; margin-bottom:1.6rem; filter:drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
.hero__brand{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.42em; color:var(--silver-mid); margin-bottom:1.3rem; }
.hero__title{ line-height:.92; margin-bottom:1.7rem; }
.hero__title-en{ display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(3.2rem,12vw,9.5rem); letter-spacing:-.02em;
  background:linear-gradient(165deg,#fff 0%, var(--silver-mid) 55%, var(--silver-lo) 78%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero__title-en em{ font-weight:300; font-style:italic; }
.hero__title-jp{ display:block; font-family:var(--font-mono); font-weight:700; font-size:clamp(.9rem,2.6vw,1.5rem);
  letter-spacing:.5em; color:var(--accent); margin-top:1.1rem; padding-left:.4em; }
.hero__lead{ font-family:var(--font-jp); font-weight:500; font-size:clamp(1rem,2.2vw,1.4rem); color:var(--ink); }
.hero__symbols{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem .4rem; margin-top:2.2rem; }
.hero__symbols li{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; color:var(--silver-mid);
  border:1px solid var(--line); border-radius:30px; padding:.42em 1em; background:rgba(20,20,24,.4); backdrop-filter:blur(4px); }
.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.hero__scroll span{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.32em; color:var(--muted); }
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--accent),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--accent); animation:scrollDot 1.9s var(--ease) infinite; }
@keyframes scrollDot{ to{ top:100%; } }

/* =================================================================
   02 CONCEPT
   ================================================================= */
.concept{ display:grid; grid-template-columns:38% 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; max-width:var(--maxw); margin-inline:auto; }
.concept__art{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.cslide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--ease); }
.cslide.is-active{ opacity:1; }
.cslide img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.12) contrast(1.04); }
.concept__art::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 80px 20px var(--bg); }
.concept__h{ font-family:var(--font-mincho); font-weight:300; font-size:clamp(2.6rem,8.5vw,7rem);
  line-height:1.18; letter-spacing:0; margin-bottom:2rem; color:var(--silver-hi); }
.concept__h span{ display:block; white-space:nowrap; }
.concept__h span:last-child{ font-weight:300; }
.concept__txt p{ color:var(--ink); font-size:clamp(.95rem,1.5vw,1.08rem); margin-bottom:1.3rem; max-width:46ch; }
.concept__txt strong{ color:var(--accent); font-weight:700; }
@media (max-width:860px){ .concept{ grid-template-columns:1fr; } .concept__art{ max-width:62%; } }

/* =================================================================
   03 RELEASE
   ================================================================= */
.release{ max-width:var(--maxw); margin-inline:auto; }
.release__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; border-top:1px solid var(--line); padding-top:3rem; }
.release__tag{ display:inline-block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.34em; font-weight:400;
  color:var(--accent); border:1px solid var(--accent-dim); padding:.45em 1.1em; border-radius:3px; margin-bottom:1.6rem; }
.release__date{ font-family:var(--font-display); font-weight:300; font-size:clamp(3rem,10vw,7rem); line-height:.95;
  letter-spacing:.01em; color:var(--silver-hi); }
.release__date span{ color:var(--silver-lo); font-weight:200; }
.release__date small{ display:block; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.42em; color:var(--accent); font-weight:400; margin-top:.7rem; }
.release__time{ font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.3em; color:var(--silver-mid); margin-top:.9rem; font-weight:400; }
.release__info{ display:flex; flex-direction:column; gap:1.4rem; }
.release__info div{ border-bottom:1px solid var(--line); padding-bottom:1.2rem; }
.release__info dt{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; color:var(--accent); margin-bottom:.5rem; text-transform:uppercase; }
.release__info dd{ font-size:.96rem; color:var(--ink); }
@media (max-width:760px){ .release__grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* =================================================================
   04 LINE UP
   ================================================================= */
.lineup{ max-width:var(--maxw); margin-inline:auto; }
.lineup__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; }
.lineup__h{ font-family:var(--font-display); font-weight:300; font-size:clamp(3rem,10vw,7rem); letter-spacing:.02em; line-height:.95; color:var(--silver-hi); }
.lineup__h .big{ font-weight:300; font-size:1em; color:var(--accent); margin-right:.1em; }

.cards{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2.2rem); }
@media (max-width:880px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

.card{ position:relative; }
.card__link{ display:block; }
.card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; background:var(--surface); border:1px solid var(--line); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s; }
.card.is-soon .card__media img{ filter:grayscale(.55) brightness(.72); }
.card__link:hover .card__media img,.card__link:focus-visible .card__media img{ transform:scale(1.06); }
.card.is-soon .card__link:hover .card__media img{ filter:grayscale(.3) brightness(.85); }
.card__no{ position:absolute; top:.7rem; left:.8rem; z-index:2; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:#fff; mix-blend-mode:difference; }
.card__badge{ position:absolute; top:.7rem; right:.7rem; z-index:2; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; padding:.34em .7em; border-radius:2px; background:var(--accent); color:#fff; }
.card__badge--soon{ background:transparent; border:1px solid var(--silver-lo); color:var(--silver-mid); }
.card__view{ position:absolute; inset:auto 0 0 0; z-index:2; padding:1.6rem .9rem .8rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; color:#fff; opacity:0; transform:translateY(8px); transition:all .4s var(--ease); background:linear-gradient(transparent,rgba(8,8,10,.85)); }
.card__link:hover .card__view,.card__link:focus-visible .card__view{ opacity:1; transform:none; }
.card__meta{ padding:1.1rem .3rem 0; }
.card__en{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.24em; color:var(--accent); margin-bottom:.4rem; }
.card.is-soon .card__en{ color:var(--silver-lo); }
.card__jp{ font-family:var(--font-jp); font-weight:700; font-size:1.1rem; color:var(--ink); margin-bottom:.5rem; }
.card__price{ font-family:var(--font-mono); font-size:1rem; color:var(--silver-hi); }
.card__price span{ font-size:.62rem; color:var(--muted); letter-spacing:.1em; }
.card__price--soon{ color:var(--silver-lo); letter-spacing:.2em; font-size:.8rem; }
.lineup__note{ margin-top:2.6rem; font-size:.8rem; color:var(--muted); }

/* =================================================================
   05 BUY
   ================================================================= */
.buy{ text-align:center; }
.buy__inner{ max-width:860px; margin-inline:auto; }
.buy .sec-index{ display:inline-block; }
.buy__h{ font-family:var(--font-mincho); font-weight:300; font-size:clamp(3rem,10vw,7rem); color:var(--silver-hi); margin-bottom:1.4rem; letter-spacing:.02em; line-height:1.16; }
.buy__h em{ font-family:var(--font-display); font-style:normal; font-weight:300; }
.buy__txt{ color:var(--muted); margin-bottom:2.6rem; }
.buy__cta{ display:inline-flex; align-items:center; gap:1rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.16em; color:var(--bg);
  background:linear-gradient(160deg,var(--silver-hi),var(--silver-mid)); padding:1.15em 2.4em; border-radius:3px; transition:all .4s var(--ease); box-shadow:0 10px 40px -12px rgba(230,230,238,.3); }
.buy__cta svg{ width:22px; height:22px; transition:transform .4s var(--ease); }
.buy__cta:hover,.buy__cta:focus-visible{ background:var(--accent); color:#fff; box-shadow:0 14px 50px -10px rgba(230,0,90,.55); }
.buy__cta:hover svg{ transform:translateX(5px); }

/* =================================================================
   06 ATTENTION
   ================================================================= */
.attention{ max-width:860px; margin-inline:auto; }
.attention__box{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:clamp(1.6rem,4vw,2.8rem); }
.attention__box h3{ font-family:var(--font-jp); font-weight:700; font-size:1.05rem; margin-bottom:1.2rem; color:var(--silver-hi); }
.attention__box ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.attention__box li{ position:relative; padding-left:1.4em; font-size:.88rem; color:var(--muted); line-height:1.7; }
.attention__box li::before{ content:"※"; position:absolute; left:0; color:var(--accent); }
.attention__fine{ margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--silver-lo); line-height:1.8; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ position:relative; z-index:2; text-align:center; padding:4rem var(--pad) 3rem; border-top:1px solid var(--line); background:var(--bg); }
.footer__logo{ width:84px; height:auto; margin:0 auto 1.5rem; opacity:.85; }
.footer__mark{ font-family:var(--font-display); font-weight:300; font-style:italic; font-size:1.15rem; letter-spacing:.04em; color:var(--silver-mid); margin-bottom:1.6rem; }
.footer__links{ list-style:none; display:flex; gap:2rem; justify-content:center; margin-bottom:1.8rem; flex-wrap:wrap; }
.footer__links a{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; color:var(--ink); position:relative; padding-bottom:.3em; }
.footer__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.footer__links a:hover::after{ width:100%; }
.footer__copy{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; color:var(--silver-lo); }

/* =================================================================
   REVEAL
   ================================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-group .reveal{ transition-delay:calc(var(--d,0) * .12s); }
.hero__content.is-in .reveal{ opacity:1; transform:none; }
.hero__content .reveal[data-d="1"]{ transition-delay:.15s; }
.hero__content .reveal[data-d="2"]{ transition-delay:.3s; }
.hero__content .reveal[data-d="3"]{ transition-delay:.45s; }
.hero__content .reveal[data-d="4"]{ transition-delay:.6s; }
.hero__content .reveal[data-d="5"]{ transition-delay:.75s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* =================================================================
   GALLERY PAGE  (rings/<slug>.html)
   ================================================================= */
.gnav{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.4rem); background:linear-gradient(rgba(10,10,12,.92),rgba(10,10,12,.4)); backdrop-filter:blur(8px); }
.gnav__back{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--silver-mid); display:inline-flex; align-items:center; gap:.5rem; transition:color .3s; }
.gnav__back:hover{ color:var(--ink); }
.gnav__logo{ width:54px; height:auto; }
.gnav__shop{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; color:var(--accent); }

.gpage{ position:relative; z-index:2; padding:clamp(5rem,9vw,7rem) var(--pad) 0; max-width:1340px; margin-inline:auto; }
.gprod{ display:grid; grid-template-columns:1.18fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .gprod{ grid-template-columns:1fr; gap:2rem; } }

.gview{ position:sticky; top:5rem; }
@media (max-width:900px){ .gview{ position:static; } }
.gview__main{ position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line); border-radius:3px; background:var(--surface); }
.gview__main img{ width:100%; height:100%; object-fit:cover; }
.gview__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-top:.7rem; }
.gthumb{ aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line); border-radius:2px; cursor:pointer; opacity:.55; transition:all .3s var(--ease); background:var(--surface); padding:0; }
.gthumb img{ width:100%; height:100%; object-fit:cover; }
.gthumb.is-active{ opacity:1; border-color:var(--accent); }
.gthumb:hover{ opacity:.85; }

.ginfo__no{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.3em; color:var(--accent); }
.ginfo__en{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.24em; color:var(--silver-mid); margin-top:.4rem; }
.ginfo__jp{ font-family:var(--font-jp); font-weight:900; font-size:clamp(1.7rem,4vw,2.5rem); margin:.5rem 0 .4rem; color:var(--silver-hi); line-height:1.2; }
.ginfo__catch{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--accent); font-size:1.08rem; margin-bottom:1.6rem; }
.ginfo__price{ font-family:var(--font-mono); font-size:1.5rem; color:var(--silver-hi); margin-bottom:1.8rem; }
.ginfo__price span{ font-size:.66rem; color:var(--muted); }
.ginfo__price.is-soon{ font-size:1rem; letter-spacing:.24em; color:var(--silver-lo); }
.ginfo__desc{ font-size:.94rem; color:var(--muted); line-height:1.95; margin-bottom:2rem; }
.gspec{ width:100%; border-collapse:collapse; margin-bottom:2rem; }
.gspec th,.gspec td{ text-align:left; vertical-align:top; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.82rem; }
.gspec th{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--accent); width:32%; font-weight:400; }
.gspec td{ color:var(--ink); line-height:1.7; }
.gcta{ display:inline-flex; align-items:center; gap:.8rem; width:100%; justify-content:center; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--bg);
  background:linear-gradient(160deg,var(--silver-hi),var(--silver-mid)); padding:1.1em 1.6em; border-radius:3px; transition:all .35s var(--ease); }
.gcta:hover{ background:var(--accent); color:#fff; }
.gcta svg{ width:20px; height:20px; }
.gsoon{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--silver-lo); border:1px dashed var(--line); padding:1.1em 1.4em; border-radius:3px; text-align:center; }

/* other symbols nav */
.gother{ position:relative; z-index:2; max-width:1340px; margin:clamp(4rem,9vw,7rem) auto 0; padding:clamp(3rem,6vw,5rem) var(--pad); border-top:1px solid var(--line); }
.gother__h{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3em; color:var(--accent); margin-bottom:2rem; }
.gother__grid{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
@media (max-width:760px){ .gother__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .gother__grid{ grid-template-columns:repeat(2,1fr); } }
.gother__grid a{ display:block; }
.gother__grid .t{ display:block; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); border-radius:2px; background:var(--surface); }
.gother__grid img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gother__grid a:hover img{ transform:scale(1.07); }
.gother__grid .gother__soon img{ filter:grayscale(.5) brightness(.7); }
.gother__grid p{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:var(--silver-mid); margin-top:.6rem; }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .loader__pin-path{ animation:none; stroke-dashoffset:0; }
  .loader__word,.loader__logo{ animation:none; opacity:1; }
  .hero__scroll i::after{ animation:none; }
  .hero__slide.is-active img{ animation:none; transform:scale(1.02); }
  *{ scroll-behavior:auto !important; }
}