/* Palette Girlies: /style/<season> as a lookbook and /hair/<season> as a salon (final direction, oct 2026: docs/web/SECCIONES.md "Moda" and "Salón"). Markup: tools/wardrobe_pages.py. Behavior:
   site/js/wardrobe-style.js and site/js/wardrobe-hair.js. Load it after site/css/magazine.css. Everything hangs on .wd-*, .lb-* (lookbook) and .sl-* (salon) classes.
   Moda is paper with torn scraps of newsprint and tape, like a runway catalog: a masthead, three looks drawn large (tap one and the three colors of the trio swap roles) or photographed, each with its number,
   the 60 30 10 bar and the list of its pieces; a rail of the closet you slide; four combos pasted on a board that you can still move; the builder, the picks and the close as they were.
   Salón (below) is cream and a colorist's swatch ring. The colors are flat and exact on plain paper; the paper, the tape and the paint are the frame.
   Reduced motion: every final state, no loops. Without JavaScript the page reads and every color is in place. */

.wd main { overflow-x: clip; }
.wd { --wd-wood: #6B5039; --wd-line: rgba(43, 34, 48, .12); --wd-card: #FFFDF8; }
.wd h2 { font-size: clamp(40px, 6vw + 20px, 76px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.wd h2 em { font-style: italic; }
.wd .mz-lead { margin-top: 14px; }

/* ---------- the masthead: a running head, the headline, the line and the three colors of the trio ---------- */
.lb-cover { padding: 14px 0 0; }
.lb-run { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 3px double rgba(43, 34, 48, .5); }
.lb-run span:first-child { font: italic 400 22px/1 var(--slant); color: var(--ink); }
.lb-run span:last-child { font: 700 12.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.lb-h1 { font-size: clamp(39px, 10.8vw, 56px); line-height: .98; letter-spacing: -.015em; text-wrap: balance; margin: 0; max-width: 11em; }
.lb-h1 em { font-style: italic; }
.lb-lede { margin: 10px 0 0; max-width: 26em; font: 400 clamp(18px, .6vw + 16px, 21px)/1.4 var(--sans); color: var(--ink); }
.lb-looks .season-nudge { margin: 34px 0 0; }
.lb-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.lb-dot { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; width: 100%; padding: 6px 0; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.lb-dot:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 4px; }
.lb-dots i { grid-row: 1 / span 2; display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(43, 34, 48, .2), 0 6px 10px -6px rgba(43, 34, 48, .5); }
.lb-dots b { align-self: end; font: 700 13.5px/1.15 var(--sans); }
.lb-dots code { align-self: start; font: 500 12.5px/1.2 var(--sans); letter-spacing: .02em; }
.lb-dots li { display: block; min-width: 0; }

/* ---------- the looks: each drawn large on a torn scrap of newsprint, with its number ---------- */
.lb-looks { padding: 16px 0 10px; }
.lb-cap { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.wd h2.lb-cap { font-size: 12.5px; line-height: 1.3; letter-spacing: .18em; }
.lb-split { margin: 10px 0 0; font: 400 15.5px/1.35 var(--sans); color: var(--ink); }
.lb-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 60px; }
.lb-look { position: relative; }
.lb-stage { position: relative; max-width: 330px; margin: 0 auto; padding: 5.5% 4% 2.5%; }
.lb-scrap { position: absolute; inset: 0; width: 100%; height: 100%; rotate: var(--tilt, 0deg); filter: drop-shadow(0 6px 8px rgba(43, 34, 48, .22)); pointer-events: none; }
.lb-tape { position: absolute; z-index: 3; top: -9px; right: 14%; width: 74px; height: 22px; rotate: 5deg; background: url(/img/collage/tape-kraft.webp) center / 100% 100% no-repeat; }
.lb-look:nth-child(2) .lb-tape { left: 12%; right: auto; rotate: -6deg; background-image: url(/img/collage/tape-blush.webp); }
.lb-look:nth-child(3) .lb-tape { background-image: url(/img/collage/tape-lilac.webp); }
.lb-no { position: absolute; z-index: 1; left: 3%; top: -2%; margin: 0; font: 400 clamp(88px, 31vw, 128px)/.8 var(--serif); letter-spacing: -.04em; color: var(--ink); }
.lb-tap { all: unset; position: relative; z-index: 2; display: block; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-tap:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; border-radius: 4px; }
.lb-tap svg { display: block; width: 100%; height: auto; }
.lb-look.is-on .lb-tap svg { transition: filter .8s ease; }
.lb-tap:active svg { scale: .985; }
/* the three colors of the trio are variables on the look (--L, --S, --A): a drawn piece takes its class k-L, k-S or k-A, and the fills change when the roles swap */
.k-L { fill: var(--L); } .k-S { fill: var(--S); } .k-A { fill: var(--A); }
.k-L, .k-S, .k-A { transition: fill .55s ease; }
/* gray until it is seen (the script marks the section data-ready and each look .is-on as it comes into view); without the script, or with reduced motion, it is never gray */
.lb-looks[data-ready] .lb-look:not(.is-on) .lb-tap svg { filter: grayscale(1); }
.lb-info { max-width: 330px; margin: 16px auto 0; }
.lb-lead { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 400 clamp(25px, 2vw + 18px, 32px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.lb-lead b { font-weight: 400; }
.lb-lead span { font: italic 400 1em/1.1 var(--slant); color: var(--berry); }
.pd { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--L); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .3); transition: background-color .55s ease; }
.pd-S { background: var(--S); } .pd-A { background: var(--A); }
.lb-lead .pd { align-self: center; width: 18px; height: 18px; }
.lb-bar { display: flex; gap: 3px; list-style: none; margin: 14px 0 0; padding: 0; }
.lb-bar li { display: grid; gap: 4px; min-width: 0; }
.lb-bar i { display: block; height: 14px; background: var(--L); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .22); transition: background-color .55s ease; }
.lb-bar .bar-S { background: var(--S); } .lb-bar .bar-A { background: var(--A); }
.lb-bar span { font: 700 12.5px/1.2 var(--sans); color: var(--ink); }
.lb-pieces { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lb-pieces li { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1.2 var(--sans); color: var(--ink); }
/* with the photograph: it comes first, with the dots of the trio above it, and the three looks are three columns under it, numbers and lists only */
.lb-photo { margin: 18px 0 0; }
.lb-photo-img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 2px; }
.lb-looks--photo .lb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.lb-look--photo .lb-no { position: static; display: block; margin-bottom: 8px; font-size: 52px; }
.lb-look--photo .lb-info { margin: 0; max-width: none; }
.lb-look--photo .lb-lead { font-size: 18px; }
.lb-look--photo .lb-lead .pd { width: 12px; height: 12px; }
.lb-look--photo .lb-pieces { flex-direction: column; gap: 5px; }
.lb-look--photo .lb-pieces li { font-size: 13.5px; }
.lb-dots--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0 0 14px; }
.lb-photo--closet .lb-dots--four i { width: 28px; height: 28px; }
.lb-photo .lb-dots { margin-bottom: 12px; }
@media (min-width: 900px) {
  .lb-cover { padding-top: 28px; }
  .lb-cover .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: 56px; align-items: end; }
  .lb-cover .lb-run { grid-column: 1 / -1; }
  .lb-cover .lb-lede { margin: 0 0 10px; }
  .lb-h1 { font-size: clamp(64px, 6vw, 104px); max-width: 12em; }
  .lb-dots { max-width: 560px; }
  .lb-dots--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; margin-top: 44px; }
  .lb-stage, .lb-info { max-width: none; }
  .lb-looks--photo .wrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .lb-looks--photo .wrap > * { grid-column: 2; }
  .lb-looks--photo .wrap > .lb-photo { grid-column: 1; grid-row: 1 / span 3; margin-top: 0; }
  .lb-looks--photo .lb-list { margin-top: 24px; }
}

