/* ==========================================================================
   Highest Casino Payouts School — shared site stylesheet
   ONE stylesheet for every page (money page, homepage mirror, EEAT, utility,
   404) so the look cannot drift between them.

   Design system derived from the logo: a collegiate slab wordmark whose G is a
   laurel-wreathed payout coin, drawn with a brass offset shadow. Three motifs
   repeat out of that: the SEAL (laurel roundel), the LAUREL RULE (hairline +
   centred sprig), and the OFFSET SHADOW (every raised surface repeats the
   logo's own construction). Palette + type harvested from the domain's own
   historic identity, then diverged from same-lineup siblings.

   Class vocabulary is deliberately unique to this property: ledger / dossier /
   slate / seal / crest / grade / award / marks / enrol.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  /* base */
  --ox:        #5A0D0D;   /* oxblood — brand base, headings, bonus figures   */
  --ox-deep:   #3E0A05;   /* deepest oxblood — footer, dossier band          */
  --ox-soft:   #7A2418;   /* secondary oxblood — links, hovers               */
  --parch:     #F5F1E8;   /* parchment — page + masthead ground              */
  --parch-2:   #EDE5D5;   /* parchment tint — panels, award blocks           */
  --parch-3:   #E2D8C3;   /* parchment shade — rules, chip edges             */
  --brass:     #B08A3E;   /* brass — motif furniture, seals, offset shadow   */
  --brass-lt:  #D9BC7E;
  --brass-dk:  #8A6A29;
  --ink:       #2B2320;   /* body copy                                       */
  --ink-soft:  #6B5F58;   /* meta, captions                                  */
  --paper:     #FFFFFF;   /* card ground, logo chips                         */

  /* ⛔ RESERVED — the CTA colour. Appears on the .enrol button class and
     NOWHERE else: not headings, seals, bonuses, ribbons, links, borders or
     icons. Complement of oxblood, and diverged from every same-lineup
     sibling (hpep cyan #0EA0D7, texasmsa rust #C2410C). */
  --cta:       #197A4B;
  --cta-dark:  #0F5C37;
  --cta-ink:   #FFFFFF;

  /* type */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-num:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* metrics */
  --r:      3px;          /* academic register = restrained radii */
  --r-lg:   5px;
  --wrap:   1140px;
  --gut:    22px;
  --offset: 4px;          /* the logo's offset-shadow distance */

  /* the OFFSET SHADOW motif — repeats the logo's lettering construction */
  --lift:    var(--offset) var(--offset) 0 var(--brass);
  --lift-sm: 3px 3px 0 var(--brass);
  --lift-ox: var(--offset) var(--offset) 0 var(--ox);
}

/* --- the repeating motif texture ------------------------------------------
   A parchment tile carrying a faint laurel sprig + coin dot, drawn from the
   logo's own vocabulary. Inline data-URI so the page stays self-contained
   under a strict no-external-requests posture. Used on section bands. */
:root {
  --motif-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%235A0D0D' stroke-width='1.1' stroke-linecap='round' opacity='0.10'%3E%3Cpath d='M14 40c6-2 11-7 13-13'/%3E%3Cpath d='M16 34c-1-3 0-6 2-8'/%3E%3Cpath d='M20 29c-1-3 0-6 2-8'/%3E%3Cpath d='M24 24c-1-3 0-6 2-8'/%3E%3Cpath d='M58 40c-6-2-11-7-13-13'/%3E%3Cpath d='M56 34c1-3 0-6-2-8'/%3E%3Cpath d='M52 29c1-3 0-6-2-8'/%3E%3Cpath d='M48 24c1-3 0-6-2-8'/%3E%3C/g%3E%3Ccircle cx='36' cy='46' r='3.2' fill='%23B08A3E' opacity='0.16'/%3E%3C/svg%3E");

  /* the SEAL motif, standalone — section ornaments and inline marks */
  --seal-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16' fill='%235A0D0D'/%3E%3Ccircle cx='17' cy='17' r='7.5' fill='%23D9BC7E'/%3E%3Cg fill='none' stroke='%23B08A3E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M9 22c-1.5-3.5-1.2-7.5.8-10.5'/%3E%3Cpath d='M25 22c1.5-3.5 1.2-7.5-.8-10.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parch);
  color: var(--ink);
  font: 400 17px/1.62 var(--font-body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ox-soft); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ox); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ox);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(1.72rem, 1.15rem + 2.1vw, 2.62rem); }
