/* ---------- newsroom.html ----------
   Press coverage index: one featured story, then a grid of outbound links.
   Lives in its own file rather than a <style> block because script-src/style-src-elem
   in _headers carry no 'unsafe-inline' — see the note at the top of maximum/_headers. */

.news-hero{padding-top:calc(var(--nav-h) + clamp(64px,10vw,150px));
  padding-bottom:clamp(36px,5vw,64px);position:relative;overflow:hidden;}
.news-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--live);display:inline-flex;align-items:center;gap:12px;}
.news-kicker .bar{width:30px;height:1px;background:var(--live);opacity:.6;}
.news-title{font-size:clamp(46px,8vw,120px);font-weight:500;letter-spacing:-.03em;line-height:.96;margin:20px 0 0;}

.news-section{padding-bottom:clamp(72px,10vw,140px);}

/* ---- featured story ---- */
.news-feature{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line-soft);
  text-decoration:none;color:var(--paper);background:var(--ink);transition:background .25s;}
.news-feature:hover{background:#131316;}
.news-feat-body{padding:clamp(32px,4vw,64px);display:flex;flex-direction:column;
  justify-content:space-between;gap:clamp(28px,4vw,56px);min-height:clamp(320px,34vw,440px);}
.news-feat-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--live);display:inline-flex;align-items:center;gap:12px;}
.news-feat-tag .bar{width:26px;height:1px;background:var(--live);opacity:.6;}
.news-feat-h{font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.024em;line-height:1.04;
  margin:0;text-wrap:pretty;}
.news-feat-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.news-feat-src{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--live);}
/* Uppercase here but not on .news-date in the grid — the featured block reads as one
   uppercase mono stack, the cards keep the date in sentence case. */
.news-feat-date{display:block;margin-top:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);}
.news-feat-media{position:relative;border-left:1px solid var(--line-soft);
  min-height:clamp(240px,28vw,440px);overflow:hidden;}
.news-feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.news-feature .news-arrow{color:var(--paper-faint);transition:color .25s,transform .25s;}
.news-feature:hover .news-arrow{color:var(--live);transform:translate(3px,-3px);}

/* ---- coverage grid ----
   The 1px "gaps" are the container's own background showing through a 1px grid gap, so
   the grid items have to be opaque. Each <li> is the cell and the card stretches to
   fill it — the alternative (display:contents on the li) drops the list semantics in
   browsers that still have that bug.
   margin, not margin-top: the reference's grid is a <div>, this one is a <ul>, and the
   UA sheet's margin-block:1em on <ul> is 17px at the body's 17px font size. Overriding
   only the top left that 17px sitting under the last row, on top of the section's
   bottom padding — which read as the page having too much air above the footer. */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin:1px 0 0;list-style:none;padding:0;}
.news-grid>li{display:flex;}
.news-card{flex:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:40px;min-height:320px;padding:clamp(28px,2.6vw,44px);background:var(--ink);
  text-decoration:none;color:var(--paper);transition:background .25s;}
.news-card:hover{background:#131316;}
.news-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.news-src{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--live);}
.news-arrow{color:var(--paper-faint);transition:color .25s,transform .25s;}
.news-card:hover .news-arrow{color:var(--live);transform:translate(3px,-3px);}
.news-h{font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.014em;line-height:1.22;
  margin:0;text-wrap:pretty;}
.news-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--paper-faint);}

@media (max-width:900px){.news-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:820px){
  .news-feature{grid-template-columns:1fr;}
  .news-feat-media{border-left:none;border-top:1px solid var(--line-soft);min-height:220px;}
}
@media (max-width:600px){.news-grid{grid-template-columns:1fr;}.news-card{min-height:0;gap:28px;}}

/* The hover translate on the arrows is decoration on top of a colour change that carries
   the same information, so it can go without losing the affordance. */
@media (prefers-reduced-motion:reduce){
  .news-feature,.news-card,.news-arrow{transition:none;}
  .news-feature:hover .news-arrow,.news-card:hover .news-arrow{transform:none;}
}