/* ══════════════════════════════════════════════════════════════════════
   gallery.hydrosmp.com — one long photo history, Hydro /new design system
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:        #08090f;
  --surface:   #0c0e16;
  --surface-2: #10131d;
  /* Gallery palette (Sep 2026): warm pink + orange instead of the main site's blue → purple.
     The token NAMES are kept so the shared nav/footer/component CSS matches hydrosmp.com line for line;
     only the values differ.  --blue = orange, --pink = hot pink, --purple = raspberry. */
  --blue:      #ff8a3d;
  --orange-2:  #ffb15c;   /* lighter orange for gradient bodies */
  --pink:      #ff6fb5;
  --purple:    #ff3d7f;
  --sky:       #5bbfff;   /* the logo's light blue — used sparingly as a cool note */
  --green:     #1bd96a;
  --amber:     #f59e0b;
  --amber-2:   #fcd34d;
  --text:      #f3f5f8;
  --text-2:    #c4cad6;
  --muted:     #6b7280;
  --muted-2:   #8b93a3;
  --border:    rgba(255,255,255,0.08);
  --border-hv: rgba(255,255,255,0.16);
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --display: 'Lato', 'Inter', -apple-system, 'Segoe UI', sans-serif;   /* headings (gallery only, Sep 2026). Lato is static: 400 + 700 only */
  --mono: 'JetBrains Mono', monospace;

  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:16px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  --ease: cubic-bezier(0.45,0.05,0.55,0.95);
  --nav-h: 76px;
  --tl-h: 48px;            /* sticky timeline bar */
  --col: 1216px;           /* content column; widens on large screens (see below) */

  /* legacy aliases (manage page) */
  --surface2: var(--surface-2); --border-h: var(--border-hv); --radius: var(--r-lg); --radius-lg: 10px;
}

@media (min-width:1500px){ :root{ --col:1400px; } }
@media (min-width:1900px){ :root{ --col:1560px; } }