h2 { font-size: clamp(1.34rem, 1.02rem + 1.2vw, 1.82rem); }
h3 { font-size: clamp(1.12rem, .98rem + .55vw, 1.3rem); }
p  { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .42em; }
strong { font-weight: 700; color: var(--ox-deep); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- masthead -------------------------------------------------------------
   Parchment ground: the composite proof showed the oxblood wordmark and its
   brass shadow both fail on any dark bar. NON-STICKY by rule. */
.masthead {
  background: var(--parch);
  border-bottom: 3px solid var(--brass);
  position: static;
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-block: 13px;
}
.masthead__logo { flex: 0 0 auto; }
.masthead__logo img { height: 64px; width: auto; }
.masthead__nav { display: flex; align-items: center; gap: 22px; }
.masthead__nav a {
  font: 600 13.5px/1 var(--font-body);
  letter-spacing: .055em; text-transform: uppercase;
  color: var(--ox); text-decoration: none; white-space: nowrap;
}
.masthead__nav a:hover { color: var(--brass-dk); text-decoration: underline; }
.masthead__toggle { display: none; }

/* --- hero ----------------------------------------------------------------
   Compact for BOTH viewports so the ledger clears the fold on desktop and
   mobile alike — never by hiding content on one of them. */
.hero { padding-block: 26px 20px; background-image: var(--motif-tile); }
.hero__lede { font-size: 1.08rem; color: var(--ink); max-width: 68ch; margin-bottom: 16px; }

/* byline — structured rows, never a compressed dot-run */
.byline { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.byline__shot {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--brass); flex: 0 0 auto; object-fit: cover;
}
/* the text column must be allowed to shrink inside the flex row — without
   min-width:0 it sizes to its content and pushed the page 31px wide at 390 */
.byline > div { min-width: 0; flex: 1 1 auto; }
.byline__who { font: 600 15px/1.3 var(--font-body); color: var(--ox); }
.byline__who a { color: inherit; }
.byline__role { font: 400 13px/1.35 var(--font-body); color: var(--ink-soft); }
.byline__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px;
  font: 400 12.5px/1.4 var(--font-body); color: var(--ink-soft);
}
.byline__meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ⛔ EVERY inline sprite icon must be explicitly sized. An <svg><use> with no
   width/height expands to fill its container: unsized byline icons rendered at
   254x150px each, inflating the byline to 496px tall and 347px wide at a 390px
   viewport, which pushed the toplist off the fold AND caused h-overflow.
   The catch-all below means a newly added icon can never repeat it. */
svg:not([width]) { width: 1em; height: 1em; flex: 0 0 auto; }
.byline__meta svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* the hero's only call to action drives DOWN into the ledger */
.descend {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 14px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ox); text-decoration: none;
  padding: 11px 17px; background: transparent;
  border: 2px solid var(--ox); border-radius: var(--r);
  box-shadow: var(--lift-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.descend:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--brass); color: var(--ox); }
.descend svg { width: 15px; height: 15px; }

/* --- sections + the LAUREL RULE motif ------------------------------------- */
.band { padding-block: 34px; }
.band--tint { background: var(--parch-2); border-block: 1px solid var(--parch-3); }
.band--motif { background-image: var(--motif-tile); }

.laurel-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0; border: 0; padding: 0;
}
.laurel-rule::before, .laurel-rule::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--brass); opacity: .55;
}
.laurel-rule::marker { content: none; }
.laurel-rule > span {
  flex: 0 0 auto; width: 26px; height: 26px;
  background-image: var(--seal-mark); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}

/* --- the LEDGER (ranking list) -------------------------------------------
   Layout: a full-width DOSSIER card for the top pick, then SLATE cards in
   two-up rows. Same content on both viewports, reflowed. */
.ledger { margin: 0 0 8px; }
.ledger__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* shared card shell — repeats the logo's offset-shadow construction */
.slate {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ox);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: 15px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ribbon — a card-level marker, never placed above a heading */
.slate__ribbon {
  position: absolute; top: -1.5px; right: -1.5px;
  background: var(--ox); color: var(--parch);
  font: 700 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 0 var(--r-lg) 0 var(--r);
}

