/* ============================================================
   FRND — Press / Newsroom  (press.html · Figma "PRESS · FINAL")
   The Interact announcements layout (tabs over a card grid) rebuilt in
   FRND's sticker system. Cards are placeholders until links arrive.
   ============================================================ */
.phero{
  position:relative; z-index:2; overflow:hidden;
  height:calc(620 * var(--s));
  background:var(--pink); color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-top:calc(90 * var(--s));
}
.phero__h1{ margin:calc(22 * var(--s)) 0 0; font-family:var(--display); font-weight:900; font-size:calc(150 * var(--s)); line-height:.98; letter-spacing:-.03em; }
.phero__lead{ margin:calc(22 * var(--s)) 0 0; font-weight:500; font-size:calc(22 * var(--s)); line-height:1.5; }

.news{ position:relative; z-index:2; background:var(--page); padding:calc(90 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.ntabs{ display:flex; gap:calc(12 * var(--s)); margin-bottom:calc(48 * var(--s)); }
.ntab{
  display:inline-flex; align-items:center; gap:calc(8 * var(--s));
  padding:calc(11 * var(--s)) calc(20 * var(--s));
  border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:calc(18 * var(--s));
  box-shadow:0 calc(4 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--s)) var(--ink);
  transition:transform .25s var(--ease), background .25s, color .25s;
}
.ntab:hover{ transform:translateY(calc(-2 * var(--s))); }
.ntab.is-on{ background:var(--ink); color:#fff; }
.ntab__n{ font-family:var(--mono); font-weight:500; font-size:calc(12 * var(--s)); color:rgba(23,17,15,.5); }
.ntab.is-on .ntab__n{ color:var(--pink); }

.ngrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(24 * var(--s)); }
.ncard{
  --ledge:9;
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  padding:calc(16 * var(--s)) calc(16 * var(--s)) calc(24 * var(--s));
  border-radius:calc(32 * var(--s)); background:var(--bg);
}
.ncard[hidden]{ display:none; }
.ncard__img{ position:relative; display:block; aspect-ratio:332/206; overflow:hidden; border-radius:calc(20 * var(--s)); }
.ncard__img::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); }
.ncard__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ncard:hover .ncard__img img{ transform:scale(1.05); }
.ncard__meta{ margin:calc(22 * var(--s)) calc(12 * var(--s)) 0; font-family:var(--mono); font-weight:500; font-size:max(10px, calc(11 * var(--s))); letter-spacing:.14em; text-transform:uppercase; color:rgba(23,17,15,.55); }
.ncard__h{ margin:calc(10 * var(--s)) calc(12 * var(--s)) 0; font-family:var(--display); font-weight:900; font-size:calc(26 * var(--s)); line-height:1.15; letter-spacing:-.02em; }
.ncard__sub{ margin:calc(10 * var(--s)) calc(12 * var(--s)) 0; font-weight:500; font-size:max(14px, calc(15 * var(--s))); line-height:1.5; color:rgba(23,17,15,.75); }
/* body wrapper: lets the lead card set text beside its image */
.ncard__body{ display:flex; flex-direction:column; flex:1; }
.ncard__foot{ margin:auto calc(12 * var(--s)) 0; padding-top:calc(24 * var(--s)); display:flex; align-items:center; justify-content:space-between; }
.ncard__foot .chip{ font-size:calc(13 * var(--s)); padding:calc(6 * var(--s)) calc(12 * var(--s)); box-shadow:0 calc(3 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2 * var(--s)) var(--ink); }
.ncard__go{ font-family:var(--display); font-weight:800; font-size:calc(16 * var(--s)); }

/* clippings keep their headline: crop from the top, on a paper ground */
.ncard__img--clip{ background:#fff; }
.ncard__img--clip img{ object-position:top center; }
/* no usable image (site blocks it): the publication's name as a masthead plate */
.ncard__img--mast{ display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; text-align:center; padding:0 calc(24 * var(--s)); }
.ncard__img--mast span{ font-family:var(--display); font-weight:900; font-size:calc(40 * var(--s)); letter-spacing:-.02em; line-height:1; }
.ncard__img--mast::before{ content:attr(data-k); position:absolute; top:calc(16 * var(--s)); left:0; right:0; font-family:var(--mono); font-size:max(9px, calc(10 * var(--s))); letter-spacing:.16em; text-transform:uppercase; color:var(--pink); }
/* videos + films */
.ncard__play{
  position:absolute; left:50%; top:50%; z-index:2; translate:-50% -50%;
  width:calc(64 * var(--s)); height:calc(64 * var(--s)); border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:calc(4 * var(--s));
  background:var(--pink); color:#fff; font-size:calc(22 * var(--s));
  box-shadow:0 calc(4 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--s)) var(--ink);
  transition:scale .35s var(--bounce);
}
.ncard:hover .ncard__play{ scale:1.1; }
/* the lead story spans the row: image left, story right */
.ncard--lead{ grid-column:1 / -1; flex-direction:row; gap:calc(32 * var(--s)); padding:calc(18 * var(--s)); }
.ncard--lead .ncard__img{ flex:0 0 58%; }
.ncard--lead .ncard__body{ padding:calc(20 * var(--s)) calc(16 * var(--s)) calc(12 * var(--s)) 0; }
.ncard--lead .ncard__meta{ margin-top:0; }
.ncard--lead .ncard__h{ font-size:calc(46 * var(--s)); line-height:1.06; margin-top:calc(16 * var(--s)); text-wrap:balance; }
.ncard--lead .ncard__sub{ font-size:max(15px, calc(19 * var(--s))); margin-top:calc(16 * var(--s)); }
.ncard--lead .ncard__meta::before{ content:'Latest \00b7  '; color:var(--pink); }

@media (max-width:1040px){
  .phero{ height:auto; padding:150px 22px 72px; }
  .phero__h1{ font-size:clamp(56px, 19vw, 76px); margin-top:16px; }
  .phero__lead{ font-size:16px; max-width:330px; }
  .news{ padding:48px 20px 64px; }
  .ntabs{ gap:8px; margin-bottom:24px; }
  .ntab{ font-size:14px; padding:8px 14px; box-shadow:0 3px 0 var(--ink), inset 0 0 0 2px var(--ink); }
  .ntab__n{ font-size:10px; }
  .ngrid{ grid-template-columns:1fr; gap:22px; }
  .ncard{ padding:14px 14px 22px; border-radius:26px; --ledge:7; }
  .ncard__img{ border-radius:18px; }
  .ncard__meta{ margin:18px 8px 0; font-size:10px; }
  .ncard__h{ margin:8px 8px 0; font-size:23px; }
  .ncard__sub{ margin:8px 8px 0; font-size:14px; }
  .ncard__foot{ margin:0 8px; padding-top:20px; }
  .ncard__foot .chip{ font-size:12px; padding:5px 10px; }
  .ncard__go{ font-size:15px; }
  .ncard--lead{ flex-direction:column; gap:0; padding:14px 14px 22px; }
  .ncard--lead .ncard__img{ flex:none; }
  .ncard--lead .ncard__body{ padding:0; }
  .ncard--lead .ncard__meta{ margin-top:18px; }
  .ncard--lead .ncard__h{ font-size:27px; margin-top:8px; }
  .ncard--lead .ncard__sub{ font-size:14px; margin-top:8px; }
  .ncard__img--mast span{ font-size:30px; }
  .ncard__img--mast::before{ top:14px; font-size:9px; }
  .ncard__play{ width:52px; height:52px; font-size:18px; box-shadow:0 3px 0 var(--ink), inset 0 0 0 2px var(--ink); }
}