/* ── Primitives ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; }
img{ max-width:100%; display:block; }  a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }  button{ font:inherit; cursor:pointer; color:inherit; }
::selection{ background:rgba(255,138,61,0.28); color:#fff; }
.hidden{ display:none !important; }
.page{ position:relative; z-index:1; }

.wrap{ max-width:var(--col); margin:0 auto; padding-inline:var(--s-7); }
@media (max-width:680px){ .wrap{ padding-inline:var(--s-5); } }

.section-border{ position:relative; }
.section-border::before{ content:''; position:absolute; top:0; height:1px; pointer-events:none;
  left:max(0px, calc(50% - var(--col)/2 - 60px)); right:max(0px, calc(50% - var(--col)/2 - 60px)); background:var(--border); }
@media (max-width:900px){ .section-border::before{ left:0; right:0; } }

.page-rule{ position:fixed; top:0; bottom:0; width:1px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--border) 6%, var(--border) 94%, transparent 100%); }
.page-rule.l{ left:max(0px, calc(50% - var(--col)/2 - 60px)); }
.page-rule.r{ right:max(0px, calc(50% - var(--col)/2 - 60px)); }
@media (max-width:900px){ .page-rule{ display:none; } }

.eyebrow{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; margin-bottom:var(--s-4); }
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:1px; background:var(--blue); }
.eyebrow.pink::before{ background:var(--pink); }  .eyebrow.green::before{ background:var(--green); }
.eyebrow span{ color:var(--text-2); }

.h1,.h2{ font-family:var(--display); font-weight:400; letter-spacing:0; line-height:1.08; color:var(--text); }
.h1{ font-size:clamp(2.2rem, 1.2rem + 4vw, 4rem); max-width:760px; }
.h2{ font-size:clamp(1.75rem, 1.1rem + 2.6vw, 3rem); max-width:680px; }
.h1 b,.h2 b{ font-weight:700; }
.acc{ background:linear-gradient(120deg,var(--blue) 0%,var(--orange-2) 45%,var(--pink) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lede{ font-size:17px; line-height:1.65; color:var(--muted-2); max-width:560px; margin-top:var(--s-4); font-weight:400; }

.sr{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.sr.in{ opacity:1; transform:translateY(0); }
.sr.d1{ transition-delay:.08s; } .sr.d2{ transition-delay:.16s; } .sr.d3{ transition-delay:.24s; }

/* ── Buttons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding-inline:24px; border-radius:var(--r-sm);
  font-size:15px; font-weight:600; white-space:nowrap; border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease), filter .18s var(--ease); }
.btn-primary{ background:var(--text); color:#08090f; }
.btn-primary:hover{ background:#fff; transform:translateY(-1px); }
.btn-ghost{ color:var(--text-2); border-color:var(--border); background:rgba(255,255,255,0.02); }
.btn-ghost:hover{ color:var(--text); border-color:var(--border-hv); background:rgba(255,255,255,0.05); }
.btn-danger{ color:#f87171; border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.08); }
.btn-danger:hover{ background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.5); }
.btn-sm{ height:40px; padding-inline:18px; font-size:14px; }
.btn-xs{ height:34px; padding-inline:14px; font-size:13px; }
.btn svg{ width:14px; height:14px; }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }
.btn-discord{ background:linear-gradient(115deg,#3a4fca 0%,#6d28d9 100%); color:#fff !important; border:none; }
.btn-discord:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-discord svg{ width:18px; height:18px; fill:currentColor; }
.btn-donate{ background:linear-gradient(120deg,var(--amber-2),var(--amber)); color:#08090f !important; font-weight:700; border:none; }
.btn-donate:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-donate svg{ width:15px; height:15px; fill:currentColor; }
.link-btn{ background:none; border:none; color:var(--blue); cursor:pointer; font:inherit; text-decoration:underline; }
kbd{ font-family:var(--mono); font-size:10.5px; padding:2px 6px; border-radius:var(--r-sm); border:1px solid var(--border-hv); background:rgba(255,255,255,0.05); color:var(--muted-2); line-height:1; }

/* ── Aurora ── */
.hero-aurora{ position:absolute; top:0; left:0; right:0; height:640px; z-index:0; pointer-events:none; overflow:hidden; }
.hero-aurora b{ position:absolute; border-radius:50%; filter:blur(96px); opacity:0.45; will-change:transform; }
.hero-aurora b:nth-child(1){ width:680px; height:680px; top:-220px; left:-80px; opacity:.6; background:radial-gradient(circle,var(--blue),transparent 68%); animation:aurA 22s ease-in-out infinite; }
.hero-aurora b:nth-child(2){ width:500px; height:500px; top:-150px; left:42%; background:radial-gradient(circle,var(--pink),transparent 68%); animation:aurB 27s ease-in-out infinite; }
.hero-aurora b:nth-child(3){ width:480px; height:480px; top:-220px; right:-60px; opacity:.32; background:radial-gradient(circle,var(--sky),transparent 68%); animation:aurC 24s ease-in-out infinite; }
@keyframes aurA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(120px,50px) scale(1.12); } }
@keyframes aurB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-100px,60px) scale(1.08); } }
@keyframes aurC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-70px,40px) scale(1.12); } }

/* ── GLOBAL NAV (#gnav) — port of the /new topnav ── */
nav#gnav{ position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center; color:var(--text); font-family:var(--sans);
  background:transparent; border-bottom:1px solid transparent; transition:background .24s var(--ease), border-color .24s var(--ease); }
nav#gnav.scrolled{ background:rgba(8,9,15,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--border); }
#gnav .gnav-row{ width:100%; margin:0 auto; padding-inline:max(20px, calc(50% - var(--col)/2 - 42px)); display:flex; align-items:center; gap:40px; }
#gnav .nav-logo{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-0.01em; flex-shrink:0; }
#gnav .nav-logo img{ width:38px; height:38px; border-radius:9px; }
#gnav .nav-links{ display:flex; align-items:center; gap:32px; flex:1; }
#gnav .nav-link{ position:relative; font-size:14px; font-weight:500; color:var(--muted-2); display:flex; align-items:center; gap:5px; padding:8px 0; transition:color .16s var(--ease); background:none; border:none; }
#gnav .nav-link:hover,#gnav .nav-link.active{ color:var(--text); }
#gnav .nav-link svg{ width:11px; height:11px; transition:transform .2s var(--ease); }
#gnav .nav-item{ position:relative; }
#gnav .nav-item.open .nav-link svg{ transform:rotate(180deg); }
#gnav .nav-panel{ position:fixed; top:var(--nav-h); left:max(32px, calc(50vw - var(--col)/2)); right:auto;
  padding-top:10px; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease); z-index:1001; }
