/* Palette Girlies, season-page.css (V2, phase 7, nov 2026: /seasons/<season>, markup in tools/season_pages.py, behavior in site/js/season-page.js).
   Built on the tokens and components of site.css (.wrap .sec .label .rules .btn .link .chip .dark .rv .ln). No hex here: every swatch comes in as --c, in its
   exact color from src/data/palettes.json, flat on plain paper. Breakpoints: 720, 900, 1100.
   Sections: hero (.sp-hero), 01 is this you (.sp-you), 02 your colors (.sp-colors), 03 wear it (.sp-wear), 04 neighbors (.sp-near-sec),
   05 your skin (.sp-skin), 06 use it (.sp-use-sec), 07 questions (.sp-q), close (.sp-close, a dark band). */

/* ---------- shared ---------- */
.spg code, .sp-close code { font: 500 13px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }
.sp-head { display: grid; gap: var(--s3); align-content: start; margin-bottom: var(--s5); }
.sp-head h2 { font-size: var(--fs-6); line-height: .98; max-width: 14ch; }
.sp-head-line { max-width: 40ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
.sp-body { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.sp-p { max-width: 58ch; font-size: var(--fs-3); line-height: 1.65; color: var(--ink); }
.sp-split { display: grid; }
@media (min-width: 900px) {
  .sp-split { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); }
  .sp-split > .sp-head { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; margin-bottom: 0; }
}
/* a swatch: flat, exact; a very light one gets a hairline so it keeps its edge on the paper */
.spg i[style*="--c"], .sp-close i[style*="--c"] { display: block; background: var(--c); }
.spg .is-light { box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- hero (phase 12, color first): the words left, the color block right (the three signature colors at 60/30/10); on a phone the block first.
   Then her photograph full width at 16:9 ---------- */
.sp-hero { padding: var(--s2) 0 var(--s6); }
.sp-hero-grid { display: grid; gap: var(--s5); }
.sp-hero-text { display: grid; gap: var(--s4); align-content: center; min-width: 0; }
.sp-hero h1 { font-size: clamp(60px, 17vw, 128px); line-height: .94; }
.sp-hero h1 .ln { padding-right: .12em; }
.sp-lede { max-width: 30ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.sp-card { font-size: var(--fs-2); color: var(--ink); }
.sp-block { order: -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: 6fr 3fr 1fr; height: 320px; overflow: hidden; border-radius: 22px; }
.sp-blk { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; gap: 2px var(--s3); min-height: 0; padding: var(--s3) var(--s4); background: var(--c); }
.sp-blk.p { color: var(--paper); }
.sp-blk.k { color: var(--ink); }
.sp-blk b { flex-basis: 100%; font: 400 clamp(26px, 3vw, 40px)/1 var(--serif); letter-spacing: -.015em; }
.sp-blk code { font: 500 13px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }
.sp-blk span { font: 600 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.sp-blk--b b { font-size: clamp(20px, 2vw, 26px); }
.sp-blk--c { align-items: center; align-content: center; padding-block: 0; }
.sp-blk--c b { flex-basis: auto; font: 600 13px/1.2 var(--sans); letter-spacing: 0; }
.sp-blk.lo b, .sp-blk.lo code, .sp-blk.lo span { padding: 2px 6px; background: var(--paper); color: var(--ink); }
.sp-blk.lo b { flex-basis: auto; }
.sp-still { margin: 0 auto var(--s2); display: grid; gap: var(--s3); }
.sp-still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; border-radius: var(--r-sm); background: var(--paper-2); }
@media (min-width: 900px) {
  .sp-hero { padding: var(--s4) 0 var(--s6); }
  .sp-hero-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(620px, calc(100svh - var(--hdr-h) - var(--s7))); }
  .sp-hero h1 { font-size: var(--fs-7); }
  .sp-block { order: 0; height: 520px; }
  .sp-blk { padding: var(--s4) var(--s5); }
  .sp-blk--c { padding-block: 0; }
}

/* ---------- 01, is this you: the three readings as hairline rows with a quiet five-step scale ---------- */
.sp-reads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sp-read { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "w s"; align-items: center; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sp-read-n { grid-area: n; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sp-read-w { grid-area: w; font: 400 clamp(24px, 2.4vw, 30px)/1.1 var(--serif); letter-spacing: -.015em; }
.sp-scale { grid-area: s; display: grid; gap: 6px; width: 148px; }
.sp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sp-steps i { display: block; height: 6px; border-radius: 1px; background: var(--line-2); }
.sp-steps i.on { background: var(--ink); }
.sp-ends { display: flex; justify-content: space-between; font: 400 12.5px/1 var(--sans); color: var(--graphite); }
.sp-dom { max-width: 52ch; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); }
.sp-dom b { font-weight: 700; }
@media (min-width: 720px) {
  .sp-read { grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-areas: "n w s"; }
  .sp-scale { width: 180px; }
}

/* ---------- 02, your colors: the 26 as a wall in four groups, each swatch square with its name and HEX printed on it; a tap copies the HEX ---------- */
.sp-grp { display: grid; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line-2); }
.sp-grp h3 { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sp-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sp-sq {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 100%; aspect-ratio: 1; padding: 8px;
  border: 0; border-radius: 8px; background: var(--c); text-align: left; font: inherit; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sp-sq.p { color: var(--paper); }
.sp-sq.k { color: var(--ink); }
.sp-sq.is-light { box-shadow: inset 0 0 0 1px var(--line-2); }
.sp-sq b { font: 600 13px/1.15 var(--sans); overflow-wrap: anywhere; hyphens: auto; }
.sp-sq code { font-size: 12.5px; }
.sp-sq.lo b, .sp-sq.lo code { align-self: flex-start; padding: 1px 4px; background: var(--paper); color: var(--ink); }
.sp-sq:hover { transform: translateY(-4px); box-shadow: var(--shadow-chip); }
.sp-sq.is-copied { outline: 2px solid var(--ink); outline-offset: 3px; }
.sp-copied { min-height: 1.6em; margin: var(--s2) 0 0; font-size: var(--fs-2); color: var(--ink); }
@media (min-width: 720px) { .sp-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .sp-sq { padding: 12px; } .sp-sq b { font-size: 15px; } }
@media (min-width: 1100px) {
  .sp-grp { grid-template-columns: 2fr 10fr; column-gap: clamp(24px, 3vw, 48px); align-items: start; padding: var(--s5) 0; }
  .sp-grp h3 { padding-top: 4px; }
  .sp-sq { padding: var(--s3); }
}
.sp-calls { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.sp-call { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "s k" "s n"; align-items: center; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sp-call .sp-call-sw { grid-area: s; width: 56px; height: 56px; border-radius: var(--r-sm); }
.sp-call--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "n"; }
.sp-call-k { grid-area: k; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sp-call-n { grid-area: n; font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; }
.sp-call-n code { margin-left: 6px; color: var(--ink-2); }
@media (min-width: 720px) {
  .sp-calls { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
}

/* ---------- 03, wear it ---------- */
.sp-rules > li > p:first-child { max-width: 30ch; }
.sp-rules > li > * + * { max-width: 56ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.note { display: grid; gap: var(--s2); margin-top: var(--s4); padding: var(--s1) 0 var(--s1) var(--s4); border-left: 2px solid var(--berry); }
.sp-help-do { max-width: 44ch; font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--serif); letter-spacing: -.01em; }
.sp-help-why { max-width: 56ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }

/* ---------- 04, neighbors: two cards in a hairline grid, three colors beside three ---------- */
.sp-nbs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.sp-nb { display: grid; gap: var(--s3); align-content: start; padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--line); }
.sp-nb h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; letter-spacing: -.015em; }
.sp-nb h3 a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s var(--ease); }
.sp-nb h3 a:hover, .sp-nb h3 a:focus-visible { color: var(--berry); background-size: 100% 1px; }
.sp-nb h3 a::after { content: " \2192"; font-family: var(--sans); font-size: .6em; }
.sp-cmp { display: grid; gap: var(--s2); }
.sp-cmp p { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-2); color: var(--ink-2); }
.sp-tri { display: flex; flex: none; }
.sp-tri .sp-tri-sw { width: 40px; height: 40px; }
.sp-tri .sp-tri-sw:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.sp-tri .sp-tri-sw:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sp-nb-diff { max-width: 44ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.sp-nb-tell { max-width: 56ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.sp-more { margin-top: var(--s5); }
@media (min-width: 900px) {
  .sp-nbs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .sp-nb { padding: 0 clamp(24px, 3vw, 48px) 0; border: 0; border-left: 1px solid var(--line); }
  .sp-nb:first-child { padding-left: 0; border-left: 0; }
  .sp-nb:last-child { padding-right: 0; }
}

/* ---------- 05, your skin: chips as tabs; every note shows without JavaScript ---------- */
.sp-depths { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sp-notes { display: grid; gap: var(--s5); }
.sp-note { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sp-note[hidden] { display: none; }
.sp-note h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.015em; }
.sp-note > p:not([class]) { max-width: 56ch; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); }
.sp-note-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.sp-note-chips li { display: inline-flex; align-items: center; gap: var(--s2); font: 500 15px/1.3 var(--sans); }
.sp-note-chips .sp-note-sw { width: 28px; height: 28px; border-radius: var(--r-sm); }
.js .sp-depths:not([hidden]) + .sp-notes .sp-note { border-top: 0; padding-top: 0; }

/* ---------- 06, use it: three picture cards, each one link ---------- */
.sp-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.sp-use a { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.sp-use-pic { display: block; overflow: hidden; border-radius: var(--r-sm); background: var(--paper-2); }
.sp-use-pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.sp-stripe { display: flex; height: 12px; margin-bottom: var(--s2); }
.sp-stripe i { flex: 1 1 0; }
.sp-stripe .is-light { box-shadow: inset 0 0 0 1px var(--line-2); }
.sp-use-w { font: 400 clamp(30px, 3vw, 42px)/1.05 var(--serif); letter-spacing: -.015em; transition: color .3s var(--ease); }
.sp-use-l { max-width: 40ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
.sp-use-go { margin-top: var(--s1); font: 600 15px/1.3 var(--sans); color: var(--berry); }
.sp-use a:hover .sp-use-w, .sp-use a:focus-visible .sp-use-w { color: var(--berry); }
.sp-use a:hover .sp-use-pic img { transform: scale(1.03); }
.sp-read-next { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.sp-read-next ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.sp-read-next .link { min-height: 44px; }
@media (min-width: 720px) { .sp-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }

/* ---------- 07, questions ---------- */
.sp-q .sp-head h2 { font-size: clamp(36px, 4vw, 60px); }
.sp-qas { gap: 0; border-top: 1px solid var(--line); }
.sp-qa { border-bottom: 1px solid var(--line); }
.sp-qa > summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) 0; list-style: none; cursor: pointer; font: 400 clamp(21px, 2vw, 26px)/1.2 var(--serif); letter-spacing: -.01em; }
.sp-qa > summary::-webkit-details-marker { display: none; }
.sp-qa > summary::after { content: "+"; justify-self: end; font: 400 26px/1 var(--sans); color: var(--graphite); transition: transform .3s var(--ease); }
.sp-qa[open] > summary::after { transform: rotate(45deg); }
.sp-qa > p { max-width: 58ch; padding: 0 0 var(--s4); font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }

/* ---------- close: a dark band, one pill, the phone palette as a text link ---------- */
.sp-close h2 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; max-width: 14ch; }
.sp-close h2 em { margin-right: .1em; }
.sp-close-line { max-width: 46ch; margin-top: var(--s3); font-size: var(--fs-4); line-height: 1.5; }
.sp-close-line:first-of-type { margin-top: var(--s4); }
.sp-cta { margin-top: var(--s5); }
.sp-alt { margin-top: var(--s4); }
.sp-alt .link { min-height: 44px; }
.sp-alt-note { margin-top: var(--s3); font-size: var(--fs-2); color: var(--ink-2); }
.sp-close-grid { display: grid; gap: var(--s5); align-items: center; }
.sp-close-pic { margin: 0; justify-self: center; width: min(70vw, 300px); }
.sp-close-pic img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.sp-close-pic figcaption { margin-top: var(--s3); }
@media (min-width: 900px) { .sp-close-grid { grid-template-columns: 8fr 4fr; column-gap: clamp(32px, 5vw, 80px); } .sp-close-pic { justify-self: end; } }
.sp-signup:empty { display: none; }
/* the dark close runs straight into the dark footer, with a hairline between them */
.season-page main:has(> .sp-close + .sp-signup:empty) + .site-footer .ftr { margin-top: 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .sp-sq:hover { transform: none; }
  .sp-sq, .sp-use-pic img, .sp-use-w, .sp-qa > summary::after, .sp-nb h3 a { transition: none; }
}