/* ==========================================================================
   烛枫公会 · 招新站  —  暗色高级感设计系统
   candle amber × maple orange on charcoal
   ========================================================================== */

/* ---------- Fonts (subset woffs from original site) ---------- */
@font-face{
  font-family:'Juejiang Hei';
  src:url('../fonts/7c230acec00e1a9ee8a2373cb81b46ae.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DianHei';
  src:url('../fonts/f1baa8b4081cb2eccc64d7779fd4f6e1.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DianHei';
  src:url('../fonts/3fe3c9ecf91e4d076d5874dbad286b23.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DianHei';
  src:url('../fonts/5e45f58510179697975ae5f6621a7a93.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/834f64ff415fb8f4f5d92d8fd40507e9.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/b07201e0e9fc452103c1c0345b0e7c1d.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/ce227117a9a4f3b60ded95174d6ebb58.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --bg-0:#0a0c10;
  --bg-1:#0f1218;
  --bg-2:#141821;
  --ink:#f2efe8;
  --ink-dim:#c8c4ba;
  --muted:#8d94a0;
  --amber:#ffb35c;
  --maple:#ff7a45;
  --grad:linear-gradient(120deg,#ffd9a0 0%,#ffb35c 45%,#ff7a45 100%);
  --hairline:rgba(255,255,255,.09);
  --glass:rgba(16,19,26,.72);
  --shadow:0 24px 60px -24px rgba(0,0,0,.65);
  --r-lg:20px;
  --r-md:14px;
  --font-display:'Juejiang Hei','DianHei','Microsoft YaHei',sans-serif;
  --font-head:'DianHei','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'DM Sans','Arimo','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:#1a1206}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:#2a2f3a;border-radius:6px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}

.container{width:min(1180px,92vw);margin-inline:auto}
.section{padding:clamp(96px,13vh,170px) 0;position:relative}
main section[id]{scroll-margin-top:64px}

/* ---------- Reading grain ---------- */
body::after{ /* subtle vignette texture over everything */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(1200px 600px at 85% -5%,rgba(255,179,92,.05),transparent 60%),
    radial-gradient(900px 500px at 0% 40%,rgba(255,122,69,.03),transparent 60%);
  mix-blend-mode:screen;
}

/* ==========================================================================
   Progress bar
   ========================================================================== */
.progress-bar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,44px);
  transition:transform .5s var(--ease),background .4s,box-shadow .4s,padding .4s;
}
.nav.is-scrolled{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--hairline),0 18px 40px -28px rgba(0,0,0,.8);
  padding-block:10px;
}
.nav.is-hidden{transform:translateY(-110%)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-mark{
  width:40px;height:40px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,179,92,.4),0 6px 18px -6px rgba(0,0,0,.7),0 0 22px -4px rgba(255,179,92,.35);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.nav-logo:hover .nav-logo-mark{
  transform:rotate(-8deg) scale(1.07);
  box-shadow:0 0 0 1.5px var(--amber),0 10px 26px -8px rgba(0,0,0,.7),0 0 30px -2px rgba(255,179,92,.55);
}
.nav-logo-text{
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.14em;
}
.nav-links{display:flex;gap:clamp(14px,2.6vw,34px)}
.nav-link{
  position:relative;font-size:14px;letter-spacing:.12em;color:var(--ink-dim);
  padding:6px 2px;transition:color .3s;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease);
}
.nav-link:hover,.nav-link.is-active{color:var(--ink)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);transform-origin:0 50%}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.35s var(--ease)}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-burger{display:flex}
  .nav-links{
    position:fixed;inset:0 0 auto 0;top:0;padding:96px clamp(24px,7vw,44px) 40px;
    flex-direction:column;gap:8px;
    background:rgba(10,12,16,.96);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    transform:translateY(-102%);transition:transform .55s var(--ease);
    border-bottom:1px solid var(--hairline);
  }
  .nav-links.is-open{transform:translateY(0)}
  .nav-link{font-size:20px;padding:12px 2px}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translateY(-1.5%)}}
