/*
   BLOG CHROME — the shared nav bar, the shared footer, and the type the blog is set
   in.

   CONTENTS, in source order: the two self-hosted @font-face blocks; the :root type
   tokens; the skip link; the .ronav* bar and drawer; the .site .footer re-statement;
   and a narrow-viewport block at the foot of the file.

   ⚠ TWO @media (max-width: 820px) BLOCKS, and the split is deliberate rather than an
   artefact of editing. The FIRST, immediately under :root, exists only to give --nav-h
   its second value — which is what lets .ronav read the token and never write the same
   pixel count twice. The SECOND, at the foot of the file, carries the rule changes and
   explains itself where it sits. Same breakpoint, two jobs; do not merge them.

   THE CASCADE. _SiteHeadPartial links this file SECOND of the two shared sheets,
   immediately after styles.css, and that order is load-bearing. The tokens and the
   faces below compete with nothing, since styles.css declares none of those names —
   the footer rules at the foot of this file are the half that competes. 🚨 THE WHOLE
   ARGUMENT, WITH THE SPECIFICITY ARITHMETIC, IS WRITTEN OUT ONCE, at the
   `.site .footer` banner below. Read it there; do not restate it here.

   NO !important ANYWHERE IN THIS FILE, and that is a decision. Every declaration this
   sheet competes with is a NORMAL declaration, so specificity settles it cleanly and an
   !important here would hide a specificity question rather than answer one. (The site is
   not uniform on this: site-v3/styles.css hides the home page's menu with an !important
   rule, and an !important declaration cannot be beaten by any amount of specificity — so
   a counter-rule there has to carry one. Different cascade, different answer; do not
   make the two files "consistent".)

   HOW A PAGE PICKS THIS UP: by rendering _SiteHeadPartial, which holds the only <link>
   to this file. That is the whole adoption mechanism — not membership of site-v2, which
   is a folder and not a cascade. "/" renders two ways (Pages/Index.cshtml.cs): Hani's
   World loads site-v3/styles.css, and the Play Wins page loads site-v2/styles.css out
   of THIS folder. Neither renders that head, so neither links this sheet and neither
   picks up these tokens — which is why the footer scoping below is stated as
   prevention rather than as a live fix.

   No colour TOKEN is declared here, so the palette keeps ONE declaration site.
   Every blog surface reuses the palette already in styles.css -- var(--ink) and
   var(--gold) throughout the rules below; see the UXD's token audit for the reuse
   list. The literal #fff and rgba(255, 255, 255, .x) in the chrome rules are not
   palette entries and must not become ones: they are white-on-ink text, the CTA's
   white focus ring, and its shadow -- each used once, where it is written.
*/

/* ──────────────────────────────────────────────────────────────────────────────
   TYPE TOKENS AND FACES — the two self-hosted faces, and the :root tokens that
   name them alongside the type scale, the reading measure and the bar's height.
   Nothing in this section competes with styles.css: it declares none of these
   names.
   ────────────────────────────────────────────────────────────────────────────── */

/* Self-hosted latin subsets, so the blog's type does not depend on a font CDN
   we do not control (PRD §6.2). Hani's World's CDN Montserrat is a different
   delivery and is deliberately not reused. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* One variable file, declared as a weight RANGE rather than three static faces:
   the browser instances 500 (body), 600 (emphasis) and 800 (kickers) from it, so
   the blog ships one download instead of three and fewer bytes overall. Widen the
   range here if a fourth weight is ever needed — no new file is required. */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Named for the role, not the face: Fraunces stands in for the brand book's
     unlicensed Recoleta Alt, so buying that licence is a one-line swap here. */
  --font-heading: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Desktop maxima sit above the brand scale: display and title by 10px each,
     subtitle and body by less, caption not at all. The reason is the measure — a
     30px headline over a 68-character line on a wide screen reads as a caption. */
  --type-display: clamp(30px, 5vw, 40px);
  --type-title: clamp(26px, 4vw, 32px);
  --type-subtitle: clamp(22px, 2.6vw, 26px);
  --type-body: clamp(17px, 1.4vw, 18px);
  --type-caption: clamp(13px, 1vw, 14px);

  /* The reading column. styles.css's --max is the comic grid, which is far too
     wide for prose, so it cannot be borrowed. */
  --measure: 68ch;

  /* The bar's height, consumed by .ronav below and available to anything sized
     beside it. A token and not a literal because the same number written down twice
     drifts, and because the narrow-viewport step is then one declaration here rather
     than one per rule. It is not a scroll offset — the bar is static and in document
     flow, so no heading needs a scroll margin computed against it. */
  --nav-h: 56px;
}

