/* Palette Girlies: the magazine system on top of the painted paper (docs/web/DIRECCION-EDITORIAL.md).
   Loaded on every page after site.css. Components: .kicker-no, .band--color, .no-list / .no-feature, .pull, .art-slot,
   .ed-index, .ed-fold and the motion states of site/js/motion.js (bloom, slide, lift). Swatches stay flat and exact:
   a band is a frame in one palette color, never the data. */

/* ---------- kicker with a number: "No. 3 · DEPTH" ---------- */
.kicker-no { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.s-block > .kicker-no { margin-bottom: -6px; }
.block > .kicker-no { margin-bottom: 0; }
.block > .kicker-no + h2 { margin-top: 6px; }

/* ---------- color band: full bleed, torn edge, one Gloock line (a frame in a palette color) ---------- */
.band--color { --band: var(--ink); --band-ink: var(--paper); position: relative; isolation: isolate; margin: 70px 0; padding: 44px 0 50px; background: var(--band); color: var(--band-ink); }
.band--color::before, .band--color::after { content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: -1; background: var(--band); -webkit-mask: url(/img/collage/edge-ink.webp) 0 100% / 1024px 60px repeat-x; mask: url(/img/collage/edge-ink.webp) 0 100% / 1024px 60px repeat-x; pointer-events: none; }
.band--color::before { top: -32px; }
.band--color::after { bottom: -32px; transform: scaleY(-1); -webkit-mask-position: 380px 100%; mask-position: 380px 100%; }
.band--color a { color: var(--band-ink); text-decoration-thickness: 1.5px; }
.band--color a:hover { color: var(--band-ink); }
.band--color :focus-visible { outline-color: var(--band-ink); }
.band-line { max-width: 15em; font: 600 clamp(36px, 8.6vw, 56px)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.band-line em { font-family: var(--slant); font-style: italic; color: inherit; }
.band-kicker { margin: 0 0 10px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--band-ink); }
.band-name { margin: 14px 0 0; font: 600 16px/1.35 var(--sans); color: var(--band-ink); }
.band-name b { font-weight: 700; letter-spacing: .02em; }
.band-grid { display: grid; gap: 30px; align-items: center; }
.band-grid--solo .band-text { max-width: 760px; }
.band-text > * + * { margin-top: 12px; }
.band-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.band-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px 8px; font: 700 16.5px/1 var(--sans); text-decoration: none; color: var(--ink); background: var(--paper); border: 2px solid var(--paper); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; }
.band-chips a:hover { background: var(--band); color: var(--band-ink); border-color: var(--band-ink); }
@media (min-width: 860px) {
  .band--color { margin: 84px 0; padding: 60px 0 66px; }
  .band-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; }
  .band-grid.band-grid--solo { grid-template-columns: minmax(0, 1fr); }
}

/* inside a band: paper cards keep ink text, pills and ledes take the band's text color */
.band--color .section-lede { color: var(--band-ink); }
.band--color .tab-panel { color: var(--ink); }
.band--color .tab-panel a { color: var(--berry); }
.band--color .tabs [role="tab"] { background: transparent; border-color: var(--band-ink); color: var(--band-ink); }
.band--color .tabs [role="tab"][aria-selected="true"] { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
.band--color .tabs .tab-big em { font-family: var(--slant); font-style: italic; color: var(--berry); }
.band--skin .skin2-grid { gap: 22px; }
.band--skin .tab-panel { max-width: 560px; }

/* ---------- paintings: painted on the page, not framed (Kyara, oct 2026: "que no se vea como plantilla") ----------
   No card, border, shadow, tilt or tape. The build divides each painting's own paper out (tools/build.py paper_to_white), so the image is white
   where there is no paint, and mix-blend-mode: multiply lays it over the page paper: only the paint and its soft shadow show. A watercolor edge
   (one of six code-made masks, site/img/collage/mask-N.webp, chosen by a hash of the painting's name: data-m) dissolves what reaches the edge.
   Multiply and mask sit on the same element (.art-pic) and nothing above it may make a stacking context without a paper behind it
   (transform, opacity, filter, isolation, sticky): the blend would then find no paper to multiply with.
   The live wash (a canvas) takes the same class, so a painting that has not arrived yet dissolves the same way.
   Placements: bleed, overlap, spread, cutout (.art-pair wraps the painting and the text it sits with) and inset (steps, the envelope). */
.art-slot { position: relative; margin: 0; width: 100%; }
.art-frame { position: relative; aspect-ratio: var(--ratio, 4 / 5); }
.art-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; pointer-events: none;
  --mask: url(/img/collage/mask-1.webp);
  -webkit-mask: var(--mask) 50% 50% / 100% 100% no-repeat; mask: var(--mask) 50% 50% / 100% 100% no-repeat;
  rotate: var(--tilt, 0deg); translate: 0 var(--dy, 0px);
  transition: mask-size .95s cubic-bezier(.2, .75, .25, 1), -webkit-mask-size .95s cubic-bezier(.2, .75, .25, 1), mask-position .95s cubic-bezier(.2, .75, .25, 1), -webkit-mask-position .95s cubic-bezier(.2, .75, .25, 1); }
.art-slot[data-m="2"] .art-pic { --mask: url(/img/collage/mask-2.webp); }
.art-slot[data-m="3"] .art-pic { --mask: url(/img/collage/mask-3.webp); }
.art-slot[data-m="4"] .art-pic { --mask: url(/img/collage/mask-4.webp); }
.art-slot[data-m="5"] .art-pic { --mask: url(/img/collage/mask-5.webp); }
.art-slot[data-m="6"] .art-pic { --mask: url(/img/collage/mask-6.webp); }
/* paint-in: motion.js adds .art-wait to a painting that is below the screen when the page loads and removes it when it comes into view: the mask grows from a blot */
.art-slot.art-wait .art-pic { -webkit-mask-size: 6% 6%; mask-size: 6% 6%; transition: none; }   /* the blot is there at once; only the growing is slow */
.art-slot figcaption { margin-top: 8px; font: italic 500 16px/1.3 var(--sans); color: var(--ink); }
.art-slot--wide { max-width: none; }