/* below the first two screens the bands are drawn only when they come near (about a third less layout work at first paint at 4x CPU); their height is remembered once seen, nothing here bleeds out of its band */
.lb-closet-band, .lb-build, .wd-picks-wrap { content-visibility: auto; }
.lb-closet-band { contain-intrinsic-size: auto 740px; } .lb-build { contain-intrinsic-size: auto 1160px; } .wd-picks-wrap { contain-intrinsic-size: auto 1300px; }
@media (min-width: 900px) { .lb-closet-band { contain-intrinsic-size: auto 780px; } .lb-build { contain-intrinsic-size: auto 820px; } .wd-picks-wrap { contain-intrinsic-size: auto 3000px; } }

/* ---------- the closet: a rail you slide, eight pieces hung on it ---------- */
.lb-closet-band { padding: 64px 0 var(--mz-pad-b); }
.lb-h2 { margin: 0; }
.lb-h2 em { font-style: italic; color: var(--berry); }
.lb-line { margin: 12px 0 0; max-width: 28em; font: 400 clamp(18px, .6vw + 16px, 21px)/1.4 var(--sans); color: var(--ink); }
.lb-closet { --s: .62; margin-top: 26px; }
.lb-rail { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 0 var(--gutter) 14px; scrollbar-width: thin; scrollbar-color: rgba(43, 34, 48, .35) transparent; }
.lb-rail:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }
.lb-hung { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 14px; position: relative; width: max-content; }
.lb-hung::before { content: ""; position: absolute; left: -24px; right: -24px; top: 12px; height: 6px; border-radius: 3px; background: var(--wd-wood); box-shadow: 0 5px 8px -5px rgba(43, 34, 48, .5); }
.lb-piece { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; scroll-snap-align: start; }
.lb-piece svg { display: block; width: calc(var(--vw) * var(--s) * 1px); height: calc(var(--vh) * var(--s) * 1px); }
.lb-closet.is-on .lb-piece svg { transition: filter .9s ease; transition-delay: calc(var(--i) * 170ms); }
.wd-gl { display: flex; align-items: flex-start; gap: 5px; margin-top: auto; padding-top: 10px; font: 600 13px/1.2 var(--sans); color: var(--ink); max-width: calc(var(--vw) * var(--s) * 1px); }
.wd-gl i { flex: none; width: 10px; height: 10px; margin-top: 2px; background: var(--c); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .25); }
.lb-closet[data-ready]:not(.is-on) .lb-piece svg { filter: grayscale(1); }
@media (min-width: 900px) { .lb-closet { --s: .7; } .lb-rail { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } .wd-gl { font-size: 14.5px; } }
.wd-fold { margin-top: 18px; }
.wd-fold > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat; transition: transform .25s; }
.wd-fold[open] > summary::after { transform: rotate(45deg); }
.wd-fold > summary, .wd-closet-band .no-why > summary { cursor: pointer; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); display: flex; align-items: center; gap: 10px; min-height: 44px; }
.wd-closet-band .no-why { margin-top: 14px; }
.wd-closet-band .no-why p, .wd-fold p, .wd-picks .ed-fold p { max-width: 42em; }
@media (prefers-reduced-motion: reduce) { .lb-closet[data-ready]:not(.is-on) .lb-piece svg, .lb-looks[data-ready] .lb-look:not(.is-on) .lb-tap svg { filter: none; } .lb-tap svg, .k-L, .k-S, .k-A, .pd, .lb-bar i { transition: none; } }