#gnav .nav-item.open .nav-panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
#gnav .nav-panel-card{ background:#0d0f1a; border:1px solid rgba(255,255,255,0.08); border-radius:14px;
  box-shadow:0 24px 72px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03); padding:12px; display:grid; gap:2px 10px; width:600px; max-width:calc(100vw - 64px); grid-template-columns:1fr 1fr; align-items:start; }
#gnav .mega-col-hd{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:12px 14px 6px; display:block; }
#gnav .nav-panel a{ display:flex; align-items:center; gap:15px; padding:13px 14px; border-radius:9px; transition:background .13s var(--ease); }
#gnav .nav-panel a:hover{ background:rgba(255,255,255,0.06); }
#gnav .nav-panel-ico{ width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(255,138,61,0.1); flex-shrink:0; }
#gnav .nav-panel-ico .mc-ico{ width:24px; height:24px; image-rendering:pixelated; }
#gnav .nav-panel-ico .mc-ico.iso{ width:32px; height:32px; margin:-4px 0; image-rendering:auto; }
#gnav .nav-panel-ttl{ font-size:14.5px; font-weight:600; color:var(--text); display:block; margin-bottom:2px; }
#gnav .nav-panel-sub{ font-size:12.5px; color:var(--muted); line-height:1.35; display:block; }
#gnav .nav-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; }
#gnav .nav-status-pill{ display:inline-flex; align-items:center; gap:8px; flex-shrink:0; padding:6px 12px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--muted-2); background:rgba(255,255,255,0.03); border:1px solid var(--border); transition:border-color .16s var(--ease), color .16s var(--ease); }
#gnav .nav-status-pill:hover{ border-color:var(--border-hv); color:var(--text); }
#gnav .nav-status-pill .nsp-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); position:relative; flex-shrink:0; }
#gnav .nav-status-pill.online .nsp-dot{ background:var(--green); }
#gnav .nav-status-pill.online .nsp-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--green); animation:gnspulse 2s var(--ease) infinite; }
#gnav .nav-status-pill.offline .nsp-dot{ background:#ef4444; }
#gnav .nav-status-pill .nsp-txt strong{ color:var(--text); }
@keyframes gnspulse{ 0%{ transform:scale(0.7); opacity:1; } 100%{ transform:scale(1.8); opacity:0; } }
/* signed-in user chip */
#gnav #navAuth{ display:flex; align-items:center; gap:8px; }
.user-chip{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px 0 4px; border-radius:99px; border:1px solid var(--border); background:rgba(255,255,255,0.03); font-size:13px; font-weight:500; color:var(--text-2); }
.user-chip img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.user-chip .uc-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .uc-out{ background:none; border:none; padding:0 0 0 6px; margin-left:2px; border-left:1px solid var(--border); color:var(--muted); font-size:12.5px; }
.user-chip .uc-out:hover{ color:var(--text); }
.nav-pill-link{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:99px; border:1px solid var(--border); font-size:13px; font-weight:500; color:var(--text-2); background:rgba(255,255,255,0.03); transition:border-color .16s var(--ease), color .16s var(--ease); }
.nav-pill-link:hover{ color:var(--text); border-color:var(--border-hv); }
.nav-pill-link.staff{ color:var(--pink); border-color:rgba(255,111,181,0.3); }

/* burger + mobile drawer */
#gnav .nav-burger{ display:none; width:44px; height:44px; flex-shrink:0; align-items:center; justify-content:center;
  border:1px solid var(--border); background:rgba(255,255,255,0.03); border-radius:8px; color:var(--text);
  -webkit-tap-highlight-color:transparent; transition:border-color .16s var(--ease), background .16s var(--ease); }