/* head row: seal + crest + name + grade */
.slate__head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.slate__seal {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--ox); color: var(--brass-lt);
  border: 2px solid var(--brass);
  border-radius: 50%;
  font: 700 17px/1 var(--font-num);
}
.slate__crest {
  background: var(--paper);
  border: 1px solid var(--parch-3);
  border-radius: var(--r);
  height: 46px; width: 100%; max-width: 148px;
  display: grid; place-items: center; padding: 5px 9px;
}
.slate__crest img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
/* Square / squarish brand art reads tiny under a wordmark's height cap — a
   1.34:1 logo at 34px tall is only 45px wide. Give it more vertical room. */
.slate__crest--sq img { max-height: 44px; }
.slate__crest--tile { background: var(--ox-deep); border-color: var(--ox-deep); }
.slate__name { font: 700 1.06rem/1.2 var(--font-display); color: var(--ox); margin: 0; }
.slate__grade { display: flex; align-items: center; gap: 7px; }
.slate__stars { color: var(--brass); font-size: 14px; letter-spacing: .08em; }
.slate__score { font: 700 14px/1 var(--font-num); color: var(--ox); }

/* AWARD panel — the eye-catcher. Figure is large + bold in oxblood on a
   parchment panel with a brass hairline; never black, never the CTA colour. */
.slate__award {
  background: var(--parch-2);
  border: 1px solid var(--brass);
  border-left: 4px solid var(--brass);
  border-radius: var(--r);
  padding: 10px 13px;
}
.slate__award-label {
  font: 700 10.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass-dk); margin-bottom: 5px;
}
.slate__award-figure {
  font: 700 clamp(1.22rem, 1.02rem + .75vw, 1.56rem)/1.16 var(--font-display);
  color: var(--ox); margin: 0 0 5px;
}
.slate__award-terms {
  font: 400 12.5px/1.5 var(--font-num); color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 3px 12px;
}
.slate__award-terms b { color: var(--ox); font-weight: 700; }
.slate__code { font-family: var(--font-num); color: var(--ox); font-weight: 700; }

/* marks — attribute pills with inline SVG icons (no emoji anywhere) */
.slate__marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--font-body);
  color: var(--ox); background: var(--parch);
  border: 1px solid var(--parch-3); border-radius: 999px;
  padding: 5px 10px;
}
.mark svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mark--fast { border-color: var(--brass); background: #FBF6EA; }

/* --- the RESERVED CTA ----------------------------------------------------
   ⛔ --cta / --cta-dark appear ONLY on .enrol. Nothing else on the site may
   use them. Grep check: --cta must not resolve outside this block. */
.enrol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cta); color: var(--cta-ink);
  font: 700 14.5px/1 var(--font-body); letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none;
  padding: 13px 20px;
  border: 1.5px solid var(--cta-dark); border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--cta-dark);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  width: 100%;
}
.enrol:hover {
  background: var(--cta-dark); color: var(--cta-ink);
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cta-dark);
}
.enrol:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--cta-dark); }
.enrol svg { width: 15px; height: 15px; }
.enrol--slim { padding: 10px 15px; font-size: 13px; }
/* grid rows stretch cards to equal height but not their content, which left
   CTAs floating at different heights across a row. Pin them to the bottom. */
.ledger__grid .slate .enrol { margin-top: auto; }
.enrol--nav { width: auto; padding: 10px 15px; font-size: 12.5px; }

/* --- the DOSSIER (top pick) ---------------------------------------------- */
.dossier {
  border-width: 2px;
  box-shadow: 6px 6px 0 var(--brass);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
  background:
    linear-gradient(180deg, rgba(176,138,62,.09), rgba(176,138,62,0) 120px),
    var(--paper);
}
.dossier__grid {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(210px, 260px);
  gap: 20px; align-items: center;
}
.dossier .slate__name { font-size: 1.42rem; }
.dossier .slate__crest { height: 62px; max-width: 100%; }
.dossier .slate__crest img { max-height: 46px; }
.dossier .slate__seal { width: 46px; height: 46px; font-size: 19px; }
.dossier .slate__award-figure { font-size: clamp(1.42rem, 1.1rem + 1.1vw, 1.86rem); }
.dossier__cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.dossier__note {
  font: 400 12px/1.45 var(--font-body); color: var(--ink-soft); text-align: center;
}
.dossier__why { font-size: .96rem; margin: 8px 0 0; }
.dossier__why strong { color: var(--ox); }

