/* season2-index.css - Seasonal Sheets at /seasonal-sheets/ (evergreen slug, seasonal title).

   SURFACES FOLLOW THE VIEWER'S THEME (owner directive 2026-08-14, lane
   s2-polish): the background / panel / text / border tokens below are var()
   aliases of style.min.css's own theme tokens, so the hub reads like the rest
   of Styka Sheets under whichever theme the viewer picked. The ACCENT layer
   follows it too (owner ruling, same day: "just follow styka sheets theme") -
   the venom chartreuse and Amani gold families are both retired, so card
   hovers, chips and focus rings take the site's own accent tokens. What is left
   of the Ula'tek identity is the Fraunces display face and the layout. The one
   decorative venom aurora wash is DELETED (background, not control), CSS and
   markup both.

   CHROME NEUTRALITY (the rule every S2 page follows since the 2026-08-14
   framed-chrome conversion): every page token is declared on .s2page - the
   page's own content wrapper inside .shell-scroll - and NOWHERE on :root /
   body. That is load-bearing: the shared top bar and its Battle.net auth chrome
   read --accent / --bg-* / --text-* from style.min.css's own :root, so a token
   re-declared on body would tint the SHARED header venom. Every bare element
   selector below is .s2page-prefixed for the same reason. */
.s2page{
  /* Surfaces / text / borders alias the SITE theme tokens (style-parts/
     01-themes.css :root); the token NAMES are unchanged, so every rule below is
     untouched. */
  --bg:var(--bg-body); --bg2:var(--bg-input); --panel:var(--bg-card); --panel2:var(--bg-input);
  --line:var(--border-primary); --line2:var(--border-secondary);
  --ink:var(--text-primary); --muted:var(--text-secondary); --faint:var(--text-muted);
  /* THE ACCENT LAYER FOLLOWS THE THEME TOO (owner ruling 2026-08-14: "just
     follow styka sheets theme", superseding "controls stay Ula'tek green").
     Venom AND Amani gold are retired; both collapse onto the site's own accent
     pair, with tints derived via color-mix where no site token fits. The token
     NAMES are kept so the rules below are untouched. --accent / --accent2 are
     NOT redeclared here: the page INHERITS them from :root, and a
     self-referential "--accent:var(--accent)" would be an invalid CSS cycle. */
  --accentdim:color-mix(in srgb, var(--accent) 12%, transparent);
  --glow:var(--accent-glow);
  --gold:var(--accent); --gold2:var(--accent2);
  --golddim:color-mix(in srgb, var(--accent) 13%, transparent);
  --link:var(--text-link);

  --radius:14px;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
}
.s2page,
.s2page *{box-sizing:border-box;}
.s2page{
  position:relative;
  /* Own stacking context is KEPT even though the aurora layer it was written
     for is gone: it is the guarantee that nothing on this page can ever paint
     upward past the shell into the top bar or the theme gutters. */
  isolation:isolate;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:"Figtree", "DM Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.s2page a{color:var(--link); text-decoration:none;}
.s2page :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* The one decorative venom aurora wash is GONE (2026-08-14) - background, not
   control, and it fought the theme surfaces the tokens above now follow. Its
   .aurora div was removed from season2-index.php in the same pass. */

.s2hub .wrap{max-width:1120px; margin:0 auto; padding:34px 22px 52px;}

/* ---------- hero ---------- */
.s2hub .titleblock{margin:0 0 30px;}
.s2hub .hero-eyebrow{
  color:var(--accent); font-size:11px; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase;
}
.s2hub .hero-eyebrow .dot{color:var(--faint); margin:0 2px;}
.s2hub .patchname{
  font-family:var(--display); font-size:15px; font-style:italic;
  color:var(--gold); margin-top:5px; letter-spacing:.3px;
}
.s2hub h1{
  font-family:var(--display);
  font-size:clamp(30px, 5vw, 48px);
  line-height:1.08; font-weight:700;
  margin:9px 0 0; color:var(--text-primary); letter-spacing:-.5px;
}
.s2hub h1 .accent{color:var(--accent);}
.s2hub .sub{
  margin:13px 0 0; max-width:78ch;
  color:var(--muted); font-size:14.5px; line-height:1.62;
}
.s2hub .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px;}
.s2hub .chip{
  border:1px solid var(--line); background:var(--panel2);
  border-radius:999px; padding:4px 11px;
  font-size:11.5px; color:var(--faint); white-space:nowrap;
}
.s2hub .chip b{color:var(--ink); font-weight:600;}

/* ---------- the card deck ---------- */
.s2grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
}
.s2card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  padding:17px 18px 14px;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.s2card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--accent2), color-mix(in srgb, var(--accent) 50%, transparent));
  opacity:.5;
}
.s2card:hover{
  border-color:var(--line2);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
.s2card:hover::before{opacity:1;}
.s2num{
  font-family:var(--display);
  font-size:13px; font-weight:700;
  color:var(--gold); opacity:.75;
  letter-spacing:.5px; margin-bottom:5px;
}
.s2title{margin:0; font-size:19px; line-height:1.25; font-weight:700;}
.s2page a.s2link{color:var(--text-primary);}
.s2page a.s2link:hover{color:var(--accent);}
.s2desc{
  margin:8px 0 0; color:var(--muted);
  font-size:13.2px; line-height:1.55; flex:1;
}
.s2meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:13px;}
.s2chip{
  border:1px solid var(--line2); background:var(--accentdim);
  border-radius:6px; padding:3px 9px;
  font-size:11.5px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.s2date{font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums;}
.s2foot{
  display:flex; align-items:center; gap:14px;
  margin-top:13px; padding-top:11px;
  border-top:1px solid var(--line);
}
.s2page a.s2open{color:var(--accent); font-size:12.5px; font-weight:700; letter-spacing:.2px;}
.s2open .arr{margin-left:6px;}
.s2page a.s2open:hover{color:#c4f57a;}
.s2page a.s2txt{color:var(--faint); font-size:11.5px;}
.s2page a.s2txt:hover{color:var(--muted);}

@media (max-width:560px){
  .s2grid{grid-template-columns:1fr;}
  .s2hub .wrap{padding:26px 16px 44px;}
}