/* The eye look block of /makeup/<season> (tools/eye_looks.py, site/js/eye-looks.js, oct 2026): a picture of the products (only once its file exists), a drawn chart of a
   closed eye whose three zones carry the three exact colors, and the three steps. The picture itself is styled by .lk in editorial.css; the colors here are always the
   exact HEX values written by code, on plain paper. */
.el { margin-top: 36px; }
.el-grid { display: grid; gap: 18px; align-items: start; margin-top: 8px; }
.el-grid .art-slot { margin: 0; }

/* the chart: a closed eye on paper, drawn in ink (the SVG), with three watercolor washes under the ink (the canvas, painted by site/js/paint.js in the exact HEX of each step).
   No iris, no skin and no face color: the paper is the background. The numbers sit on their zones. */
.el-diagram { margin: 0; width: 100%; max-width: 560px; }
.el-chart { position: relative; width: 100%; aspect-ratio: var(--ar, 360 / 196); }
.el-wash, .el-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.el-svg { overflow: visible; }
.el-brow path, .el-lashes path, .el-crease path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.el-brow path { stroke: #5E4E60; }
.el-crease-a { stroke-width: 1.3; opacity: .7; }
.el-crease-b { stroke-width: .8; opacity: .35; }
.el-lashline { fill: var(--ink); stroke: none; }
.el-lashes path { opacity: .9; }
.el-leader { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.el-badge circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.el-badge text { font: 700 14px/1 var(--sans); fill: var(--ink); }

/* the ink goes on once, when the chart scrolls into view (site/js/eye-looks.js adds .is-armed first, then .is-in): every stroke is drawn as a pen line along its own length (the script
   measures it into --len), the lash line sweeps in after the lid wash, the little lashes follow one after another, and the numbers pop with the house spring (--mz-spring, magazine.css).
   The washes paint themselves (paint.js). Without the script, or with reduced motion, the chart is simply finished. */
@media (prefers-reduced-motion: no-preference) {
  .el-svg.is-armed .el-brow path, .el-svg.is-armed .el-crease path, .el-svg.is-armed .el-lashes path, .el-svg.is-armed .el-leader { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
  .el-svg.is-armed .el-lashline { clip-path: inset(0 100% 0 0); }
  .el-svg.is-armed .el-badge { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: 50% 50%; }
  .el-svg.is-armed.is-in .el-brow path, .el-svg.is-armed.is-in .el-crease path, .el-svg.is-armed.is-in .el-lashes path, .el-svg.is-armed.is-in .el-leader { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1); }
  .el-svg.is-armed.is-in .el-brow path { transition-delay: .1s; }
  .el-svg.is-armed.is-in .el-crease path { transition-delay: .45s; }
  .el-svg.is-armed.is-in .el-leader { transition-delay: .9s; }
  .el-svg.is-armed.is-in .el-lashes path { transition-duration: .55s; transition-delay: calc(1.25s + var(--i, 0) * 38ms); }
  .el-svg.is-armed.is-in .el-lashline { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.45, 0, .2, 1) 1s; }
  .el-svg.is-armed.is-in .el-badge { opacity: 1; transform: none; transition: transform .75s var(--mz-spring, cubic-bezier(.2, .9, .3, 1.12)), opacity .2s ease-out; }
  .el-svg.is-armed.is-in .el-badge[data-n="1"] { transition-delay: .7s; }
  .el-svg.is-armed.is-in .el-badge[data-n="2"] { transition-delay: 1.15s; }
  .el-svg.is-armed.is-in .el-badge[data-n="3"] { transition-delay: 1.75s; }
  .el-steps.is-armed .el-n { transform: scale(0); }
  .el-steps.is-armed.is-in .el-n { transform: none; transition: transform .7s var(--mz-spring, cubic-bezier(.2, .9, .3, 1.12)) calc(.7s + var(--k, 0) * .5s); }
}

/* the steps: number, chip in its color, the zone and its code, the how-to line, the product as a link to its card */
.el-steps { list-style: none; margin: 0; padding: 0; min-width: 0; }
.el-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding-left: 8px; align-items: start; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(43, 34, 48, .14); }
.el-step:first-child { padding-top: 8px; }
.el-chip { position: relative; display: block; width: 46px; height: 46px; margin-top: 3px; border-radius: 4px 12px 4px 12px; background: var(--c); }
.el-chip.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.el-n { position: absolute; left: -7px; top: -7px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.8px solid var(--ink); border-radius: 50%; background: var(--paper); font: 700 14px/1 var(--sans); color: var(--ink); }
.el-text { min-width: 0; }
.el-text p { margin: 0; }
.el-zone-name { font: 700 14px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.el-zone-name code { margin-left: 6px; font: 600 15px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; text-transform: none; }
.el-how { margin-top: 2px; font: 400 17px/1.4 var(--sans); color: var(--ink); }
.el-pick { display: inline-block; margin-top: 2px; padding: 6px 0 2px; font: 600 17px/1.3 var(--sans); color: var(--berry); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.el-pick:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.el-shade { font: 400 15px/1.3 var(--sans); color: var(--ink-soft); }

/* the card a step points to, for a moment, so she sees where the link landed */
.el-flash { outline: 3px solid var(--berry); outline-offset: 4px; }

@media (min-width: 860px) {
  .el-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: max-content 1fr; gap: 14px 44px; }
  .el-diagram { grid-column: 1; grid-row: 1; max-width: 420px; }
  .el-steps { grid-column: 2; grid-row: 1 / span 2; }
  .el-grid .art-slot { grid-column: 1; grid-row: 2; }
}

/* ---------- it answers a touch (site/js/eye-looks.js): the price level toggles, a step you can press, "Paint it" ---------- */
.el-base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.el-svg--drawn .el-badge text { font: 700 6.4px/1 var(--sans); fill: var(--ink); }
.el-svg--drawn .el-badge circle { stroke-width: .9; }
.el-chart { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.el-badge { cursor: pointer; }

.el-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.el-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.el-tiers[hidden] { display: none; }
.el-tier { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 11px 6px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 16px/1.1 var(--sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.el-tier:hover { border-color: var(--berry); }
.el-tier[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.el-tier:focus-visible, .el-play:focus-visible, .el-zone-btn:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.el-dots { display: inline-flex; }
.el-dots i { display: block; width: 12px; height: 12px; margin-left: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--paper); }
.el-dots i:first-child { margin-left: 0; }
.el-tier[aria-pressed="true"] .el-dots i { box-shadow: 0 0 0 1.5px var(--ink); }

.el-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; }
.el-play { min-height: 44px; padding: 8px 20px 7px; border: 0; border-radius: 4px 14px 4px 14px; background: var(--berry); color: var(--paper); font: 700 16.5px/1.1 var(--sans); cursor: pointer; transition: transform .15s; }
.el-play:active { transform: scale(.97); }
.el-say { margin: 0; font: 400 15px/1.3 var(--sans); color: var(--ink); }


.el-step.is-live { cursor: pointer; border-radius: 3px; transition: background .2s; }
.el-step.is-live.is-active { background: rgba(156, 44, 78, .09); box-shadow: inset 3px 0 0 var(--berry); }
.el-step.is-live:hover:not(.is-active) { background: rgba(43, 34, 48, .04); }
.el-zone-btn { display: inline-block; margin: -13px 0; padding: 13px 0; position: relative; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.el-zone-btn code { margin-left: 6px; }
.el-step.is-active .el-chip { transform: scale(1.06); }
.el-chip { transition: transform .2s; }
@media (prefers-reduced-motion: reduce) { .el-tier, .el-play, .el-step.is-live, .el-chip { transition: none; } }

/* ---------- in a dark zone (the eye band of /makeup/<season>, final version): the chart is a paper card, the words are paper colored ---------- */
.mk-dark .el { max-width: none; margin: 0; gap: 0; }
.mk-dark .el > h2 { margin: 0; font-size: var(--mz-h2); line-height: 1; letter-spacing: -.015em; }
.mk-dark .el > .dek { margin: 8px 0 0; max-width: 34em; font: 400 17.5px/1.4 var(--sans); }
.mk-dark .el-grid { margin-top: 18px; }
.mk-dark .el-diagram { padding: 12px 12px 10px; background: var(--paper) url(/img/collage/paper.webp); border-radius: 3px; }
.mk-dark .el-step { border-bottom-color: rgba(247, 241, 232, .24); }
.mk-dark .el-chip.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.mk-dark .el-chip { box-shadow: 0 0 0 1px rgba(247, 241, 232, .5); }
.mk-dark .el-zone-name, .mk-dark .el-how, .mk-dark .el-shade, .mk-dark .el-say { color: var(--paper); }
.mk-dark .el-shade { opacity: .88; }
.mk-dark .el-pick { color: var(--paper); text-decoration-thickness: 1.5px; }
.mk-dark .el-pick:focus-visible, .mk-dark .el-zone-btn:focus-visible { outline-color: var(--paper); }
.mk-dark .el-diagram .el-bar, .mk-dark .el-diagram .el-foot { padding: 0; }
.mk-dark .el-step.is-live.is-active { background: rgba(247, 241, 232, .1); box-shadow: inset 3px 0 0 var(--blush); }
.mk-dark .el-step.is-live:hover:not(.is-active) { background: rgba(247, 241, 232, .06); }
.mk-dark .el-flash { outline-color: var(--berry); }

/* ---------- the eyelid photographs: only once a file exists (tools/eye_looks.py photo_figures); until then none of this is in the page ---------- */
.el-photos { margin: 0 calc(-1 * var(--gutter)); }
.el-photo { margin: 0; line-height: 0; }
.el-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #0E090D; }
.el-photos.is-live .el-photo:not(.is-on) { display: none; }
.el-occs { display: flex; flex-wrap: wrap; gap: 8px; }
.el-occ { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px 5px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 16px/1.1 var(--sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.el-occ:hover { border-color: var(--berry); }
.el-occ[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.el-occ:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.el--photo .el-grid { gap: 14px; }
@media (min-width: 860px) {
  .el--photo .el-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 22px 44px; }
  .el--photo .el-photos { grid-column: 1; grid-row: 1; margin: 0; }
  .el--photo .el-diagram { grid-column: 2; grid-row: 1; max-width: none; }
  .el--photo .el-steps { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .el--photo .el-step { border-bottom: 0; border-top: 1px solid rgba(247, 241, 232, .24); }
}
@media (prefers-reduced-motion: reduce) { .el-occ { transition: none; } }

/* ---------- the eyelid photographs by skin depth (tools/eye_looks.py skin_figures, site/js/eye-looks.js skinDepth): the same makeup on Fair, Medium, Tan and Deep ----------
   Without JavaScript (no html.js) the four stack, each with its own alt text and no switch. With it, one figure shows (.is-on), the others have no box, so their lazy pictures are not downloaded until
   their button is pressed. The photograph and the switch right under it are one column; every photograph is a 3:2 box, so nothing moves when the skin depth changes. */
.el-skin { display: none; }
html.js .el-photos--skin { display: flex; flex-direction: column; }
html.js .el-photos--skin .el-photo { display: contents; }
html.js .el-photos--skin .el-photo:not(.is-on) { display: none; }
html.js .el-photos--skin .el-photo-img { order: 1; }
html.js .el-photos--skin .el-skin { order: 2; }
html.js .el-skin { display: flex; margin: 10px var(--gutter) 0; }
.el-skin-btn { flex: 1 1 0; min-width: 0; min-height: 48px; margin: 0 0 0 -1.5px; padding: 6px 4px 5px; border: 1.5px solid rgba(247, 241, 232, .72); border-radius: 0; background: transparent; color: var(--paper); font: 600 16px/1.1 var(--sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.el-skin-btn:first-child { margin-left: 0; border-radius: 999px 0 0 999px; }
.el-skin-btn:last-child { border-radius: 0 999px 999px 0; }
.el-skin-btn:hover { border-color: var(--paper); }
.el-skin-btn[aria-pressed="true"] { position: relative; background: var(--paper); border-color: var(--paper); color: #17101A; }
.el-skin-btn:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blush); outline-offset: 2px; }
@media (min-width: 860px) {
  html.js .el-skin { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .el-skin-btn { transition: none; } }