/* Palette Girlies, hair.css (V2 hair pages, phase 3, nov 2026: /hair/<season> and the /hair hub, markup in tools/wardrobe_pages.py).
   Built on the tokens and components of site.css (.wrap .sec .label .rules .btn .link .dark .rv .ln). No hex here: every color is a token,
   and the hair colors come in as --c (the fill) and --t (paper or ink, whichever reads on it) from the data. Breakpoints: 720, 900, 1100.
   Sections: hero (.hr-hero), 01 three directions (.hr-dirs), 02 why it works (.hr-why), close (.hr-close, a dark band), hub (.hr-hubpage). */

/* ---------- shared ---------- */
.hr-head { display: grid; gap: var(--s3); align-content: start; margin-bottom: var(--s5); }
.hr-head h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; max-width: 14ch; }
.hr-lead { max-width: 34ch; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); }
.hr code { font: 500 13px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }

/* ---------- hero: text left, her photograph of the first lock right; on a phone the photograph first ---------- */
.hr-hero { padding: var(--s2) 0 0; }
.hr-hero-grid { display: grid; gap: var(--s5); }
.hr-hero-text { display: grid; gap: var(--s4); align-content: center; }
.hr-hero h1 { font-size: clamp(46px, 6.2vw, 96px); line-height: .98; max-width: 11ch; }
.hr-line { max-width: 40ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.hr-pic { order: -1; margin: 0; display: grid; gap: var(--s2); }
.hr-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-2); mix-blend-mode: multiply; } /* the lock photos come on white paper; multiply sinks the white into the page paper */
.hr-cap { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.hr-field { display: flex; align-items: flex-end; aspect-ratio: 1 / 1; padding: var(--s3); border-radius: var(--r-sm); background: var(--c); color: var(--t); }
@media (min-width: 900px) {
  .hr-hero { padding-top: var(--s4); }
  .hr-hero-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .hr-pic { order: 0; }
}

/* ---------- 01, three directions: a hairline grid of cards, each with a large chip in the exact color ---------- */
.hr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.hr-card { display: grid; gap: var(--s3); align-content: start; padding: var(--s4) 0 var(--s5); background: var(--paper); }
.hr-swatch { margin: 0 0 var(--s2); }
.hr-chip { display: flex; align-items: flex-end; min-height: 168px; padding: var(--s3); border-radius: var(--r-sm); background: var(--c); color: var(--t); box-shadow: inset 0 0 0 1px var(--line); }
.hr-swatch--photo { display: grid; overflow: hidden; border-radius: var(--r-sm); }
.hr-swatch--photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-2); mix-blend-mode: multiply; }
.hr-hexline { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); background: var(--c); color: var(--t); }
/* a color where neither paper nor ink reaches 4.5:1: the HEX sits on a small paper tag */
.lo > code { padding: 3px 7px; border-radius: 2px; background: var(--paper); color: var(--ink); }
.hr-name { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.015em; }
.hr-note { max-width: 32ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
.hr-say { margin: var(--s2) 0 0; display: grid; border-top: 1px solid var(--line); }
.hr-say > div { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.hr-say dt { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.hr-say dd { margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
@media (min-width: 900px) {
  .hr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; background: none; gap: 0; }
  .hr-card { padding: 0 clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); }
  .hr-card:first-child { padding-left: 0; border-left: 0; }
  .hr-card:last-child { padding-right: 0; }
  .hr-chip { min-height: 220px; }
}

/* ---------- 02, why it works: the heading sticky on the left, the reasons, Do and Skip, and the words to say ---------- */
.hr-why-grid { display: grid; }
.hr-why-body { display: grid; gap: var(--s4); align-content: start; }
.hr-why-lead { max-width: 36ch; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); }
.hr-why-p { max-width: 52ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.hr-rules { margin-top: var(--s3); }
.hr-rules > li > * + * { color: var(--ink); font-size: var(--fs-3); line-height: 1.55; }
.hr-quote { margin: var(--s5) 0 0; display: grid; gap: var(--s3); }
.hr-quote blockquote { margin: 0; display: grid; gap: var(--s2); }
.hr-quote blockquote p { font: 400 clamp(28px, 3.4vw, 46px)/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); max-width: 20ch; }
.hr-quote blockquote p:nth-child(even) { font-style: italic; color: var(--berry); }
@media (min-width: 900px) {
  .hr-why-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); }
  .hr-why-head { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; margin-bottom: 0; }
}

