/* The lookbook: an editorial magazine grid of twenty-two pictures, each captioned like a lookbook
   (title in Boska italic, frame number and category in small caps); one of them is a film cell, a
   short silent clip that plays like a moving photograph while it is on screen. Filters (All ·
   Fashion · Beauty · Lifestyle) re-lay the grid with a FLIP glide; the filter pill sticks under the
   nav while you browse. Hovering a photo lifts it and closes a viewfinder around it (a sparkle
   glints, JS). Layout: a 24-column grid (6 on phones) whose row unit scales with its width
   (container units), so every photo keeps its own aspect ratio: --a places a photo in "All", --q in
   its own category. Photos are never shown larger than their own pixels at 2x (the clip, 540 px
   wide, stays in narrow slots). */
#lookbook {
  position: relative; overflow: clip;
  padding: clamp(84px, 8.5vw, 140px) 0 clamp(56px, 6vw, 96px);
  background:
    radial-gradient(55% 22% at 14% 4%, rgba(120, 22, 66, 0.34), transparent 70%),
    radial-gradient(45% 26% at 94% 42%, rgba(255, 46, 136, 0.1), transparent 70%),
    radial-gradient(42% 22% at 6% 74%, rgba(233, 195, 138, 0.06), transparent 70%),
    #0b0608;
}
#lookbook .lb-bg { position: absolute; inset: 0; pointer-events: none; }
#lookbook .lb-glow { position: absolute; left: -8vw; top: -10vh; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.22), rgba(255, 46, 136, 0.05) 48%, transparent 70%); filter: blur(10px); }
#lookbook .lb-glow-2 { left: auto; right: -12vw; top: 40%; width: 64vmin; height: 64vmin; background: radial-gradient(circle, rgba(255, 120, 180, 0.12), transparent 66%); }
#lookbook .lb-glow-3 { left: -14vw; top: 72%; width: 60vmin; height: 60vmin; background: radial-gradient(circle, rgba(233, 195, 138, 0.08), transparent 66%); }
#lookbook .lb-wrap { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

/* ---- heading: the title on the left, the filters on its baseline at the right */
#lookbook .lb-head { position: relative; display: flex; align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
#lookbook .lb-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 84px; height: 1px; background: var(--hot); }
#lookbook .lb-title { margin: 0 0 -0.06em -0.03em; font: 400 clamp(58px, 7.6vw, 124px) / 0.9 var(--display); letter-spacing: -0.01em; }
#lookbook .lb-title em { font: italic 400 0.84em/1 var(--serif); color: var(--hot); margin-left: 0.04em; }

/* the filter pill: in the heading row, then stuck under the nav while the grid scrolls by */
#lookbook .lb-bar { --bh: 56px; position: sticky; z-index: 30; top: calc(84px + env(safe-area-inset-top)); display: flex; justify-content: flex-end; height: var(--bh); margin: calc(-28px - var(--bh) - 4px) 0 32px; pointer-events: none; }
#lookbook .lb-filters { position: relative; display: inline-flex; align-items: center; height: var(--bh); padding: 6px; border-radius: 999px; pointer-events: auto;
  background: rgba(22, 10, 16, 0.66); box-shadow: inset 0 0 0 1px rgba(255, 244, 247, 0.14), 0 22px 44px -24px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
#lookbook .lb-f { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 100%; padding: 0 17px 1px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: italic 400 20px/1 var(--serif); color: var(--muted); transition: color 0.4s; -webkit-tap-highlight-color: transparent; }
#lookbook .lb-f:hover { color: #fff; }
#lookbook .lb-f[aria-pressed="true"] { color: #fff; }
#lookbook .lb-f:focus-visible { outline-offset: 2px; border-radius: 999px; }
#lookbook .lb-n { align-self: flex-start; margin-top: 12px; font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: 0.04em; opacity: 0.62; }
#lookbook .lb-f[aria-pressed="true"] .lb-n { opacity: 0.9; }
#lookbook .lb-dot { font: 400 15px/1 var(--sans); font-style: normal; color: var(--hot); opacity: 0.75; }
#lookbook .lb-thumb { position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--tw, 0px); transform: translateX(var(--tx, 0px)); border-radius: 999px; opacity: 0;
  background: linear-gradient(120deg, #ff2e88, #ff6aa8 55%, #ffb36b); box-shadow: 0 10px 26px -10px rgba(255, 46, 136, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.7s var(--ease), width 0.7s var(--ease), opacity 0.4s; }
#lookbook .lb-filters.ready .lb-thumb { opacity: 1; }
#lookbook .lb-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.js) #lookbook .lb-bar { display: none; }                 /* the filters need JS */

/* ---- the grid */
#lookbook .lb-gw { container-type: inline-size; margin-top: clamp(40px, 4.2vw, 64px); }
#lookbook .lb-grid { --g: clamp(14px, 1.4vw, 22px); --C: calc((100cqi + var(--g)) / 24); --R: calc(var(--C) / 2);
  position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: var(--R); column-gap: var(--g); row-gap: 0; }