#gnav .nav-burger:hover{ border-color:var(--border-hv); background:rgba(255,255,255,0.06); }
#gnav .nav-burger svg{ width:22px; height:22px; }
#gnav .nav-burger .ico-close{ display:none; }
body.nav-open #gnav .nav-burger .ico-open{ display:none; }
body.nav-open #gnav .nav-burger .ico-close{ display:block; }
body.nav-open{ overflow:hidden; }
.mobile-backdrop{ position:fixed; inset:0; z-index:1090; background:rgba(4,5,10,0.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .28s var(--ease); }
body.nav-open .mobile-backdrop{ opacity:1; pointer-events:auto; }
.mobile-menu{ position:fixed; top:0; right:0; bottom:0; z-index:1095; width:min(370px,86vw); display:flex; flex-direction:column; gap:2px;
  padding:calc(var(--nav-h) + 8px) max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 20px;
  background:#0b0d15; border-left:1px solid var(--border); box-shadow:-24px 0 64px rgba(0,0,0,0.55);
  transform:translateX(102%); visibility:hidden; overflow-y:auto; overscroll-behavior:contain;
  transition:transform .3s var(--ease), visibility .3s var(--ease); }
body.nav-open .mobile-menu{ transform:translateX(0); visibility:visible; }
.mobile-menu .mm-status{ display:flex; align-items:center; gap:9px; padding:11px 12px; margin-bottom:8px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,0.02); font-size:13.5px; font-weight:500; color:var(--muted); }
.mobile-menu .mm-status .nsp-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.mobile-menu .mm-status.online .nsp-dot{ background:var(--green); box-shadow:0 0 8px var(--green); }
.mobile-menu .mm-status.offline .nsp-dot{ background:#ef4444; }
.mobile-menu .mm-status .nsp-txt strong{ color:var(--text); }
.mm-sec-hd{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:0 12px; margin:16px 0 4px; }
.mm-link{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:9px; font-size:15px; font-weight:500; color:var(--text); transition:background .13s var(--ease); }
.mm-link:hover,.mm-link:active{ background:rgba(255,255,255,0.055); }
.mm-link .mm-ico{ width:26px; height:26px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,138,61,0.1); }
.mm-link .mm-ico img{ width:18px; height:18px; }
.mm-link .mm-ico img.iso{ width:24px; height:24px; }
.mm-link span>b{ display:block; font-weight:500; }
.mm-link .mm-sub{ display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:1px; }
.mm-divider{ height:1px; background:var(--border); margin:16px 12px; }
.mm-cta{ display:flex; flex-direction:column; gap:12px; margin-top:20px; padding:0 4px; }
.mm-cta .btn{ width:100%; }
@media (min-width:1101px){ .mobile-menu,.mobile-backdrop{ display:none; } }
@media (max-width:1100px){
  #gnav .nav-links,#gnav .nav-status-pill,#gnav .btn-donate{ display:none; }
  #gnav .nav-burger{ display:inline-flex; }
  #gnav .gnav-row{ gap:16px; }
}
@media (max-width:640px){ #gnav .btn-discord{ display:none; } .user-chip .uc-name{ display:none; } }

/* ── Hero ── */
.hero{ position:relative; z-index:1; padding:calc(var(--nav-h) + var(--s-11)) 0 var(--s-9); }
.hero-cta{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-7); align-items:center; }
.hero-note{ font-size:13px; color:var(--muted); }
.hero-stats{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin-top:var(--s-7); font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.hero-stats b{ color:var(--text-2); font-weight:500; }
.hero-stats span::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:1px; background:var(--blue); margin-right:8px; vertical-align:2px; }
.hero-stats span:nth-child(2)::before{ background:var(--pink); }
.hero-stats span:nth-child(3)::before{ background:var(--sky); }
.hero-stats span:nth-child(4)::before{ background:var(--amber); }

