/* WenAltSeason UI (2026-10 redesign): hero, art cards, carousels, newsletter block, mobile menu.
   Loaded on every page after site.css. Colours come from /theme.css tokens only.
   .theme-dark / .theme-light are palette islands: illustrated blocks keep the dark palette in
   both themes, framed as image blocks on paper in the light theme. */

:root{--frame:var(--line);--radius:10px}
.num{font-family:var(--mono);font-synthesis-weight:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- type ---------- */
.kick{font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.h-sec{font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.lede{font-family:var(--sans);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.6;color:var(--text-3);max-width:58ch}

/* ---------- buttons ---------- */
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1.2;padding:14px 22px;border:0;border-radius:3px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .15s}
.btn2:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--shadow-2)}
.btn2:focus-visible,.sq:focus-visible,.alink:focus-visible{outline:2px solid var(--marker);outline-offset:3px}
.btn2-gold{background:var(--gold);color:var(--on-gold)}
.btn2-light{background:var(--paper-fixed);color:var(--on-gold);box-shadow:inset 0 0 0 1.5px var(--frame)}
.btn2-block{display:flex;width:100%}
.sq{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;border:0;border-radius:2px;cursor:pointer;font-family:var(--display);font-variant-ligatures:none;font-size:20px;line-height:1;transition:transform .12s}
.sq:hover{transform:translateY(-2px)}
.sq-light{background:var(--paper-fixed);color:var(--on-gold);box-shadow:inset 0 0 0 1.5px var(--frame)}
.sq-gold{background:var(--gold);color:var(--on-gold)}
.alink{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-weight:600;font-size:14px;color:var(--marker-text);text-decoration:none}
.alink:hover{text-decoration:underline;text-underline-offset:4px}
.alink .mk{width:30px;height:30px;flex:none;border-radius:50%;background:var(--gold);display:inline-grid;place-items:center;overflow:hidden}
.alink .mk img{width:100%;height:100%;display:block}

/* ---------- hero (illustrated) ---------- */
.hero2{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(440px,44vw,680px);background:var(--navy-deep);color:var(--ink)}
.hero2 .hero-art{position:absolute;inset:0;z-index:-2}
.hero2 .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* scrim: near-opaque navy under the text column (left ~60%), light fade along the bottom; art stays clear on the right */
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--s95) 0%,var(--s90) 38%,var(--s75) 50%,var(--s25) 62%,transparent 70%),linear-gradient(0deg,var(--s85) 0%,var(--s45) 18%,transparent 36%)}
.hero2 .hero-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,14vw,220px) var(--pad) clamp(26px,3.6vw,52px);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hero2 h1{font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-weight:700;font-size:clamp(34px,4.7vw,66px);line-height:1.02;letter-spacing:-.02em;max-width:16ch;color:var(--ink)}
.hero2 h1 .hl{color:var(--gold)}
.hero2 .hero-sub{display:flex;gap:12px;align-items:flex-start;margin-top:16px;max-width:46ch;font-family:var(--sans);font-size:15.5px;line-height:1.55;color:var(--text-3)}
.hero2 .hero-sub img{width:30px;height:30px;flex:none;border-radius:50%}
.hero2 .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero2 .tk{font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--marker-text);display:block;margin-bottom:12px}
/* light theme: illustrated blocks sit on paper as framed image blocks */
[data-theme="light"] .hero2{max-width:calc(var(--maxw) + 2 * var(--pad) - 2 * clamp(16px,2vw,28px));margin:clamp(12px,1.6vw,22px) auto 0;border-radius:var(--radius);box-shadow:0 0 0 1.5px var(--frame)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .hero2{margin:16px;border-radius:var(--radius)}}