/* the painting and the text it sits with (a step list, the words for a colorist). A phone stacks them; a wide screen sets them as a spread. */
.art-pair { display: block; margin: 0; }
.art-pair > .art-slot { margin: 18px 0 14px; }
.art-pair > :not(.art-slot) { min-width: 0; }

/* bleed: to the edge of the screen on one side. A tall painting bleeds as a part of the width (an exact fit would be 560px of painting). */
.art-slot.art--bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); width: auto; }
.art-slot.art--bleed figcaption { padding: 0 var(--gutter); }
.art-slot.art--bleed.art--port { width: calc(84% + var(--gutter)); }
.art-slot.art--bleed.art--port.art--l { margin-right: auto; }
.art-slot.art--bleed.art--port.art--r { margin-left: auto; }
.art-slot.art--bleed.art--port.art--r figcaption { text-align: right; }
.art-slot.art--bleed.art--l .art-pic { -webkit-mask-size: 112% 100%; mask-size: 112% 100%; -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
.art-slot.art--bleed.art--r .art-pic { -webkit-mask-size: 112% 100%; mask-size: 112% 100%; -webkit-mask-position: 0 50%; mask-position: 0 50%; }
.art-slot.art--bleed.art-wait .art-pic { -webkit-mask-size: 6% 6%; mask-size: 6% 6%; }

/* bleed-x: both sides off the screen (a painting that runs to both of its own edges, such as the rail of the manual): the mask grows past the box, so nothing fades at the sides */
.art-slot.art--bleed.art--x .art-pic { -webkit-mask-size: 124% 100%; mask-size: 124% 100%; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
.art-slot.art--bleed.art--x figcaption { text-align: left; }

/* overlap: the headline above it (Gloock, as the page sets it) rides down onto the painting's empty top margin, with a halo of paper behind the letters */
.art-slot.art--overlap { width: 94%; margin-top: -56px; }   /* the pull is the painting's empty top margin: a tall one has more of it than a wide one */
.art-slot.art--overlap.art--land { margin-top: -20px; }
.art-slot.art--overlap.art--sq { margin-top: -34px; }
.art-slot.art--overlap.art--r { margin-left: auto; }
.art-slot.art--overlap.art--r figcaption { text-align: right; }
h2:has(+ .art-pair--overlap) em, h2:has(+ .art--overlap) em { font: italic 400 1em/inherit var(--slant); letter-spacing: 0; -webkit-text-stroke: 0; color: var(--berry); }   /* over paint it is Gloock italic, never the script */
h2:has(+ .art-pair--overlap), h2:has(+ .art--overlap) { position: relative; z-index: 2; text-shadow: 0 0 .22em var(--paper), 0 0 .45em var(--paper), 0 0 .8em var(--paper), 0 0 1.2em var(--paper); }

/* cutout: the objects stand free on the page. A phone shows them at four fifths of the width, to one side; a wide screen lets the text run beside them. */
.art-slot.art--cutout { width: 62%; margin-top: 10px; margin-bottom: -6px; }
.art-slot.art--cutout.art--port { margin-top: -30px; }   /* its empty top margin sits under the heading above */
.art-slot.art--cutout.art--r { margin-left: auto; }
.art-slot.art--cutout.art--r figcaption { text-align: right; }

/* spread: on a phone it is the painting at nine tenths, to one side, above the text */
.art-slot.art--spread { width: 78%; }
.art-slot.art--spread.art--r { margin-left: auto; }
.art-slot.art--spread.art--r figcaption { text-align: right; }

/* ---------- on a phone each kind has its own look, and three variants of it (art--v0, v1, v2 on the painting and art-pair--v0.. on its wrapper),
   so five season pages in a row are not one centered painting about 80% wide ---------- */
@media (max-width: 859px) {
  /* bleed: 108 to 114% of the screen, running off the screen on one side (the wrapper clips it, so there is no sideways scroll) */
  .art-pair--bleed { overflow-x: clip; }
  .art-pair .art-slot.art--bleed { --bw: 111vw; width: var(--bw); }
  .art-pair .art-slot.art--bleed.art--v0 { --bw: 108vw; }
  .art-pair .art-slot.art--bleed.art--v2 { --bw: 114vw; }
  .art-pair .art-slot.art--bleed.art--l { margin-left: calc(-1 * var(--gutter) - var(--bw) + 100vw); margin-right: 0; }
  .art-pair .art-slot.art--bleed.art--r { margin-left: calc(-1 * var(--gutter)); margin-right: 0; }
  .art-pair .art-slot.art--bleed.art--l figcaption { padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--bw) - 100vw); text-align: left; }
  .art-pair .art-slot.art--bleed.art--r figcaption { padding: 0 calc(var(--gutter) + var(--bw) - 100vw) 0 var(--gutter); text-align: right; }

  /* overlap: the headline sits over the top of the painting, on a plate of paper, in Gloock italic berry (berry on paper is 6.4:1).
     v0: the painting nearly full width, the headline on its side. v1: the painting narrower and pushed to its side, the headline from the other side across its edge.
     v2: the painting across the whole screen, the headline at the left. */
  .art-pair .art-slot.art--overlap { width: 94%; margin-top: -72px; margin-left: 0; }
  .art-pair .art-slot.art--overlap.art--land { margin-top: -28px; }   /* a wide painting has only a thin empty margin on top: the plate covers that and nothing more */
  .art-pair .art-slot.art--overlap.art--sq { margin-top: -46px; }
  .art-pair .art-slot.art--overlap.art--r { margin-left: auto; }
  .art-pair .art-slot.art--overlap.art--v1 { width: 76%; }
  .art-pair .art-slot.art--overlap.art--v2 { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); margin-top: -84px; }
  .art-pair .art-slot.art--overlap.art--v2.art--land { margin-top: -32px; }
  .art-pair .art-slot.art--overlap.art--v2.art--sq { margin-top: -54px; }
  .art-pair .art-slot.art--overlap.art--v2 figcaption { padding: 0 var(--gutter); }
  h2:has(+ .art-pair--overlap) { width: fit-content; max-width: 100%; padding: 0 12px 5px; background: rgba(247, 241, 232, .93); font-family: var(--slant); font-style: italic; font-weight: 400; color: var(--berry); text-shadow: none; justify-self: start; text-align: left; }
  h2:has(+ .art-pair--overlap) em { font: inherit; letter-spacing: inherit; -webkit-text-stroke: 0; color: inherit; }
  h2:has(+ .art-pair--overlap.art-pair--v0.art-pair--r), h2:has(+ .art-pair--overlap.art-pair--v1.art-pair--l) { justify-self: end; text-align: right; }
  .s-block:has(> h2 + .art-pair--overlap.art-pair--v0.art-pair--r) > .kicker-no, .s-block:has(> h2 + .art-pair--overlap.art-pair--v1.art-pair--l) > .kicker-no { text-align: right; }

  /* offset: about 70% wide, pushed to one side, the caption a margin note in the space beside it */
  .art-pair .art-slot.art--spread { --sw: 70%; display: grid; grid-template-columns: var(--sw) minmax(0, 1fr); column-gap: 10px; align-items: end; width: 100%; margin-left: 0; }
  .art-pair .art-slot.art--spread.art--v0 { --sw: 72%; }
  .art-pair .art-slot.art--spread.art--v1 { --sw: 68%; }
  .art-pair .art-slot.art--spread.art--r { grid-template-columns: minmax(0, 1fr) var(--sw); }
  .art-pair .art-slot.art--spread.art--r .art-frame { grid-column: 2; grid-row: 1; }
  .art-pair .art-slot.art--spread.art--r figcaption { grid-column: 1; grid-row: 1; text-align: right; }
  .art-pair .art-slot.art--spread figcaption { margin: 0 0 6px; font-size: 15px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }

  /* cutout: smaller, beside the first numbered rule (the list flows round it, each rule at its own width) */
  .art-pair--cutout { display: flow-root; }
  .art-pair .art-slot.art--cutout { float: left; width: 42%; margin: 6px 14px 8px 0; }
  .art-pair .art-slot.art--cutout.art--r { float: right; margin: 6px 0 8px 14px; }
  .art-pair .art-slot.art--cutout.art--v0 { width: 46%; }
  .art-pair .art-slot.art--cutout.art--v2 { width: 40%; }
  .art-pair--hang .art-slot.art--cutout { width: 46%; }   /* the chair has a wide empty margin, so it needs more room to read */
  .art-pair .art-slot.art--cutout figcaption { font-size: 15px; }
  .art-pair .art-slot.art--cutout.art--land, .art-pair .art-slot.art--cutout.art--sq { width: 50%; }   /* a wide painting needs more width to read at all */
  .art-pair--cutout .no-feature { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; }
  .art-pair--cutout .no-n { font-size: 52px; }
  .art-pair--cutout .no-t { font-size: 21px; }
  .art-pair--cutout .no-body { font-size: 17px; }
  .art-pair--cutout .no-why > summary { font-size: 13px; letter-spacing: .06em; }
  .art-pair--cutout .no-list, .art-pair--cutout .quotes { display: block; }
  .art-pair--cutout .no-list > li + li { margin-top: 22px; }
  .art-pair--cutout .quotes > li + li { margin-top: 10px; }
  .art-pair--cutout .quotes > li { display: flow-root; }   /* each card stops short of the painting instead of running under it */
}

