/* geist-switch 2026-10-17: font and weights mapped by scratchpad/switch-to-geist.py */
/* Alda PLP: three ways to list a shelf - editorial, clean, art-directed - on the same card and
   the same controls. Composed on commerce.css and home.css: the tokens, the radius scale, the
   pill, the frame. plp.js owns filtering (Flip), sorting, quick-add, the sticky toolbar, the
   filter sheet and the art page's background changes. */

body.pl-page { margin: 0; background: var(--ac-bg); }
body.pl-page .ld-nav { opacity: 1; }   /* no opener here; the bar is simply there */
.pl { position: relative; z-index: 1; min-height: 100vh; background: var(--ac-bg); color: var(--ac-ink); font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.pl * { box-sizing: border-box; }
.pl img, .pl video { display: block; max-width: 100%; }
.pl :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; padding: 0; border: 0; color: inherit; font-size: inherit; line-height: inherit; }
.pl :where(a:not(.hm-btn, .pf-btn)) { color: inherit; text-decoration: none; }   /* the pill sets its own colour, later in the cascade than home.css */
.pl :where(button) { font-family: inherit; }
.pl-wrap { width: calc(100% - 2 * var(--hm-gut)); margin: 0 auto; }
.pl-wrap.is-wide { width: 94vw; }
.pl-sec { position: relative; padding: 8vh 0; }
.pl.is-dark { color: var(--ac-bg); }
.pl.is-dark .hm-p, .pl.is-dark .pl-desc, .pl.is-dark .pl-count, .pl.is-dark .hm-eyebrow { color: rgba(245, 246, 238, 0.66); }

