/* UNIÓN , layout for the news and after dark page only. Phase 1 owns this file.
   LAYOUT ONLY and IN TOKENS ONLY: no hex, no font name, no easing, no duration.
   Nothing here may change how an included component looks. */

/* ------------------------------------------------------------- FOLD 1, HEAD
   The headline owns the fold and the paragraph is deliberately in the smaller
   track, dropped down, so nothing competes with it at the same weight.
   ---------------------------------------------------------------------------- */
.nw-head{padding-block:var(--s8) var(--s9)}
.nw-head__grid{display:grid;gap:var(--s7);
  grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);
  align-items:end}
.nw-head__side{display:grid;gap:var(--s5);justify-items:start;
  padding-bottom:var(--s2)}
.nw-head__lead{margin:0;max-width:38ch;
  font-size:var(--size-body);line-height:1.45}
.nw-head .s__h{margin-bottom:0}

/* ------------------------------------------------------------ FOLD 2, LIST
   A narrow rail of context on the left and the stack of slabs on the right.
   The slabs are full width in their own track: S6 is a STACK and turning it
   into a row of equal cards would be exactly the thing the rubric bans.
   ---------------------------------------------------------------------------- */
.nw-list{display:grid;gap:var(--s7);
  grid-template-columns:minmax(220px,.6fr) minmax(0,1.6fr);
  align-items:start}
.nw-list__rail{position:sticky;top:var(--s9)}
/* the count is the rail's one fact, and it is set to be seen from across the
   fold: the numeral at display size with the word riding at body size beside
   it, so the rail has a weight the three slabs beside it can answer. */
.nw-list__count{margin:0 0 var(--s4);display:flex;align-items:baseline;gap:var(--s3);
  font:700 var(--size-micro)/1.35 var(--font);
  text-transform:uppercase;letter-spacing:.14em}
.nw-list__count span{font:900 var(--size-head)/.9 var(--font);
  font-stretch:var(--wdth-condensed);letter-spacing:0;
  font-variant-numeric:tabular-nums}
.nw-list__note{margin:0;max-width:30ch;
  font-size:var(--size-small);line-height:1.5}
.nw-list__body{min-width:0}

/* ------------------------------------------------- FOLD 3, THE LONG READ
   One measured column, set in from the left rather than centred in it, so the
   fold is still asymmetric while the line length stays readable. No pattern
   comes near it, which is the component's own standing instruction.
   ---------------------------------------------------------------------------- */
.nw-article{max-width:72ch}

/* ------------------------------------------------------ FOLD 4, AFTER DARK
   The type block sits beside a numbered LIST of rooms, not a grid of cards:
   the rooms are ordered, because two of them are confirmed to happen and the
   third is not. Each row is a big number, a heading and three facts, and every
   fact reads to confirm.
   ---------------------------------------------------------------------------- */
.nw-dark{display:grid;gap:var(--s8) var(--s7);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start}
.nw-dark__type{position:sticky;top:var(--s8)}
.nw-dark__type .s__lead{margin-bottom:0}

.nw-parties{list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s6)}
.nw-party{display:grid;gap:var(--s4) var(--s5);
  grid-template-columns:auto minmax(0,1fr);align-items:start;
  padding-top:var(--s5);
  border-top:var(--rule-heavy) solid var(--cream)}
.nw-party__n{font:900 var(--size-head)/.9 var(--font);
  font-stretch:var(--wdth-condensed);
  color:var(--stage);
  font-variant-numeric:tabular-nums}
.nw-party__h{margin:0 0 var(--s3);
  font:900 var(--size-title)/1 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;letter-spacing:.02em}
.nw-party__x{margin:0 0 var(--s5);max-width:48ch;
  font-size:var(--size-body);line-height:1.5}
/* the third room is the one that may not happen, so it sits back: the same
   shape, the same type, less of the ground's attention. No opacity over a dark
   ground, which the system's own traps call a grey glow. */
.nw-party--maybe .nw-party__n{color:var(--cream)}

.nw-party__facts{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7)}
.nw-party__facts li{display:grid;gap:var(--s1)}
.nw-party__facts b{font:700 var(--size-micro)/1.35 var(--font);
  text-transform:uppercase;letter-spacing:.14em}
.nw-party__facts span{font-size:var(--size-body);line-height:1.2}

/* ---------------------------------------------------------- FOLD 5, ACTION */
/* SAME RULE AS THE LEADS: the second column starts level with the headline.
   Bottom-aligned, it left 263px of bare yellow above the paragraph. */
.nw-first{display:grid;gap:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.nw-first > :last-child{padding-bottom:var(--s2)}
.nw-first .s__h{margin-bottom:0}
.nw-first .s__lead{margin-bottom:var(--s5)}

/* ================================================================== 1024 ==== */
@media (max-width:1024px){
  .nw-head__grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .nw-list{grid-template-columns:minmax(0,1fr)}
  .nw-list__rail{position:static}
  .nw-dark{grid-template-columns:minmax(0,1fr)}
  .nw-dark__type{position:static}
  .nw-first{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ================================================================== 640 =====
   THE PHONE IS ITS OWN LAYOUT.
   ============================================================================ */
@media (max-width:640px){
  .nw-head{padding-block:var(--s6) var(--s7)}
  .nw-head__side > .u-pill{width:100%;justify-content:space-between}
  .nw-first .u-pill{width:100%;justify-content:space-between}

  /* the room number stops being a column and becomes a line of its own above
     the heading: at 390 a big numeral beside a paragraph leaves the paragraph
     about twenty characters wide. */
  .nw-party{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .nw-party__facts{gap:var(--s4) var(--s6)}
}


/* ------------------------------------------------------ FOLD 1, THE HERO
   L-nighthero paints its own black and its own min-height, so the fold is
   flush and adds no padding above it. The page's own head grid sits UNDER the
   art in the same black section: one ground, two things, in order.
   ---------------------------------------------------------------------------- */
.nw-hero{padding-block:0}
.nw-hero__art{display:block}
/* the night river's wrap already has its own padding, so the words under it
   need only the gap that separates them from it, not a second fold's worth */
.nw-hero .s__in{padding-block:var(--s7) var(--s8)}

/* ------------------------------------------------- FOLD 3, THE LONG READ'S LEAD
   The two-part lead, closing the 47% of bare pink this fold showed at 1440.
   The display line keeps the wider track; the framing sentence takes the
   narrower one. The article column below is untouched and stays one measure.
   ---------------------------------------------------------------------------- */
.nw-read{display:grid;gap:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end;margin-bottom:var(--s7)}
.nw-read > :last-child{padding-bottom:var(--s2)}
.nw-read .s__h{margin-bottom:0}
.nw-read .s__lead{margin-bottom:0}

@media (max-width:1024px){
  .nw-read{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:640px){
  .nw-hero .s__in{padding-block:var(--s6) var(--s7)}
}