/* ==========================================================================
   Best by Lauren — editorial system
   Black stock, white ink, pink everywhere it can go.
   Values are lifted from "00 Editorial System.dc.html"; see CLAUDE.md.
   ========================================================================== */

:root {
  --ink: #0E0D0D;
  --paper: #F7F5F2;
  --pink: #F4B6C8;
  --raspberry: #9E2650;
  --gold: #9C6F2E;
  --gold-light: #C9A25C;
  --white: #FFFFFF;
  --ivory: #FBF8F1;

  --muted: rgba(247, 245, 242, .7);
  --hair: rgba(247, 245, 242, .18);

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --util: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  /* The pen on Lauren's product polaroids. Chosen by rendering eight
     handwriting faces in caps against img/polaroid-ref-augustinus-bader.png:
     hers is upright, monoline, rounded and unslanted, and Shadows Into Light
     matches those letterforms most closely. Caveat and Kalam slant, Just
     Another Hand is condensed, Architects Daughter was the runner-up. */
  --marker: 'Shadows Into Light', 'Bradley Hand', cursive;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;

  /* Page gutter — one value drives every edge on the site. */
  --gut: clamp(18px, 3.5vw, 48px);
  --rule: 1px solid var(--paper);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--util);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. Fixed overlay, never interactive. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .22;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--pink); }
/* height:auto keeps the intrinsic width/height attributes (which prevent layout
   shift) from fixing the rendered height when CSS sets only a width. Rules that
   need a real height — .cover-img, .strip-track img — come later and win. */
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--pink); color: var(--ink); }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--pink); color: var(--ink); padding: 12px 18px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.u,
.kicker,
.folio { font-family: var(--util); text-transform: uppercase; letter-spacing: .22em; font-size: 10px; }

.kicker { color: var(--pink); }
.kicker--muted { color: var(--muted); }
.u-sm { font-size: 9px; letter-spacing: .24em; }
.u-md { font-size: 11px; letter-spacing: .22em; }

.d { font-family: var(--display); font-weight: 400; line-height: .9; letter-spacing: -.01em; }
.d-it { font-family: var(--display); font-style: italic; }

.hand {
  font-family: var(--hand);
  color: var(--pink);
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.05;
}

.muted { color: var(--muted); }
.pink { color: var(--pink); }

/* Prose — the magazine column. */
.prose { max-width: 62ch; }
.prose p {
  font-family: var(--display);
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.6;
  margin: 0 0 1.15em;
}
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.02;
  margin: 1.8em 0 .5em;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  margin: 1.6em 0 .4em;
}
.prose ul, .prose ol { font-family: var(--display); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; padding-left: 1.1em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--paper); }
.prose em { font-style: italic; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 2px solid var(--pink);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
}