/* ---------- the head of the shelf ---------- */
.pl-head { padding: 15vh 0 4vh; }
.pl-crumb { font-size: 0.78em; color: var(--ac-muted); display: flex; gap: 0.6em; }
.pl-crumb a:hover { color: var(--ac-red); }
.pl-title { font-size: 5.6vw; font-weight: 550; letter-spacing: -0.045em; line-height: 0.95; margin: 0.2em 0 0.35em; }
.pl-desc { max-width: 34em; color: var(--ac-muted); line-height: 1.6; }
.pl-count { font-size: 0.8em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.pl-cats { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pl-cats a { font-size: 0.88em; padding: 0.5em 1.15em; border-radius: 100px; border: 1px solid var(--ac-line); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pl-cats a:hover { border-color: var(--ac-ink); }
.pl-cats a.is-here { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pl-shelves { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pl-shelves button { font: inherit; font-size: 0.82em; padding: 0.42em 0.95em; border-radius: 100px; border: 1px solid var(--ac-line-soft); background: transparent; color: inherit; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; white-space: nowrap; }
.pl-shelves button:hover { border-color: var(--ac-ink); }
.pl-shelves button.is-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }

/* ---------- the toolbar: filter, sort, count, saved - sticky, glass once it is stuck ---------- */
.pf-wrap { position: sticky; top: 11vh; z-index: 3; margin-bottom: 4vh; }   /* clear of the fixed bar, which ends near 9vh */
.pf-bar { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.6em; border-radius: 100px; border: 1px solid transparent; transition: background 0.35s, box-shadow 0.35s, border-color 0.35s, padding 0.35s; }
.pf-wrap.is-stuck .pf-bar { background: rgba(251, 251, 245, 0.8); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-color: var(--ac-line-soft); box-shadow: 0 20px 50px rgba(34, 34, 34, 0.08); }
.pl.is-dark .pf-wrap.is-stuck .pf-bar { background: rgba(34, 34, 34, 0.7); border-color: rgba(245, 246, 238, 0.14); }
.pf-btn { display: inline-flex; align-items: center; gap: 0.5em; font: inherit; font-size: 0.85em; padding: 0.5em 1.05em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: inherit; cursor: pointer; white-space: nowrap; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pf-btn[aria-expanded="true"] { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pf-btn:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pl.is-dark .pf-btn { border-color: rgba(245, 246, 238, 0.3); }
.pl.is-dark .pf-btn[aria-expanded="true"] { background: var(--ac-bg); border-color: var(--ac-bg); color: var(--ac-ink); }
.pl.is-dark .pf-btn:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pf-btn .n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 100px; background: var(--ac-red); color: #fff; font-size: 0.78em; }
.pf-btn .n[hidden] { display: none; }
.pf-count-wrap { margin-left: auto; font-size: 0.82em; color: var(--ac-muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 0.6em; }
.pf-sort { position: relative; }
.pf-sortmenu { position: absolute; right: 0; top: calc(100% + 0.5em); min-width: 15em; padding: 0.4em; border-radius: var(--r-md); background: var(--ac-panel); color: var(--ac-ink); border: 1px solid var(--ac-line-soft); box-shadow: 0 24px 60px rgba(34, 34, 34, 0.12); display: none; z-index: 5; }
.pf-sort.is-open .pf-sortmenu { display: block; }
.pf-sortmenu button { display: flex; justify-content: space-between; width: 100%; text-align: left; padding: 0.6em 0.9em; border-radius: 10px; border: 0; background: none; font: inherit; font-size: 0.9em; color: inherit; cursor: pointer; }
.pf-sortmenu button:hover { background: var(--ac-bg); }
.pf-sortmenu button.is-on { background: var(--ac-ink); color: var(--ac-bg); }
.pf-view { display: inline-flex; gap: 0.2em; padding: 0.2em; border-radius: 100px; border: 1px solid var(--ac-line-soft); }
.pf-view button { width: 2.2em; height: 2.2em; border-radius: 100px; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.pf-view button.is-on { background: var(--ac-ink); color: var(--ac-bg); }
.pf-view svg { width: 0.9em; height: 0.9em; }
.pf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; padding: 0.8em 0.6em 0; }
.pf-active[hidden] { display: none; }
.pf-active button { display: inline-flex; align-items: center; gap: 0.5em; font: inherit; font-size: 0.78em; padding: 0.35em 0.8em; border-radius: 100px; border: 1px solid var(--ac-line-soft); background: var(--ac-panel); color: inherit; cursor: pointer; }
.pf-active button:hover { border-color: var(--ac-red); color: var(--ac-red); }
.pf-active button i { font-style: normal; opacity: 0.6; }
.pf-active .clear { border: 0; background: none; text-decoration: underline; text-underline-offset: 0.2em; color: var(--ac-muted); }

/* ---------- the filter panel: a sidebar, a dropdown or a sheet, one markup ---------- */
.pf-panel { color: var(--ac-ink); }
.pf-sheethead { display: none; align-items: center; justify-content: space-between; margin-bottom: 0.4em; }
.pf-grab { display: none; width: 3em; height: 4px; border-radius: 2px; background: var(--ac-line); margin: 0 auto 1.2em; }
.pf-panel.is-sheet .pf-grab { display: block; }
.pf-group { border-top: 1px solid var(--ac-line-soft); padding: 1.1em 0; }
.pf-group h4 { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); margin-bottom: 0.8em; }
.pf-opts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pf-opt { display: inline-flex; align-items: center; gap: 0.45em; font: inherit; font-size: 0.82em; padding: 0.42em 0.9em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: inherit; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s; }
.pf-opt:hover { border-color: var(--ac-ink); }
.pf-opt.is-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pf-opt .n { font-size: 0.85em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.pf-opt.is-on .n { color: rgba(245, 246, 238, 0.7); }
.pf-opt.is-zero:not(.is-on) { opacity: 0.4; }
.pf-apply { display: none; gap: 0.6em; margin-top: 1.2em; position: sticky; bottom: 0; padding: 1em 0 0; background: inherit; }
.pf-apply .hm-btn { flex: 1; justify-content: center; }
/* dropdown (editorial): under the toolbar, in the sticky wrap */
.pf-panel.is-drop { position: absolute; left: 0; right: 0; top: calc(100% + 0.6em); z-index: 4; display: none; padding: 1.2em 1.8em 1.6em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); box-shadow: 0 30px 70px rgba(34, 34, 34, 0.12); columns: 2; column-gap: 3vw; }
.pf-panel.is-drop .pf-group { break-inside: avoid; }
.pf-panel.is-drop.is-open { display: block; }
/* sidebar (clean) */
.pf-panel.is-side { position: sticky; top: 12vh; align-self: start; max-height: 84vh; overflow: auto; scrollbar-width: none; padding-right: 0.5em; }
.pf-panel.is-side::-webkit-scrollbar { display: none; }
.pf-panel.is-side .pf-group:first-of-type { border-top: 0; padding-top: 0; }
/* sheet (art, and every layout on a phone) */
.pf-panel.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: none; max-height: 84vh; overflow: auto; padding: 1em 5vw 1.6em; background: var(--ac-bg); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -30px 80px rgba(34, 34, 34, 0.18); }
.pf-panel.is-sheet.is-open { display: block; }
.pf-panel.is-sheet .pf-sheethead, .pf-panel.is-sheet .pf-apply { display: flex; }
.pf-panel.is-sheet .pf-sheethead h3 { font-size: 1.1em; font-weight: 550; }
.pf-close { font: inherit; font-size: 0.85em; padding: 0.4em 0.9em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; cursor: pointer; }
.pf-scrim { position: fixed; inset: 0; z-index: 6; background: rgba(34, 34, 34, 0.45); }
.pf-scrim[hidden] { display: none; }
/* the floating cluster - a phone's controls on every layout, the art page's on every screen */
.pf-float { position: fixed; left: 50%; bottom: 1.4em; z-index: 5; transform: translateX(-50%); display: none; align-items: center; gap: 0.3em; padding: 0.35em; border-radius: 100px; background: rgba(34, 34, 34, 0.92); color: var(--ac-bg); border: 1px solid rgba(245, 246, 238, 0.16); box-shadow: 0 20px 50px rgba(34, 34, 34, 0.25); white-space: nowrap; }
.pf-float .pf-btn { border-color: transparent; color: inherit; }
.pf-float .pf-btn[aria-expanded="true"] { background: var(--ac-bg); color: var(--ac-ink); }
.pf-float .pf-btn:hover { background: var(--ac-red); color: #fff; }
.pf-float .pf-count-wrap { margin: 0; color: rgba(245, 246, 238, 0.66); }
.pf-float.is-always { display: flex; }

/* ---------- the product card ---------- */
.pc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pc[hidden] { display: none; }
.pc-art { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); overflow: hidden; }
.pc-art > a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pc-img { width: 72%; height: auto; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s; }
.pc-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; }
.pc:hover .pc-img { transform: translateY(-2%) scale(1.04); }
.pc.has-alt:hover .pc-alt { opacity: 1; }
.pc.has-alt:hover .pc-img { opacity: 0; }
.pc-art.is-pending span { position: absolute; left: 1em; bottom: 0.9em; font-size: 0.78em; color: var(--ac-muted); }
.pc-badges { position: absolute; left: 0.9em; top: 0.9em; display: flex; flex-wrap: wrap; gap: 0.35em; max-width: 68%; pointer-events: none; }
.pc-badges span { font-size: 0.7em; padding: 0.32em 0.72em; border-radius: 100px; background: rgba(245, 246, 238, 0.92); color: var(--ac-ink); border: 1px solid var(--ac-line-soft); }
.pc-badges .is-sale { background: var(--ac-red); color: #fff; border-color: var(--ac-red); }
.pc-add { position: absolute; right: 0.8em; bottom: 0.8em; width: 2.4em; height: 2.4em; border-radius: 100px; border: 1px solid var(--ac-line); background: var(--ac-bg); color: var(--ac-ink); display: grid; place-items: center; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s; }
.pc-add:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pc-add svg { width: 0.85em; height: 0.85em; }
.pc-add .ck { display: none; }
.pc-add.is-done { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pc-add.is-done .pl-i { display: none; }
.pc-add.is-done .ck { display: block; }
.pc-vars { position: absolute; left: 0.8em; right: 3.7em; bottom: 0.9em; display: flex; flex-wrap: wrap; gap: 0.3em; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.pc.has-vars:hover .pc-vars, .pc.is-vars .pc-vars { opacity: 1; transform: none; pointer-events: auto; }
.pc-var { font: inherit; font-size: 0.72em; padding: 0.36em 0.7em; border-radius: 100px; border: 1px solid var(--ac-line); background: rgba(251, 251, 245, 0.94); color: var(--ac-ink); cursor: pointer; transition: background 0.2s, color 0.2s; }
.pc-var:hover { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15em 0.8em; align-items: baseline; padding: 0.9em 0.2em 0; }
.pc-name { font-weight: 550; font-size: 0.98em; line-height: 1.3; }
.pc-name:hover { color: var(--ac-red); }
.pc-price { font-size: 0.92em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-price s { color: var(--ac-muted); margin-left: 0.4em; font-size: 0.85em; }
.pc-price .sale { color: var(--ac-red); }
.pc-meta { grid-column: 1 / -1; font-size: 0.78em; color: var(--ac-muted); display: flex; gap: 0.6em; flex-wrap: wrap; }
.pc-meta .ok { color: #3f7a4a; }
.pc.is-soon .pc-art { border: 1px dashed var(--ac-line); background: transparent; }
.pc.is-soon .pc-art .soon { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ac-muted); padding: 1em; }
.pc.is-soon .pc-art .soon b { display: block; font-size: 1.3em; font-weight: 550; letter-spacing: -0.02em; color: var(--ac-ink); }
.pl.is-dark .pc-art { background: rgba(245, 246, 238, 0.06); border-color: rgba(245, 246, 238, 0.14); }
.pl.is-dark .pc-add { background: transparent; border-color: rgba(245, 246, 238, 0.35); color: var(--ac-bg); }
.pl.is-dark .pc-add:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pl.is-dark .pc-meta, .pl.is-dark .pc-price s { color: rgba(245, 246, 238, 0.6); }
.pl.is-dark .pc.is-soon .pc-art .soon, .pl.is-dark .pc.is-soon .pc-art .soon b { color: rgba(245, 246, 238, 0.7); }

/* ---------- grids ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vh 1.4vw; }
.pl-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-grid > .span2 { grid-column: span 2; }
.pl-grid > .row2 { grid-row: span 2; }
.pl-empty { padding: 6vh 0; text-align: center; color: var(--ac-muted); }
.pl-empty[hidden] { display: none; }
.pl-shelf.is-empty, .pl-block.is-empty { display: none; }

/* merchandising tiles that sit in the grid */
.pl-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 1.6em; border-radius: var(--r-lg); overflow: hidden; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.pl-tile .hm-frame { position: absolute; inset: 0; border-radius: 0; }
.pl-tile .hm-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%); }
.pl-tile .in { position: relative; }
.pl-tile.is-photo .in { color: var(--ac-bg); }
.pl-tile.is-ink { background: var(--ac-ink); color: var(--ac-bg); border-color: var(--ac-ink); }
.pl-tile .hm-eyebrow { margin-bottom: 0.8em; }
.pl-tile h3 { font-size: 1.5em; font-weight: 550; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.5em; }
.pl-tile p { font-size: 0.9em; line-height: 1.55; opacity: 0.8; max-width: 26em; }
.pl-tile .hm-btn { margin-top: 1.2em; align-self: flex-start; }
.pl-tile.is-ink .hm-btn { background: var(--ac-bg); border-color: var(--ac-bg); color: var(--ac-ink); }
.pl-tile.is-photo .hm-btn { background: var(--ac-bg); border-color: var(--ac-bg); color: var(--ac-ink); }

/* ============================================================ 01 editorial */
.pl-editorial .pl-head { padding-bottom: 5vh; }
.pl-editorial .pl-headgrid { display: grid; grid-template-columns: 7fr 5fr; gap: 4vw; align-items: end; }
.pl-editorial .pl-title { font-size: 9vw; letter-spacing: -0.05em; line-height: 0.9; margin: 0.15em 0 0; }
.pl-editorial .pl-headside { display: grid; gap: 1.6em; padding-bottom: 1.2vw; }
.pl-editorial .pl-film { margin-top: 6vh; }
.pl-editorial .pl-film .hm-frame { aspect-ratio: 21 / 9; border-radius: var(--r-xl); }
.pl-editorial .pl-film .cap { display: flex; justify-content: space-between; margin-top: 1em; font-size: 0.82em; color: var(--ac-muted); }
.pl-editorial .pf-wrap { margin-top: 4vh; }
.pl-editorial .pf-wrap .pl-shelves { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 52vw; }
.pl-editorial .pf-wrap .pl-shelves::-webkit-scrollbar { display: none; }
.pl-shelf { padding: 10vh 0 4vh; }
.pl-shelf.is-panel { background: var(--ac-panel); }
.pl-shelfhead { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 1em 1.6em; align-items: end; margin-bottom: 5vh; }
.pl-shelfhead .i { font-size: 0.72em; letter-spacing: 0.14em; color: var(--ac-muted); padding-bottom: 0.6em; }
.pl-shelfhead .hm-p { margin-top: 0.8em; }
.pl-shelfhead .hm-more { margin: 0 0 0.4em; }
.pl-egrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 3vh 1.4vw; }
.pl-egrid > .pc.is-feat { grid-column: span 2; grid-row: span 2; }
.pl-egrid > .pc.is-feat .pc-art { aspect-ratio: auto; flex: 1; }
.pl-egrid > .pc.is-feat .pc-img { width: 60%; }
.pl-egrid > .pc.is-feat .pc-name { font-size: 1.25em; }
.pl-egrid > .pl-phototile { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.pl-egrid > .pl-phototile .hm-frame { aspect-ratio: 1; height: 100%; }
.pl-egrid > .pl-phototile .cap { position: absolute; left: 1em; bottom: 0.9em; z-index: 1; color: var(--ac-bg); font-size: 0.85em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.pl-story { padding: 0; }
.pl-story .in { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.pl-story .hm-frame { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.pl-story .copy { padding: 6vw; border-radius: var(--r-xl); background: var(--ac-panel); display: flex; flex-direction: column; justify-content: center; }
.pl-story.is-ink .copy { background: var(--ac-ink); color: var(--ac-bg); }
.pl-story.is-ink .copy .hm-p, .pl-story.is-ink .copy .hm-eyebrow { color: rgba(245, 246, 238, 0.66); }
.pl-story .copy .hm-h { margin: 1em 0 1em; }
.pl-story .copy .hm-actions { margin-top: 2em; }

/* ============================================================ 02 clean */
.pl-clean .pl-head { padding: 14vh 0 3vh; }
.pl-clean .pl-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
.pl-clean .pl-title { font-size: 4.2vw; }
.pl-clean .pl-cats { margin-top: 2vh; }
.pl-clean .pl-shelves { margin-top: 1.2vh; }
.pl-body { display: grid; grid-template-columns: 16vw minmax(0, 1fr); gap: 3.5vw; align-items: start; padding-bottom: 6vh; }
.pl-clean .pl-grid.is-main .pc-badges span:nth-child(2) { display: none; }   /* one badge at four across; the card stays quiet */
.pl-clean .pf-wrap { top: 11vh; margin-bottom: 2vh; }
.pl-compare { background: var(--ac-panel); }
.pl-compare table { width: 100%; border-collapse: collapse; margin-top: 4vh; font-size: 0.92em; }
.pl-compare th, .pl-compare td { text-align: left; padding: 1.1em 1em; border-top: 1px solid var(--ac-line-soft); vertical-align: top; }
.pl-compare th { font-weight: 550; }
.pl-compare thead th { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); border-top: 0; font-weight: 500; }
.pl-compare td { color: var(--ac-muted); line-height: 1.55; }
.pl-compare td a { color: var(--ac-ink); border-bottom: 1px solid var(--ac-line); }
.pl-compare td a:hover { color: var(--ac-red); border-color: var(--ac-red); }
.pl-cross .pl-grid { margin-top: 5vh; }

/* ============================================================ 03 art */
.pl-art { transition: color 0.5s ease; }   /* the background is GSAP's; a CSS transition on it would fight every frame */
.pl-art .pl-head { padding: 14vh 0 2vh; position: relative; }
.pl-art .pl-title { font-size: 19vw; letter-spacing: -0.06em; line-height: 0.8; text-transform: lowercase; margin: 0; }
.pl-art .pl-headmeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; margin-top: 3vh; }
.pl-art .pl-headmeta .pl-desc { max-width: 28em; }
.pl-art .pl-index { display: grid; gap: 0.3em; text-align: right; font-size: 0.85em; }
.pl-art .pl-index a { color: var(--ac-muted); }
.pl-art .pl-index a.is-here, .pl-art .pl-index a:hover { color: inherit; }
.pl-art .pl-index .i { font-size: 0.72em; letter-spacing: 0.14em; margin-right: 0.8em; }
.pl-block { padding: 12vh 0; }
.pl-block .pl-blockhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; margin-bottom: 6vh; }
.pl-block .pl-blockhead .hm-h { max-width: 60vw; }
.pl-block .pl-blockhead .hm-p { max-width: 24em; text-align: right; }
.pl-block .hm-eyebrow { margin-bottom: 1em; }
/* the bento: one big, the rest small, one wide */
.pl-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 3vh 1.4vw; }
.pl-bento > .pc:first-child { grid-column: span 2; grid-row: span 2; }
.pl-bento > .pc:first-child .pc-art { aspect-ratio: auto; flex: 1; }
.pl-bento > .pc:nth-child(6) { grid-column: span 2; }
.pl-bento > .pc:nth-child(6) .pc-art { aspect-ratio: 2 / 1; }
.pl-bento > .pc:nth-child(6) .pc-img { width: 40%; }
/* the strip: pinned, scrolled sideways */
.pl-hscroll { overflow: hidden; }
.pl-hscroll .track { display: flex; gap: 1.4vw; padding: 0 var(--hm-gut); width: max-content; will-change: transform; }
.pl-hscroll .track > * { flex: 0 0 30vw; }
.pl-hscroll .track > .pl-htile { flex-basis: 44vw; }
.pl-hscroll .track > .pl-htile .hm-frame { aspect-ratio: auto; height: 100%; min-height: 30vw; border-radius: var(--r-xl); }
.pl-hscroll .pc-art { aspect-ratio: 4 / 5; }
/* the offsets: two columns, the second pushed down, the material's name behind */
.pl-offset { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw 4vw; padding: 4vh 6vw 0; }
.pl-offset > .pc:nth-child(even) { transform: translateY(12vh); }
.pl-offset .pc-img { width: 78%; }
.pl-offset .pc-art { aspect-ratio: 5 / 6; }
.pl-watermark { position: absolute; left: 50%; top: -6vh; transform: translateX(-50%); font-size: 26vw; font-weight: 550; letter-spacing: -0.06em; line-height: 1; color: rgba(245, 246, 238, 0.05); pointer-events: none; user-select: none; white-space: nowrap; }
.pl-block:has(.pl-offset) { padding-bottom: 24vh; }
/* to scale: every pan at its real size against the largest on the shelf */
.pl-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vh 1.4vw; align-items: end; }
.pl-scale .pc-img { width: calc(38% + 40% * var(--k, 1)); }
.pl-scale .pc-art { aspect-ratio: 1; }
/* the split: two, huge */
.pl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vw; }
.pl-split .pc-art { aspect-ratio: 4 / 5; }
.pl-split .pc-img { width: 62%; }
.pl-art .pl-statement { font-size: 3.4vw; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 70vw; }
.pl-art .pl-statement .w { display: inline-block; }
.pl-marq { border-color: currentColor; opacity: 0.85; }
.pl.is-dark .hm-marquee { border-color: rgba(245, 246, 238, 0.14); }

/* ============================================================ phone and tablet */
@media (max-width: 1023px) {
  .pl-body { grid-template-columns: 1fr; }
  .pf-panel.is-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 7; display: none; max-height: 84vh; overflow: auto; padding: 1em 5vw 1.6em; background: var(--ac-bg); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -30px 80px rgba(34, 34, 34, 0.18); }
  .pf-panel.is-side.is-open { display: block; }
  .pf-panel.is-side .pf-sheethead, .pf-panel.is-side .pf-apply { display: flex; }
  .pf-panel.is-side .pf-grab, .pf-panel.is-drop .pf-grab { display: block; }
  .pf-panel.is-drop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 7; columns: 1; max-height: 84vh; overflow: auto; padding: 1em 5vw 1.6em; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -30px 80px rgba(34, 34, 34, 0.18); }
  .pf-panel.is-drop .pf-sheethead, .pf-panel.is-drop .pf-apply { display: flex; }
  .pl-grid, .pl-egrid, .pl-bento, .pl-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-hscroll .track > * { flex-basis: 42vw; }
}
@media (max-width: 767px) {
  .pl { font-size: 15px; }
  .pl-wrap, .pl-wrap.is-wide { width: 92vw; }
  .pl-head { padding: 12vh 0 3vh; }
  .pl-title, .pl-clean .pl-title { font-size: 13vw; }
  .pl-editorial .pl-title { font-size: 22vw; }
  .pl-editorial .pl-headgrid, .pl-story .in { grid-template-columns: 1fr; }
  .pl-editorial .pl-film .hm-frame { aspect-ratio: 4 / 3; }
  .pl-editorial .pf-wrap .pl-shelves { max-width: 100%; }
  .pl-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.2em; }
  .pl-cats::-webkit-scrollbar { display: none; }
  .pl-cats a { white-space: nowrap; }
  .pl-shelves { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pl-shelves::-webkit-scrollbar { display: none; }
  /* the toolbar leaves the flow; the floating cluster takes over */
  .pf-wrap { position: static; }
  .pf-bar { display: none; }
  .pf-float { display: flex; }
  .pf-active { padding: 0.6em 0 0; }
  .pl-grid, .pl-grid.is-3, .pl-egrid, .pl-bento, .pl-scale, .pl-split, .pl-offset { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vh 3vw; }
  .pl-egrid > .pc.is-feat { grid-column: span 2; grid-row: auto; }
  .pl-egrid > .pc.is-feat .pc-art { aspect-ratio: 4 / 3; }
  .pl-egrid > .pl-phototile { grid-column: span 2; }
  .pl-egrid > .pl-phototile .hm-frame { aspect-ratio: 16 / 9; height: auto; }
  .pl-grid > .span2 { grid-column: span 2; }
  .pl-shelfhead { grid-template-columns: 1fr; gap: 0.6em; }
  .pl-shelfhead .hm-more { margin: 0; }
  .pl-story .copy { padding: 10vw 7vw; }
  .pl-compare table { display: block; overflow-x: auto; }
  .pl-art .pl-title { font-size: 28vw; }
  .pl-art .pl-headmeta { flex-direction: column; }
  .pl-art .pl-index { text-align: left; }
  .pl-block .pl-blockhead { flex-direction: column; align-items: flex-start; }
  .pl-block .pl-blockhead .hm-h, .pl-block .pl-blockhead .hm-p { max-width: none; text-align: left; }
  .pl-bento > .pc:first-child { grid-column: span 2; grid-row: auto; }
  .pl-bento > .pc:first-child .pc-art { aspect-ratio: 4 / 3; }
  .pl-bento > .pc:nth-child(6) { grid-column: span 1; }
  .pl-bento > .pc:nth-child(6) .pc-art { aspect-ratio: 1; }
  .pl-bento > .pc:nth-child(6) .pc-img { width: 72%; }
  /* the strip scrolls natively on a phone */
  .pl-hscroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pl-hscroll::-webkit-scrollbar { display: none; }
  .pl-hscroll .track > * { flex-basis: 70vw; scroll-snap-align: start; }
  .pl-hscroll .track > .pl-htile { flex-basis: 80vw; }
  .pl-offset { padding: 2vh 0 0; }
  .pl-offset > .pc:nth-child(even) { transform: none; }
  .pl-block:has(.pl-offset) { padding-bottom: 12vh; }
  .pl-art .pl-statement { font-size: 7vw; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl, .pc-img, .pc-alt, .pc-vars, .pc-add, .pf-bar, .pf-btn, .pf-opt { transition: none; }
}