@media (min-width: 921px) {
  .art-slot.art--bleed.art--x .art-pic { -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) 50% 50% / 100% 100% no-repeat; mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) 50% 50% / 100% 100% no-repeat; }   /* narrower than the window: the ends fade smoothly, the garments at the edges are not eaten by the grain of a blot */
}
.art-slot.art--bleed.art--x.art-wait .art-pic { -webkit-mask-size: 6% 6%; mask-size: 6% 6%; }
@media (min-width: 860px) {
  .art-pair { display: flex; align-items: flex-start; gap: 44px; }
  .art-pair > .art-slot { flex: none; margin: 8px 0 10px; }
  .art-pair > :not(.art-slot) { flex: 1 1 0; }
  .art-pair--r { flex-direction: row-reverse; }
  /* bleed: the painting leaves the column on its side and runs to the edge of the window */
  .art-slot.art--bleed { width: min(calc(50vw - 50% + 46%), 840px); }
  .art-slot.art--bleed.art--port { width: min(calc(50vw - 50% + 30%), 430px); }
  .art-slot.art--bleed.art--l { margin-left: calc(50% - 50vw); margin-right: 0; }
  .art-slot.art--bleed.art--r { margin-right: calc(50% - 50vw); margin-left: 0; }
  .art-slot.art-embed.art--bleed { --bw: min(calc(50vw - 50% + 46%), 840px); width: var(--bw); }
  .art-slot.art-embed.art--bleed.art--r { margin-left: calc(50% + 50vw - var(--bw)); margin-right: 0; }
  .art-slot.art--bleed.art--x { width: min(100vw, 920px); margin-left: calc(50% - min(50vw, 460px)); margin-right: 0; }
  .art-slot.art--bleed figcaption { padding: 0; max-width: 260px; }   /* a small note under the painting's inner edge */
  .art-slot.art--bleed.art--l figcaption { margin-left: auto; text-align: right; }
  .art-slot.art--bleed.art--r figcaption { margin-right: auto; text-align: left; }
  .art-slot.art--bleed.art--x figcaption { margin: 0 auto; width: 100%; max-width: 680px; padding: 0 var(--gutter); }
  /* overlap: the painting rises under the headline, which crosses its empty top margin. A tall painting has the text beside it (the pair is a flex row, as a spread);
     a wide or square one is a stage of its own, the text below it. On the right the headline moves to the right too, so it still crosses the painting. */
  .art-slot.art--overlap { width: 42%; max-width: 500px; margin: -56px 0 10px; }
  .art-slot.art--overlap.art--port { width: 34%; max-width: 350px; }
  .art-pair--overlap:has(> .art--land), .art-pair--overlap:has(> .art--sq) { display: block; }
  .art-slot.art--overlap.art--land, .art-slot.art--overlap.art--sq { width: 64%; max-width: 680px; }
  .art-slot.art--overlap.art--land { margin-top: -30px; }
  .art-slot.art--overlap.art--sq { margin-top: -44px; width: 46%; max-width: 480px; }
  .art-slot.art--overlap.art--r.art--land, .art-slot.art--overlap.art--r.art--sq { margin-left: auto; }
  .s-block:has(> h2 + .art-pair--overlap.art-pair--r) > h2, .s-block:has(> h2 + .art-pair--overlap.art-pair--r) > .kicker-no { text-align: right; max-width: none; }
  /* spread: two columns, painting on its side, the text in the other */
  .art-slot.art--spread { width: 42%; max-width: 500px; margin-left: 0; }
  .art-slot.art--spread.art--port { width: 36%; max-width: 350px; }
  .art-slot.art--spread.art--r { margin-left: 0; }
  /* cutout: a float, the text wraps */
  .art-pair--cutout { display: flow-root; }
  .art-pair--cutout { --hang: 28px; }
  .art-pair--cutout.art-pair--hang { --hang: 120px; }   /* the narrow text column of the hair pages: the objects stand out into the page margin */
  .art-slot.art--cutout { float: left; width: 40%; max-width: 460px; margin: 6px 40px 10px calc(-1 * var(--hang)); }
  .art-slot.art--cutout.art--port { width: 38%; max-width: 350px; }
  .art-pair--hang .art-slot.art--cutout.art--port { width: 44%; max-width: 380px; }
  .art-slot.art--cutout.art--r { float: right; margin: 6px calc(-1 * var(--hang)) 10px 40px; }
}