/* ── Sticky timeline bar ── */
.timeline{ position:sticky; top:var(--nav-h); z-index:900; height:var(--tl-h); margin-top:var(--s-6);
  background:rgba(8,9,15,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.timeline .wrap{ height:100%; display:flex; align-items:center; gap:var(--s-4); }
.tl-season{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-2); white-space:nowrap; }
.tl-season .short{ display:none; }
.tl-season i{ width:6px; height:6px; border-radius:1px; background:linear-gradient(120deg,var(--sky),var(--pink)); }
.tl-sep{ width:1px; height:18px; background:var(--border-hv); }
.tl-month{ font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--text); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tl-month small{ font-weight:400; color:var(--muted); margin-left:8px; font-size:12.5px; }
.tl-right{ margin-left:auto; display:flex; align-items:center; gap:var(--s-2); }
.tl-top{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:rgba(255,255,255,0.02); font-size:12.5px; color:var(--muted-2); transition:color .16s var(--ease), border-color .16s var(--ease); }
.tl-top:hover{ color:var(--text); border-color:var(--border-hv); }
.tl-top svg{ width:12px; height:12px; }
.select{ height:32px; background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text-2); font-family:var(--sans); font-size:12.5px; font-weight:500; padding:0 30px 0 10px; border-radius:var(--r-sm); cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; transition:border-color .16s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b93a3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; max-width:200px; }
.select:hover,.select:focus{ border-color:var(--border-hv); color:var(--text); }
.select option,.select optgroup{ background:#0d0f1a; color:var(--text); }
@media (max-width:680px){
  .tl-season .full{ display:none; } .tl-season .short{ display:inline; }
  .tl-month small{ display:none; }
  .tl-top{ display:none; }
  .select{ max-width:150px; }
}

/* ── Feed ── */
.feed-wrap{ padding-top:var(--s-8); padding-bottom:var(--s-10); }
.season-bar{ position:relative; display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; padding:var(--s-6) 0 var(--s-4); margin-top:var(--s-9); }
.season-bar:first-child{ margin-top:0; }
.season-bar::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,var(--blue) 0%,var(--orange-2) 30%,var(--pink) 60%,transparent 85%); opacity:.75; }
.season-num{ font-family:var(--display); font-weight:400; letter-spacing:0; font-size:clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height:1; }
.season-num b{ font-weight:700; }
.season-meta{ display:flex; flex-direction:column; gap:3px; }
.season-name{ font-size:14px; font-weight:600; color:var(--text-2); }
.season-sub{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.season-bar .badge{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(245,158,11,0.3); background:rgba(245,158,11,0.08); padding:4px 10px; border-radius:99px; }
.season-bar .badge i{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); }

.month-bar{ display:flex; align-items:center; gap:var(--s-4); margin:var(--s-8) 0 var(--s-4); scroll-margin-top:calc(var(--nav-h) + var(--tl-h) + var(--s-4)); }
.month-bar h2{ font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:0; white-space:nowrap; }
.month-bar h2 small{ font-family:var(--mono); font-weight:400; font-size:12px; color:var(--muted); margin-left:10px; letter-spacing:0; }
.month-bar .rule{ flex:1; height:1px; background:var(--border); }
.month-bar .mb-count{ font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; }

.justified{ display:flex; flex-wrap:wrap; gap:var(--jgap, 10px); align-content:flex-start; }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--surface); cursor:zoom-in; flex:0 0 auto;
  border:1px solid var(--border); transition:border-color .2s var(--ease), transform .25s var(--ease); }
.tile img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease), transform .6s var(--ease); }
.tile img.loaded{ opacity:1; }
.tile:hover{ border-color:var(--border-hv); }
.tile:hover img{ transform:scale(1.025); }
.tile-cap{ position:absolute; inset:auto 0 0 0; padding:var(--s-8) var(--s-4) var(--s-3); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3);
  background:linear-gradient(180deg, transparent, rgba(4,5,10,0.82)); opacity:0; transform:translateY(6px); transition:opacity .22s var(--ease), transform .22s var(--ease); pointer-events:none; }
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{ opacity:1; transform:translateY(0); }
.tile-cap b{ font-size:14px; font-weight:600; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.tile-cap .who{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); flex-shrink:0; }
.tile-cap .who img{ width:20px; height:20px; border-radius:50%; opacity:1; border:1px solid var(--border-hv); }
.tile:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (hover:none){ .tile-cap{ opacity:1; transform:none; padding-top:var(--s-6); } }

.skeleton{ border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); position:relative; overflow:hidden; }
.skeleton::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