#lookbook .lb-item { position: relative; z-index: 1; margin: 0; min-width: 0; align-self: start; grid-area: var(--a); }
#lookbook .lb-grid:not([data-f="all"]) .lb-item { grid-area: var(--q); }
#lookbook .lb-item.off { display: none; }
#lookbook .lb-item.leaving { display: block; position: absolute; z-index: 0; grid-area: auto !important; pointer-events: none; }

#lookbook .lb-frame { position: relative; aspect-ratio: var(--ar); }
#lookbook .lb-lift { position: absolute; inset: 0; transition: translate 0.6s var(--ease); }
#lookbook .lb-ph { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #1a0d13; box-shadow: var(--shadow); transition: box-shadow 0.6s var(--ease); }
#lookbook .lb-ph img, #lookbook .lb-ph video { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 40%); transition: scale 1.2s var(--ease); }
/* the film cell: the clip sits in a strip of 35 mm film, sprocket holes down both edges */
#lookbook .lb-film { --sp: 14px; border-radius: 8px; background-color: #070405;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18'%3E%3Crect x='4' y='5' width='6' height='8' rx='1.6' fill='%23f6eee8' fill-opacity='.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18'%3E%3Crect x='4' y='5' width='6' height='8' rx='1.6' fill='%23f6eee8' fill-opacity='.2'/%3E%3C/svg%3E");
  background-position: 0 0, 100% 0; background-size: var(--sp) 18px; background-repeat: repeat-y; }
#lookbook .lb-film video { position: absolute; top: 0; bottom: 0; left: var(--sp); width: calc(100% - 2 * var(--sp)); border-radius: 2px; background: #1a0d13; }
#lookbook .lb-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); background: linear-gradient(130deg, rgba(255, 255, 255, 0.1), transparent 24%); }
/* viewfinder corners close in on the photo you point at */
#lookbook .lb-lift::after { content: ""; position: absolute; inset: -13px; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 22px; pointer-events: none; opacity: 0; scale: 1.05; transition: opacity 0.3s, scale 0.6s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 30px 30px no-repeat, linear-gradient(#000 0 0) 100% 0 / 30px 30px no-repeat, linear-gradient(#000 0 0) 0 100% / 30px 30px no-repeat, linear-gradient(#000 0 0) 100% 100% / 30px 30px no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 30px 30px no-repeat, linear-gradient(#000 0 0) 100% 0 / 30px 30px no-repeat, linear-gradient(#000 0 0) 0 100% / 30px 30px no-repeat, linear-gradient(#000 0 0) 100% 100% / 30px 30px no-repeat;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5)); }

/* captions, set like a lookbook */
#lookbook .lb-cap { display: flex; flex-direction: column; gap: 8px; padding: 15px 2px 0; }
#lookbook .lb-t { font: italic 400 clamp(17px, 1.55vw, 23px) / 1.12 var(--serif); color: var(--ink); text-wrap: balance; transition: color 0.4s; }
#lookbook .lb-c { display: flex; align-items: center; gap: 11px; font: 500 10px/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); }
#lookbook .lb-c b { font-weight: 600; letter-spacing: 0.12em; color: rgba(255, 170, 92, 0.8); }
#lookbook .lb-c b::before { content: "\25B8"; margin-right: 4px; }

@media (hover: hover) and (pointer: fine) {
  #lookbook .lb-item:hover { z-index: 3; }
  #lookbook .lb-item:hover .lb-lift { translate: 0 -8px; }
  #lookbook .lb-item:hover .lb-ph { box-shadow: 0 50px 80px -34px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.16), 0 30px 90px -36px rgba(255, 46, 136, 0.62); }
  #lookbook .lb-item:hover .lb-ph img, #lookbook .lb-item:hover .lb-ph video { scale: 1.04; }
  #lookbook .lb-item:hover .lb-lift::after { opacity: 1; scale: 1; }
  #lookbook .lb-item:hover .lb-t { color: var(--blush); }
}

/* reveal on scroll (JS adds .in); once the filters are used everything stays revealed */
.js #lookbook .lb-item { opacity: 0; transform: translateY(44px); transition: opacity 0.9s var(--ease), transform 1.2s var(--ease); transition-delay: var(--rd, 0ms); }
.js #lookbook .lb-item.in { opacity: 1; transform: none; }
.js #lookbook .lb-grid.is-live .lb-item { opacity: 1; transform: none; transition: none; }