/* THE FIRST of this file's two 820px blocks, and the only one that touches a
   token: --nav-h's second value sits beside its first, so every rule that needs
   the bar's height reads var(--nav-h) at both widths and no literal is written
   down twice. The RULE changes for this breakpoint are in the block at the foot
   of the file. */
@media (max-width: 820px) {
  :root {
    --nav-h: 52px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE SKIP LINK — the first tab stop on every page that renders the nav bar.
   Visible only while focused: it is for a keyboard reader, and a permanently
   visible one would be the first thing every other reader sees.
   ───────────────────────────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  display: inline-block;
  margin: 0;
  padding: 5px 11px;
  background: var(--ink);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Brought back into the page ON FOCUS, in flow at the top-left, rather than
   revealed in place: off-screen positioning is what keeps it out of the visual
   order, and a link that is focusable but never visible is worse than none. */
.skip:focus,
.skip:focus-visible {
  position: static;
  left: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE NAV BAR. Static and in document flow on every page — never sticky, so it
   never eats reading height. Deliberately NOT scoped under .site, unlike the
   footer below: these are new class names that collide with nothing, so scoping
   them would buy nothing and would make adopting the bar a document-wrapping
   job. Which page sets are expected to adopt it, and why that is the reason,
   is on NavSection in Pages/Shared/SiteNav.cs.
   ───────────────────────────────────────────────────────────────────────────── */
/* TWO CHILDREN: the wordmark, and .ronav-actions holding the call to action and the
   burger. space-between then puts the wordmark on the left edge and the group on the
   right. No rule in this file declares `order` or `flex-direction`, so source order is
   visual order at both widths — which is what lets a reader of the markup see the bar
   without reading the stylesheet.

   🚨 THE GROUP IS NOT DECORATION. space-between distributes the free space BETWEEN the
   children it is given, so flattening the two actions into direct children of .ronav
   is not a simplification: it moves "Get the app" off the right edge and floats it in
   the middle of the bar. That button is the site's conversion path. Keep them wrapped.

   THE MENU BUTTON IS ON THE RIGHT, which is where the home page's .top-bar puts its
   own burger. The two bars are never on screen together, so the consistency is a
   memory one: a reader who learns the menu's corner on / finds it in the same corner
   on /blog. */
.ronav {
  height: var(--nav-h);
  padding: 0 22px;
  border-bottom: 5px solid var(--gold);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* The two actions, kept together at the right end — named for what it holds rather
   than for the end it sits at, so moving the group does not make the class a lie.
   align-items is re-declared rather than inherited: a flex item is not a flex
   container, so .ronav's centring places THIS div in the bar and stops there. Without
   it the two inside would stretch to the group's height instead of sitting at their
   own, which is the default and not what either is drawn at. Same three declarations
   the previous grouping element carried. */
.ronav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ronav-brand {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}

.ronav-burger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* Driven by the attribute the toggle script already has to maintain for
   assistive technology, so the open state cannot be styled open while being
   announced closed. */
.ronav-burger[aria-expanded="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* The gold dot: "the page you are on is one of the items behind this button".
   Never the only signal — aria-current and the ▸ marker below carry the same
   fact for a reader who cannot perceive it.

   `here` breaks this file's ronav- vocabulary and is safe only because it is
   ALWAYS written compounded onto .ronav-burger, never on its own. Keep it
   compounded. (The name itself is fixed by the TDD against UXD §4.2 and the
   mockup — it is not a rename waiting to happen.) */
.ronav-burger.here::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border: 2px solid var(--ink);
}

.ronav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 2px solid var(--ink);
  background: var(--gold);
  box-shadow: 3px 3px 0 rgba(255, 255, 255, .85);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* 3px WHITE, the one exception to the site's gold focus ring: this button is
   already gold, and gold on gold is not a state change. :focus-visible, so a
   pointer tap does not leave the ring behind. */
.ronav-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The drawer opens IN FLOW and pushes the page down — never an overlay, so
   reading order and focus order stay identical to visual order.

   🚨 NO `display` DECLARATION ON THIS SELECTOR, EVER. The drawer is closed by the
   `hidden` ATTRIBUTE, and that works only through the UA stylesheet's
   `[hidden] { display: none }` — which ANY display declaration here overrides,
   because an author declaration beats the UA one at every specificity. Add
   `display: flex` (to lay the items out on desktop, say) and the attribute stops
   hiding anything: the drawer is permanently open, aria-expanded="false" announces
   it closed, the markup is unchanged and every render test stays green. Lay the
   items out on `.ronav-drawer a` below instead. SiteChromeCssChromeRuleTests pins
   this, and excludes that descendant. */
.ronav-drawer {
  padding: 6px 22px 14px;
  border-bottom: 5px solid var(--gold);
  background: var(--ink);
}

.ronav-drawer a {
  display: block;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* `dr-cur` breaks the ronav- vocabulary like `here` above, and is safe for the
   same reason: it is ALWAYS written compounded onto `.ronav-drawer a`, never on
   its own. Keep it compounded; the name is not open for renaming. */
.ronav-drawer a.dr-cur {
  color: var(--gold);
}

.ronav-drawer a.dr-cur::before {
  content: "▸ ";
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE SHARED FOOTER, RE-STATED UNDER .site — and the scoping is the whole point.

   🚨 THIS BANNER IS THE ONE PLACE THE CASCADE ARGUMENT IS WRITTEN OUT. The file
   header, _SiteHeadPartial's <link> pair, SiteHeadPartialTests and
   SiteChromeCssChromeRuleTests all point here instead of restating it. Keep it
   that way: the arithmetic below once lived in four places and had to be
   corrected in all four in a single pass, which is the demonstration that copies
   of it drift.

   WHAT IS BEING RE-STATED. styles.css writes .footer for the Play Wins page,
   where the footer OVERLAYS the last full-height comic panel: height:54px with
   margin-top:-54px, position:relative, z-index:30. There is no panel to overlay
   on a blog page, and a −54px pull would eat the last 54px of the article, so the
   markup is shared and the CSS is not.

   IT MUST BEAT THREE DECLARATIONS IN styles.css, NOT ONE: the base block, a later
   re-declaration of border-top and background, and a max-width:820px block that
   re-sets height and margin-top to −58px. `.site .footer` is 0,2,0 against 0,1,0
   in all three, and a media query adds no specificity — so the unmediaed block
   below already beats the mobile one. No !important: see the file header.

   ⚠ THE SCOPING IS PREVENTION, AND MUST NOT BE UNSCOPED ON THE GROUNDS THAT
   NOTHING CURRENTLY BREAKS. No page that wants the OVERLAY footer links this
   sheet: the only <link> to it is in _SiteHeadPartial, and neither branch of "/"
   renders that partial (Pages/Index.cshtml.cs). What the `.site ` scope buys is
   the day one of them adopts the shared head — for the type tokens, say — and
   keeps the overlay footer it was drawn against instead of silently losing it.
   That failure is invisible to every test in the solution and to the diff that
   causes it. A page that wants THIS footer opts in, by wrapping its document in
   <div class="site">.
   ───────────────────────────────────────────────────────────────────────────── */
.site .footer {
  position: static;
  z-index: auto;
  height: auto;
  min-height: 0;
  margin-top: 0;
  padding: 14px 20px;
  border-top: 5px solid var(--gold);
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.site .footer strong {
  font-size: 15px;
  font-weight: 700;
}

.site .footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site .footer a,
.site .footer .footer-coming-soon {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

/* The dormant placeholder keeps its dotted underline and help cursor. Its
   tooltip (.footer-coming-soon::after in styles.css) is left alone — it needs no
   re-statement, because nothing about it assumes the comic. */
.site .footer .footer-coming-soon {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE FOOTER'S FOCUS RINGS — THE HALF OF UXD §4.1 THIS FILE OWNS.

   §4.1 asks for a gold ring on EVERY focusable element on the blog. blog.css
   carries the other half — .back, .chip, .entry-title, .post-body a and .badge —
   and stops at the footer on purpose: the footer's markup comes from
   _SiteFooterPartial rather than from a blog view, and the rules that reach it are
   the scoped re-statement above. Splitting it that way keeps each ring beside the
   rules for the element it rings. The two suites each compare their half against
   the other's, so neither file can drift alone.

   THE SAME TREATMENT AS blog.css's, TO THE PIXEL — 3px solid var(--gold) at 3px
   offset. Two rings differing by a pixel across one page is worse than the gap this
   closes. ⚠ NOT the white ring .ronav-cta takes above: that is UXD §4.2's exception
   for a button that is itself gold, and nothing in the footer is gold-filled.

   WHAT EACH HALF HAS TO BEAT, READ OFF styles.css RATHER THAN ASSUMED:

     .site .footer a ........ NOTHING, and that is the finding. styles.css declares
                              `outline` on exactly .prologue-cta, .store-badge,
                              .footer-coming-soon, .companion-cta and .panel.action,
                              and it has no bare `a` rule at all — so Privacy, TOS
                              and Contact fall back to the UA's own ring, drawn on
                              an ink background. 0,3,1 against nothing.

     .site .footer
       .footer-coming-soon .. styles.css's .footer-coming-soon:focus-visible, which
                              is 2px gold at 3px offset — the site's one off-size
                              ring, and the reason this needs a re-statement rather
                              than nothing. 0,4,0 against 0,2,0, so it wins with no
                              !important; see the file header. ⚠ THE TOOLTIP RULE IS
                              A DIFFERENT RULE and is left alone:
                              .footer-coming-soon:focus-visible::after is on a
                              pseudo-element and nothing about it assumes the comic.

   ⚠ THE ANCHOR HALF IS A TAG SELECTOR ON PURPOSE. The footer's links carry no class
   — the partial writes bare <a href> — so there is no class to hang this on, and a
   fourth link added to that nav is ringed the day it is written rather than the day
   someone notices. A hand-maintained list of the three links is what rots.

   ⚠ :focus-visible, NEVER :focus, for the reason blog.css's ring block gives at
   length: a pointer click matches :focus in the major engines, so a bare :focus
   leaves a gold ring sitting on whichever footer link was clicked last.
   ───────────────────────────────────────────────────────────────────────────── */
.site .footer a:focus-visible,
.site .footer .footer-coming-soon:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NARROW VIEWPORTS. One breakpoint, 820px, the same one styles.css uses and the
   same one --nav-h steps at. Nothing collapses, nothing wraps, nothing reorders:
   the same three bar elements, tightened.

   The footer rules here repeat margin-top and min-height on purpose — styles.css
   re-sets both inside ITS 820px block, and a reader of this file should be able
   to see the whole answer without holding the other file in their head.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* No height here: --nav-h steps to 52px in the :root block above, and .ronav reads
     the token. A literal here would be the same number written down twice.

     No gap here either: .ronav's own 14px is the floor between the wordmark and the
     actions group, and space-between holds them at the two edges regardless. The gap
     that tightens is the one INSIDE the group, below. */
  .ronav {
    padding: 0 14px;
  }

  .ronav-actions {
    gap: 8px;
  }

  .ronav-brand {
    font-size: 13px;
  }

  .ronav-cta {
    padding: 8px 12px;
    font-size: 10px;
  }

  .ronav-drawer {
    padding: 4px 14px 12px;
  }

  .site .footer {
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 12px;
    gap: 10px;
    flex-direction: column;
  }

  .site .footer strong {
    font-size: 12px;
  }

  .site .footer a,
  .site .footer .footer-coming-soon {
    font-size: 9px;
  }
}