.hero-shade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,12,16,.62) 0%,rgba(10,12,16,.18) 34%,rgba(10,12,16,.55) 72%,var(--bg-0) 100%),
    radial-gradient(90% 70% at 24% 62%,rgba(10,12,16,.42),transparent 70%);
}
.hero-embers{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:2;padding-top:9vh}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.42em;color:var(--amber);
  text-transform:uppercase;margin-bottom:clamp(14px,2.4vh,26px);
  animation:rise 1s var(--ease) .25s backwards;
}
.hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--maple);box-shadow:0 0 12px var(--maple);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(4.6rem,13.5vw,10.5rem);
  line-height:1.02;letter-spacing:.02em;
  margin-left:-.04em;
}
.hero-title .ch{
  display:inline-block;
  animation:chIn 1.15s var(--ease) calc(.35s + var(--i)*.09s) backwards;
  text-shadow:0 0 60px rgba(255,179,92,.0);
  transition:text-shadow 1.2s ease .2s;
}
.hero.is-lit .hero-title .ch{text-shadow:0 6px 80px rgba(255,179,92,.28)}
@keyframes chIn{
  from{opacity:0;transform:translateY(.55em) rotate(4deg) scale(.94);filter:blur(14px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.hero-sub{
  margin-top:clamp(18px,3vh,30px);max-width:34em;
  color:var(--ink-dim);font-size:clamp(15px,1.6vw,18px);letter-spacing:.06em;
  animation:rise 1s var(--ease) .85s backwards;
}
.hero-actions{display:flex;gap:16px;margin-top:clamp(26px,4.5vh,44px);animation:rise 1s var(--ease) 1s backwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.hero-credit{
  position:absolute;left:clamp(18px,4vw,44px);bottom:22px;z-index:2;
  font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.55);
  animation:rise 1s var(--ease) 1.25s backwards;
}
.scroll-cue{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:rise 1s var(--ease) 1.35s backwards;
}
.scroll-cue-track{
  width:22px;height:36px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;
  display:flex;justify-content:center;padding-top:6px;
}
.scroll-cue-dot{width:4px;height:8px;border-radius:3px;background:var(--amber);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.scroll-cue-label{font-size:11px;letter-spacing:.4em;color:rgba(255,255,255,.6)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 34px;border-radius:999px;overflow:hidden;
  font-size:15px;letter-spacing:.18em;font-weight:500;
  transition:transform .35s var(--ease),box-shadow .35s,color .3s;
  isolation:isolate;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-solid{color:#1c1206;background:var(--grad);background-size:150% 150%;box-shadow:0 14px 34px -12px rgba(255,150,70,.55)}
.btn-solid::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,#ff7a45,#ffd9a0);opacity:0;transition:opacity .4s;
}
.btn-solid:hover{box-shadow:0 20px 44px -12px rgba(255,150,70,.7)}
.btn-solid:hover::after{opacity:1}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost::before{
  content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.1);
  transform:translateX(-101%);transition:transform .45s var(--ease);
}
.btn-ghost:hover::before{transform:translateX(0)}
.btn-lg{padding:18px 52px;font-size:17px}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  border-block:1px solid var(--hairline);
  padding:18px 0;overflow:hidden;position:relative;
  background:linear-gradient(90deg,rgba(255,179,92,.04),transparent 30%,transparent 70%,rgba(255,122,69,.04));
}
.marquee-track{display:flex;gap:38px;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--font-head);font-weight:500;font-size:15px;letter-spacing:.34em;
  color:var(--muted);white-space:nowrap;transition:color .3s;
}
.marquee-track span:hover{color:var(--amber)}
.marquee-track i{color:var(--maple);font-style:normal;font-size:12px;line-height:2}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   Section head pattern
   ========================================================================== */
.section-head{display:flex;align-items:flex-end;gap:clamp(18px,3vw,34px);margin-bottom:clamp(40px,7vh,72px)}
.section-index{
  font-family:'DM Sans','Arimo',sans-serif;font-weight:700;
  font-size:clamp(3.4rem,7vw,5.6rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(255,179,92,.4);
}
.section-label{font-size:12px;letter-spacing:.5em;color:var(--amber);text-transform:uppercase;margin-bottom:8px}
.section-title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:.06em;line-height:1.15;
}

/* ==========================================================================
   Reveal system
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(30px);filter:blur(5px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none;filter:blur(0)}

/* image mask reveal — cover panel slides away (clip-path would zero the
   intersection box and never trigger IntersectionObserver) */
.img-reveal{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.img-reveal::after{
  content:'';position:absolute;inset:-1px;z-index:3;
  background:linear-gradient(120deg,#171b24,#10131a);
  transform:translateX(0);
  transition:transform 1.15s var(--ease) var(--d,0s);
}
.img-reveal.is-in::after{transform:translateX(102%)}
.img-reveal img{transform:scale(1.14);transition:transform 1.6s var(--ease) var(--d,0s)}
.img-reveal.is-in img{transform:scale(1)}

/* ==========================================================================
   About
   ========================================================================== */
.about{background:linear-gradient(180deg,var(--bg-0),var(--bg-1) 60%,var(--bg-0))}
.about-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.about-media{
  position:relative;border-radius:var(--r-lg);box-shadow:var(--shadow);
}
.about-media img{width:100%;aspect-ratio:16/9.6;object-fit:cover}
.about-media figcaption{
  position:absolute;right:14px;bottom:12px;
  font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.85);
  padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.about-lead{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.6;margin-bottom:14px;
}
.about-line{color:var(--ink-dim);font-size:clamp(15px,1.5vw,17px);letter-spacing:.04em}
.about-servers{margin-top:30px;padding-top:22px;border-top:1px solid var(--hairline)}
.about-servers-label{font-size:12px;letter-spacing:.4em;color:var(--amber);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:9px 20px;border-radius:999px;font-size:14px;letter-spacing:.1em;color:var(--ink-dim);
  border:1px solid var(--hairline);background:rgba(255,255,255,.03);
  transition:.35s var(--ease);
}
.chip:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(255,179,92,.5)}

.stats{
  margin-top:clamp(44px,8vh,80px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  border-block:1px solid var(--hairline);padding:clamp(28px,5vh,44px) 0;
}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--hairline)}
.stat-num{
  font-family:'DM Sans','Arimo','DianHei',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-num em{font-style:normal;font-size:.6em;vertical-align:.35em;margin-left:2px}
.stat-num .stat-date{font-size:.62em;letter-spacing:.04em}
.stat-num .stat-date i{font-style:normal;opacity:.8;padding:0 .06em}
.stat-label{margin-top:10px;font-size:13px;letter-spacing:.3em;color:var(--muted)}
.about-foot{margin-top:26px;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.14em}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:26px}
  .stat+.stat::before{left:25%;right:25%;top:50%;bottom:auto;width:auto;height:1px;transform:translateY(-50%)}
}

/* ==========================================================================
   Videos
   ========================================================================== */
.promo{background:var(--bg-1)}
.video-card{max-width:960px;margin-inline:auto}
.video-card--wide{max-width:1100px;margin-top:clamp(48px,9vh,96px)}
.video-cover{
  position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);border:1px solid var(--hairline);
  transform:translateZ(0);
}
.video-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.2s var(--ease)}
.video-card:hover .video-cover img{transform:scale(1.045)}
.video-veil{
  position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 45%,transparent 40%,rgba(10,12,16,.55) 100%),
             linear-gradient(180deg,transparent 55%,rgba(10,12,16,.75));
}
.video-badge{
  position:absolute;left:20px;top:18px;
  font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.22em;
  color:var(--ink);padding:8px 16px;border-radius:999px;
  background:rgba(10,12,16,.55);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--ink);transition:transform .45s var(--ease),color .3s;
}
.video-play .play-ring{opacity:.85;transition:.4s}
.video-play .play-tri{opacity:.92;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.video-cover:hover .video-play{transform:translate(-50%,-50%) scale(1.12);color:var(--amber)}
.video-cover:hover .play-ring{opacity:1;stroke-dasharray:214;stroke-dashoffset:214;animation:ringSpin 3.2s linear infinite}
@keyframes ringSpin{to{stroke-dashoffset:0}}
.video-cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-credit{margin-top:14px;text-align:center;font-size:12px;letter-spacing:.24em;color:var(--muted)}

/* ==========================================================================
   Showcase galleries
   ========================================================================== */
.showcase{background:var(--bg-0)}
.gallery{display:grid;gap:clamp(14px,2.2vw,26px)}
.g-credit{
  margin-top:18px;font-size:12px;letter-spacing:.3em;color:var(--muted);
}
.g-item{position:relative;overflow:hidden;cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.g-item::after{ /* hover sheen */
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:linear-gradient(115deg,transparent 30%,rgba(255,217,160,.16) 48%,transparent 62%);
  transform:translateX(-30%);pointer-events:none;
}
.g-item:hover img{transform:scale(1.07)}
.g-item:hover::after{opacity:1;transform:translateX(30%);transition:transform .9s var(--ease),opacity .3s}

/* parallelogram trio */
.gallery-para{grid-template-columns:repeat(3,1fr);align-items:stretch}
.gallery-para .g-item{aspect-ratio:3/3.4;filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}
.shape-para{clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
.shape-para img{width:116%;max-width:none;margin-left:-8%}

/* collage */
.collage{
  margin-top:clamp(56px,10vh,110px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,3vw,40px);
  align-items:start;
}
.collage figure{position:relative;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.collage img{width:100%;object-fit:cover;aspect-ratio:16/10}
.collage figcaption{
  position:absolute;right:14px;bottom:12px;font-size:12px;letter-spacing:.18em;
  color:rgba(255,255,255,.85);padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.collage-a{margin-top:clamp(30px,7vh,84px)}
.collage-b{margin-top:0}

/* full-bleed parallax banner */
.banner{
  position:relative;margin:clamp(64px,12vh,130px) 0;overflow:hidden;
  height:clamp(320px,62vh,560px);
}
.banner img{
  position:absolute;left:0;top:-18%;width:100%;height:136%;object-fit:cover;
  will-change:transform;
}
.banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg-0) 0%,transparent 22%,transparent 78%,var(--bg-0) 100%);
}
.banner figcaption{
  position:absolute;right:clamp(18px,4vw,44px);bottom:22px;z-index:2;
  font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.75);
}

/* flags mosaic */
.gallery-flags{grid-template-columns:1fr 1.9fr 1fr;grid-template-rows:auto auto}
.flag-a{aspect-ratio:3/3.6}
.flag-b{aspect-ratio:16/7.4}
.flag-c{aspect-ratio:3/3.6}
.flag-d{grid-column:1/-1;aspect-ratio:16/5.6}
.shape-point-r{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10% 50%)}      /* 简化左凹 */
.shape-point-l{clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%)}
.shape-banner{clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%)}
.shape-diag{clip-path:polygon(0 6%,100% 0,100% 100%,0 100%)}
.gallery-flags .g-item{filter:drop-shadow(0 20px 38px rgba(0,0,0,.45))}
.shape-point-r img,.shape-point-l img,.shape-banner img,.shape-diag img{width:112%;max-width:none}