.feed-status{ display:flex; align-items:center; justify-content:center; gap:var(--s-3); padding:var(--s-9) 0 0; font-family:var(--mono); font-size:12.5px; color:var(--muted); text-align:center; }
.feed-status .spin{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border-hv); border-top-color:var(--blue); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.feed-end{ margin-top:var(--s-10); padding-top:var(--s-7); border-top:1px solid var(--border); text-align:center; }
.feed-end .fe-ttl{ font-family:var(--display); font-weight:400; letter-spacing:0; font-size:clamp(1.4rem, 1rem + 1.6vw, 2rem); }
.feed-end .fe-ttl b{ font-weight:700; }
.feed-end p{ font-size:14px; color:var(--muted-2); margin-top:var(--s-2); }
.feed-end .btn{ margin-top:var(--s-5); }
.feed-end .fe-log{ margin-top:var(--s-5); font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; }
.feed-end .fe-log a{ color:var(--muted); transition:color .16s var(--ease); }
.feed-end .fe-log a:hover{ color:var(--blue); }
.empty-state{ text-align:center; padding:var(--s-11) var(--s-6); }
.empty-icon{ font-size:44px; margin-bottom:var(--s-4); }
.empty-title{ font-family:var(--display); font-size:19px; font-weight:500; margin-bottom:var(--s-2); }
.empty-sub{ font-size:14px; color:var(--muted-2); }

/* ── Lightbox ── */
.lb{ position:fixed; inset:0; z-index:1200; display:grid; grid-template-rows:auto 1fr; grid-template-columns:1fr 360px; grid-template-areas:"top top" "stage info";
  background:rgba(5,6,10,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:fadeIn .18s var(--ease); }
.lb[hidden]{ display:none; }
.lb-top{ grid-area:top; display:flex; align-items:center; gap:var(--s-4); padding:0 var(--s-4) 0 var(--s-5); height:64px; border-bottom:1px solid var(--border); background:rgba(8,9,15,0.6); }
.lb-top-meta{ display:flex; align-items:center; gap:12px; min-width:0; }
.lb-top-meta img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border-hv); flex-shrink:0; }
.lb-top-meta .t{ font-size:15px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-top-meta .s{ font-size:12.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-top-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }
.lb-counter{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-right:var(--s-2); white-space:nowrap; }
.lb-icon-btn{ width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease); }
.lb-icon-btn:hover{ color:var(--text); border-color:var(--border-hv); background:rgba(255,255,255,0.06); }
.lb-icon-btn svg{ width:18px; height:18px; }
.lb-icon-btn.on{ color:var(--blue); border-color:rgba(255,138,61,0.35); background:rgba(255,138,61,0.08); }
.lb-close{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 12px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--text); color:#08090f; font-size:14px; font-weight:600; transition:background .16s var(--ease), transform .16s var(--ease); }
.lb-close:hover{ background:#fff; transform:translateY(-1px); }
.lb-close svg{ width:16px; height:16px; stroke:currentColor; }
.lb-close kbd{ color:#4b5563; border-color:rgba(0,0,0,0.18); background:rgba(0,0,0,0.06); }
.lb-stage{ grid-area:stage; position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:var(--s-5); }
.lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-md); box-shadow:0 20px 80px rgba(0,0,0,0.6); user-select:none; -webkit-user-drag:none; }
.lb-stage img.swap{ animation:lbIn .22s var(--ease); }
@keyframes lbIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid var(--border-hv); background:rgba(8,9,15,0.7); color:var(--text-2); display:flex; align-items:center; justify-content:center; transition:background .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease); z-index:2; }
.lb-nav:hover{ background:rgba(20,22,32,0.95); color:var(--text); }
.lb-nav svg{ width:20px; height:20px; }
.lb-nav.prev{ left:var(--s-4); } .lb-nav.next{ right:var(--s-4); }
.lb-nav:disabled{ opacity:.25; cursor:default; }
.lb-info{ grid-area:info; border-left:1px solid var(--border); background:rgba(8,9,15,0.55); overflow-y:auto; padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-5); }
.lb-info .eyebrow{ margin-bottom:var(--s-2); }
.lb-title{ font-family:var(--display); font-weight:400; letter-spacing:0; font-size:1.7rem; line-height:1.15; }
.lb-tagline{ font-size:14.5px; color:var(--blue); margin-top:var(--s-2); }
.lb-desc{ font-size:14.5px; line-height:1.65; color:var(--muted-2); white-space:pre-line; }
.lb-by{ display:flex; align-items:center; gap:10px; }
.lb-by img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid var(--border-hv); }
.lb-by .n{ font-size:14px; font-weight:600; }
.lb-by .d{ font-size:12.5px; color:var(--muted); font-family:var(--mono); }
.lb-details{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; padding:var(--s-4); border:1px solid var(--border); border-radius:var(--r-md); background:rgba(255,255,255,0.02); }
.lb-details dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); align-self:center; }
.lb-details dd{ font-size:13.5px; color:var(--text-2); font-family:var(--mono); word-break:break-word; }
.lb-actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--border); }
.lb.no-info{ grid-template-columns:1fr; grid-template-areas:"top" "stage"; }
.lb.no-info .lb-info{ display:none; }
@media (max-width:1000px){
  .lb{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; grid-template-areas:"top" "stage" "info"; }
  .lb-info{ border-left:none; border-top:1px solid var(--border); max-height:38vh; padding:var(--s-5); }
  .lb-title{ font-size:1.35rem; }
  .lb-top{ height:60px; padding:0 var(--s-3) 0 var(--s-4); }
  .lb-top-meta img{ display:none; }
  .lb-counter{ display:none; }
  .lb-close kbd{ display:none; }
  .lb-stage{ padding:var(--s-3); }
  .lb-nav{ width:40px; height:40px; top:auto; bottom:var(--s-3); transform:none; }
}