.dropcap::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: .78;
  padding: 6px 10px 0 0;
  font-family: var(--display);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { padding-left: var(--gut); padding-right: var(--gut); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
.section { padding-top: clamp(56px, 7vw, 112px); }
.section-tight { padding-top: clamp(34px, 4vw, 60px); }

/* Section header: rule + label left, meta right. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 2px solid var(--paper);
  padding-top: 12px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.sec-head--hair { border-top-width: 1px; border-top-color: var(--hair); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.mast { padding: 14px var(--gut) 0; }

.mast-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mast-top nav { display: flex; gap: 22px; }
.mast-top nav.right { justify-content: flex-end; }
.mast-issue { text-align: center; color: var(--muted); white-space: nowrap; }

.mast-logo {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 8.6vw, 136px);
  line-height: .9;
  letter-spacing: .06em;
  margin-top: 14px;
  white-space: nowrap;
}
.mast-logo:hover { color: inherit; }

.mast-tag {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

.mast-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 40px);
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: 12px 0;
  margin-top: 16px;
}
.mast-nav a[aria-current] { font-weight: 600; color: var(--pink); }

/* Compact masthead used on article pages. */
.mast--compact { padding-bottom: 0; }
.mast--compact .mast-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: var(--rule);
  padding-bottom: 12px;
}
.mast--compact .mast-bar nav { display: flex; gap: clamp(10px, 2vw, 28px); flex-wrap: wrap; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.mast--compact .mast-bar nav.right { justify-content: flex-end; }
.mast--compact .mast-logo {
  font-size: clamp(17px, 2.4vw, 32px);
  letter-spacing: .08em;
  margin-top: 0;
  line-height: 1;
}

/* Mobile masthead */
.mast-burger { display: none; }

@media (max-width: 860px) {
  .mast-top .hide-sm { display: none; }
  .mast-nav { gap: 14px 18px; font-size: 10px; }
  .mast--compact .mast-bar { grid-template-columns: auto 1fr auto; }
  .mast--compact .mast-bar nav { display: none; }
  .mast--compact .mast-bar nav.right { display: flex; }
  .mast--compact .mast-logo { text-align: center; }
  .mast-burger {
    display: block;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------------
   Polaroid — the recurring device
   -------------------------------------------------------------------------- */

/* The frame is Lauren's own polaroid — photographed, cut out in Canva and
   trimmed of its scan fringe: static/media/polaroid-frame.webp, 531x657.
   Every number below is measured off that file. Its window sits at
   x 22..510, y 32..542, so the photo is placed by percentage *inside* the
   frame rather than by padding: absolute insets resolve against .pol's own
   box, so the photo stays registered to the window however .pol is sized —
   percentage padding would have resolved against the parent instead and
   drifted the moment anything set an explicit width (.nl-polaroid does).
   The photo is cropped to the window's 489x511 because a polaroid only comes
   in one shape; pass `position` to choose what survives the crop. */
.pol {
  position: relative;
  display: block;
  /* Every child is absolutely positioned, so the frame has no intrinsic size:
     as a flex or grid item it would otherwise collapse to nothing (it did, on
     /bestie/). An explicit width gives it something to resolve against. */
  width: 100%;
  aspect-ratio: 531 / 657;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}
.pol::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/media/polaroid-frame.webp) center / 100% 100% no-repeat;
  z-index: 0;
}
.pol > picture,
.pol > img,
.pol > .ph {
  position: absolute;
  z-index: 1;
  left: 4.1431%;            /*  22 / 531 */
  top: 4.8706%;             /*  32 / 657 */
  width: 92.0904%;          /* 489 / 531 */
  height: 77.7778%;         /* 511 / 657 */
  overflow: hidden;
}
.pol img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Set below the frame, not on the paper — see polaroid() in lib/image.mjs. */
.pol-fig { display: block; width: 100%; margin: 0; }
.pol-note {
  margin: 12px 2px 0;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}
.pol .cap {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 82.6484%;            /* 543 / 657 — the bottom band starts here */
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
}
.pol--sm .cap { font-size: 8px; letter-spacing: .14em; }
.pol--sm + .pol-note { font-size: 8px; letter-spacing: .14em; }
/* `pink: true` used to paint the frame the signature pink. The frame is now a
   photograph of Lauren's own polaroid, and a real polaroid is white — tinting
   the paper turned it back into a flat pink card, which is the thing the swap
   was meant to stop. The class is kept as a no-op so the call sites that pass
   it still read correctly, and so the pink can come back as a second
   photographed frame rather than as a filter. */
.pol--pink { background: var(--white); }

.tilt-1 { transform: rotate(1.5deg); }
.tilt-2 { transform: rotate(-2deg); }
.tilt-3 { transform: rotate(3deg); }
.tilt-4 { transform: rotate(-4deg); }

/* Tape */
.tape {
  position: absolute;
  width: 74px; height: 22px;
  background: rgba(247, 245, 242, .22);
  border-left: 1px solid rgba(247, 245, 242, .3);
  border-right: 1px solid rgba(247, 245, 242, .3);
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 3;
}

/* Stamp */
.stamp {
  display: inline-block;
  border: 2px solid var(--pink);
  color: var(--pink);
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(-8deg);
  opacity: .92;
}
.stamp--paper { border-color: var(--white); color: var(--white); }

/* Lauren's note — pink ruled card */
.note {
  background: var(--pink);
  color: var(--ink);
  padding: 20px 22px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transform: rotate(1.5deg);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(247, 245, 242, .32) 27px 28px);
}
.note .kicker { color: var(--raspberry); }
.note-body { font-family: var(--hand); font-size: 24px; line-height: 28px; margin-top: 8px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Pink spreads
   -------------------------------------------------------------------------- */

.pink-block { background: var(--pink); color: var(--ink); }
.pink-block a:hover { color: var(--raspberry); }
.pink-block .muted { color: rgba(14, 13, 13, .68); }
.pink-block .kicker { color: var(--raspberry); }
.pink-block .sec-head { border-top-color: var(--ink); }
.pink-block .hand { color: var(--raspberry); }
.pink-block .prose a { color: var(--raspberry); }

/* --------------------------------------------------------------------------
   The seal
   -------------------------------------------------------------------------- */

.seal-mark {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  justify-content: center;
  margin: clamp(56px, 7vw, 110px) 0 0;
}
.seal-mark::before,
.seal-mark::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair);
  max-width: 300px;
}
.pink-block .seal-mark::before,
.pink-block .seal-mark::after { background: rgba(14, 13, 13, .22); }
.seal-mark img { width: clamp(64px, 8vw, 96px); height: auto; }

.seal-badge { width: 64px; height: auto; }
.seal-badge--sm { width: 44px; }

/* --------------------------------------------------------------------------
   Cards / rails
   -------------------------------------------------------------------------- */

