/* Palette Girlies, seasons-hub.css (V2, phase 7, nov 2026: /seasons, markup in src/pages/seasons.html and tools/season_pages.py, behavior in site/js/seasons-hub.js).
   Built on the tokens and components of site.css. No hex here: the season colors come in as --c from src/data/palettes.json. Breakpoints: 720, 900, 1100.
   Sections: hero (.sh-hero), 01 the twelve by family (.sh-list), 02 three readings (.sh-read), the free test (.sh-end). */

/* ---------- hero ---------- */
.sh-hero { padding: var(--s2) 0 var(--s6); }
.sh-hero .wrap { display: grid; gap: var(--s4); }
.sh-hero h1 { font-size: clamp(52px, 8vw, 120px); line-height: .98; }
.sh-hero h1 .ln { padding-right: .12em; }
.sh-lede { max-width: 40ch; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); }
.sh-head { display: grid; gap: var(--s3); align-content: start; margin-bottom: var(--s4); }
.sh-head h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; max-width: 14ch; }
.sh-line { max-width: 40ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
@media (min-width: 900px) { .sh-hero { padding-top: var(--s4); } }

/* ---------- 01, the twelve by family: each card one link, its 26 colors as bars ---------- */
.sh-list .sh-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.sh-group { display: grid; gap: var(--s3); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line-2); }
.sh-fam { font-size: var(--fs-5); line-height: 1.05; letter-spacing: -.015em; }
.sh-row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.sh-hub a.hub-card { display: grid; gap: var(--s1); padding: 0; background: none; box-shadow: none; border-radius: 0; transform: none; color: var(--ink); text-decoration: none; }
.sh-hub a.hub-card:hover { transform: none; color: var(--ink); }
.sh-hub a.hub-card::before { content: none; }
.sh-hub a.hub-card.is-yours { box-shadow: none; }
.sh-bars { display: flex; height: 96px; margin-bottom: var(--s2); overflow: hidden; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.sh-bars i { flex: 1 1 0; background: var(--c); transform-origin: bottom; transition: transform .5s var(--ease); }
.sh-hub .hub-name { font: 400 clamp(26px, 2.4vw, 32px)/1.05 var(--serif); letter-spacing: -.015em; transition: color .3s var(--ease); }
.sh-hub .hub-line { font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.sh-reads { font: 600 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.sh-hub a.hub-card:hover .hub-name, .sh-hub a.hub-card:focus-visible .hub-name { color: var(--berry); }
.sh-hub a.hub-card:hover .sh-bars i:nth-child(odd) { transform: scaleY(.9); }
/* her card, copied to the top by site/js/saved-card.js */
.sh-hub .hub-group--yours { display: grid; gap: var(--s2); padding-bottom: var(--s4); }
.sh-hub .hub-group--yours .hub-fam { margin: 0; font: 600 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.sh-hub .hub-group--yours .hub-card { transform: none; }
.sh-hub .hub-group--yours .hub-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 420px); }
@media (min-width: 720px) {
  .sh-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-bars { height: 120px; }
}
@media (min-width: 900px) {
  .sh-group { grid-template-columns: 3fr 9fr; column-gap: clamp(32px, 4vw, 64px); padding: var(--s5) 0; }
  .sh-fam { padding-top: var(--s2); }
}

/* ---------- 02, three readings: three hairline scales with a dot per season ---------- */
.sh-read-grid { display: grid; }
.sh-read-body { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.sh-picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sh-picks .chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.sh-say { min-height: 1.6em; font-size: var(--fs-2); color: var(--ink); }
.sh-axes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sh-ax { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.sh-ax-n { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sh-ax-bar { position: relative; height: calc(var(--lanes) * 22px + 10px); margin: 0 9px; background: linear-gradient(var(--line-2), var(--line-2)) 0 50% / 100% 1px no-repeat; }
.sh-dot { position: absolute; left: var(--x); top: calc(var(--l) * 22px + 5px); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--paper); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.sh-axes.has-pick .sh-dot { opacity: .22; }
.sh-axes.has-pick .sh-dot.is-on { opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.sh-ax-e { display: flex; justify-content: space-between; font: 400 12.5px/1 var(--sans); color: var(--graphite); }
@media (min-width: 900px) {
  .sh-read-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); }
  .sh-read-grid > .sh-head { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; margin-bottom: 0; }
}

/* ---------- the free test and the neighbors pack ---------- */
.sh-end-in { display: grid; gap: var(--s4); justify-items: start; padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.sh-end h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.sh-pack { font-size: var(--fs-3); color: var(--ink); }
.sh-pack .link { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .sh-bars i, .sh-hub .hub-name, .sh-dot { transition: none; } }