/* arrow notched rows */
.gallery-arrow2{grid-template-columns:1fr 1fr}
.gallery-arrow3{grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,10vh,100px)}
.gallery-arrow2 .g-item{aspect-ratio:16/9.4}
.gallery-arrow3 .g-item{aspect-ratio:3/3.5}
.shape-notch-r{clip-path:polygon(0 0,100% 0,calc(100% - 9%) 50%,100% 100%,0 100%)}
.gallery-arrow2 .g-item,.gallery-arrow3 .g-item{
  border-radius:0;filter:drop-shadow(0 22px 40px rgba(0,0,0,.45));
  transition:transform .6s var(--ease);
}
.gallery-arrow2 .g-item:hover{transform:translateY(-8px)}
.gallery-arrow3 .g-item:hover{transform:translateY(-8px)}

@media (max-width:900px){
  .gallery-para{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .collage{grid-template-columns:1fr}
  .gallery-flags{grid-template-columns:1fr 1fr}
  .flag-b{grid-column:1/-1}
  .flag-d{grid-column:1/-1;aspect-ratio:16/8}
  .gallery-arrow2,.gallery-arrow3{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}

/* ==========================================================================
   Members
   ========================================================================== */
.members{background:var(--bg-1)}
.member-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.member-card{
  border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  overflow:hidden;transform-style:preserve-3d;
  transition:box-shadow .5s var(--ease),border-color .5s;
  will-change:transform;
}
.member-card:hover{border-color:rgba(255,179,92,.35);box-shadow:0 34px 70px -30px rgba(255,140,60,.35)}
.member-media{overflow:hidden;cursor:zoom-in}
.member-media img{width:100%;aspect-ratio:16/9.6;object-fit:cover;transition:transform 1.1s var(--ease)}
.member-card:hover .member-media img{transform:scale(1.06)}
.member-meta{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:26px 20px 30px;
}
.member-name{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:.1em;
}
.member-arrow{color:var(--amber);opacity:.85;animation:nudge 2.4s ease-in-out infinite}
.member-card--flip .member-arrow{animation-delay:1.2s}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
.member-card--flip .member-arrow{transform:scaleX(1)}
@media (max-width:820px){.member-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto{background:var(--bg-0)}
.manifesto-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.manifesto-title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.35;margin-bottom:26px;
  background:linear-gradient(120deg,#ffe3bd,var(--amber) 40%,var(--maple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.manifesto-text p{
  color:var(--ink-dim);font-size:15.5px;line-height:2;letter-spacing:.03em;
  margin-bottom:14px;text-align:justify;
}
.manifesto-media{position:relative;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.manifesto-media::before{ /* amber aura */
  content:'';position:absolute;inset:-12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,140,60,.16),transparent 70%);
  animation:aura 6s ease-in-out infinite;
}
@keyframes aura{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.manifesto-media img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.manifesto-media figcaption{
  position:absolute;right:14px;bottom:12px;font-size:12px;letter-spacing:.18em;
  color:rgba(255,255,255,.85);padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
@media (max-width:900px){.manifesto-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Join
   ========================================================================== */
.join{
  background:
    radial-gradient(60% 90% at 50% 0%,rgba(255,170,80,.08),transparent 70%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  overflow:hidden;
}
.join-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(900px,90vw);height:min(560px,80vh);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,150,70,.12),transparent 72%);
  animation:aura 7s ease-in-out infinite;
}
.join-inner{position:relative;text-align:center}
.join-title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.9rem,4.8vw,3.6rem);letter-spacing:.06em;line-height:1.3;
}
.join-sub{
  margin-top:16px;font-size:clamp(15px,1.8vw,19px);letter-spacing:.5em;color:var(--amber);
}
.join-grid{
  margin-top:clamp(44px,8vh,80px);
  display:flex;justify-content:center;align-items:center;gap:clamp(36px,7vw,110px);
  flex-wrap:wrap;
}
.qr-card{
  width:min(300px,78vw);padding:22px 22px 26px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--shadow);transform-style:preserve-3d;will-change:transform;
  animation:floaty 5.5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.qr-card img{border-radius:var(--r-md);width:100%}
.qr-label{margin-top:18px;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.16em}
.qr-group{margin-top:6px;font-size:12.5px;letter-spacing:.28em;color:var(--muted)}
.join-cta{display:flex;flex-direction:column;align-items:center;gap:16px}
.join-or{
  width:44px;height:44px;line-height:44px;border-radius:50%;
  border:1px solid var(--hairline);color:var(--muted);font-size:15px;
}
.join-note{font-size:13px;letter-spacing:.2em;color:var(--muted)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{border-top:1px solid var(--hairline);padding:44px 0 52px;background:var(--bg-0)}
.footer .nav-logo-mark{width:34px;height:34px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.footer-line{color:var(--muted);font-size:13.5px;letter-spacing:.1em}
.footer-copy{color:#565d68;font-size:12px;letter-spacing:.3em}
.footer-admin{
  margin-top:4px;color:#3f454f;font-size:11px;letter-spacing:.24em;
  transition:color .3s;
}
.footer-admin:hover{color:var(--amber)}

/* ==========================================================================
   To top
   ========================================================================== */
.to-top{
  position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:90;
  width:52px;height:52px;border-radius:50%;color:var(--ink-dim);
  background:var(--glass);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity .4s,transform .4s var(--ease),color .3s;
}
.to-top.is-show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{color:var(--amber)}
.totop-ring{transition:stroke-dashoffset .1s linear}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(6,8,11,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lb-stage{max-width:92vw;max-height:86vh;position:relative;transform:scale(.92);transition:transform .45s var(--ease)}
.lightbox.is-open .lb-stage{transform:scale(1)}
.lb-stage img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:var(--r-md);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.lb-stage figcaption{
  position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);
  font-size:12.5px;letter-spacing:.24em;color:var(--ink-dim);white-space:nowrap;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;color:var(--ink-dim);font-size:34px;line-height:1;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--hairline);
  transition:.3s;z-index:2;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--amber);border-color:var(--amber)}
.lb-close{top:22px;right:22px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb-prev{left:6px}.lb-next{right:6px}}

/* ==========================================================================
   Custom cursor (fine pointers only, enabled by JS)
   ========================================================================== */
html.custom-cursor,html.custom-cursor *{cursor:none !important}
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  border-radius:50%;opacity:0;will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--amber);box-shadow:0 0 12px rgba(255,179,92,.9)}
.cursor-ring{
  width:34px;height:34px;border:1.5px solid rgba(255,179,92,.5);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .3s,background-color .3s;
}
.cursor-ring.is-hover{width:58px;height:58px;border-color:var(--amber);background:rgba(255,179,92,.1)}
.cursor-ring.is-down{width:24px;height:24px;border-color:#ffd9a0}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .img-reveal::after{display:none}
  .img-reveal img{transform:none}
  .hero-bg img{animation:none}
}