.card-title {
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.06;
  margin-top: 10px;
}
.card-deck {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 8px;
}
.card-meta { margin-top: 12px; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: clamp(16px, 2.2vw, 34px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--hair); }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 3vw, 46px);
}
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3.5vw, 56px); }

/* --------------------------------------------------------------------------
   Article — best-of product modules
   -------------------------------------------------------------------------- */

.art-cover {
  position: relative;
  padding: clamp(18px, 3vw, 40px) var(--gut) 20px;
}
.art-cover-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.art-title {
  font-family: var(--display);
  font-size: clamp(46px, 10vw, 180px);
  line-height: .84;
  letter-spacing: -.02em;
  margin: 26px 0 0;
  font-weight: 400;
}
.art-deck {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 32px);
  line-height: 1.22;
  margin-top: 24px;
  max-width: 30ch;
}

.art-rail-meta {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 2.2;
  color: var(--muted);
}
.art-rail-meta span.kicker { display: block; }

.disclosure {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 30px;
}

/* Cover insets — absolute over the photo on desktop, a row beneath it on phones. */
.art-insets { position: static; }
.art-inset { position: absolute; z-index: 2; }
.art-hand {
  position: absolute; right: 2%; bottom: -11%; z-index: 4;
  text-align: right; transform: rotate(3deg);
}
.art-stamp { position: absolute; left: 2%; top: -4%; z-index: 4; }

/* Shortlist */
.shortlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  column-gap: clamp(24px, 4vw, 48px);
  margin-top: 18px;
}
.shortlist a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.shortlist .n { font-family: var(--display); font-size: 22px; }
.shortlist .nm { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.shortlist .badge {
  font-size: 10px; font-family: var(--util); letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink); margin-left: 6px; white-space: nowrap;
}
.shortlist .pr { font-size: 11px; letter-spacing: .14em; white-space: nowrap; }

/* Product module */
.pmod {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 24px;
  padding-top: clamp(64px, 9vw, 140px);
  align-items: start;
}
.pmod-fig { grid-column: 1 / 6; position: relative; }
.pmod-body { grid-column: 6 / 13; padding-top: clamp(10px, 3vw, 54px); }
.pmod--flip .pmod-fig { grid-column: 8 / 13; order: 2; }
.pmod--flip .pmod-body { grid-column: 1 / 8; order: 1; }

.pmod-rank {
  font-family: var(--display);
  font-size: clamp(74px, 13vw, 220px);
  line-height: .78;
  letter-spacing: -.04em;
  position: relative;
  z-index: 2;
  color: var(--paper);
}
.pmod--flip .pmod-rank {
  font-size: clamp(48px, 6vw, 96px);
  color: var(--muted);
}
.pmod-rank-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }

.pmod-photo { width: 80%; margin: -34px 0 0 20%; position: relative; z-index: 1; }
.pmod--flip .pmod-photo { width: 100%; margin: 0; }

.pmod-brand { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
.pmod-name { font-family: var(--display); font-size: clamp(32px, 4.4vw, 76px); line-height: .94; margin-top: 8px; }
.pmod-review { font-family: var(--display); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; margin: 24px 0 0; max-width: 56ch; }

.pmod-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  margin-top: 32px;
  border-top: var(--rule);
  padding-top: 18px;
}
.pmod-specs dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); }
.pmod-specs dd { font-family: var(--display); font-size: 16px; line-height: 1.5; margin: 8px 0 0; }
.pmod-specs dd.it { font-style: italic; }

/* The before-and-after print, pinned against the product shot. */
.pmod-ba {
  position: absolute;
  right: -14%;
  bottom: -6%;
  width: 46%;
  margin: 0;
  z-index: 4;
}
.pmod-ba .img-credit { margin-bottom: 5px; font-size: 8px; letter-spacing: .14em; }
.pmod--flip .pmod-ba { right: auto; left: -14%; }

@media (max-width: 900px) {
  /* Below the product rather than hanging off it — at this width the overlap
     pushes the print into the gutter and it gets clipped. */
  .pmod-ba {
    position: static;
    width: 62%;
    margin: 44px 0 0 20%;
    transform: rotate(-1.5deg);
  }
  .pmod--flip .pmod-ba { margin-left: 20%; }
}

@media (max-width: 620px) {
  .pmod-ba { width: 72%; margin: 40px 0 0 14%; }
}

/* Shop buttons */
.shop-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.btn {
  display: inline-block;
  border: var(--rule);
  padding: 13px 20px;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.btn--fill { background: var(--pink); color: var(--ink); padding: 14px 22px; border-color: var(--pink); }
.btn--fill:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pink-block .btn { border-color: var(--ink); }
.pink-block .btn:hover { background: var(--ink); color: var(--pink); }
.pink-block .btn--fill { background: var(--ink); color: var(--pink); }
.pink-block .btn--fill:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.award-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
}

/* Attribution for an image Lauren did not take. Sits above the frame so it
   reads before the photograph, not as an afterthought. */