/* glass stat tiles */
.gstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:min(100%,430px)}
.gstat{background:var(--s75);border:1px solid var(--glass);border-radius:4px;padding:16px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gstat .n{font-family:var(--mono);font-synthesis-weight:none;font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.gstat .n.g{color:var(--acc-green)}.gstat .n.y{color:var(--gold)}
.gstat .t{display:block;margin-top:9px;font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-size:11px;letter-spacing:.04em;color:var(--muted)}

/* ---------- sections + art cards ---------- */
.sec2{padding:clamp(18px,2.4vw,30px) 0}
.sec2 > .wrap > .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:16px 48px;margin-bottom:clamp(18px,2.2vw,28px)}
@media(max-width:900px){.sec2 > .wrap > .sec-head{grid-template-columns:1fr}}
.acard{position:relative;isolation:isolate;overflow:hidden;border-radius:6px;background:var(--navy-deep);color:var(--ink);box-shadow:0 0 0 1px var(--glass)}
[data-theme="light"] .acard{box-shadow:0 0 0 1.5px var(--frame)}
.acard > .art{position:absolute;inset:0;z-index:-2}
.acard > .art img{width:100%;height:100%;object-fit:cover;display:block}
.acard.shade::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--s95) 0%,var(--s90) 34%,var(--s60) 48%,var(--s25) 58%,transparent 66%)}
.pcard{border-radius:6px;background:var(--paper);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.glass{background:var(--s75);border:1px solid var(--glass);border-radius:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- carousel (one slide at a time, arrows bottom-left) ---------- */
.hcar{position:relative}
.hcar-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hcar-track::-webkit-scrollbar{display:none}
.hcar-track > *{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.hcar-nav{display:flex;gap:10px}
.hcar-count{font-family:var(--mono);font-size:13px;color:var(--muted);align-self:center;margin-left:6px}

/* ---------- newsletter block (every page, before the footer) ---------- */
.news2{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,40px)}
.news2-in{position:relative;isolation:isolate;overflow:hidden;border-radius:6px;background:var(--navy-deep);color:var(--ink);padding:clamp(26px,4vw,52px) clamp(22px,4vw,52px);box-shadow:0 0 0 1px var(--glass)}
[data-theme="light"] .news2-in{box-shadow:0 0 0 1.5px var(--frame)}
.news2-in > .art{position:absolute;inset:0;z-index:-2}
.news2-in > .art img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.news2-in::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--s95) 0%,var(--s90) 44%,var(--s60) 56%,var(--s25) 64%,transparent 74%)}
.news2-inline{padding:clamp(24px,3vw,36px) 0 4px}
.news2-inline .news2-in{padding:clamp(22px,3vw,34px)}
.news2-inline h2{font-size:clamp(24px,3vw,36px)!important}
.news2 h2{font-family:var(--display);font-variant-ligatures:none;font-synthesis-weight:auto;font-weight:700;font-size:clamp(26px,3.8vw,50px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;max-width:14ch;margin-top:10px;color:var(--ink)}
.news2 .wn-form{max-width:640px;margin-top:22px}
.news2 .wn-in{background:color-mix(in srgb,var(--paper-fixed) 92%,transparent);color:var(--on-gold);border-color:transparent;border-radius:2px}
.news2 .wn-in::placeholder{color:var(--on-gold-muted)}
.news2 .wn-btn{background:var(--gold);border-color:var(--gold);color:var(--on-gold);border-radius:2px;padding:11px 30px}
.news2 .wn-note{color:var(--text-3)}

/* ---------- footer (single row) ---------- */
footer .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;align-items:center}

/* ---------- mobile menu: full-screen overlay ---------- */
@media(max-width:680px){
  header .brand,header .burger{position:relative;z-index:3}
  nav.tabs.open{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:0;padding:96px var(--pad) 24px;background:var(--bg);border:0;overflow:auto}
  nav.tabs.open .tab{width:auto;text-align:right;padding:6px 0;font-size:clamp(26px,8vw,34px);font-weight:600;color:var(--ink)}
  nav.tabs.open .tab[aria-current="page"]{color:var(--marker-text)}
  nav.tabs.open .btn{display:flex;justify-content:center;width:100%;margin:22px 0 0;padding:16px 20px;font-size:16px}
  nav.tabs.open .theme-toggle-row{align-self:flex-end}
  nav.tabs.open .menu-art{display:block}
  .menu-art{display:none;width:min(100%,360px);margin:18px auto 0;border-radius:6px;overflow:hidden}
  .menu-art img{width:100%;height:auto;display:block}
  body.menu-open{overflow:hidden}
  /* backdrop-filter on the sticky header would make it the containing block of the fixed overlay */
  body.menu-open header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
}
@media(min-width:681px){.menu-art{display:none}}

/* ---------- page hero (title bottom-left, action bottom-right) ---------- */
.hero-page{min-height:clamp(360px,34vw,520px)}
.hero-page h1{font-size:clamp(34px,4.6vw,64px)}
.hero-page .hero-act{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.hero-page .hero-sub{max-width:52ch}
@media(max-width:680px){
  .hero2{min-height:0;display:block}
  .hero2 .hero-art{position:relative;inset:auto;aspect-ratio:16/11}
  .hero2::after{background:none}
  .hero2 .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--navy-deep) 0%,var(--navy-deep) 24%,var(--s45) 44%,transparent 62%)}
  .hero2 .hero-in{padding:0 var(--pad) 26px;margin-top:-56px;position:relative;flex-direction:column;align-items:stretch}
  .hero-home .hero-art{aspect-ratio:375/430}
  .hero-page .hero-act .btn2{width:100%}
}

/* ---------- readability over art ---------- */
/* a soft shadow only supplements the scrims (contrast is met without it) */
:is(.hero-copy,.pb-copy,.fm-copy,.author2,.news2-in,.pains,.shows-tile,.alt-tile) :is(h1,h2,p,.kick,.tk,.sla){text-shadow:0 1px 3px var(--s60)}
/* phones: illustrated cards show the art as a block above the text instead of behind it */
@media(max-width:680px){
  .acard.shade,.news2-in{padding:20px}
  .acard.shade > .art,.news2-in > .art{position:relative;inset:auto;z-index:0;display:block;order:-1;margin:-20px -20px 18px;aspect-ratio:750/516;overflow:hidden}
  .acard.shade > .art img,.news2-in > .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .acard.shade > .art::after,.news2-in > .art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--navy-deep) 0%,transparent 38%)}
  .acard.shade::after,.news2-in::after{display:none}
  .author2{min-height:0;justify-content:flex-start}
}