/* ---------- numbered features: No. 1 to 3 (more than three stays a list) ---------- */
.no-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.no-feature { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-top: 14px; border-top: 2px solid var(--ink); }
.no-n { grid-row: 1 / span 3; font: 400 72px/.8 var(--serif); letter-spacing: -.03em; color: var(--berry); }
.no-t { font: 600 clamp(24px, 6.4vw, 30px)/1.1 var(--serif); letter-spacing: -.008em; }
.no-body { margin-top: 8px; font: 700 18.5px/1.4 var(--sans); }
.no-feature > details { grid-column: 2; margin-top: 4px; }
.no-feature .tp-fold, .no-feature .no-why { grid-column: 2; }
.no-why > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; padding: 6px 0; cursor: pointer; font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--berry); }
.no-why > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.no-why > * + * { margin-top: 8px; }
.no-why .rule-why, .no-why .rule-seal { margin: 0; padding-bottom: 6px; }
.no-feature > .art-slot { grid-column: 1 / -1; margin: 18px 0 4px; max-width: 420px; }
@media (min-width: 860px) {
  .no-list--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .no-list--cols .no-feature { grid-template-columns: minmax(0, 1fr); }
  .no-list--cols .no-n { grid-row: auto; font-size: 96px; margin-bottom: 8px; }
  .no-list--cols .no-feature > details, .no-list--cols .no-feature .no-why { grid-column: 1; }
}
/* three rules beside a painting: one column, the numeral on the left, as the other numbered lists */
@media (min-width: 860px) {
  .art-pair .no-list--cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .art-pair .no-list--cols .no-feature { grid-template-columns: 58px minmax(0, 1fr); }
  .art-pair .no-list--cols .no-n { grid-row: 1 / span 3; font-size: 72px; margin-bottom: 0; }
  .art-pair .no-list--cols .no-feature > details, .art-pair .no-list--cols .no-feature .no-why { grid-column: 2; }
}

/* ---------- pull quote: a sentence the site already says, a berry rule and the signature ---------- */
.pull { position: relative; margin: 0; padding: 0; isolation: isolate; }
.pull::before { content: ""; display: block; width: 84px; height: 15px; margin-bottom: 18px; background: url(/img/collage/stroke-berry.webp) center / 100% 100% no-repeat; }
.pull > p { font: 400 clamp(30px, 7.2vw, 44px)/1.12 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.pull > p.ed-bloom { width: fit-content; max-width: 100%; }
.pull > p em { font-family: var(--slant); font-style: italic; color: var(--berry); }
.pull-sig { display: block; margin-top: 10px; font: 700 48px/1 var(--script); color: var(--berry); -webkit-text-stroke: .012em currentColor; }
.pull--giant > p { font-size: clamp(38px, 9.4vw, 84px); line-height: 1.04; letter-spacing: -.02em; }
.pull--giant::before { width: 120px; height: 20px; }

/* ---------- contents-style index: numbered rows with a bar of exact swatches ---------- */
.ed-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); container-type: inline-size; }
.ed-index > li { border-bottom: 1px solid rgba(43, 34, 48, .3); }
.ed-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; padding: 16px 2px; color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), background-color .25s; }
.ed-row:hover { color: var(--ink); background-color: rgba(255, 253, 248, .6); }
.ed-row-n { grid-row: 1 / span 3; font: 400 44px/1 var(--serif); letter-spacing: -.02em; color: var(--berry); }
.ed-row-name { font: 600 clamp(28px, 7.4vw, 40px)/1 var(--serif); letter-spacing: -.01em; }
.ed-row-line { font-size: 16.5px; line-height: 1.35; color: var(--ink-soft); }
.ed-row-sw { display: flex; gap: 3px; height: 16px; margin-top: 6px; }
.ed-row-sw i { flex: 1; background: var(--c); border-radius: 1px; }
@container (min-width: 960px) {
  .ed-row { grid-template-columns: 76px minmax(200px, 1fr) minmax(0, 1.2fr) minmax(300px, 1fr); column-gap: 28px; padding: 22px 6px; }
  .ed-row-n { grid-row: auto; font-size: 56px; }
  .ed-row-line { grid-column: 3; }
  .ed-row-sw { grid-column: 4; grid-row: 1; height: 26px; margin-top: 0; }
}

