/* ==========================================================================
   Sababa 5 in Mesa — PDF editorial typography
   Scoped to WordPress post 856. Header, nav, breadcrumbs and footer untouched.
   Reference: sababa-5-mesa-concert-clean.pdf (12pp)

   Consolidated 2026-10-01. Replaces the earlier base + "layout correction"
   stack, which contained contradictory duplicate rules (body 19/24px,
   h2 34/44px, kicker 11/16px). One pass now, in PDF proportion.
   ========================================================================== */

/* WOFF2 only. The TTF fallback was being requested alongside the woff2
   in testing, which would double the font cost for no benefit - woff2 is
   supported by ~98% of browsers and every engine since 2016. The .ttf
   files remain on disk, unreferenced, if a rollback is ever needed. */

/* Font faces inlined from fonts.css.
   An @import made the browser fetch article.css, parse it, then fetch
   fonts.css, then the fonts - a three-deep serial chain on the critical
   path. Inlined, the fonts start downloading one hop earlier. Relative
   URLs still resolve: the .ttf files sit beside this file. */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(noto-1.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Sans Display';
  font-style: normal;
  font-weight: 800;
  font-stretch: semi-condensed;
  font-display: swap;
  src: url(noto-2.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(noto-3.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(noto-4.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(noto-5.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(noto-6.woff2) format('woff2');
}

.postid-856 .hw-article {
  --sababa-paper: #f4efe4;
  --sababa-text:  #e4dfd3;
  --sababa-gold:  #d0af4d;
  --sababa-tan:   #c9a46a;
  --sababa-mute:  #99958b;
  --sababa-rule:  rgba(244,239,228,.13);
  --sababa-frame: rgba(244,239,228,.24);  /* neutral hairline (callout, rules) */
  --sababa-edge:  rgba(208,175,77,.42);   /* gold photo-frame edge */
  --sababa-matte: #07080a;
}

/* ---------- 1. Single full-width editorial column ---------- */

/* The aside now floats clear of the flow and is dismissible, so it no longer
   disturbs this article's single column. Hiding it here is obsolete. */
.postid-856 .hw-article-layout { display: block; max-width: 1080px; padding-top: 32px; }

/* ---------- 2. Masthead ---------- */

.postid-856 .hw-article-header h1 {
  font-family: 'Noto Sans Display', sans-serif;
  font-stretch: semi-condensed;
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: .9;
  letter-spacing: -.042em;
  color: var(--sababa-paper);
  text-transform: uppercase;
  max-width: 17ch;              /* stacks the title like the PDF cover */
  text-wrap: balance;
}

.postid-856 .hw-article-deck {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5;
  color: #d6d1c6;
  max-width: 62ch;
}

.postid-856 .hw-post-meta,
.postid-856 .hw-breadcrumbs,
.postid-856 nav[aria-label="Breadcrumb"] {
  font-family: 'Noto Sans Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  letter-spacing: .12em;
  color: var(--sababa-gold) !important;
}
.postid-856 .hw-post-meta { margin-top: 26px; }

/* ---------- 3. Body copy ---------- */

.postid-856 .hw-article-body {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.62;
  color: var(--sababa-text);
  width: 100%;
  max-width: none;
}

.postid-856 .hw-article-body p { margin: 0 0 1.05em; color: var(--sababa-text); }

/* Lead paragraph after each section head — larger, narrower measure (PDF pp.5,8,9,10) */
.postid-856 .hw-article-body h2 + p {
  font-size: 24px;
  line-height: 1.5;
  max-width: 30em;
  color: var(--sababa-paper);
  margin-bottom: 1.15em;
}

.postid-856 .hw-article-body a {
  color: var(--sababa-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 4. Section heads: separator + kicker ---------- */

.postid-856 .hw-article-body h2 {
  clear: both;
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: -.022em;
  text-transform: none;
  color: var(--sababa-paper);
  margin: 0 0 .5em;
}

.postid-856 .hw-article-body h2:not(:first-of-type) {
  border-top: 1px solid var(--sababa-rule);   /* PDF page separator */
  padding-top: 30px;
  margin-top: 74px;
}
.postid-856 .hw-article-body h2:first-of-type { margin-top: 46px; }

.postid-856 .hw-article-body h2::before {
  display: block;
  font-family: 'Noto Sans Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sababa-tan);
  margin-bottom: 14px;
}

.postid-856 .hw-article-body h2:nth-of-type(1)::before  { content: 'The room'; }
.postid-856 .hw-article-body h2:nth-of-type(2)::before  { content: 'How the door opened'; }
.postid-856 .hw-article-body h2:nth-of-type(3)::before,
.postid-856 .hw-article-body h2:nth-of-type(4)::before  { content: 'The sound'; }
.postid-856 .hw-article-body h2:nth-of-type(6)::before  { content: 'Deconstructing the sound'; }
.postid-856 .hw-article-body h2:nth-of-type(8)::before  { content: 'The night'; }
.postid-856 .hw-article-body h2:nth-of-type(9)::before  { content: 'The band'; }
.postid-856 .hw-article-body h2:nth-of-type(10)::before { content: 'The tour'; }
.postid-856 .hw-article-body h2:nth-of-type(11)::before { content: 'The weight they carry'; }
.postid-856 .hw-article-body h2:nth-of-type(12)::before { content: 'The room will be waiting'; }

/* Heads the PDF sets as a kicker only, with no large serif title:
   5 "The band" (p4) · 7 "The sound, in crimson" (p6) · 13 "Coda" (p12) */
.postid-856 .hw-article-body h2:nth-of-type(5),
.postid-856 .hw-article-body h2:nth-of-type(7),
.postid-856 .hw-article-body h2:nth-of-type(13) {
  font: 400 11px/1.4 'Noto Sans Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sababa-tan);
  margin-bottom: 20px;
}

.postid-856 .hw-article-body h2:nth-of-type(14) { font-size: 30px; }

/* Continuations, not page breaks.
   The separator rule stands in for a PDF page turn, so it belongs only where
   the reference actually turns a page. These three sit mid-page in the PDF,
   sharing a spread with the section above them:
     3   "The keys speak..."  shares p3 with "A friend opened the door"
     5   "The band" kicker    shares p4 with "The architecture of the groove"
     14  "Find Sababa 5"      shares p12 with "Coda"
   Ordinary section spacing instead of a rule. Margin-top only, so the
   kicker-only bottom margin on 5 survives. */
.postid-856 .hw-article-body h2:nth-of-type(3),
.postid-856 .hw-article-body h2:nth-of-type(5),
.postid-856 .hw-article-body h2:nth-of-type(14) {
  border-top: 0;
  padding-top: 0;
  margin-top: 48px;
}

/* Player credits */
.postid-856 .hw-article-body h3 {
  font-family: 'Noto Sans Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .13em;
  color: var(--sababa-gold);
  text-transform: uppercase;
  margin: 30px 0 .75em;
}

/* ---------- 5. Drop caps (PDF pp.2, 4, 11) ---------- */

.postid-856 .hw-article-body h2:nth-of-type(1)  + p::first-letter,
.postid-856 .hw-article-body h2:nth-of-type(4)  + p::first-letter,
.postid-856 .hw-article-body h2:nth-of-type(12) + p::first-letter {
  float: left;
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 4.1em;
  line-height: .82;
  color: var(--sababa-gold);
  padding: .04em .14em 0 0;
}

/* ---------- 6. Images: ONE frame treatment, applied to every figure -------
   Canonical "glow frame" for Hit Warehouse editorial photography:
   gold hairline edge + warm outer glow + dark matte + rounded corners.

   Every image in the article gets this, with no exceptions — hero, inline,
   floated and paired. Previously the paired images carried a #8f782f border
   on the <img> while standalone figures had none, so some photos glowed and
   others sat bare. The inner reset below collapses that difference: the
   FIGURE owns the frame, the IMG never draws its own edge.
   -------------------------------------------------------------------------- */

.postid-856 .hw-article figure.wp-block-image,
.postid-856 figure.hw-article-hero {
  background: var(--sababa-matte);
  border: 1px solid var(--sababa-edge);
  border-radius: 14px;
  padding: 7px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(208,175,77,.10),   /* inner containment line */
    0 0 30px rgba(208,175,77,.13),    /* the glow */
    0 10px 34px rgba(0,0,0,.45);      /* grounding shadow on dark paper */
}

/* Vertical margins only. A `margin` shorthand here would zero the inline
   margins that `.hw-shell` supplies (0 20px) and shift the hero 20px left of
   the header and body column. Keep inline margins to the shell. */
/* Floated figures are excluded: this blanket margin has no horizontal
   component, so it was overriding the float utility's side margin and
   leaving the copy flush against the frame. */
.postid-856 .hw-article figure.wp-block-image:not(.hw-float-right):not(.hw-float-left) { margin: 30px 0 42px; }
.postid-856 figure.hw-article-hero { margin-block: 30px 42px; }

/* The image never draws its own border — kills the doubled gold edge.
   Specificity is deliberately raised above `.hw-article-body .sababa-photo-pair img`
   (0,3,1) so a stale paired-image rule in any other sheet cannot reinstate it. */
.postid-856 .hw-article .hw-article-body figure img,
.postid-856 .hw-article .sababa-photo-pair figure img,
.postid-856 .hw-article figure.hw-article-hero img,
.postid-856 .hw-article figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 7px;
}

.postid-856 .hw-article-body figcaption,
.postid-856 figure.hw-article-hero figcaption {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sababa-mute);
  padding: 10px 2px 2px;
  margin: 0;
}

/* Side-by-side pairs — equal height so the grid never goes ragged.
   Source ratios differ (0.80 vs 0.67), so the figures stretch to the taller
   of the two and the image fills with object-fit rather than letterboxing. */
.postid-856 .sababa-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  align-items: start;
  margin: 28px 0 42px;
}
.postid-856 .hw-article-body .sababa-photo-pair figure {
  margin: 0;
  }


/* Three frames as one balanced block: tall frame left, two stacked right.
   The stacked pair totals roughly the height of the single portrait, so the
   section reads as one rectangle instead of leaving a hole bottom-right. */
.postid-856 .sababa-photo-trio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: start;
  margin: 28px 0 42px;
}
.postid-856 .hw-article-body .sababa-photo-trio figure { margin: 0; }
.postid-856 .hw-article-body .sababa-photo-trio figure:first-child { grid-row: 1 / span 2; }


/* ---------- 7. Text wrapping beside images (PDF p.5) ---------- */

/* Float and wrap are no longer positional. Figures carry .hw-float-right or
   .hw-float-left from the theme stylesheet, so an editor can move a frame
   without the wrap following a heading index. The utilities also size the
   frame from the image, never the reverse, and stack at 860px. */

/* Centred inset image (PDF p.10) */
.postid-856 .hw-article-body h2:nth-of-type(11) ~ figure.wp-block-image {
  width: 58%;
  margin-left: auto;
  margin-right: auto;
}
.postid-856 .hw-article-body h2:nth-of-type(12) ~ figure.wp-block-image { width: auto; }

/* ---------- 8. Band lineup (PDF p.4) ---------- */

.postid-856 .sababa-lineup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  margin: 26px 0 34px;
  font-family: 'Noto Sans', sans-serif;
}
.postid-856 .sababa-lineup > div {
  border-top: 1px solid rgba(244,239,228,.3);
  padding-top: 10px;
}
.postid-856 .sababa-lineup dt { font-size: 15px; font-weight: 700; color: var(--sababa-paper); margin-bottom: 3px; }
.postid-856 .sababa-lineup dd { margin: 0; font-size: 15px; color: #bdb8ad; }

/* ---------- 9. Pull quotes (PDF pp.7, 11) ---------- */

.postid-856 .hw-article-body .sababa-pullquote {
  font-family: 'Noto Serif', serif;
  font-style: italic;
  font-size: 27px;
  line-height: 1.38;
  color: var(--sababa-paper);
  border-left: 3px solid var(--sababa-gold);
  padding: 2px 0 2px 26px;
  margin: 42px 0;
  max-width: 26em;
}

/* ==========================================================================
   POSITIONAL RULES — tied to the current post body order.
   Re-check these if the post content is reordered.
   ========================================================================== */

/* Discography rows, 2022–2026 (PDF p.8) */
.postid-856 .hw-article-body > p:nth-child(n+49):nth-child(-n+53) {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  padding: 13px 0 13px 2px;
  border-top: 1px solid var(--sababa-rule);
  max-width: none;
}
.postid-856 .hw-article-body > p:nth-child(53) {
  border-bottom: 1px solid var(--sababa-rule);
  margin-bottom: 34px;
}

/* "A word with a whole room inside it" callout (PDF p.8) */
.postid-856 .hw-article-body > p:nth-child(54) {
  border: 1px solid var(--sababa-frame);
  border-radius: 12px;
  background: rgba(255,255,255,.022);
  padding: 24px 26px;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 46px;
  max-width: none;
}

/* "Ça va, ça va. It is going to be all right." (PDF p.12) */
.postid-856 .hw-article-body > p:nth-child(78) {
  font-size: 27px;
  line-height: 1.4;
  color: var(--sababa-paper);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--sababa-rule);
  margin-bottom: 8px;
}

/* Byline + hero caption at the head of the body */
.postid-856 .hw-article-body > p:nth-child(1) {
  font-family: 'Noto Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sababa-tan);
  max-width: none;
  margin-bottom: .5em;
}
.postid-856 .hw-article-body > p:nth-child(2) {
  font-size: 14px;
  color: var(--sababa-mute);
  max-width: none;
  margin-bottom: 2.4em;
}

/* "Find Sababa 5" link list (PDF p.12) */
.postid-856 .hw-article-body ul {
  list-style: none;
  margin: 4px 0 34px;
  padding: 0;
  border-bottom: 1px solid var(--sababa-rule);
}
.postid-856 .hw-article-body ul li { margin: 0; }
.postid-856 .hw-article-body ul li a {
  display: block;
  padding: 11px 2px;
  font-size: 17px;
  color: var(--sababa-text);
  border-top: 1px solid var(--sababa-rule);
  text-decoration: none;
}
.postid-856 .hw-article-body ul li:first-child a { border-top: 0; }
.postid-856 .hw-article-body ul li a:hover { color: var(--sababa-gold); }

/* Gallery call-to-action, centred (PDF p.12) */
.postid-856 .hw-article-body > p:nth-last-child(2) {
  text-align: center;
  font-size: 25px;
  margin: 34px 0 6px;
  max-width: none;
}
.postid-856 .hw-article-body > p:nth-last-child(2) a {
  color: var(--sababa-paper);
  text-decoration-color: var(--sababa-gold);
  text-underline-offset: 6px;
}
.postid-856 .hw-article-body > p:last-child {
  text-align: center;
  font-size: 15px;
  color: var(--sababa-mute);
  max-width: none;
  margin-bottom: 0;
}

/* ---------- 10. Responsive ---------- */

@media (max-width: 860px) {
  .postid-856 .hw-article-body h2:nth-of-type(11) ~ figure.wp-block-image {
    float: none; width: auto; margin: 26px 0 34px;
  }
  .postid-856 .hw-article-body { font-size: 18px; }
  .postid-856 .hw-article-body h2 + p { font-size: 20px; max-width: none; }
  .postid-856 .hw-article-body h2 { font-size: 29px; }
  .postid-856 .hw-article-body .sababa-pullquote { font-size: 21px; }
  .postid-856 .hw-article-body > p:nth-child(78) { font-size: 22px; }
  .postid-856 .sababa-photo-pair { gap: 14px; }
  .postid-856 .sababa-lineup { font-size: 13px; gap: 12px; }
  .postid-856 .hw-article-body figcaption { font-size: 12px; }
}

@media (max-width: 700px) {
  /* The trio collapses earlier than the pairs: three frames in two columns
     leaves each one far too narrow on a phone. Row-span and object-fit are
     released so each photo returns to its natural ratio, uncropped. */
  .postid-856 .sababa-photo-trio { grid-template-columns: 1fr; grid-template-rows: auto; }
  .postid-856 .hw-article-body .sababa-photo-trio figure:first-child { grid-row: auto; }

}

@media (max-width: 450px) {
  .postid-856 .sababa-photo-pair { grid-template-columns: 1fr; }

  .postid-856 .sababa-lineup { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── Image geometry: never override a photograph's own proportions ───────
   A forced aspect-ratio box letterboxes a landscape frame inside a portrait
   cell; object-fit: cover crops it; object-fit: fill stretches it. All three
   were tried here and all three were wrong. Images size to themselves, grid
   cells size to their image, and alignment comes from pairing like with like
   when the article is authored. Do not reintroduce aspect-ratio or object-fit
   on article images. */
.postid-856 .hw-article .hw-article-body figure img,
.postid-856 .hw-article .sababa-photo-pair figure img,
.postid-856 .hw-article .sababa-photo-trio figure img,
.postid-856 .hw-article figure.hw-article-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;      /* default; harmless because height is auto */
}

/* Requested photo-block alignment, 2026-10-02. */
.postid-856 .hw-article .hw-article-body .sababa-photo-trio > figure { margin: 0 !important; }
@media (min-width: 701px) {
.postid-856 .hw-article .hw-article-body .sababa-photo-trio { grid-template-rows: auto 1fr; row-gap: 16px; }
.postid-856 .hw-article .hw-article-body .sababa-photo-trio > figure:last-child { align-self: end; }
}