.img-credit {
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.4;
}

/* A formula fact the reader needs before they buy — e.g. an active that
   carries known side effects. Stated plainly, never buried. */
.ingredient-note {
  font-family: var(--util);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--paper);
  border-left: 2px solid var(--pink);
  padding: 10px 0 10px 14px;
  margin: 26px 0 0;
  max-width: 56ch;
}

/* A pick whose real name Lauren hasn't confirmed. Never invent one. */
.name-slot {
  font-family: var(--util);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink);
  border: 1px dashed rgba(244, 182, 200, .5);
  padding: 8px 14px;
  display: inline-block;
}

/* Placeholder for a photo that hasn't been shot or chosen yet. */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 18px;
  text-align: center;
  background: repeating-linear-gradient(-45deg, rgba(244,182,200,.07) 0 10px, transparent 10px 20px), #171515;
  border: 1px dashed rgba(244, 182, 200, .5);
  color: var(--pink);
}
.ph-mark { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.ph-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  max-width: 24ch;
}
.pol .ph { align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   The film — the in-article photo spread
   -------------------------------------------------------------------------- */

.film {
  /* Little photos: as many ~210px frames as fit, whatever the screen. Every
     third one takes a double column so the spread has a rhythm, and `dense`
     backfills the gap that a double column would otherwise leave. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-flow: dense;
  gap: clamp(30px, 3.2vw, 52px) clamp(14px, 1.6vw, 24px);
  margin-top: 40px;
  align-items: start;
}
.film-cell { margin: 0; }
.film-cell:nth-child(3n + 2) { grid-column: span 2; }
/* A double-width frame keeping a portrait ratio towers over its row, so the
   wide ones go landscape — unless the item asked for a specific ratio, which
   is how a pack shot avoids being cropped in half. */
.film-cell:nth-child(3n + 2):not(.film-cell--own-ratio) img { aspect-ratio: 3 / 2 !important; }
/* An item that set its own ratio keeps a single column too — a double-width
   portrait frame towers over its row. */
.film-cell--own-ratio { grid-column: span 1 !important; }
/* Every other frame sits a little lower, so the spread never lines up flat. */
.film-cell:nth-child(even) { margin-top: clamp(16px, 2.2vw, 40px); }

@media (max-width: 620px) {
  .film { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 10px; }
  .film-cell:nth-child(3n + 2) { grid-column: span 2; }
  .film-cell:nth-child(3n + 2):not(.film-cell--own-ratio) img { aspect-ratio: 4 / 3 !important; }
/* A double-width frame keeping a portrait ratio towers over its row, so the
   wide ones go landscape — unless the item asked for a specific ratio, which
   is how a pack shot avoids being cropped in half. */
.film-cell:nth-child(3n + 2):not(.film-cell--own-ratio) img { aspect-ratio: 3 / 2 !important; }
/* An item that set its own ratio keeps a single column too — a double-width
   portrait frame towers over its row. */
.film-cell--own-ratio { grid-column: span 1 !important; }
  .film-cell:nth-child(even) { margin-top: 0; }
  /* A tilt on a frame this close to the gutter clips, so the spread sits straight. */
  .film-cell { transform: none; }
}

/* --------------------------------------------------------------------------
   The List (filterable directory)
   -------------------------------------------------------------------------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.chip {
  border: 1px solid var(--hair);
  padding: 9px 15px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--pink); color: var(--pink); }
.chip[aria-pressed="true"] { background: var(--pink); color: var(--ink); border-color: var(--pink); }

.search-field {
  flex: 1 1 220px;
  min-width: 180px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  color: var(--paper);
  font-family: var(--display);
  font-size: 19px;
  padding: 10px 2px;
}
.search-field::placeholder { color: var(--muted); font-style: italic; }

.list-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.list-row .n { font-family: var(--display); font-size: 20px; color: var(--muted); }
.list-row .nm { font-family: var(--display); font-size: clamp(19px, 1.8vw, 26px); line-height: 1.12; }
.list-row .brand { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.list-row .verdict { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--muted); margin-top: 5px; }
.list-row .right { text-align: right; font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
.list-row .tag { display: block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Newsletter — "Seven bests. Every Sunday."
   Pink stock, ink type. The seven sit on the right as a numbered running
   order; the sign-up and the polaroid sit on the left.
   -------------------------------------------------------------------------- */

.nl { padding: clamp(56px, 8vw, 120px) var(--gut) clamp(64px, 8vw, 120px); }

.nl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.nl-title {
  font-size: clamp(40px, 6vw, 92px);
  line-height: .96;
  margin: 14px 0 0;
  color: var(--ink);
}

.nl-form {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: clamp(30px, 4vw, 54px);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  max-width: 520px;
}
.nl-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.nl-form input::placeholder { color: rgba(14, 13, 13, .42); }
.nl-form input:focus { outline: none; }
.nl-form button {
  flex: none;
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
  transition: opacity .18s ease;
}
.nl-form button:hover { opacity: .55; }
.nl-form button[disabled] { opacity: .4; cursor: default; }

.nl-fine {
  font-family: var(--display);
  font-size: 14px;
  color: rgba(14, 13, 13, .6);
  margin: 14px 0 0;
}

.nl-polaroid {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: clamp(38px, 5vw, 70px);
}
.nl-polaroid .pol-fig { width: clamp(150px, 17vw, 215px); flex: none; }
.nl-hand {
  color: var(--raspberry);
  transform: rotate(-3deg);
  margin: 0 0 6px;
  font-size: clamp(17px, 1.6vw, 22px);
}

/* The seven, as a running order. */
.nl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.nl-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(14px, 1.6vw, 22px) 0;
  border-bottom: 1px solid rgba(14, 13, 13, .22);
}
.nl-item {
  font-family: var(--display);
  font-size: clamp(21px, 2.3vw, 34px);
  line-height: 1.1;
  color: var(--ink);
}
.nl-list li.last .nl-item { font-style: italic; }
.nl-num {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(14, 13, 13, .45);
  align-self: flex-start;
}

@media (max-width: 900px) {
  .nl-grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  /* The list reads first on a phone — it is what the sign-up is promising. */
  .nl-left { order: 2; }
  .nl-list { order: 1; }
}

@media (max-width: 620px) {
  .nl-polaroid { gap: 14px; }
  .nl-polaroid .pol-fig { width: 44vw; }
  .nl-form { gap: 12px; flex-wrap: wrap; }
  .nl-form input[type="email"] { flex-basis: 100%; }
  .nl-form button { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { padding: clamp(50px, 6vw, 90px) var(--gut) 40px; border-top: var(--rule); margin-top: clamp(56px, 7vw, 110px); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; }
.foot h3 { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); margin: 0 0 14px; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 12px; }
.foot-legal {
  margin-top: clamp(36px, 4vw, 58px);
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-disclosure {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 70ch;
  margin-top: 18px;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Scrolling strip ("Lately")
   -------------------------------------------------------------------------- */

@keyframes bbl-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.strip { overflow: hidden; }
.strip-track { display: flex; gap: 14px; width: max-content; animation: bbl-strip 60s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track img { height: clamp(150px, 20vw, 260px); width: auto; object-fit: cover; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 44px; }
.stack > * + * { margin-top: 14px; }

.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-169 { aspect-ratio: 16 / 9; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }
/* Pack shots and cutouts: show the whole object rather than cropping into it. */
.contain-img { width: 100%; height: 100%; object-fit: contain; }
/* Cut-outs stand on the frame's own blush window, which is the backdrop the
   Augustinus Bader reference was shot on — so `contain` paints nothing. */
.pol--contain .contain-img { object-fit: contain; }

/* --------------------------------------------------------------------------
   Mobile compositions
   The designs are desktop spreads; these are their phone counterparts,
   not a single-column squash. Break at 900 and again at 620.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .grid12 > * { grid-column: 1 / 13 !important; grid-row: auto !important; }

  .pmod { grid-template-columns: 1fr; row-gap: 18px; }
  .pmod-fig,
  .pmod-body,
  .pmod--flip .pmod-fig,
  .pmod--flip .pmod-body { grid-column: 1 / -1; order: initial; padding-top: 0; }
  .pmod-photo { width: 78%; margin: -26px 0 0 22%; }
  .pmod--flip .pmod-photo { width: 78%; margin: -26px 0 0 22%; }
  .pmod-rank, .pmod--flip .pmod-rank { font-size: clamp(64px, 20vw, 130px); }

  .art-title { font-size: clamp(42px, 13vw, 90px); }

  .seal-mark::before, .seal-mark::after { max-width: 60px; }
}

@media (max-width: 620px) {
  :root { --gut: 18px; }

  /* The scattered cover collage becomes a tidy row under the main photo. */
  .art-insets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 52px; }
  .art-inset { position: static; width: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  .art-inset:nth-child(1) { transform: rotate(-2deg); }
  .art-inset:nth-child(2) { transform: rotate(1.5deg); }
  .art-inset:nth-child(3) { transform: rotate(-1deg); }
  .art-hand { position: static; text-align: left; transform: rotate(-2deg); margin-top: 22px; display: block; }
  .art-stamp { top: auto; bottom: -26px; left: auto; right: 2%; }

  .mast-top { grid-template-columns: 1fr auto; }
  .mast-top .mast-issue { display: none; }
  .mast-logo { font-size: clamp(26px, 9.2vw, 44px); }
  .mast-nav { gap: 10px 14px; font-size: 9.5px; letter-spacing: .16em; padding: 10px 0; }

  .list-row { grid-template-columns: 34px 1fr; }
  .list-row .right { grid-column: 2; text-align: left; margin-top: 6px; }

  .pol-note { font-size: 8px; letter-spacing: .12em; }

  .rail { grid-auto-columns: minmax(200px, 78vw); }

  .note { transform: rotate(0.6deg); }
  .hand { font-size: 20px; }

  .shop-row { gap: 8px; }
  .btn { padding: 11px 15px; font-size: 10px; }

  .foot-legal { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  * { transition: none !important; }
}

/* Print — it is a magazine, after all. */
@media print {
  body { background: #fff; color: #000; }
  body::after, .mast-nav, .foot, .shop-row, .strip { display: none; }
  a { color: #000; }
}

/* ==========================================================================
   Membership — /bestie/ and /founder-files/
   Bestie is the private half of Best by Lauren; Founder Files is the business
   universe. Same tokens as the rest of the site — no separate palette.
   ========================================================================== */

/* The necklace band — full bleed, edge to edge. Nothing of the page shows
   around it: the footage IS the band, so there is no border and no seam
   between the clip's pink and anything else.

   The clip now starts at 2.0s of the source, so the halves open already close
   together and the widest separation is x402..876 rather than x145..1135.
   That bought room to crop much tighter on both axes.

   The source carries a generative-AI watermark at x1152..1173, y584..613;
   both windows below exclude it on both axes.

   The window is described in source pixels below and the layer arithmetic
   follows from it, so changing the crop means changing four numbers:
     width  = 1280/cw of the frame width     left = -cx/cw
     height follows naturally from width     top  = -cy/ch of the frame height
   Cropped in CSS rather than re-encoded, so the footage is never recompressed. */
.nk {
  --cw: 800;   /* window width  in source px */
  --ch: 558;   /* window height in source px */
  --cx: 240;   /* window origin x */
  --cy: 0;     /* window origin y */
  background: #d7aeb0;  /* only ever seen while the video is still loading */
}
/* Wider screens take a shorter slice off the top of the chains, so the band
   stays a band and the BESTIE headline and its form are still above the fold. */
@media (min-width: 900px) {
  .nk { --cw: 920; --ch: 418; --cx: 179; --cy: 140; }
}
.nk-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
  overflow: hidden;
}
.nk-layer {
  position: absolute;
  top: calc(-100% * var(--cy) / var(--ch));
  left: calc(-100% * var(--cx) / var(--cw));
  width: calc(100% * 1280 / var(--cw));
  /* The global `img { max-width: 100% }` would cap this back to the frame
     width and quietly cancel the crop. */
  max-width: none;
  height: auto;
  display: block;
  transition: opacity .9s ease;
}
.nk-still { display: none; }

/* The joined heart sits on top, invisible until someone gets on the list. */
.nk-joined { opacity: 0; pointer-events: none; }
.nk.is-joined .nk-video,
.nk.is-joined .nk-still { opacity: 0; }
.nk.is-joined .nk-joined { opacity: 1; }

/* No autoplay for anyone who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  .nk-video { display: none; }
  .nk-still { display: block; }
  .nk-layer { transition: none; }
}

/* The form. Shared by both waitlists; the pink block re-colours it below. */
.ml-form {
  margin: clamp(26px, 4vw, 42px) auto 0;
  max-width: 470px;
  padding: 0 var(--gut);
}
.ml-form input[type="email"] {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--paper);
  font-family: var(--util);
  font-size: 15px;
  letter-spacing: .02em;
}
.ml-form input[type="email"]::placeholder { color: rgba(247, 245, 242, .45); }
.ml-form input[type="email"]:focus {
  outline: none;
  border-color: var(--pink);
}
.ml-form button {
  width: 100%;
  margin-top: 10px;
  padding: 16px 18px;
  background: var(--pink);
  color: var(--ink);
  border: 1px solid var(--pink);
  font-family: var(--util);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ml-form button:hover { background: var(--paper); border-color: var(--paper); }
.ml-fine {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 14px 0 0;
}

.pink-block .ml-form input[type="email"] {
  border-color: rgba(14, 13, 13, .3);
  color: var(--ink);
}
.pink-block .ml-form input[type="email"]::placeholder { color: rgba(14, 13, 13, .45); }
.pink-block .ml-form input[type="email"]:focus { border-color: var(--ink); }
.pink-block .ml-form button {
  background: var(--ink);
  color: var(--pink);
  border-color: var(--ink);
}
.pink-block .ml-form button:hover { background: var(--raspberry); border-color: var(--raspberry); color: var(--white); }
.pink-block .ml-fine { color: rgba(14, 13, 13, .68); }

/* ------------------------------------------------------------------- BESTIE */
/* One rule: no new palette, no new typefaces. The private feeling comes from
   air, scale and silence — each block down the page gets quieter and more
   generous than the one above it. */

.bst { --air: clamp(64px, 9vw, 150px); }

/* The door ------------------------------------------------------------- */
.bst-hero { text-align: center; padding-bottom: var(--air); }
.bst-hero-type { padding: 0 var(--gut); }
.bst-over {
  margin-top: clamp(24px, 4vw, 46px);
  letter-spacing: .34em;
  color: var(--muted);
}
.bst-title {
  font-size: clamp(64px, 16vw, 230px);
  line-height: .82;
  font-style: italic;
  margin: 10px 0 0;
}
.bst-sub {
  font-size: clamp(19px, 2.6vw, 34px);
  line-height: 1.25;
  margin: clamp(14px, 2vw, 24px) auto 0;
  max-width: 24ch;
}
.bst-split {
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  margin: clamp(20px, 3vw, 34px) auto 0;
  max-width: 34ch;
}

/* The gate — the ask, and what replaces it ------------------------------ */
.bst-gate { margin-top: clamp(30px, 4.5vw, 56px); }
.bst-gate-h {
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.02;
  font-style: italic;
  margin: 0;
}
.bst-gate-sub {
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--muted);
  margin: 12px auto 0;
  max-width: 34ch;
  padding: 0 var(--gut);
}
.bst-heart { color: var(--pink); font-style: normal; }
.bst-back {
  display: inline-block;
  margin-top: clamp(22px, 3vw, 34px);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 4px;
}
.bst-back:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* The reveal. Both halves cross-fade rather than cut, so getting on the list
   feels like something opening instead of a form clearing. */
.bst-gate-ask,
.bst-gate-done { transition: opacity .5s ease; }
.bst-gate.is-done .bst-gate-ask { display: none; }
.bst-gate-done[hidden] { display: none; }
.bst-gate.is-done .bst-gate-done { animation: bst-in .8s ease both; }
@keyframes bst-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* So, what's inside ----------------------------------------------------- */
.bst-inside {
  text-align: center;
  padding-top: var(--air);
  padding-bottom: clamp(20px, 3vw, 40px);
}
.bst-inside-line {
  font-size: clamp(24px, 4vw, 46px);
  line-height: 1.16;
  margin: 14px auto 0;
  max-width: 20ch;
}

/* The six ---------------------------------------------------------------- */
/* Each block sets its own rhythm; they are not a grid of equal cards. */
.bst-feat {
  display: grid;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  padding: 0 var(--gut);
  margin-top: var(--air);
}
.bst-num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--pink);
}
.bst-feat-h {
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: .98;
  margin: 10px 0 0;
  font-weight: 400;
}
.bst-feat-lead {
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.26;
  margin: 16px 0 0;
  max-width: 24ch;
}
.bst-feat-p {
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 40ch;
}
.bst-hand {
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 22px 0 0;
  color: var(--pink);
}
.bst-feat-fig { display: flex; justify-content: center; }

@media (min-width: 860px) {
  .bst-feat--box    { grid-template-columns: 1fr 1fr; }
  .bst-feat--tea    { grid-template-columns: 1.25fr .75fr; }
  .bst-feat--travel { grid-template-columns: .85fr 1.15fr; }
  .bst-feat--founder{ grid-template-columns: 1.3fr .7fr; }
  .bst-feat--conn { grid-template-columns: .95fr 1.05fr; }
  .bst-feat--tea .bst-feat-fig,
  .bst-feat--founder .bst-feat-fig { justify-content: flex-end; }
}
/* The page gets quieter as it goes: each block takes a little more air than
   the one above it, so scrolling feels like walking further in. */
.bst-feat--box     { margin-top: var(--air); }
.bst-feat--tea     { margin-top: calc(var(--air) * 1.15); }
.bst-feat--conn    { margin-top: calc(var(--air) * 1.3); }
.bst-feat--travel  { margin-top: calc(var(--air) * 1.45); }
.bst-feat--founder { margin-top: calc(var(--air) * 1.6); }

/* The other half --------------------------------------------------------- */
.bst-close {
  text-align: center;
  margin-top: calc(var(--air) * 1.2);
  padding-bottom: var(--air);
}
.bst-close .bst-gate { margin-top: clamp(30px, 4.5vw, 54px); }


/* ------------------------------------------------------------ founder files */

.ff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(24px, 3vw, 38px);
}
.ff-card {
  border: 1px solid var(--hair);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}
.ff-role {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink);
}
.ff-name {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  font-weight: 400;
  margin: 10px 0 0;
}
.ff-line {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 12px 0 22px;
  flex: 1;
}
/* A line Lauren has not written yet. Reads as deliberately unfinished rather
   than as copy — the same honesty as the photo placeholders. */
.ff-slot {
  font-style: italic;
  color: rgba(247, 245, 242, .45);
}


/* ==========================================================================
   Deep Dive — the research series. Same palette, same type; what marks it out
   is the verdict card at the top and a sourced reference list at the bottom.
   ========================================================================== */

.dive { padding-top: clamp(30px, 4vw, 56px); }
.dive-card {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--pink);
  padding: clamp(24px, 3.4vw, 46px);
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
}
.dive-rule { margin-bottom: -6px; }
.dive-label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.dive-question {
  font-size: clamp(24px, 3.6vw, 44px);
  line-height: 1.08;
  font-style: italic;
  margin: 0;
  max-width: 24ch;
}
.dive-answer {
  font-family: var(--display);
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
}
.dive-findings {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 2.6vw, 30px) 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.dive-stat {
  display: block;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  color: var(--pink);
}
.dive-stat-label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
}