/* stat strip — payout-speed figures in the numeric face */
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.stat {
  flex: 1 1 92px; background: var(--parch-2);
  border: 1px solid var(--parch-3); border-radius: var(--r);
  padding: 8px 10px;
}
.stat__k {
  font: 600 10px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 3px;
}
.stat__v { font: 700 15px/1.15 var(--font-num); color: var(--ox); }

/* --- tables --------------------------------------------------------------- */
.scroller { overflow-x: auto; margin: 0 0 1.2em; }
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
table.grid caption {
  text-align: left; font: 600 13px/1.4 var(--font-body);
  color: var(--ink-soft); padding-bottom: 8px;
}
table.grid th, table.grid td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--parch-3);
  vertical-align: top;
}
table.grid thead th {
  background: var(--ox); color: var(--parch);
  font: 700 12.5px/1.3 var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 0;
}
table.grid tbody tr:nth-child(even) { background: var(--parch-2); }
table.grid td.num { font-family: var(--font-num); white-space: nowrap; }

/* --- review blocks -------------------------------------------------------- */
.review { border-top: 2px solid var(--brass); padding-top: 20px; margin-top: 30px; }
.dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.dim { background: var(--parch-2); border: 1px solid var(--parch-3); border-radius: var(--r); padding: 9px 11px; }
.dim__k { font: 600 10.5px/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.dim__v { font: 700 15px/1.2 var(--font-num); color: var(--ox); margin-top: 3px; }
.dim__bar { height: 4px; background: var(--parch-3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.dim__bar i { display: block; height: 100%; background: var(--brass); }

.balance { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 14px 0; }
.balance__col { background: var(--paper); border: 1px solid var(--parch-3); border-radius: var(--r); padding: 12px 14px; }
.balance__col h4 { margin: 0 0 8px; font-size: .98rem; }
.balance ul { list-style: none; padding: 0; margin: 0; }
.balance li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; margin-bottom: 7px; }
/* ⛔ pro/con marks take brass + oxblood, NOT the reserved CTA colour. Tinting
   the "plus" icons with --cta-dark leaked the money colour off the buttons. */
.balance li svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; color: var(--brass-dk); }
.balance__col--con li svg { color: var(--ox-soft); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--parch-3); }
.faq__item { border-bottom: 1px solid var(--parch-3); padding: 16px 0; }
.faq__item h3 { margin: 0 0 7px; }
.faq__item p:last-child { margin-bottom: 0; }

/* --- callouts ------------------------------------------------------------- */
.note {
  background: var(--parch-2); border: 1px solid var(--brass);
  border-left: 4px solid var(--brass); border-radius: var(--r);
  padding: 14px 16px; margin: 0 0 1.2em;
}
.note > :last-child { margin-bottom: 0; }
.note--rg { background: #FBF6EA; }

/* --- author box ----------------------------------------------------------- */
.author {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  background: var(--paper); border: 1.5px solid var(--ox);
  border-radius: var(--r-lg); box-shadow: var(--lift-sm);
  padding: 16px 18px; margin-top: 26px;
}
.author__shot { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--brass); object-fit: cover; }
.author h3 { margin: 0 0 4px; }
.author p { font-size: 15px; margin-bottom: .6em; }

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--ox-deep); color: #E8DCCB; margin-top: 40px; padding-block: 30px 22px; }
.foot a { color: var(--brass-lt); }
.foot a:hover { color: #fff; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.foot h4 {
  color: var(--brass-lt); font: 700 12px/1.3 var(--font-body);
  letter-spacing: .11em; text-transform: uppercase; margin: 0 0 10px;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 6px; font-size: 14.5px; }