/* ── Modals (upload / edit) ── */
.modal-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(4,5,10,0.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:var(--s-4); overflow-y:auto; }
.modal{ background:#0d0f1a; border:1px solid var(--border-hv); border-radius:14px; width:100%; max-width:580px; animation:scaleIn .2s var(--ease); margin:auto; box-shadow:0 24px 72px rgba(0,0,0,0.7); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:var(--s-6) var(--s-6) 0; }
.modal-title{ font-family:var(--display); font-size:21px; font-weight:400; letter-spacing:0; }
.modal-title b{ font-weight:700; }
.modal-close{ width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--muted-2); display:flex; align-items:center; justify-content:center; transition:border-color .16s var(--ease), color .16s var(--ease); flex-shrink:0; }
.modal-close:hover{ color:var(--text); border-color:var(--border-hv); }
.modal-close svg{ width:16px; height:16px; }
.upload-dropzone{ margin:var(--s-5) var(--s-6); border:1px dashed var(--border-hv); border-radius:var(--r-lg); min-height:160px; display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), background .2s var(--ease); cursor:pointer; overflow:hidden; }
.upload-dropzone:hover,.upload-dropzone.drag-over{ border-color:var(--blue); background:rgba(255,138,61,0.04); }
.dropzone-idle{ text-align:center; padding:var(--s-7); }
.dropzone-icon{ width:44px; height:44px; border-radius:var(--r-sm); background:rgba(255,138,61,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto var(--s-3); }
.dropzone-icon img{ width:26px; height:26px; image-rendering:pixelated; }
.dropzone-text{ font-size:15px; font-weight:500; margin-bottom:4px; }
.dropzone-sub{ font-size:13.5px; color:var(--muted-2); margin-bottom:var(--s-2); }
.dropzone-limit{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.06em; }
.dropzone-files{ width:100%; padding:var(--s-4); cursor:default; }
.file-strip{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; max-height:260px; overflow-y:auto; }
.file-tile{ position:relative; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden; background:#000; border:1px solid var(--border); }
.file-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.file-tile-rm{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,0.7); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s var(--ease), background .15s var(--ease); }
.file-tile:hover .file-tile-rm,.file-tile-rm:focus-visible{ opacity:1; }
.file-tile-rm:hover{ background:#f87171; }
@media (hover:none){ .file-tile-rm{ opacity:1; } }
.file-strip-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3); }
.file-strip-count{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
.form-hint{ font-weight:400; color:var(--muted); font-size:12px; margin-left:6px; }
.modal-form{ padding:0 var(--s-6) var(--s-6); display:flex; flex-direction:column; gap:var(--s-4); }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.form-label{ font-size:12.5px; font-weight:600; color:var(--muted-2); }
.required{ color:var(--pink); }
.modal-actions{ display:flex; justify-content:flex-end; gap:var(--s-2); margin-top:var(--s-1); flex-wrap:wrap; }
.input{ width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text); font-family:var(--sans); font-size:14.5px; padding:10px 13px; border-radius:var(--r-sm); outline:none; transition:border-color .16s var(--ease), background .16s var(--ease); resize:vertical; }
.input:focus{ border-color:rgba(255,138,61,0.5); background:rgba(255,255,255,0.05); }
.input::placeholder{ color:var(--muted); }
@media (max-width:560px){
  .form-row-2{ grid-template-columns:1fr; }
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal{ border-radius:14px 14px 0 0; max-width:none; }
}

