/* ==========================================================================
   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;
  --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
   -------------------------------------------------------------------------- */

.pol { position: relative; background: var(--white); display: block; }
.pol img { width: 100%; height: 100%; object-fit: cover; }
.pol {
  border: 10px solid var(--white);
  border-bottom-width: 42px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}
.pol figcaption,
.pol .cap {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -34px;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  padding: 0 4px;
}
.pol--sm { border-width: 7px; border-bottom-width: 28px; }
.pol--sm .cap { bottom: -22px; font-size: 8px; letter-spacing: .14em; }
.pol--pink { border-color: var(--pink); }
.pol--pink .cap { color: var(--ink); }

.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 { height: 100%; }

/* --------------------------------------------------------------------------
   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 { 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 { 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; }
.pol--contain { background: var(--white); }
.pol--contain.pol--pink { background: var(--pink); }

/* --------------------------------------------------------------------------
   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 { border-width: 7px; border-bottom-width: 30px; }
  .pol .cap { bottom: -24px; 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 playful, consumer half; the Best Friend Circle block at the
   foot of Founder Files is deliberately the opposite register.
   ========================================================================== */

/* 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 source carries a generative-AI watermark at x1152..1173, y584..613.
   The crop has to take it off the BOTTOM — the pendants reach x1135 and the
   mark starts at x1140, five pixels away, but the pendants end at y521 and
   the mark starts at y584, which leaves real room vertically.

   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: 1045;  /* window width  in source px */
  --ch: 558;   /* window height in source px */
  --cx: 120;   /* 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 { --ch: 468; --cy: 90; }
}
.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); }

/* Best Friend Circle — the quietest block on the page ------------------- */
.bst-circle {
  margin-top: calc(var(--air) * 1.9);
  padding: calc(var(--air) * .9) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.bst-circle-over { color: var(--muted); letter-spacing: .34em; }
.bst-circle-h {
  font-size: clamp(32px, 6vw, 82px);
  line-height: .96;
  margin: 12px 0 0;
  font-weight: 400;
}
.bst-circle-lead {
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.24;
  margin: 20px 0 0;
  max-width: 26ch;
}
.bst-circle-p {
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.62;
  color: var(--muted);
  margin: 18px 0 0;
  max-width: 48ch;
}
.bst-circle-pull {
  font-size: clamp(22px, 3.4vw, 44px);
  line-height: 1.16;
  font-style: italic;
  margin: clamp(30px, 4.5vw, 60px) 0 0;
  max-width: 22ch;
}

/* 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);
}

/* The institutional block. No pink fill, no italics, tighter type — it should
   not look like the Bestie page. */
.ff-circle {
  margin-top: clamp(56px, 7vw, 112px);
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: rgba(247, 245, 242, .03);
}
.ff-circle-kicker { color: var(--muted); }
.ff-circle-title {
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1;
  margin: 10px 0 0;
  font-weight: 400;
}
.ff-circle-lead {
  font-family: var(--display);
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.45;
  margin: 20px 0 0;
  max-width: 54ch;
}
.ff-circle-fine {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 54ch;
}
.ff-circle .ml-form { margin-left: 0; padding-left: 0; padding-right: 0; }

/* ==========================================================================
   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); }