/* =========================================================
   NEWS ARTICLE — 1980 x 2875 on the comp
   sections: hero 0-520 | article 520-1860 | other 1860-2451
             footer 2451-2875
   Page head tokens and the card come from p34-pages.css.
   The page grows with the copy, so only the hero and the
   "other news" strip carry fixed heights.
   ========================================================= */

/* ---------------------------------------------------------
   1. HEAD   0 – 520

   No photograph: header.php always prints .hero__bg and
   .hero__veil, so they are blanked here rather than made
   conditional in PHP — header.php is shared with the four
   pixel-gated pages and must not change.
   --------------------------------------------------------- */

.hero{ height:52rem; overflow:hidden; }
.hero__bg{ display:none; }
.hero__veil{ display:none; }
.hero,
.s-art,
.s-other{ background:var(--bg); }

/* Centred variant of the shared breadcrumb. */
.crumbs--c{
  left:0; right:0; top:20.1rem;
  justify-content:center;
}

.art__title{
  position:absolute; left:37rem; right:37rem; top:24.2rem;
  text-align:center;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:8.6rem; line-height:10.1rem;
  letter-spacing:-.027em;
  color:#efebe3;
  z-index:3;
}

.art__meta{
  position:absolute; left:0; right:0; top:45.7rem;
  display:flex; justify-content:center; align-items:baseline; gap:1.8rem;
  line-height:1;
  z-index:3;
}
.art__cat{
  font-style:normal;
  font-size:1.4rem; font-weight:600; letter-spacing:.2em;
  color:var(--gold);
}
.art__date{
  font-style:normal;
  font-family:var(--serif);
  font-variation-settings:var(--fr72);
  font-size:1.35rem; font-weight:400; letter-spacing:.06em;
  color:rgba(239,235,227,.42);
}

/* ---------------------------------------------------------
   2. ARTICLE   520 – 1860
   --------------------------------------------------------- */

.s-art{ min-height:134rem; }

.art__lead-img{
  position:absolute; left:36.9rem; top:5.1rem;
  width:124.9rem; height:60.1rem;
  object-fit:cover;
}

/* The body is the one part of these pages that is not absolutely
   positioned: it has to grow with whatever the editor writes. */
.art__body{
  position:absolute; left:37rem; top:70.2rem; width:124rem;
}
.art__body p{ margin:0; }

.art__body .art__lead{
  font-size:3.1rem; font-weight:300; line-height:4.5rem;
  letter-spacing:-.006em;
  color:var(--cream);
}
.art__body p + p{ margin-top:2.7rem; }
.art__body .art__lead + p{ margin-top:2.3rem; }
.art__body p:not(.art__lead){
  font-size:1.75rem; font-weight:300; line-height:2.8rem;
  color:var(--muted);
}

/* ---------------------------------------------------------
   3. SHARE

   Placed on the grid like everything else on these pages. It
   clears the four body paragraphs the comp was drawn with; a
   much longer article would need this figure moved, which is
   the same trade every section on the site already makes.
   --------------------------------------------------------- */

.art__share{
  position:absolute; left:36.9rem; top:121.2rem;
  display:flex; align-items:center; gap:.55rem;
  height:5.4rem; padding:0 1.4rem 0 1.6rem;
  background:var(--gold);
}
.art__share-k{
  font-family:var(--serif);
  font-variation-settings:var(--fr72);
  font-weight:700; font-size:1.6rem; line-height:1;
  margin-right:.5rem;
  color:#131110;
}
.shr{
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  background:#0d0c0b;
  transition:transform .25s ease, background-color .25s ease;
}
.shr svg{ width:1.3rem; height:1.3rem; fill:var(--gold); }
.shr:hover{ transform:translateY(-.2rem); background:#000; }

/* ---------------------------------------------------------
   4. OTHER NEWS   1860 – 2451
   --------------------------------------------------------- */

.s-other{ height:59.1rem; }

.other__h2{
  position:absolute; left:4.4rem; top:3.6rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:10.4rem; line-height:1;
  letter-spacing:-.023em;
  color:#efebe3;
}

.other{
  position:absolute; left:4.6rem; top:23.3rem;
  display:grid;
  grid-template-columns:repeat(3, 63.1rem);
  column-gap:.2rem;
  width:189.7rem;
}