.foot__logo img { height: 46px; width: auto; }
.foot__legal {
  border-top: 1px solid rgba(217,188,126,.28); margin-top: 22px; padding-top: 16px;
  font-size: 13px; line-height: 1.6; color: #CFC0AC;
}
/* the affiliate / #ad disclosure lives at the very BOTTOM of the page */
.disclosure { font-size: 12.5px; line-height: 1.6; color: #C6B69F; margin-top: 12px; }
.age {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px/1 var(--font-body); letter-spacing: .06em;
  color: var(--brass-lt); border: 1.5px solid var(--brass); border-radius: 999px;
  padding: 6px 12px; margin-bottom: 10px;
}
.age svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ==========================================================================
   MOBILE — same content and structure, reflowed. No display:none on any real
   content; no sticky bars.
   ========================================================================== */
@media (max-width: 860px) {
  .dossier__grid { grid-template-columns: 1fr; gap: 14px; }
  .ledger__grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .masthead__logo img { height: 50px; }

  /* hamburger — every nav item stays reachable, including the claim CTA */
  .masthead__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 40px; padding: 0;
    background: transparent; border: 1.5px solid var(--ox); border-radius: var(--r);
    color: var(--ox); cursor: pointer;
  }
  .masthead__toggle svg { width: 22px; height: 22px; }
  .masthead__nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: 10px;
  }
  .masthead__nav[data-open="true"] { display: flex; }
  .masthead__nav a {
    padding: 13px 2px; border-bottom: 1px solid var(--parch-3); font-size: 14px;
  }
  .masthead__nav .enrol--nav { width: 100%; margin-top: 12px; border-bottom: 0; }
  .masthead__bar { flex-wrap: wrap; }

  /* compact the hero for BOTH viewports — never hide content on one of them */
  .hero { padding-block: 16px 12px; }
  .hero h1 { font-size: 1.58rem; margin-bottom: .34em; }
  .hero__lede { font-size: .97rem; line-height: 1.5; margin-bottom: 11px; }
  .byline { gap: 10px; margin-bottom: 11px; }
  .byline__shot { width: 42px; height: 42px; }
  .byline__meta { gap: 3px 11px; font-size: 11.5px; margin-top: 3px; }
  .descend { padding: 9px 14px; font-size: 13px; }
  .band#ledger { padding-block: 18px 26px; }
  .band#ledger > .wrap > h2 { font-size: 1.24rem; margin-bottom: .5em; }

  /* cards centred, CTA full width, attribute marks BELOW the award figure */
  .slate { text-align: center; align-items: stretch; padding: 14px 14px 15px; }
  /* seal + crest stay side by side, centred — stacking them cost ~60px of fold */
  .slate__head { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 11px; }
  .slate__crest { max-width: 190px; }
  .dossier .slate__crest { max-width: 210px; }
  .slate__grade { justify-content: center; }
  .slate__award { text-align: center; border-left-width: 1px; border-top: 4px solid var(--brass); }
  .slate__award-terms { justify-content: center; }
  .slate__marks { justify-content: center; }
  .dossier { padding: 16px 15px 17px; }
  .dossier__why { text-align: left; }
  /* the ribbon ate ~75% of the card width at 390 */
  .slate__ribbon { font-size: 9.5px; padding: 5px 8px; letter-spacing: .08em; }
  .stats { justify-content: center; }
  .author { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .band { padding-block: 26px; }
}

/* mobile ordering: identity → AWARD → detail → CTA last.
   Two traps, both caught in the render and not in the markup:
   1. EVERY child needs an explicit order — an unset child defaults to order:0
      and jumps ahead of the ones you did set (name/grade outran the seal).
   2. `display:contents` on the dossier grid only hoists the grid's three
      WRAPPER divs. The elements we order live inside those wrappers, so the
      order rules were inert and the award panel sank below the stat strip.
      Both the grid AND its wrappers must go to contents. */
@media (max-width: 700px) {
  .slate { display: flex; flex-direction: column; }
  .dossier__grid,
  .dossier__grid > div,
  .dossier__cta        { display: contents; }

  .slate__head   { order: 1; }
  .slate__name   { order: 2; }
  .slate__grade  { order: 3; }
  .slate__award  { order: 4; }   /* the eye-catcher stays high */
  .dossier__why  { order: 5; }
  .stats         { order: 6; }
  .slate__marks  { order: 7; }
  .slate .enrol  { order: 8; }   /* CTA last */
  .dossier__note { order: 9; }   /* restriction caption sits under its CTA */
}

@media (prefers-reduced-motion: reduce) {
  .enrol, .descend { transition: none; }
  .enrol:hover, .descend:hover { transform: none; }
}