/* ---- placements (rows are half a column; photos keep their own ratios, or a crop that drops the
   soft blurred bands some of the originals carry). --a: "All" (four lanes; the wide one moves from
   third to second halfway), --q: its own category (three lanes; Beauty a row of three over four).
   Each photo starts a couple of rows below the lowest photo above it in its columns (row span = its
   height at this width + 3 rows of caption), so the lanes pack without holes; change a ratio or a
   span and the rows below it must be recomputed. The two Barbie pictures (i11, i21: same outfit)
   never sit side by side or one above the other in any view. */
#lookbook .i01 { --ar: 1319 / 2000; --op: 50% 50%; --a: 5 / 1 / 23 / 6; --q: 1 / 1 / 25 / 8; }   /* patent-dress */
#lookbook .i02 { --ar: 1370 / 1712; --op: 50% 40%; --a: 1 / 6 / 16 / 11; --q: 3 / 1 / 26 / 9; }   /* bw-lace */
#lookbook .i03 { --ar: 1158 / 1544; --op: 50% 40%; --a: 3 / 11 / 30 / 20; --q: 1 / 1 / 25 / 9; }   /* sage-shirt */
#lookbook .i04 { --ar: 16 / 25; --op: 42% 50%; --a: 7 / 20 / 25 / 25; --q: 3 / 17 / 30 / 25; }   /* red-car-1 */
#lookbook .i05 { --ar: 1242 / 1552; --op: 50% 40%; --a: 25 / 1 / 40 / 6; --q: 5 / 17 / 28 / 25; }   /* sleek-bun */
#lookbook .i06 { --ar: 4 / 5; --op: 50% 50%; --a: 18 / 6 / 33 / 11; --q: 6 / 9 / 29 / 17; }   /* neon-hottub */
#lookbook .i07 { --ar: 1440 / 1691; --op: 50% 50%; --a: 32 / 11 / 56 / 20; --q: 56 / 8 / 80 / 17; }   /* look-black-02 */
#lookbook .i08 { --ar: 1125 / 1415; --op: 50% 40%; --a: 27 / 20 / 42 / 25; --q: 1 / 9 / 24 / 17; }   /* raven-red */
#lookbook .i09 { --ar: 3 / 4; --op: 50% 50%; --a: 42 / 1 / 58 / 6; --q: 5 / 8 / 32 / 17; }   /* casino-jumpsuit */
#lookbook .i10 { --ar: 3 / 5; --op: 50% 50%; --a: 35 / 6 / 54 / 11; --q: 28 / 7 / 47 / 12; }   /* nails */
#lookbook .i11 { --ar: 1440 / 1795; --op: 50% 50%; --a: 44 / 20 / 59 / 25; --q: 3 / 17 / 26 / 25; }   /* barbie-sofa-2 */
#lookbook .i12 { --ar: 1828 / 2000; --op: 50% 40%; --a: 60 / 1 / 74 / 6; --q: 30 / 18 / 48 / 25; }   /* red-claws */
#lookbook .i13 { --ar: 3 / 4; --op: 50% 40%; --a: 58 / 6 / 85 / 15; --q: 31 / 9 / 55 / 17; }   /* us-velvet */
#lookbook .i14 { --ar: 3 / 4; --op: 50% 40%; --a: 58 / 15 / 74 / 20; --q: 28 / 1 / 47 / 7; }   /* red-lip */
#lookbook .i15 { --ar: 31 / 50; --op: 50% 70%; --a: 61 / 20 / 79 / 25; --q: 27 / 1 / 52 / 8; }   /* white-fur-1 */
#lookbook .i16 { --ar: 1113 / 1565; --op: 50% 40%; --a: 76 / 1 / 93 / 6; --q: 54 / 1 / 76 / 8; }   /* studio */
#lookbook .i17 { --ar: 1790 / 2000; --op: 50% 40%; --a: 87 / 6 / 110 / 15; --q: 57 / 17 / 78 / 25; }   /* dark-shirt */
#lookbook .i18 { --ar: 4 / 5; --op: 50% 40%; --a: 76 / 15 / 91 / 20; --q: 32 / 17 / 55 / 25; }   /* mafia-set */
#lookbook .i19 { --ar: 1440 / 1663; --op: 50% 40%; --a: 81 / 20 / 95 / 25; --q: 30 / 12 / 47 / 18; }   /* chandelier-1 */
#lookbook .i20 { --ar: 4 / 5; --op: 50% 40%; --a: 95 / 1 / 110 / 6; --q: 28 / 17 / 51 / 25; }   /* car-blue */
#lookbook .i21 { --ar: 3 / 4; --op: 50% 40%; --a: 93 / 15 / 109 / 20; --q: 27 / 1 / 51 / 9; }   /* barbie-orig-1 */
#lookbook .i22 { --ar: 1012 / 990; --op: 50% 49%; --a: 97 / 20 / 110 / 25; --q: 34 / 8 / 54 / 17; }   /* heels-03 */