@media (min-width: 860px) {
  .dive-card { grid-template-columns: 1fr 1.25fr; align-items: start; }
  .dive-rule,
  .dive-findings { grid-column: 1 / -1; }
}

.dive-sources {
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding-left: 1.4em;
  max-width: 78ch;
}
.dive-sources li { margin-bottom: 14px; }
.dive-src-t { display: block; font-family: var(--display); font-size: 16px; line-height: 1.4; }
.dive-src-w { display: block; font-size: 12.5px; letter-spacing: .03em; color: var(--muted); margin-top: 2px; }

/* Bestie in the masthead. The one link that is not part of the magazine, so
   it is the one link in the signature pink. */
.mast-nav .nav-accent,
.mast-bar .nav-accent { color: var(--pink); }
.mast-nav .nav-accent:hover,
.mast-bar .nav-accent:hover { color: var(--paper); }

/* ==========================================================================
   The cover — one full-bleed photograph with the cover lines set on it.
   ========================================================================== */

.cov {
  position: relative;
  width: 100%;
  height: clamp(540px, 88vh, 980px);
  overflow: hidden;
}
.cov-media { position: absolute; inset: 0; }
.cov-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* White type has to survive a bright photograph. Darkening the two vertical
   thirds and the foot keeps the rails and the title legible on any frame
   without flattening the middle of the picture. */