/* ---------- a fold inside running text (the single fold marker comes from site.css) ---------- */
.ed-fold { margin-top: 8px; }
.ed-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: fit-content; min-height: 44px; padding: 6px 0; cursor: pointer; font: 700 16px/1.3 var(--sans); color: var(--berry); list-style: none; }
.ed-fold > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.ed-fold > :not(summary) { margin-top: 10px; }
.ed-fold--head > summary { font: 600 clamp(22px, 5.6vw, 28px)/1.18 var(--serif); color: var(--ink); width: 100%; min-height: 56px; border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(43, 34, 48, .3); padding: 10px 2px; }
.ed-fold--head[open] > summary { border-bottom-color: transparent; }
.block > .ed-fold--head { margin-top: 14px; }

/* ---------- ad-page grammar (guide pages): the price at poster scale, looking inside at full width ---------- */
.gp-price b { font-size: clamp(60px, 15vw, 76px); line-height: .9; }
@media (min-width: 960px) { .gp-price b { font-size: 96px; } }
.gp-price { align-items: flex-end; }
.peek .peek-wrap { scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); }
.peek .peek-page { scroll-snap-align: center; }
@media (min-width: 960px) { .peek .peek-page { width: 300px; } .peek .peek-page--phone { width: 190px; } }

/* ---------- motion (site/js/motion.js): bloom, slide, lift. Once, on first view, never a loop, final state without motion ---------- */
.ed-bloom { position: relative; isolation: isolate; }
.ed-bloom::before { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 6%; bottom: -4%; background: var(--wash, var(--blush)); -webkit-mask: url(/img/collage/wash-band.webp) center / 100% 100% no-repeat; mask: url(/img/collage/wash-band.webp) center / 100% 100% no-repeat; opacity: var(--wash-o, .4); transform-origin: 0 50%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-motion="bloom"].is-in::before { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js [data-motion="bloom"].is-instant::before { transition: none; }
  html.js [data-motion="slide"].is-in > * { transition: opacity .5s var(--ease) calc(var(--i, 0) * 60ms), transform .5s var(--ease) calc(var(--i, 0) * 60ms); }
  html.js [data-motion="slide"].is-instant > * { transition: none; }
  /* if motion.js never starts, everything is shown after a moment */
  html.js:not(.ed-ready) [data-motion="slide"]:not(.is-in) > * { animation: ed-show .01s 2.8s forwards; }
  html.js:not(.ed-ready) [data-motion="bloom"]:not(.is-in)::before { animation: ed-show-wash .01s 2.8s forwards; }
}
@keyframes ed-show { to { opacity: 1; transform: none; } }
@keyframes ed-show-wash { to { opacity: var(--wash-o, .4); transform: none; } }
@media (hover: hover) {
  .ed-lift { transition: transform .25s var(--ease), box-shadow .25s; }
  .ed-lift:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .ed-lift, .ed-row { transition: none; } }
.gp-price.ed-bloom { width: fit-content; max-width: 100%; }