/* ---- phones and narrow tablets: six columns, pairs and full-width features */
@media (max-width: 899px) {
  #lookbook { padding: 76px 0 56px; }
  #lookbook .lb-head { display: block; padding-bottom: 20px; }
  #lookbook .lb-title { font-size: clamp(50px, 14vw, 84px); }
  #lookbook .lb-bar { --bh: 48px; top: calc(70px + env(safe-area-inset-top)); justify-content: flex-start; margin: 18px 0 26px; }
  #lookbook .lb-filters { padding: 5px; }
  #lookbook .lb-thumb { top: 5px; bottom: 5px; }
  #lookbook .lb-f { padding: 0 11px 1px; font-size: 17.5px; }
  #lookbook .lb-n { display: none; }
  #lookbook .lb-dot { display: none; }
  #lookbook .lb-gw { max-width: 562px; margin-inline: auto; }          /* full-width photos stay crisp at 2x (raven-red: 1125 px) */
  #lookbook .lb-grid { --g: 12px; --C: calc((100cqi + var(--g)) / 6); --R: calc(var(--C) / 4); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #lookbook .lb-ph { border-radius: 12px; }
  #lookbook .lb-film { --sp: 11px; border-radius: 7px; }
  #lookbook .lb-moving { max-width: 290px; }                            /* the 540 px clip, on tablets */
  #lookbook .lb-cap { gap: 7px; padding-top: 12px; }
  #lookbook .lb-t { font-size: 18px; }
  #lookbook .lb-c { gap: 8px; font-size: 9px; letter-spacing: 0.22em; }
  #lookbook .i01 { --a: 1 / 1 / 23 / 4; --q: 1 / 1 / 23 / 4; }
  #lookbook .i02 { --a: 7 / 4 / 26 / 7; --q: 1 / 1 / 20 / 4; }
  #lookbook .i03 { --a: 29 / 1 / 65 / 7; --q: 1 / 1 / 37 / 7; }
  #lookbook .i04 { --a: 68 / 1 / 91 / 4; --q: 7 / 4 / 30 / 7; }
  #lookbook .i05 { --a: 74 / 4 / 93 / 7; --q: 7 / 4 / 26 / 7; }
  #lookbook .i06 { --a: 94 / 1 / 113 / 4; --q: 40 / 1 / 59 / 4; }
  #lookbook .i07 { --a: 96 / 4 / 114 / 7; --q: 33 / 1 / 65 / 7; }
  #lookbook .i08 { --a: 117 / 1 / 146 / 6; --q: 29 / 1 / 63 / 7; }
  #lookbook .i09 { --a: 149 / 1 / 169 / 4; --q: 68 / 1 / 88 / 4; }
  #lookbook .i10 { --a: 149 / 4 / 173 / 7; --q: 66 / 1 / 90 / 4; }
  #lookbook .i11 { --a: 172 / 1 / 191 / 4; --q: 46 / 4 / 65 / 7; }
  #lookbook .i12 { --a: 176 / 4 / 193 / 7; --q: 72 / 4 / 89 / 7; }
  #lookbook .i13 { --a: 196 / 1 / 232 / 7; --q: 105 / 1 / 125 / 4; }
  #lookbook .i14 { --a: 235 / 1 / 255 / 4; --q: 92 / 1 / 112 / 4; }
  #lookbook .i15 { --a: 241 / 4 / 264 / 7; --q: 74 / 4 / 97 / 7; }
  #lookbook .i16 { --a: 258 / 1 / 279 / 4; --q: 100 / 1 / 132 / 6; }
  #lookbook .i17 { --a: 267 / 4 / 284 / 7; --q: 135 / 1 / 152 / 4; }
  #lookbook .i18 { --a: 287 / 2 / 316 / 7; --q: 141 / 4 / 160 / 7; }
  #lookbook .i19 { --a: 319 / 1 / 337 / 4; --q: 98 / 4 / 116 / 7; }
  #lookbook .i20 { --a: 325 / 4 / 344 / 7; --q: 68 / 1 / 102 / 7; }
  #lookbook .i21 { --a: 340 / 1 / 360 / 4; --q: 111 / 4 / 131 / 7; }
  #lookbook .i22 { --a: 347 / 4 / 363 / 7; --q: 163 / 2 / 187 / 7; }
}

@media (prefers-reduced-motion: reduce) {
  .js #lookbook .lb-item { opacity: 1; transform: none; transition: none; }
  #lookbook .lb-thumb, #lookbook .lb-lift, #lookbook .lb-ph, #lookbook .lb-ph img, #lookbook .lb-ph video, #lookbook .lb-lift::after { transition: none; }
  #lookbook .lb-item:hover .lb-lift { translate: none; }
  #lookbook .lb-item:hover .lb-ph img, #lookbook .lb-item:hover .lb-ph video { scale: none; }
}