/* Palette Girlies, makeup.css (V2, phase 8, nov 2026: /makeup/<season> and the hub /makeup, markup in tools/makeup_pages.py).
   Built on the tokens and components of site.css (.wrap .sec .label .rules .btn .link .chip .dark .rv .ln). No color data here: every swatch comes in as --c, in its
   exact color from src/data/looks.json, flat on plain paper. Breakpoints: 720, 900, 1100.
   Sections: hero (.mk-hero), 01-03 lips, cheeks, eyes (.mk-area), 04 two lights (.mk-ashy), 05 eye look (.mk-eye, with eye-looks.css), 06 makeup bag (.mk-bag),
   07 three looks (.mk-looks), 08 by color (.mk-space, with shade-space.css), 09 foundation (.mk-base), close (.mk-close, a dark band). Hub: .mh. */

/* ---------- shared ---------- */
.mkp code, .mk-close code { font: 500 13px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }
.mk-head { display: grid; gap: var(--s3); align-content: start; margin-bottom: var(--s5); min-width: 0; }
.mk-head h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; max-width: 13ch; }
.mk-head-line { max-width: 40ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
.mk-body { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.mk-split { display: grid; }
.mk-k { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.mkp .is-light { box-shadow: inset 0 0 0 1px var(--line-2); }
@media (min-width: 900px) {
  .mk-split { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); }
  .mk-split > .mk-head { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; margin-bottom: 0; }
}
.mk-fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; min-height: 52px; list-style: none; cursor: pointer; font: 600 15px/1.3 var(--sans); }
.mk-fold > summary::-webkit-details-marker { display: none; }
.mk-fold > summary::after { content: "+"; justify-self: end; font: 400 24px/1 var(--sans); color: var(--graphite); transition: transform .3s var(--ease); }
.mk-fold[open] > summary::after { transform: rotate(45deg); }
.mk-fold > p { max-width: 58ch; padding-bottom: var(--s4); font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.mkp .seal { margin-left: 4px; }
.mk-words { max-width: 58ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.mk-words .mk-k { display: block; margin-bottom: var(--s1); }

/* ---------- hero: words left, the flat lay right; on a phone the picture first ---------- */
.mk-hero { padding: var(--s2) 0 var(--s7); }
.mk-hero-grid { display: grid; gap: var(--s5); }
.mk-hero-text { display: grid; gap: var(--s4); align-content: center; min-width: 0; }
.mk-hero h1 { font-size: clamp(48px, 6.8vw, 104px); line-height: .98; }
.mk-hero h1 .ln { padding-right: .12em; }
.mk-lede { max-width: 30ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.mk-does { max-width: 46ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.mk-anchors { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); max-width: 560px; }
.mk-anchor { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.mk-anchor-sw { display: block; height: 88px; margin-bottom: var(--s2); border-radius: var(--r-sm); background: var(--c); }
.mk-anchor b { font: 600 15px/1.25 var(--sans); overflow-wrap: anywhere; }
.mk-anchor code { color: var(--ink-2); }
.mk-anchor span { font: 600 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.mk-hero .season-nudge { margin: 0; font-size: var(--fs-2); }
.mk-pic { order: -1; margin: 0; display: grid; gap: var(--s2); }
.mk-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); mix-blend-mode: multiply; }
.mk-cap { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
@media (min-width: 900px) {
  .mk-hero { padding-top: var(--s4); }
  .mk-hero-grid { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .mk-pic { order: 0; }
  .mk-pic img { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hdr-h) - 96px); }
  .mk-anchor-sw { height: 104px; }
}

/* ---------- 01-03, lips, cheeks, eyes: the families as a hairline list of large chips ---------- */
.mk-area { padding-bottom: var(--s7); }
.mk-crop { position: relative; display: none; margin: var(--s2) 0 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-sm); background: var(--paper-2); }
.mk-crop-img { position: absolute; display: block; max-width: none; width: var(--w, 100%); height: var(--h, 100%); left: var(--l, 0); top: var(--t, 0); }
.mk-fams { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-fam { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.mk-fam-sw { display: flex; align-items: flex-end; height: 88px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c); }
.mk-fam-sw.mk-on-paper code { color: var(--paper); }
.mk-fam-sw.mk-on-ink code { color: var(--ink); }
.mk-fam-t { display: grid; gap: var(--s1); min-width: 0; }
.mk-fam-n { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.mk-fam-note { max-width: 44ch; font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
@media (min-width: 560px) { .mk-crop { display: block; } }
@media (min-width: 720px) {
  .mk-fam { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; }
  .mk-fam-sw { height: 120px; padding: 10px 12px; }
}

/* ---------- 04, same shade, two lights: a big flat swatch, and a bulb that warms it (site/js/mk-paint.js) ---------- */
.mk-ashy { padding-bottom: var(--s7); }
.mk-day { display: none; }
.js .mk-day { display: grid; gap: var(--s3); }
.mk-day-sw { position: relative; height: clamp(180px, 46vw, 320px); background: var(--c); border-radius: var(--r-md); overflow: hidden; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.mk-day-bulb { position: absolute; inset: 0; background: #FF9A3C; mix-blend-mode: multiply; opacity: 0; transition: opacity .35s var(--ease); }
.mk-day-sw.is-bulb .mk-day-bulb { opacity: .8; }
.mk-day-sw.is-drag .mk-day-bulb { opacity: .8; transition: none; clip-path: inset(0 0 0 var(--cut, 100%)); }
.mk-day-edge { position: absolute; top: 0; bottom: 0; left: var(--cut, 100%); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); opacity: 0; pointer-events: none; }
.mk-day-sw.is-drag .mk-day-edge { opacity: 1; }
.mk-day-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.mk-day-tog { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mk-day-tog button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 500 15px/1.2 var(--sans); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.mk-day-tog button:hover { border-color: var(--ink); }
.mk-day-tog button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-day-hint { font-size: var(--fs-2); color: var(--ink-2); }
.mk-day-say { flex-basis: 100%; font-size: var(--fs-3); color: var(--ink); }

/* ---------- 05, the eye look (eye-looks.css holds the chart and the steps) ---------- */
.mk-eye { padding-bottom: var(--s7); }
.mk-eye .mk-head { max-width: 720px; }
.mkp .el-grid { margin-top: 0; }
.mkp .el-play { min-height: 44px; padding: 8px 20px; border-radius: var(--r-pill); font: 600 15px/1.2 var(--sans); }
.mkp .el-pick { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.mkp .el-pic img, .mkp .art-slot img { -webkit-mask: none; mask: none; }

/* ---------- 06, start with your makeup bag (site/js/makeup-bag.js) ---------- */
.mk-bag { padding-bottom: var(--s7); }
.mk-bag-keys { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 40ch; }
.mk-bag-keys li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.mk-bag-keys b { font: 400 19px/1.2 var(--serif); letter-spacing: -.01em; }
.mk-bag-static { max-width: 44ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); }
.js .mk-bag-static, .mk-bag-ui { display: none; }
.js .mk-bag-ui { display: grid; gap: var(--s3); padding: clamp(20px, 3vw, 40px); border-radius: var(--r-lg); background: var(--paper-2); }
.mk-bag-in { display: flex; gap: var(--s3); align-items: end; }
.mk-bag-pick { display: grid; gap: 6px; }
.mk-bag-pick input { display: block; width: 72px; height: 56px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; cursor: pointer; }
.mk-bag-hexrow { display: grid; gap: 6px; flex: 1; min-width: 0; }
.mk-bag-hexrow input { width: 100%; min-height: 56px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 500 20px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }
.mk-bag-hexrow input:focus { border-color: var(--ink); }
.mk-bag-hexrow input[aria-invalid="true"] { border-color: var(--berry); }
.mk-bag-msg { font: 600 15px/1.4 var(--sans); color: var(--berry); }
.mk-bag-msg:empty { display: none; }
.mk-bag-or { margin-top: var(--s1); }
.mk-bag-tries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.mk-bag-try { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: 500 15px/1.2 var(--sans); cursor: pointer; transition: border-color .3s var(--ease); }
.mk-bag-try:hover { border-color: var(--ink); }
.mk-bag-try i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.mk-bag-out { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.mk-bag-out[hidden] { display: none; }
.mk-bag-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.mk-bag-sw { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: clamp(120px, 30vw, 180px); padding: 10px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.mk-bag-sw--yours { background: var(--yours, var(--paper)); }
.mk-bag-sw--near { background: var(--theirs, var(--paper)); }
.mk-bag-sw span, .mk-bag-sw b { display: block; max-width: 100%; padding: 4px 8px; background: var(--paper); color: var(--ink); font: 600 14px/1.25 var(--sans); }
.mk-bag-sw b { padding-top: 0; font: 400 13px/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.mk-bag-title { font: 400 clamp(34px, 4vw, 52px)/1 var(--serif); letter-spacing: -.015em; }
.mk-bag-out[data-answer="adapt"] .mk-bag-title em, .mk-bag-out[data-answer="adapt"] .mk-bag-title, .mk-bag-out[data-answer="later"] .mk-bag-title { color: var(--berry); }
.mk-bag-say { max-width: 44ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.mk-bag-fine { max-width: 48ch; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.mk-bag.is-failed .mk-bag-tries, .mk-bag.is-failed .mk-bag-in { opacity: .5; }

/* ---------- 07, three looks: one row per price level, the look picture and its three cards ---------- */
.mk-looks { padding-bottom: var(--s7); }
.mk-looks .mk-head { max-width: 760px; }
.mk-looks .trust-line { margin: 0 0 var(--s5); }
.mk-looks .trust-line .note-small { max-width: 72ch; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.mk-look { display: grid; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line-2); }
.mk-look-pic { margin: 0; }
.mk-look-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.mk-look-body { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.mk-look-body > h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; letter-spacing: -.015em; }
.mk-look-line { font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.mk-looks .ed-fold { margin-top: var(--s4); }
/* the cards: hairlines, plain rectangles, no torn edge and no shadow */
.mkp .picks { gap: 0; }
.mkp .pick { padding: var(--s3) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; }
.mkp .pick-ph { border-radius: var(--r-sm); background: transparent; }
.mkp .pick-ph img { -webkit-mask: none; mask: none; mix-blend-mode: normal; border-radius: var(--r-sm); }
.mkp .pick-ph-label { box-shadow: none; }
.mkp .pick-sw { border-color: var(--line); border-radius: var(--r-sm); }
.mkp .pick-actions { border-top: 1px solid var(--line); }
.mkp .start-flag { position: static; display: inline-block; padding: 4px 10px; font: 600 12.5px/1.2 var(--sans); letter-spacing: .12em; color: var(--paper); background: var(--berry); border-radius: var(--r-pill); transform: none; box-shadow: none; }
.mkp .pick.el-flash { outline: 2px solid var(--berry); outline-offset: 4px; }
@media (min-width: 720px) {
  .mkp .mk-look-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
  .mkp .mk-look-picks .pick { padding: var(--s3) 0 0; }
}
@media (min-width: 1100px) {
  .mk-look { grid-template-columns: 4fr 8fr; column-gap: clamp(32px, 4vw, 64px); }
  .mk-look-pic { position: sticky; top: calc(var(--hdr-h) + var(--s4)); align-self: start; }
}

/* ---------- 08, find by color (shade-space.css holds the frame) ---------- */
.mkp .mk-space { padding-bottom: var(--s5); }
html.js .mkp .mk-space { display: block; }
.mk-space .mk-head { max-width: 760px; }
.mk-space .mk-head-line .link { margin-left: 4px; }
.mk-more-picks { display: grid; gap: var(--s2); padding-bottom: var(--s5); }
.mk-more-picks .more-picks { margin: 0; }
.mk-more-picks:not(:has(details:not([hidden]))) { display: none; }   /* the shade space hides the folds once it is ready */

/* ---------- 09, foundation ---------- */
.mk-rules > li > p:first-child { max-width: 30ch; }
.mk-rules > li > * + * { max-width: 56ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }

/* ---------- close: a dark band, one pill, the other pages of the season ---------- */
.mk-close-grid { display: grid; gap: var(--s5); align-items: center; }
.mk-close h2 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; max-width: 13ch; }
.mk-close-line { max-width: 40ch; margin-top: var(--s4); font-size: var(--fs-4); line-height: 1.5; }
.mk-cta { margin-top: var(--s5); }
.mk-close-links { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.mk-close-links .link { min-height: 44px; }
.mk-other { margin-top: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 640px; }
.mk-other > summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; min-height: 52px; list-style: none; cursor: pointer; font: 600 15px/1.3 var(--sans); }
.mk-other > summary::-webkit-details-marker { display: none; }
.mk-other > summary::after { content: "+"; justify-self: end; font: 400 24px/1 var(--sans); color: var(--graphite); transition: transform .3s var(--ease); }
.mk-other[open] > summary::after { transform: rotate(45deg); }
.mk-other .season-switch { margin: 0 0 var(--s3); }
.mk-other .season-switch ul { width: auto; flex-wrap: wrap; }
.mk-other .season-switch a { background: transparent; border-color: var(--line-2); color: var(--paper); }
.mk-other .season-switch a[aria-current="page"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.mk-quiet { margin-top: var(--s4); font-size: var(--fs-2); color: var(--ink-2); }
.mk-close-pic { margin: 0; justify-self: center; width: min(60vw, 280px); }
.mk-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); }
@media (min-width: 900px) { .mk-close-grid { grid-template-columns: 8fr 4fr; column-gap: clamp(32px, 5vw, 80px); } }
.mk-list { padding-top: 0; }
.mk-list .mylist { margin-top: 0; }
.mk-list:empty { display: none; }

/* ---------- the hub /makeup: the twelve seasons by family, three chips each ---------- */
.mh-hero { padding: var(--s2) 0 var(--s6); }
.mh-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.mh-text { display: grid; gap: var(--s4); }
.mh-hero h1 { font-size: clamp(46px, 6.2vw, 96px); line-height: .98; max-width: 11ch; }
.mh-lead { max-width: 34ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.mh-pic { margin: 0; width: clamp(110px, 26vw, 360px); }
.mh-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); mix-blend-mode: multiply; }
.mh .hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.mh-group { display: grid; gap: var(--s3); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line-2); }
.mh-fam { font-size: var(--fs-5); line-height: 1.05; letter-spacing: -.015em; }
.mh-row { list-style: none; margin: 0; padding: 0; display: grid; }
.mh-row > li { border-top: 1px solid var(--line); }
.mh-row > li:first-child { border-top: 0; }
.mh .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; }
.mh .hub a.hub-card:hover { transform: none; color: var(--ink); }
.mh .hub a.hub-card::before { content: none; }
.mh-chips { grid-area: chips; display: flex; gap: 4px; height: 64px; }
.mh-chips i { flex: 1 1 0; border-radius: var(--r-sm); background: var(--c); transform-origin: bottom; transition: transform .5s var(--ease); }
.mh .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); }
.mh .hub .hub-line { grid-area: line; align-self: start; font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.mh .hub a.hub-card:hover .hub-name, .mh .hub a.hub-card:focus-visible .hub-name { color: var(--berry); }
.mh .hub a.hub-card:hover .mh-chips i:nth-child(2) { transform: scaleY(.9); }
/* her card, copied to the top by site/js/saved-card.js */
.mh .hub .hub-group--yours { display: grid; gap: var(--s2); padding-bottom: var(--s4); }
.mh .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); }
.mh .hub .hub-group--yours .hub-cards { grid-template-columns: minmax(0, 520px); }
.mh-next .link { min-height: 44px; }
.mh-next { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.mh-sec { padding-bottom: var(--s6); }
@media (min-width: 720px) {
  .mh-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
  .mh-row > li { border-top: 0; }
  .mh .hub a.hub-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chips" "name" "line"; gap: var(--s2); padding: var(--s2) 0; }
  .mh-chips { height: 112px; margin-bottom: var(--s2); }
}
@media (min-width: 900px) {
  .mh-hero { padding-top: var(--s4); }
  .mh-group { grid-template-columns: 3fr 9fr; column-gap: clamp(32px, 4vw, 64px); padding: var(--s5) 0; }
  .mh-fam { padding-top: var(--s2); }
}

/* the dark close runs straight into the dark footer, with a hairline between them */
.mk-page main:has(> .mk-close) + .site-footer .ftr { margin-top: 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .mk-day-bulb, .mk-day-tog button, .mk-bag-try, .mk-fold > summary::after, .mk-other > summary::after, .mh-chips i, .mh .hub .hub-name { transition: none; }
}