/* ---------- about: I am and I am not side by side ---------- */
@media (min-width: 720px) {
  .stamps--about { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .stamps--about .stamp-card { font-size: 18px; padding: 20px 22px; }
  .no-list--cols { }
}
.page-head .pull { margin-top: 6px; }
/* a wide block whose heading and lede stay on the reading column (the features below it use the full width) */
.ed-wide > :not(.no-list) { max-width: var(--read); }
@media (min-width: 760px) { .ed-wide > :not(.no-list) { margin-left: calc((100% - var(--read)) / 2); margin-right: auto; } }

/* a bar of exact swatches inside a numbered feature */
.no-sw { display: flex; gap: 2px; height: 22px; margin-top: 12px; max-width: 320px; }
.no-sw i { flex: 1; background: var(--c); border-radius: 1px; }
.no-sw i.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.no-feature > .no-sw { grid-column: 2; }
@media (min-width: 860px) { .no-list--cols .no-feature > .no-sw { grid-column: 1; } }

/* a band inside a .flow page bleeds past the gutter */
.flow > .band--color { max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.band--break { padding: 34px 0 38px; }
.band--break .band-line { max-width: 16em; }

/* six exact colors of the season on the band, as small paper tiles */
.band-tiles { display: flex; gap: 8px; margin-top: 22px; max-width: 420px; }
.band-tiles i { flex: 1; aspect-ratio: 3 / 4; background: var(--c); border: 4px solid var(--paper); border-bottom-width: 12px; box-shadow: 0 8px 14px -8px rgba(43, 34, 48, .6); }
.band-tiles i:nth-child(odd) { transform: rotate(-1.5deg); }
.band-tiles i:nth-child(even) { transform: rotate(1.2deg) translateY(2px); }

/* ======================================================================
   Wave E2: the text pages become contents. The dek is the one line under a headline; everything else folds.
   ====================================================================== */
.dek { font-size: 19px; line-height: 1.45; color: var(--ink); max-width: 31em; }
.block > .dek { margin-top: 10px; }
.flow > .pull { max-width: var(--read); margin-top: 52px; margin-bottom: 8px; }
.flow > .band--color { margin-top: 64px; margin-bottom: 64px; }

/* a myth cut-out that folds: the claim and its seal stay open, the verdict opens on a tap */
.myth-fold { padding: 0 6px; }
.myth-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 10px 28px 10px 0; cursor: pointer; position: relative; }
.myth-fold > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.myth-fold > summary::after { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: var(--fold-mark); transition: transform .25s var(--ease); }
.myth-fold[open] > summary::after { transform: rotate(45deg); }
.myth-fold .myth-verdict { margin-top: 0; padding-bottom: 8px; }
.myth-fold .myth-claim { font-size: 20px; }
.myth-fold + .myth-fold { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .myth-fold > summary::after { transition: none; } }

/* ---------- sliding rows: scroll-snap, the next card peeks, the row is reachable by keyboard (tabindex on the row) ---------- */
.slide-row { margin: 18px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; }
.slide-row:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }
.slide-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; }
.slide-card { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
.slide-name { margin: 0 0 8px; font: 600 24px/1.1 var(--serif); letter-spacing: -.005em; }
.slide-name a { color: var(--ink); text-decoration: none; }
.slide-name a:hover { color: var(--berry); }
.slide-card > .chips--strip { max-width: none; margin-top: 0; }
@media (min-width: 860px) {
  .slide-row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; }
  .slide-list { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .slide-card { flex: none; }
}

/* ---------- /method: the gray strip as a ladder drawn in code (the bar is the step's lightness, the gray is exact) ---------- */
.ladder { margin: 22px 0 0; }
.ladder-steps { list-style: none; margin: 0; padding: 0 0 2px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; align-items: end; border-bottom: 2px solid var(--ink); }
.ladder-steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lad-bar { display: block; width: 100%; height: calc(var(--l) * 1.7px); background: var(--c); border-radius: 1px 1px 0 0; }
.lad-bar.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.ladder-steps b { margin-top: 6px; font: 400 26px/1 var(--serif); color: var(--berry); }
.lad-l { font: 700 12.5px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.ladder figcaption { margin-top: 10px; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
@media (min-width: 700px) { .lad-bar { height: calc(var(--l) * 2.4px); } .ladder-steps { gap: 8px; } .ladder-steps b { font-size: 32px; } .lad-l { font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-motion="fill"]:not(.is-in) .lad-bar { clip-path: inset(100% 0 0 0); }
  html.js [data-motion="fill"].is-in .lad-bar { clip-path: inset(0); transition: clip-path .6s var(--ease) calc(var(--i, 0) * 70ms); }
  html.js [data-motion="fill"].is-instant .lad-bar { transition: none; }
  html.js:not(.ed-ready) [data-motion="fill"]:not(.is-in) .lad-bar { animation: ed-fill .01s 2.8s forwards; }
}
@keyframes ed-fill { to { clip-path: inset(0); } }

/* ---------- /method: the five seals as a legend, and the limits box with its folds ---------- */
.seal-row { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.seal-row li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 16px; line-height: 1.3; color: var(--ink); }
@media (min-width: 700px) { .seal-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.limits > .ed-fold { margin-top: 6px; }
.limits > .ed-fold > summary { border-top: 1px solid rgba(43, 34, 48, .3); width: 100%; min-height: 52px; font-size: 17.5px; }
.limits-label { margin-bottom: 0; }
.flow > .pull--after { margin-top: 56px; }

/* ---------- the three readings as scales of exact swatches ---------- */
.readings { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; max-width: 480px; }
.readings li { display: grid; gap: 4px; }
.rd-name { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.readings .no-sw { margin-top: 0; max-width: none; height: 26px; gap: 2px; }
.rd-ends { display: flex; justify-content: space-between; font-size: 14.5px; line-height: 1.2; color: var(--ink); }

/* paper tiles beside a pull quote: three exact colors of the page's season, as a small collage detail */
.pull-sig { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pull-tiles { display: flex; gap: 8px; padding-bottom: 4px; }
.pull-tiles i { display: block; width: 36px; height: 50px; background: var(--c); border: 4px solid var(--paper); border-bottom-width: 12px; box-shadow: 0 8px 12px -8px rgba(43, 34, 48, .6); }
.pull-tiles i:nth-child(odd) { transform: rotate(-3deg); }
.pull-tiles i:nth-child(even) { transform: rotate(2.5deg) translateY(3px); }
@media (min-width: 700px) { .pull-tiles i { width: 46px; height: 64px; } }

/* ---------- /seasons: the four groups as contents rows, and the four neighbor pairs ---------- */
.ed-row--group { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; padding: 16px 2px; }
.ed-row--group .ed-row-name { margin: 0; }
.grp-seasons { grid-column: 2; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.grp-seasons a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 7px; font: 700 16px/1.1 var(--sans); color: var(--ink); text-decoration: none; background: #FFFDF8; border: 1.5px solid var(--ink); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; }
.grp-seasons a:hover { background: var(--ink); color: var(--paper); }
.grp-seasons i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(43, 34, 48, .35); }
@container (min-width: 960px) {
  .ed-row--group { grid-template-columns: 76px minmax(160px, .8fr) minmax(0, 1.2fr) minmax(0, 1.4fr); column-gap: 28px; padding: 22px 6px; }
  .ed-row--group .ed-row-n { grid-row: auto; font-size: 56px; }
  .ed-row--group .ed-row-line { grid-column: 3; }
  .ed-row--group .grp-seasons { grid-column: 4; grid-row: 1; margin: 0; }
}
.pairs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.pair { display: flex; align-items: stretch; gap: 8px; }
.pair-half { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; align-content: start; padding: 6px 6px 8px; font: 700 16px/1.15 var(--sans); color: var(--ink); text-decoration: none; background: #FFFDF8; box-shadow: var(--shadow-paper); border-radius: 2px; }
.pair-sw { display: block; height: 44px; background: var(--c); }
.pair-x { flex: none; align-self: center; width: 40px; text-align: center; font: 700 12.5px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--berry); }
@media (min-width: 700px) { .pairs { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }

/* a landscape painting in a text page (the embeds of ART_PAGES): placed by the hash of its name, as bleed or cutout (tools/build.py art_embed) */
.art-slot.art-embed { margin-top: 26px; margin-bottom: 8px; }

/* a portrait painting (2:3) beside a block of text: the window corner next to "I'm Ximena." on the home page. On a phone it comes in from the right edge;
   a third column when wide, between the text and the stamps. */
.art-slot--tall { width: 78%; max-width: 300px; margin: 6px -4px 2px auto; }
@media (min-width: 960px) {
  .me2-grid:has(> .art-slot--tall) { grid-template-columns: minmax(0, 1.1fr) 290px minmax(0, .9fr); gap: 48px; }
  .me2-grid > .art-slot--tall { width: 100%; max-width: 290px; margin: 0; }
}

/* the envelope of The Palette Post beside the title (ARTE-IA no. 12): an object put on the page, a few degrees off square; a live wash until the painting exists.
   Floated, so the title and the lead wrap around it instead of narrowing to a column. */
.signup-head { display: block; }   /* every signup head holds the envelope (tools/build.py), so no :has() is needed; an ancestor :has() with a child combinator made every element a page inserted restyle the whole page */
.signup-head > * + * { margin-top: 8px; }
.art-slot--env { float: right; width: 92px; margin: -6px -6px 4px 8px; --tilt: 5deg; }
@media (min-width: 720px) { .art-slot--env { width: 128px; margin-left: 14px; } }

/* steps told by small square paintings (ARTE-IA.md no. 4, 7, 8, 10): the painting carries the step, the caption is one line beside it.
   Phone: a 120px object left, caption right. Wide: a row of three, caption under. */
.art-steps { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 14px; counter-reset: artstep; }
.art-steps > li { counter-increment: artstep; }
.art-slot--step { max-width: none; margin: 0; display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: center; }
.art-slot--step .art-frame { width: 124px; }
.art-steps > li:nth-child(odd) .art-pic { --tilt: -3deg; }
.art-steps > li:nth-child(even) .art-pic { --tilt: 2.5deg; }
.art-slot--step figcaption { margin: 0; font: 600 18px/1.3 var(--sans); font-style: normal; color: var(--ink); }
.art-slot--step figcaption::before { content: counter(artstep); display: block; font: 400 30px/1 var(--serif); color: var(--berry); margin-bottom: 4px; }
.art-steps--plain .art-slot--step figcaption::before { content: none; }   /* levels, not steps: no numeral */
@media (min-width: 860px) {
  .art-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .art-slot--step { grid-template-columns: 1fr; }
  .art-slot--step .art-frame { width: 100%; max-width: 260px; }
}

/* ---------- /journal: a lead story, then the rest as numbered rows ---------- */
.lead-story { position: relative; isolation: isolate; display: block; margin-top: 18px; padding: 150px 18px 20px; background: #FFFDF8; box-shadow: var(--shadow-paper); color: var(--ink); text-decoration: none; overflow: hidden; border-radius: 2px; transition: transform .3s var(--ease); }
.lead-story canvas { position: absolute; left: 0; top: 0; width: 100%; height: 190px; z-index: -1; }
.lead-story:hover { transform: translateY(-3px); color: var(--ink); }
.lead-body { display: grid; gap: 8px; }
.lead-body .kicker-no { margin: 0; padding: 4px 9px 3px; justify-self: start; background: rgba(255, 253, 248, .94); border-radius: 3px; }
.lead-title { font: 600 clamp(32px, 8.4vw, 52px)/1.02 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.lead-line { font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 30em; }
.lead-go { font: 700 17px/1.2 var(--sans); color: var(--berry); }
.lead-go::after { content: " \2192"; }
.ed-index-head { margin: 30px 0 8px; }
.ed-row--story { align-items: start; }
.ed-row-main { display: grid; gap: 4px; }
.ed-row-tag { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.ed-row--story .ed-row-name { font-size: clamp(25px, 6.6vw, 34px); line-height: 1.04; }
.ed-row--story .ed-row-sw { height: 14px; max-width: 160px; }
@media (min-width: 860px) {
  .lead-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; min-height: 360px; }
  .lead-story canvas { position: relative; grid-column: 2; grid-row: 1; height: 100%; min-height: 360px; z-index: 0; }
  .lead-body { grid-column: 1; grid-row: 1; align-content: center; padding: 36px 40px; }
}
@container (min-width: 960px) { .ed-row--story .ed-row-sw { grid-column: 4; height: 14px; } }

/* ---------- /makeup, /style, /hair: the 12 seasons as a contents list (numbers from a counter; the saved-card "Your card" copy keeps the old paper card) ---------- */
.hub > .hub-index { grid-column: 1 / -1; }   /* the hub is a grid of cards on a wide screen: the contents list takes the whole row */
.hub-index { counter-reset: hub; }
.hub-index > li { counter-increment: hub; }
.hub-index > li.hub-sep { counter-increment: none; border-bottom: 0; padding: 26px 0 4px; }
.hub-index > li.hub-sep:first-child { padding-top: 14px; }
.hub-index .hub-fam { margin: 0; font-size: 14px; color: var(--berry); }
.hub-index .hub-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "n name" "n line" "n strip"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 2px; background: none; box-shadow: none; border-radius: 0; transition: background-color .25s; }
.hub-index .hub-card:hover { transform: none; background-color: rgba(255, 253, 248, .6); }
.hub-index .hub-card::before { content: counter(hub); grid-area: n; align-self: start; font: 400 44px/.95 var(--serif); letter-spacing: -.02em; color: var(--berry); }
.hub-index .hub-name { grid-area: name; font: 600 clamp(28px, 7.4vw, 36px)/1 var(--serif); letter-spacing: -.01em; }
.hub-index .hub-line { grid-area: line; font-size: 16.5px; line-height: 1.35; color: var(--ink-soft); }
.hub-index .hub-strip { grid-area: strip; height: 16px; margin-top: 6px; }
.hub-index .hub-card.is-yours { box-shadow: inset 4px 0 0 var(--berry); padding-left: 10px; }
@container (min-width: 960px) {
  .hub-index .hub-card { grid-template-columns: 76px minmax(200px, 1fr) minmax(0, 1.2fr) minmax(300px, 1fr); grid-template-areas: "n name line strip"; column-gap: 28px; padding: 20px 6px; }
  .hub-index .hub-card::before { font-size: 56px; align-self: center; }
  .hub-index .hub-strip { height: 26px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .hub-index .hub-card { transition: none; } }

/* ---------- /manual: the start and the five sections as a contents list with big numerals ---------- */
.ed-row--part { align-items: start; row-gap: 6px; }
.ed-row--part .ed-row-n { font-size: 64px; line-height: .86; align-self: start; }
.ed-row--part .ed-row-name { margin: 0; font: 600 clamp(26px, 6.6vw, 34px)/1.05 var(--serif); letter-spacing: -.01em; }
.ed-row--part .ed-row-line { margin: 0; }
.ed-row-pages { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
@container (min-width: 960px) {
  .ed-row--part { align-items: center; }
  .ed-row--part .ed-row-n { grid-row: auto; font-size: 80px; }
  .ed-row--part .ed-row-pages { grid-column: 4; grid-row: 1; }
}

/* ---------- /makeup/<season> and /style/<season>: a lead card, then a sliding row per price level; combos in a row too ---------- */
.lead-pick { margin-top: 26px; }
.picks--lead { display: block; }
.picks--lead .pick { max-width: 420px; margin: 0 auto; }
.tier-row { margin-top: 30px; }
.tier-name { margin: 0; font: 600 clamp(26px, 6.4vw, 32px)/1.05 var(--serif); letter-spacing: -.008em; }
.tier-name::before { content: ""; display: inline-block; width: 28px; height: 6px; margin-right: 12px; vertical-align: middle; background: var(--berry); border-radius: 3px 1px 3px 1px / 4px 2px 4px 2px; }
.tier-row .slide-row { margin-top: 8px; }
.slide-list.picks { display: flex; gap: 14px; }
.slide-list.picks > .pick { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; align-self: stretch; }
.slide-list.combos { display: flex; gap: 14px; grid-template-columns: none; }
.slide-list.combos > .combo { flex: 0 0 min(64vw, 240px); }
.find-cat { padding: 4px 9px 3px; font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-radius: 3px; }
.key-line + .ed-fold { margin-top: 2px; }
@media (min-width: 860px) {
  .slide-list.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .slide-list.picks > .pick { flex: none; }
  .slide-list.combos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .slide-list.combos > .combo { flex: none; }
}
.no-list--how { gap: 18px; }
.s-block { grid-template-columns: minmax(0, 1fr); }
.s-block > .tier-row, .s-block > .lead-pick, .s-block > .slide-row, .block > .slide-row { min-width: 0; }


/* a contents list inside the 700px reading column: number, name and line on the left, the swatches (or pages, or the three seasons) on the right */
@container (min-width: 560px) and (max-width: 959px) {
  .ed-row, .ed-row--group, .ed-row--part, .ed-row--story { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 220px); column-gap: 20px; }
  .ed-row-n { grid-row: 1 / span 2; }
  .ed-row-name, .ed-row-main { grid-column: 2; grid-row: 1; }
  .ed-row-line { grid-column: 2; grid-row: 2; }
  .ed-row-sw, .ed-row-pages, .grp-seasons { grid-column: 3; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .grp-seasons { flex-direction: column; align-items: flex-start; }
  .hub-index .hub-card { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 200px); grid-template-areas: "n name strip" "n line strip"; column-gap: 20px; }
}

/* pull quotes sit in the reading column; bands with tiles; features across the wide column on a big screen */
.flow > .pull { margin-left: auto; margin-right: auto; }
.band--break .band-grid { gap: 22px; }
.band--break .band-tiles { margin-top: 0; max-width: 340px; }
.band--break .band-tiles i { border-width: 3px; border-bottom-width: 9px; }
@media (min-width: 860px) {
  .band--break .band-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; }
  .band--break .band-line { max-width: 18em; }
  .no-list--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .no-list--n4 .no-n { font-size: 80px; }
}

/* the note of a pick in a row opens on a tap, so a row shows the product and not a paragraph */
.pick-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; font: 700 15.5px/1.2 var(--sans); color: var(--berry); list-style: none; }
.pick-more > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.pick-more > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--fold-mark); transition: transform .25s var(--ease); }
.pick-more[open] > summary::after { transform: rotate(45deg); }
.pick-more .pick-note { margin-top: 2px; }
.pick-more .pick-use { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.pick-use-k { font-weight: 700; }
/* a look links to the card of each of its picks (#pick-<find id>): the card it lands on is marked */
.pick { scroll-margin-top: 16px; }
.pick:target { outline: 3px solid var(--berry); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pick-more > summary::after { transition: none; } }

/* the home block with the window corner: isolated (its washes sit behind it), so it needs the paper itself for the painting to multiply with */
.band--me { background: var(--paper) url(/img/collage/paper.webp) repeat; }

/* ---------- swatch cards, makeup looks and Ximena's table: photographs laid on the page paper like the paintings,
   with the exact chips and codes written by code beside them. None of this is in the page until its picture exists (tools/build.py look_fig). ---------- */
.lk { margin-top: 30px; }
.lk .art-slot { margin: 6px 0 4px; }
.lk .art-slot figcaption { font-size: 15px; }
.lk-grid { display: grid; gap: 14px; align-items: center; }
.lk-card-pic.art-slot { max-width: 420px; }
.lk-legend { display: grid; gap: 14px; min-width: 0; }
.lk-label { margin: 0 0 2px; font: 700 14px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.lk-list { list-style: none; margin: 0; padding: 0; }
.lk-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 40px; padding: 6px 0; border-bottom: 1px solid rgba(43, 34, 48, .14); }
.lk-list--look li { grid-template-columns: 54px 22px minmax(0, 1fr); min-height: 48px; }
.lk-list a.lk-name { display: block; padding: 8px 0; color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.lk-list a.lk-name:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.lk-kind { font: 700 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.lk-chip { display: block; width: 22px; height: 22px; border-radius: 3px 8px 3px 8px; background: var(--c); }
.lk-chip.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.lk-name { font: 600 17px/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lk-list code { font: 600 15px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); letter-spacing: .02em; }
.lk-looks { display: grid; gap: 34px; margin-top: 8px; }
.lk-look { display: grid; gap: 8px; align-items: center; min-width: 0; }
.lk-look-text { min-width: 0; }
.lk-title { margin: 4px 0 6px; font: 400 24px/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.art-slot.lk-wide { max-width: 640px; margin: 18px 0 10px; }
/* one column: a look reads title, then picture, then its three picks, so a picture sits under its own name and never under the list of the look above it */
@media (max-width: 859.98px) {
  .lk-look-text { display: contents; }
  .lk-title { order: -1; margin: 0 0 2px; }
  .lk-looks { gap: 42px; }
}
@media (min-width: 860px) {
  .lk-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; }
  .lk-look { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; }
}

/* the link to the makeup finder (site/css/makeup-finder.css styles the finder itself): a line and a button under the reel of /makeup, a link near the picks of /makeup/<season> */
.fw-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 auto 26px; }
.fw-promo-line { margin: 0; max-width: 30em; font: 400 19px/1.4 var(--sans); }
.fw-link { margin: 6px 0 4px; }