/* ── Toast ── */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1400; font-size:13.5px; font-weight:500; background:#13141f; border:1px solid var(--border-hv); padding:11px 20px; border-radius:var(--r-md); box-shadow:0 8px 32px rgba(0,0,0,0.5); animation:toastIn .3s var(--ease); max-width:calc(100vw - 32px); text-align:center; }
.toast.success{ border-color:rgba(27,217,106,0.4); color:var(--green); }
.toast.error{ border-color:rgba(248,113,113,0.4); color:#f87171; }

/* ── Pagination (manage) ── */
.pagination{ display:flex; justify-content:center; gap:6px; margin-top:var(--s-7); flex-wrap:wrap; }
.page-btn{ font-size:13px; font-weight:500; padding:0 14px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,0.02); border:1px solid var(--border); color:var(--muted-2); transition:all .16s var(--ease); }
.page-btn:hover{ color:var(--text); border-color:var(--border-hv); }
.page-btn.active{ background:rgba(255,138,61,0.1); border-color:rgba(255,138,61,0.4); color:var(--blue); }

/* ── Footer (#gfoot) — port of the /new footer ── */
footer#gfoot{ position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--border); padding:80px 0 32px; font-family:var(--sans); color:var(--text); background:var(--bg); }
#gfoot .gfoot-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#gfoot .gfoot-aurora b{ position:absolute; bottom:-120px; width:480px; height:480px; border-radius:50%; filter:blur(90px); opacity:0.5; }
#gfoot .gfoot-aurora b:nth-child(1){ left:2%; background:rgba(255,138,61,0.16); }
#gfoot .gfoot-aurora b:nth-child(2){ left:36%; bottom:-150px; background:rgba(255,111,181,0.16); }
#gfoot .gfoot-aurora b:nth-child(3){ right:3%; background:rgba(91,191,255,0.14); }
#gfoot .wrap{ position:relative; z-index:1; }
#gfoot .foot-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:64px; }
@media (max-width:760px){ #gfoot .foot-top{ grid-template-columns:repeat(2,1fr); } }
#gfoot .foot-brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; margin-bottom:16px; }
#gfoot .foot-brand img{ width:26px; height:26px; border-radius:6px; }
#gfoot .foot-tagline{ font-size:13.5px; color:var(--muted); line-height:1.6; max-width:240px; }
#gfoot .foot-col-ttl{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:16px; }
#gfoot .foot-col ul{ display:flex; flex-direction:column; gap:11px; }
#gfoot .foot-col a{ font-size:13.5px; color:var(--muted-2); transition:color .16s var(--ease); }
#gfoot .foot-col a:hover{ color:var(--text); }
#gfoot .foot-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:12px; }
#gfoot .foot-heart{ color:var(--pink); }

/* ── Animations ── */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(0.97); } to{ opacity:1; transform:scale(1); } }
@keyframes toastIn{ from{ opacity:0; transform:translateX(-50%) translateY(10px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .sr{ opacity:1; transform:none; }
}

/* ── OG card render mode (?og=1) — headless Chromium captures this into /og.jpg for link embeds ── */
body.og{ overflow:hidden; }
body.og #gnav, body.og .mobile-menu, body.og .mobile-backdrop, body.og .timeline, body.og .hero-cta,
body.og .lede, body.og .season-bar, body.og .feed-status, body.og .feed-end, body.og .toast, body.og #gfoot{ display:none !important; }
body.og .hero{ padding:var(--s-8) 0 0; }
body.og .h1{ font-size:52px; max-width:none; }
body.og .hero-stats{ margin-top:var(--s-4); font-size:13px; }
body.og .feed-wrap{ padding-top:0; }
body.og .month-bar{ margin:var(--s-5) 0 var(--s-3); }
body.og .sr{ opacity:1 !important; transform:none !important; transition:none !important; }
body.og .hero-aurora b{ animation:none !important; }
body.og img{ transition:none !important; }