.cov-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(14,13,13,.78) 0%, rgba(14,13,13,.30) 26%, rgba(14,13,13,0) 42%),
    linear-gradient(to left,  rgba(14,13,13,.78) 0%, rgba(14,13,13,.30) 26%, rgba(14,13,13,0) 42%),
    linear-gradient(to top,   rgba(14,13,13,.85) 0%, rgba(14,13,13,.25) 26%, rgba(14,13,13,0) 48%),
    linear-gradient(to bottom, rgba(14,13,13,.55) 0%, rgba(14,13,13,0) 22%);
}

.cov-inner {
  position: relative;
  height: 100%;
  padding: clamp(18px, 3vw, 46px) var(--gut) clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: clamp(16px, 3vw, 40px);
}
/* Grid items default to min-width:auto, which lets a long headline push past
   its column and shove the opposite rail off the cover. */
.cov-rail { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 30px); min-width: 0; }
.cov-rail--l { align-items: flex-start; max-width: 30ch; }
.cov-rail--r { align-items: flex-end; text-align: right; max-width: 30ch; justify-self: end; }
.cov-issue-t { font-size: clamp(20px, 2.1vw, 32px); line-height: 1.02; margin-top: 6px; }
.cov-line { display: block; }
.cov-line-t { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.04; margin-top: 6px; }
.cov-line:hover .cov-line-t { color: var(--pink); }
.cov-hand { color: var(--pink); transform: rotate(-3deg); }

