/* =====================================================================
   RISHAV AGARWAL v2 · press.css  (press.html only – spec §8)
   Loads AFTER fonts.css + site.css. Uses only shared tokens/components.

   CONTENTS
    1  Masthead: fitted "In the news." + lede + stat row
    2  Lead clipping (the one paper surface on this page)
    3  Register: coverage cards on dark, filter tabs + "Show all"
    4  Responsive: 1280 / 1180 / 960 / 760 / 560 / 360
   ===================================================================== */


/* =====================================================================
   1  MASTHEAD (§8.1)
   The h1 is fitted by site.js to its parent box (cap 150px). "In the news."
   measures 5.36em at wdth 125 / w300 (804px at the cap). Fitted to the full
   wrap it would run gutter to gutter below ~880px (130px at 768, bigger than
   the home hero name). The box grows from the full phone width (335px at 375)
   at half the rate of the wrap, so the title is one line, left-aligned and
   short on every screen: ≈62px at 375, ≈97px at 768, ≈119px at 1024,
   ≈141px at 1280, 150px (cap) at 1440.
   The "I" optical pull (≈.06em of side bearing) is shared: site.css .mast.
   ===================================================================== */
.pm__fit{grid-column:1/-1;width:min(100%,calc(335px + (100% - 335px) * .51));min-width:0}
.pm__row{margin-top:48px;align-items:end;row-gap:36px}
.pm__lede{grid-column:1/7;text-wrap:balance}
.pm__stats{grid-column:8/13;justify-content:space-between;flex-wrap:nowrap;column-gap:clamp(20px,2.4vw,40px)}
.pm__stats .stat__l{white-space:nowrap}


/* =====================================================================
   2  LEAD CLIPPING (§8.2) – ivory card inside .wrap, .on-paper remaps tokens
   ===================================================================== */
/* top-aligned (= the home's podcast block): the label meets the frame's top edge */
.clip{position:relative;align-items:start;row-gap:28px;padding:clamp(24px,3vw,44px);border-radius:clamp(22px,2.4vw,32px);background:var(--paper);box-shadow:0 30px 60px rgba(0,0,0,.45)}
/* iOS-style nested corners: frame and photo radii step down by the mat so the curves stay parallel */
.clip .frame{--rf:clamp(16px,1.6vw,20px);border-radius:var(--rf)}
.clip .frame__m{border-radius:calc(var(--rf) - var(--mat) - 1px)}
.clip__media{grid-column:1/6}
.clip__media img{object-position:30% 50%}           /* Rishav + desk + shelf of awards in the 4:3 crop */
.clip__body{grid-column:7/13;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.clip__meta{font-stretch:125%;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--on-paper-2)}   /* = home .paper .lbl */
.clip__t{margin-top:16px;font-stretch:112%;font-weight:380;font-size:clamp(26px,2.8vw,42px);line-height:1.1;letter-spacing:-.03em;color:var(--on-paper);text-wrap:balance}
.clip__note{margin-top:20px;max-width:44ch;font-size:16px;line-height:1.6;color:var(--on-paper-2)}
.clip__src{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:24px}
.clip :focus-visible{outline-color:var(--on-paper)}


/* =====================================================================
   3  REGISTER (§8.3) – coverage cards: cover image on top, text below
   iOS-style nested corners (card 22 / image 14). The first item is a wide
   feature card (image left, text right); the rest sit 3-up on desktop,
   2-up on tablet, 1-up on phones. Video covers carry the gradient play disc.
   Covers with text on them are .prow__img--fit: shown whole, never cropped.
   ===================================================================== */
.preg-block{margin-top:clamp(56px,6vw,96px)}
.preg-tabs{margin-bottom:clamp(24px,3vw,36px)}
/* the grid opens on its first cards; "Show all" or any filter tab opens the rest (no JS: all of them) */
.js .preg.is-clipped>li:nth-child(n+14){display:none}
.preg-more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
html:not(.js) .preg-more,.preg-more[hidden]{display:none}
.preg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.preg>li{display:flex;min-width:0}
.preg>li:first-child{grid-column:1/-1}

.prow{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:22px;background:var(--ink-2);color:var(--ivory);
  transition:transform .5s var(--ease),border-color .4s,background-color .4s}