/* ---------- four ways to wear it: scraps pasted on a board (T14 as you scroll), that you can still move (T27) ---------- */
.wd-combos { padding-block: var(--mz-pad) var(--mz-pad-b); background: var(--book); }
.wd-board-paper { list-style: none; margin: 22px 0 0; padding: 4px 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; position: relative; }
.wd-c { rotate: var(--r); position: relative; z-index: 1; }
.wd-c.is-up { z-index: 4; }
.wd-c-in { position: relative; padding: 12px 12px 12px; background: var(--wd-card); border-radius: 3px; box-shadow: 0 1px 0 rgba(43, 34, 48, .08), 0 10px 18px -12px rgba(43, 34, 48, .5); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: 0; }
.wd-c-in:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.wd-c.is-up .wd-c-in { cursor: grabbing; box-shadow: 0 1px 0 rgba(43, 34, 48, .08), 0 22px 26px -12px rgba(43, 34, 48, .55); }
.wd-c.is-read .wd-c-in { box-shadow: 0 0 0 2px var(--berry), 0 10px 18px -12px rgba(43, 34, 48, .5); }
.combo-swatch { display: none; }
.wd-c .combo-cols { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wd-stack { position: relative; height: 112px; margin: 0 0 8px; }
.wd-strip { position: absolute; left: -6px; right: -6px; width: calc(100% + 12px); height: auto; pointer-events: none; }
.wd-strip-0 { top: -6px; }
.wd-strip-1 { top: 44px; }
.wd-strip-2 { top: 80px; }
.wd-c .combo-name { margin: 0; font: 400 24px/1.05 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.wd-note { margin: 18px 0 0; min-height: 1.5em; font: 600 clamp(19px, .6vw + 17px, 22px)/1.35 var(--sans); color: var(--ink); }
.wd-hand { margin: 4px 0 0; font-size: 24px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the scraps stick as the board scrolls into view: a little too high and too big, then flat on the paper (a scrubbed CSS animation, nothing for the main thread to do) */
    .wd-c { animation: wd-stick linear both; animation-timeline: view(); animation-range: entry calc(4% + var(--i) * 7%) entry calc(58% + var(--i) * 7%); }
  }
}
@keyframes wd-stick {
  0% { translate: var(--sx) var(--sy); rotate: var(--r0); scale: 1.09; opacity: 0; filter: drop-shadow(0 22px 14px rgba(43, 34, 48, .2)); }
  35% { opacity: 1; }
  100% { translate: 0 0; rotate: var(--r); scale: 1; opacity: 1; filter: drop-shadow(0 0 0 rgba(43, 34, 48, 0)); }
}

/* ---------- the builder and the picks, as they were, in this page's rhythm ---------- */
.wd-build { padding-block: var(--mz-pad) 21px; }
.wd-build h2 { margin-bottom: 30px; }
.wd-build .flatlay-slot { margin-top: 0; }
.wd-picks-wrap { padding-top: 21px; }
.wd-picks { margin-top: 38px; }
.wd-picks-head h2 { margin-bottom: 6px; }
.wd-picks .dek { margin: 0 0 6px; }
.wd-list { padding-top: 0; }

/* ---------- the close ---------- */
.wd-close { padding-top: calc(var(--mz-pad) * .85); }
.wd-close h2 { max-width: 14em; }
.wd-close .mz-lead { color: var(--paper); }
.wd-cta { margin: 24px 0 0; }
.wd-quiet { margin: 16px 0 0; max-width: 34em; font: 400 16px/1.45 var(--sans); color: var(--paper); }
.wd-quiet a { color: var(--paper); font-weight: 700; }
.wd-more-links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wd-more-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px 7px; border: 1.5px solid var(--paper); border-radius: 999px; font: 600 16px/1.2 var(--sans); text-decoration: none; color: var(--paper); }
.wd-more-links a:hover { background: var(--paper); color: var(--deep); }
.wd-close .season-switch { margin-top: 20px; }
.wd-close .wd-fold > summary { color: var(--paper); }
.wd-close .wd-fold { margin-top: 22px; }
.wd-close .season-switch a { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.wd-close .season-switch a[aria-current="page"] { background: transparent; color: var(--paper); border-color: var(--paper); }

/* ---------- wide screens ---------- */
@media (min-width: 860px) {
  .wd-board-paper { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .wd-c { animation: none; } }

/* =====================================================================================================================================================================
   /hair/<season>: Salón, a colorist's swatch ring on warm cream
   ===================================================================================================================================================================== */
.sl { --sl-cream: #F2E6D2; --sl-card: #FFFBF3; background: var(--sl-cream) url(/img/collage/paper.webp) repeat; background-blend-mode: multiply; }
.sl-cover { padding: 16px 0 0; }
.sl-run { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(43, 34, 48, .28); font: 700 12.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.sl-h1 { font-size: clamp(40px, 11vw, 56px); line-height: .98; letter-spacing: -.015em; text-wrap: balance; margin: 0; max-width: 11em; }
.sl-h1 em { font-style: italic; }
.sl-lede { margin: 10px 0 0; max-width: 26em; font: 400 clamp(18px, .6vw + 16px, 21px)/1.4 var(--sans); color: var(--ink); }

/* the ring: three locks on a metal ring, closed like a hand of cards and opening to a fan on a tap; the pivot is the hole of the tabs, at the middle of the ring */
.sl-ring { padding: 14px 0 14px; }
.sl-fan { position: relative; --lw: 104px; --lh: calc(var(--lw) * 300 / 110); height: calc(var(--lh) + 104px); max-width: 560px; margin: 0 auto; transition: height .45s ease; }
.js .sl-ring:not(.is-open) .sl-fan { height: calc(var(--lh) + 40px); }
.sl-fan-in { position: absolute; inset: 0; }
.sl-lock { all: unset; box-sizing: border-box; position: absolute; left: calc(50% - var(--lw) / 2); top: 29px; display: block; width: var(--lw); height: var(--lh); transform-origin: 50% 11px; rotate: var(--ao); cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(1px 3px 3px rgba(43, 34, 48, .3)); transition: rotate .9s var(--mz-spring), translate .5s var(--mz-spring), opacity .4s; transition-delay: calc(var(--i) * 45ms); }
.sl-lock:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; border-radius: 10px; }
.sl-lock:nth-of-type(2) { z-index: 3; } .sl-lock:nth-of-type(1) { z-index: 2; } .sl-lock:nth-of-type(3) { z-index: 1; }
.js .sl-ring:not(.is-open) .sl-lock { rotate: var(--ac); }
.sl-lock-svg, .sl-lock-paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sl-lock-svg { clip-path: inset(0); }
.sl-lock-paint { clip-path: inset(0 0 100% 0); }
.sl-tab { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * 44 / 300); pointer-events: none; z-index: 2; }
/* the stroke is painted, root to ends: the painted canvas wipes in from the top while the flat lock wipes out the same way, so no frame holds both */
.sl-lock.is-painted .sl-lock-svg { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.3, .75, .25, 1); transition-delay: calc(var(--i) * 140ms); }
.sl-lock.is-painted .sl-lock-paint { clip-path: inset(0); transition: clip-path 1.1s cubic-bezier(.3, .75, .25, 1); transition-delay: calc(var(--i) * 140ms); }
.sl-lock.is-away { visibility: hidden; }
.sl-lock--photo { --lwp: calc(var(--lw) * 2.1); left: calc(50% - var(--lwp) / 2); top: calc(40px - var(--lwp) * .09); width: var(--lwp); height: var(--lwp); transform-origin: 50% 9%; mix-blend-mode: multiply; filter: none; pointer-events: none; }
/* her photograph is a square of paper around a lock a third as wide: only the lock answers a tap, so the square never covers the strokes beside it */
.sl-lock--photo::after { content: ""; position: absolute; left: 30%; right: 30%; top: 0; bottom: 0; pointer-events: auto; }
.sl-lock-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.js .sl-ring:not(.is-open) .sl-lock--photo:not(:nth-of-type(1)) { opacity: 0; }
.sl-ring-svg { position: absolute; z-index: 6; left: calc(50% - 24px); top: 1px; width: 48px; height: 48px; pointer-events: none; }
.sl-tag { position: absolute; z-index: 5; margin: 0; left: calc(50% + sin(var(--ao)) * (var(--lh) - 11px) * -1); top: calc(40px + cos(var(--ao)) * (var(--lh) - 11px) + 10px); translate: -50% 0; width: 124px; display: grid; justify-items: center; gap: 1px; text-align: center; color: var(--ink); opacity: 1; transition: opacity .5s ease .5s; }
.sl-tag b { font: 700 14.5px/1.2 var(--sans); }
.sl-tag code { font: 500 12.5px/1.2 var(--sans); letter-spacing: .02em; }
.js .sl-ring:not(.is-open) .sl-tag { opacity: 0; transition-delay: 0s; }
.sl-act { margin: 0; text-align: center; }
.sl-open { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer; font: 700 16px/1 var(--sans); color: var(--ink); -webkit-tap-highlight-color: transparent; transition: background-color .25s, color .25s; }
.sl-open:hover, .sl-open[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.sl-open:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
html:not(.js) .sl-act, html:not(.js) .sl-hint { display: none; }
.sl-hint { margin: 10px 0 0; min-height: 1.4em; text-align: center; font: 400 16px/1.4 var(--sans); color: var(--ink); }

/* the salon cards: a formula card for each direction, with a place for its lock */
.sl-cards { padding: 24px 0 var(--mz-pad-b); }
.sl-cap { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.wd h2.sl-cap { font-size: 12.5px; line-height: 1.3; letter-spacing: .18em; }
.sl-card-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 22px; }
.sl-card { position: relative; background: var(--sl-card); border-radius: 3px; box-shadow: 0 1px 0 rgba(43, 34, 48, .1), 0 14px 22px -16px rgba(43, 34, 48, .55); transition: box-shadow .5s, translate .6s var(--mz-spring); }
.sl-card.has-lock { box-shadow: 0 0 0 2px var(--berry), 0 18px 26px -16px rgba(43, 34, 48, .6); translate: 0 -4px; }
.sl-card.is-called { translate: 0 -4px; }
.sl-card-h { margin: 0; padding: 11px 16px 10px; border-bottom: 1.5px dashed rgba(43, 34, 48, .26); font: 700 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
.sl-card-body { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px 16px 18px; align-items: start; }
.sl-slot { position: relative; width: 92px; aspect-ratio: 110 / 300; filter: drop-shadow(1px 3px 3px rgba(43, 34, 48, .26)); }
/* a photographed lock stands in the same footprint as a painted one (92 by 251 px, 78 by 213 from 900 px): her photograph is a square of paper around a lock a third as wide, so it fills the slot
   by its height and shows the middle column (the lock sits at 53 percent across), and the card and the painted lock beside it are the same size */
.sl-slot--photo { aspect-ratio: 110 / 300; filter: none; }
.sl-slot > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sl-slot > .sl-tab { inset: 0 auto auto 0; height: calc(100% * 44 / 300); }
.sl-slot-img { object-fit: cover; object-position: 53% 50%; mix-blend-mode: multiply; }
/* the lock of a card is the lock of the ring: the flat lock in its exact color first, then the painted one wiped over it, as on the ring */
.sl-slot.is-painted .sl-lock-svg { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.3, .75, .25, 1); }
.sl-slot.is-painted .sl-lock-paint { clip-path: inset(0); transition: clip-path 1.1s cubic-bezier(.3, .75, .25, 1); }
/* once its lock has been carried here the slot holds a plain button that sends the lock back */
.sl-lock-copy { all: unset; position: absolute; inset: -6px; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sl-lock-copy:focus-visible { outline: 3px solid var(--berry); outline-offset: 0; border-radius: 8px; }
.sl-fly--photo { mix-blend-mode: multiply; filter: none; }
.sl-fly > .sl-tab { inset: 0 auto auto 0; height: calc(100% * 44 / 300); }
.sl-card-t h3 { margin: 0; font: 400 clamp(26px, 2vw + 18px, 32px)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.sl-chip { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.sl-chip i { display: block; width: 58px; height: 30px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .2); }
.sl-chip code { font: 700 15.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); }
.sl-say { margin: 14px 0 0; }
.sl-say dt { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.sl-say dd { margin: 2px 0 12px; font: 400 16.5px/1.4 var(--sans); color: var(--ink); }
.sl-say dd:last-child { margin-bottom: 0; }
/* the lock that travels: a clone on top of the page, moved by the script from the ring to the slot */
.sl-fly { position: fixed; z-index: 60; left: 0; top: 0; margin: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(2px 8px 8px rgba(43, 34, 48, .35)); }
.sl-fly > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .sl-lock, .sl-tag, .sl-card, .sl-open, .sl-fan { transition: none; } .sl-lock.is-painted .sl-lock-svg, .sl-lock.is-painted .sl-lock-paint, .sl-slot.is-painted .sl-lock-svg, .sl-slot.is-painted .sl-lock-paint { transition: none; } }
@media (min-width: 900px) {
  .sl-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter) 6px; align-items: center; }
  .sl-top .wrap { padding: 0; max-width: none; }
  .sl-h1 { font-size: clamp(60px, 5.4vw, 96px); max-width: 9em; }
  .sl-fan { --lw: 158px; max-width: 640px; }
  .sl-ring .wrap { display: flex; flex-direction: column; align-items: center; }
  .sl-act { order: 0; } .sl-hint { order: 1; margin: 8px 0 14px; } .sl-fan { order: 2; width: 100%; }
  .sl-card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .sl-card-body { grid-template-columns: 78px minmax(0, 1fr); }
  .sl-slot { width: 78px; }
}

/* =====================================================================================================================================================================
   the hubs /style and /hair: a shelf of lookbooks (torn newsprint, tape and strips of the exact colors) and a shelf of swatch rings (a cream tag with a fan of three locks)
   ===================================================================================================================================================================== */
.wd-hubpage .wd-hub-body { padding-top: 6px; }
.wd-hub-body .hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 18px; }
/* the link is the plain a.hub-card of the saved card module; the site sheet's paper, tape and tilt are taken off it, the look is the span .hc inside */
.wd-hubpage a.hub-card { display: block; height: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0; transform: none; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.wd-hubpage a.hub-card::before { content: none; }
.wd-hubpage .hub-group--yours .hub-card, .wd-hubpage .hub-group--yours .hub-card:hover { transform: none; box-shadow: none; }
.wd-hubpage .hub-group--yours .hub-cards { max-width: 280px; }
.wd h2.hc-fam, .hub-group--yours .hub-fam { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.hc-row { list-style: none; margin: 12px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 12px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.hc-row::-webkit-scrollbar { display: none; }
.hc-row > li { flex: 0 0 68%; max-width: 280px; scroll-snap-align: start; }
.hc { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; box-sizing: border-box; padding: 16px 16px 16px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hub-card:hover .hc { color: var(--ink); }
.wd-hubpage a.hub-card:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; border-radius: 4px; }
.hc .hub-name { position: relative; font: 400 clamp(28px, 7vw, 34px)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hc .hub-line { position: relative; font: 400 15.5px/1.35 var(--sans); color: var(--ink); text-transform: none; }
.hc-look { background: none; box-shadow: none; rotate: var(--tilt, 0deg); transition: rotate .5s var(--mz-spring), translate .5s var(--mz-spring); padding: 22px 18px 18px; }
.hub-card:hover .hc-look { translate: 0 -3px; rotate: 0deg; transform: none; }
.hc-look::before { content: ""; position: absolute; z-index: 2; top: -8px; left: 50%; width: 66px; height: 20px; margin-left: -33px; rotate: -4deg; background: url(/img/collage/tape-kraft.webp) center / 100% 100% no-repeat; }
.hc-paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hc-paper svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 6px rgba(43, 34, 48, .2)); }
.hc-strip { position: relative; z-index: 1; display: flex; gap: 3px; height: 40px; margin: 0 0 8px; }
.hc-strip span { flex: 1; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .16); }
.hc-hair { background: #FFFBF3; border-radius: 3px; box-shadow: 0 1px 0 rgba(43, 34, 48, .1), 0 14px 22px -16px rgba(43, 34, 48, .55); transition: translate .5s var(--mz-spring); }
.hub-card:hover .hc-hair { translate: 0 -3px; transform: none; }
.hc-fan { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto 8px; overflow: visible; }
.hc-defs { position: absolute; }
.sl .hub .hub-group--yours, .lb .hub .hub-group--yours { margin-bottom: 4px; }
@media (min-width: 760px) {
  .hc-row { margin-inline: 0; padding-inline: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; overflow: visible; }
  .hc-row > li { flex: none; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hc-look, .hc-hair { transition: none; } }