.cov-foot {
  grid-column: 1 / -1;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}
/* The seal replaces the "Lauren tested" stamp on the cover. It is fixed
   artwork — never recoloured or redrawn (see CLAUDE.md). */
.cov-seal { width: clamp(64px, 6vw, 96px); }
.cov-seal img { width: 100%; height: auto; display: block; }
.cov-title {
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1;
  max-width: 26ch;
  text-wrap: balance;
}
.cov-title:hover { color: var(--pink); }
.cov-mast {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

/* On a phone the two rails cannot sit side by side over a photograph and
   stay readable, so the cover becomes a single stack. */
/* Below this the two rails cannot share the width over a photograph and stay
   readable, so the cover becomes a single stack. */
@media (max-width: 900px) {
  .cov { height: clamp(460px, 74vh, 680px); }
  .cov-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .cov-rail--l { max-width: none; }
  .cov-rail--r { display: none; }
}

/* Awards podium cards. The card is its own composition — pink ground, podium
   and seal are printed in — so it gets no polaroid frame and no tilt. */
.award-card { margin-top: 4px; }
.award-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}


/* Product polaroids: the card is cut out in Canva with no text on it, and the
   site writes the product name in the lower band. That keeps the lettering
   identical on every card forever and leaves the name editable without a
   re-cut — see CLAUDE.md, "Product cards". */
.pol--product .cap {
  font-family: var(--marker);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #111;
  line-height: 1.15;
  font-style: normal;
}