a.prow{-webkit-tap-highlight-color:transparent}
a.prow:focus-visible{outline-offset:3px;border-radius:22px}
.prow__img{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1b1916}
.prow__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.prow__img--fit img{object-fit:contain}
.prow__img .play{--pd:44px}
.prow__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:center;column-gap:12px;padding:20px 14px 12px}
.prow__date{grid-column:1;grid-row:1;font-size:14px;font-weight:500;line-height:1.4;color:var(--ivory-2);white-space:nowrap}
.prow__type{grid-column:2;grid-row:1;justify-self:end}
.prow__t{grid-column:1/-1;grid-row:2;align-self:start;min-width:0;margin-top:16px;font-stretch:108%;font-weight:400;font-size:clamp(19px,1.45vw,22px);line-height:1.22;letter-spacing:-.025em;color:var(--ivory);text-wrap:balance}
.prow__src{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.prow__src--multi{justify-content:flex-start;column-gap:24px}
.prow__out{font-size:13px;font-weight:500;line-height:1.4;color:var(--muted)}
.prow__go svg{width:14px;height:14px}

/* feature: its own full-width row, so no neighbour stretches it past the cover;
   the 16:9 cover shows whole, text beside it, stacked at 960 and below */
@media (min-width:961px){
  .preg>li:first-child .prow{flex-direction:row;align-items:stretch}
  .preg>li:first-child .prow__img{flex:0 0 52%;align-self:center}
  .preg>li:first-child .prow__body{padding:28px 26px 14px}
  .preg>li:first-child .prow__t{font-size:clamp(28px,calc(6vw - 28px),58px);line-height:1.1;margin-top:24px}
}

/* the whole card is the link: it lifts, its edge brightens, the cover zooms a touch. Never the type. */
a.prow .prow__type{transition:border-color .3s,color .3s}
a.prow:hover{transform:translateY(-4px);border-color:var(--line-2);background:#161512}
a.prow:hover .prow__img img{transform:scale(1.04)}
a.prow:hover .prow__type{border-color:var(--hover-line);color:var(--ivory)}
a.prow:hover .prow__go::after{transform:scaleX(0);transform-origin:right}
a.prow:hover .prow__go svg{transform:translate(2px,-2px)}
a.prow:hover .prow__go svg.i-fwd{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){a.prow:hover,a.prow:hover .prow__img img{transform:none}}


/* =====================================================================
   4  RESPONSIVE
   ===================================================================== */
@media (min-width:1181px) and (max-width:1279.98px){
  /* the three nowrap stats need ~475px; cols 8–12 only give that from 1280 up */
  .pm__stats{grid-column:7/13}
}

@media (max-width:1180px){
  /* below 1180 even six columns are too narrow, so lede and stats stack */
  .pm__lede,.pm__stats{grid-column:1/-1}
  .pm__lede{max-width:46ch}
  .pm__stats{justify-content:flex-start;column-gap:clamp(28px,6vw,56px)}
}

@media (max-width:960px){
  /* the clipping stacks (photo first) through .g12--stack; coverage cards go 2-up */
  .preg{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .pm__row{margin-top:32px;row-gap:28px}
  .preg{grid-template-columns:minmax(0,1fr);gap:12px}
  .preg>li:first-child{grid-column:auto}
  .prow{padding:8px;border-radius:18px}
  a.prow:focus-visible{border-radius:18px}
  .prow__img{border-radius:11px}
  .prow__body{padding:18px 12px 10px}
  .prow__t{font-size:20px}
  .clip__t{margin-top:12px}
  .clip__note{margin-top:16px}
  .clip__src{margin-top:12px;column-gap:24px;row-gap:17px}   /* wrapped outlet links sit 44px apart (tap areas) */
}

@media (max-width:560px){
  /* three nowrap stats no longer fit one row. Instead of a 2 + 1 block (the third
     stat stranded on its own row), they set as a small ledger: numeral column,
     label on the numeral's baseline – "10 features & interviews". The widest row
     ("2021–26" 108px + gap + 158px label) is 278px at 320 with the 12px gap. */
  .pm__stats{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:16px 20px}
  .pm__stats .stat{display:contents}
}

@media (max-width:360px){
  .pm__stats{column-gap:12px}
}