/* ---------- close: a dark band, one pill, three text links, the other seasons in a fold ---------- */
.hr-close h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; max-width: 16ch; }
.hr-close-line { margin-top: var(--s4); max-width: 44ch; font-size: var(--fs-4); line-height: 1.5; }
.hr-cta { margin-top: var(--s5); }
.hr-links { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.hr-links .link { min-height: 44px; }
.hr-fold { margin-top: var(--s5); border-top: 1px solid var(--line); }
.hr-fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; list-style: none; cursor: pointer; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.hr-fold > summary::-webkit-details-marker { display: none; }
.hr-fold > summary::after { content: "+"; font: 400 24px/1 var(--sans); transition: transform .3s var(--ease); }
.hr-fold[open] > summary::after { transform: rotate(45deg); }
.hr-close .season-switch { margin-top: var(--s2); }
.hr-close .season-switch a { background: transparent; border-color: var(--line-2); color: var(--paper); }
.hr-close .season-switch a:hover { border-color: var(--paper); }
.dark .hr-close .season-switch a[aria-current="page"], .hr-close .season-switch a[aria-current="page"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .hr-fold > summary::after { transition: none; } }

/* ---------- the hub: one table of the twelve seasons, three chips each ---------- */
.hr-hub-hero { padding: var(--s2) 0 var(--s6); }
.hr-hub-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }
.hr-hub-text { display: grid; gap: var(--s4); }
.hr-hub-hero h1 { font-size: clamp(46px, 6.2vw, 96px); line-height: .98; max-width: 10ch; }
.hr-hub-pic { margin: 0; width: clamp(84px, 18vw, 220px); }
.hr-hub-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.hr-hubpage .hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.hr-group { display: grid; gap: var(--s3); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line-2); }
.hr-fam { font-size: var(--fs-5); line-height: 1.05; letter-spacing: -.015em; }
.hr-row { list-style: none; margin: 0; padding: 0; display: grid; }
.hr-row > li { border-top: 1px solid var(--line); }
.hr-row > li:first-child { border-top: 0; }
.hr-hubpage .hub a.hub-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "chips name" "chips line"; align-content: center; gap: var(--s1) var(--s3); padding: var(--s3) 0; background: none; box-shadow: none; border-radius: 0; transform: none; color: var(--ink); text-decoration: none; }
.hr-hubpage .hub a.hub-card:hover { transform: none; color: var(--ink); }
.hr-hubpage .hub a.hub-card::before { content: none; }
.hr-hub-chips { grid-area: chips; display: flex; height: 64px; overflow: hidden; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.hr-hub-chips i { flex: 1 1 0; background: var(--c); transform-origin: bottom; transition: transform .5s var(--ease); }
.hr-hubpage .hub .hub-name { grid-area: name; align-self: end; font: 400 clamp(24px, 2.2vw, 30px)/1.05 var(--serif); letter-spacing: -.015em; transition: color .3s var(--ease); }
.hr-hubpage .hub .hub-line { grid-area: line; align-self: start; font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.hr-hubpage .hub a.hub-card:hover .hub-name, .hr-hubpage .hub a.hub-card:focus-visible .hub-name { color: var(--berry); }
.hr-hubpage .hub a.hub-card:hover .hr-hub-chips i:nth-child(2) { transform: scaleY(.9); }
/* her card, copied to the top by site/js/saved-card.js */
.hr-hubpage .hub .hub-group--yours { display: grid; gap: var(--s2); padding-bottom: var(--s4); }
.hr-hubpage .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); }
.hr-hubpage .hub .hub-group--yours .hub-cards { grid-template-columns: minmax(0, 520px); }
.hr-hubpage .hub .hub-group--yours .hub-card { transform: none; }
.hr-hub-next { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.hr-hubpage .signup { margin-top: var(--s6); }
@media (min-width: 720px) {
  .hr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
  .hr-row > li { border-top: 0; }
  .hr-hubpage .hub a.hub-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chips" "name" "line"; gap: var(--s2); padding: var(--s2) 0; }
  .hr-hub-chips { height: 112px; margin-bottom: var(--s2); }
}
@media (min-width: 900px) {
  .hr-hub-hero { padding-top: var(--s4); }
  .hr-group { grid-template-columns: 3fr 9fr; column-gap: clamp(32px, 4vw, 64px); padding: var(--s5) 0; }
  .hr-fam { padding-top: var(--s2); }
}
@media (prefers-reduced-motion: reduce) { .hr-hub-chips i, .hr-hubpage .hub .hub-name { transition: none; } }
/* the dark close runs straight into the dark footer, with a hairline between them instead of a strip of paper */
.wd main:has(> .hr-close:last-child) + .site-footer .ftr { margin-top: 0; border-top: 1px solid var(--line); }