/* ══════════════════════════════════════════════════════════════════════════
   ANKLE · GALLERY  —  INSTITUTION DESIGN SYSTEM
   Shared stylesheet for every wing of ankle.gallery
   (atrium · hall · desk · archive · rooms · protocol)

   Idiom .............. "Imperial Rome × ankle96 / discmaster"
   Method ............. Roman is carried by STRUCTURE + TYPOGRAPHY only —
                        inscriptional tracked capitals, axial monumental
                        composition, colonnade grids, Roman-numeral indices,
                        double classical rules, interpuncts. NO togas, laurels,
                        marble textures, gold gradients, Greek key, or clipart.
   Load order ......... theme.css  →  ankle96-chrome.css  →  gallery.css
   Contract ........... EXTENDS (never overrides destructively) the a96 base.
                        Consumes only theme/chrome tokens:
                        --bg --fg --panel --muted --line --link --visited
                        --highlight/--warn --serif --mono
                        --raise --sink --bevel-out --bevel-in.
   Scope .............. Everything is namespaced under .a96 so it cannot leak
                        into other ANKLE surfaces sharing the theme.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · INSTITUTION TOKENS ────────────────────────────────────────────────
   Derived from canonical tokens with safe fallbacks. --gilt is the cream
   "carved-and-filled" accent (never a gradient); --faint is a hairline ink
   for column rules on skins that don't define it. */
.a96{
  --gilt:   var(--highlight, #ffffe0);   /* inscription fill / seat of honour */
  --faint:  var(--muted, #555);          /* hairline column & register rules  */
  --measure: 720px;                      /* monumental centered text column   */
  --trk-mono:  .14em;                    /* label tracking (Courier caps)     */
  --trk-title: .11em;                    /* inscriptional serif-caps tracking */
  --trk-lede:  .28em;                    /* widely-spaced kicker tracking     */
}

/* ── 1 · INSCRIPTIONAL TYPOGRAPHY ──────────────────────────────────────────
   Titles are Trajan-style: serif, tracked, uppercase. Weight stays regular so
   the letters read as CARVED rather than bold-printed. */
.a96 .inscribe,
.a96 .masthead-title,
.a96 .colonnade-cap,
.a96 .pediment{
  font-family:var(--serif); font-weight:400;
  text-transform:uppercase; letter-spacing:var(--trk-title);
}
/* Courier "chisel labels" — the register/plaque voice */
.a96 .chisel{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:var(--trk-mono); color:var(--muted);
}
/* Interpunct separator (·) — the Roman word divider, used between wings/meta */
.a96 .interpunct::before{ content:" · "; color:var(--muted); }


/* ── 2 · INSTITUTION NAV ───────────────────────────────────────────────────
   Extends the a96 sticky .nav. The building's wings sit in .nav-mid as a
   tracked mono register; the current wing carries .is-here (gilt seat).
   Markup: <a class="wing" href="/desk">desk</a> with <span class="sep">·</span>
   between — the sep is already styled by the chrome; we only add the wing look. */
.a96 .nav-mid .wing{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; text-decoration:none; color:var(--link); padding:1px 7px;
}
.a96 .nav-mid .wing:hover{ text-decoration:underline; }
.a96 .nav-mid .wing.is-here{
  color:var(--fg); background:var(--gilt);
  box-shadow:var(--sink); cursor:default;
}
.a96 .nav-mid .wing.is-here:hover{ text-decoration:none; }


/* ── 3 · MASTHEAD (axial monument) ─────────────────────────────────────────
   The frontispiece of any wing. Fully centered on the axis, no card chrome —
   a carved capital in a stone niche over a double rule. Use <header class="masthead">
   with .masthead-ico / .masthead-title / .masthead-sub / .masthead-thesis.
   The base .hero is ALSO axialized (below) so existing markup upgrades. */
.a96 .masthead{
  display:block; text-align:center; background:transparent; border:0;
  box-shadow:none; padding:10px 0 0; margin-bottom:20px;
}
.a96 .masthead-ico{
  width:96px; height:96px; margin:0 auto 16px; display:block; text-align:center;
  border:var(--bevel-out); background:var(--panel); box-shadow:var(--raise);
  font-family:var(--serif); font-size:56px; line-height:96px;
}
.a96 .masthead-title{
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  letter-spacing:var(--trk-title); font-size:62px; line-height:.98; margin:0;
}
.a96 .masthead-title::first-letter{ font-size:1em; } /* defeat chrome drop-cap; caps are uniform */
.a96 .masthead-sub{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:var(--trk-lede); color:var(--muted); margin:12px 0 0;
}
.a96 .masthead-thesis{
  margin:14px auto 0; max-width:var(--measure);
  font-size:18px; line-height:1.5; text-align:center;
}
.a96 .masthead .mast-actions{ justify-content:center; margin-top:20px; }

/* Axialize the inherited .hero so the landing (and any wing reusing it) reads
   as a monument rather than a left-aligned card. */
.a96 .hero{
  display:block; text-align:center; background:transparent; border:0;
  box-shadow:none; padding:8px 0 0; margin-bottom:20px;
}
.a96 .hero-ico{
  width:96px; height:96px; margin:0 auto 16px; box-shadow:var(--raise);
  font-family:var(--serif); font-size:56px; line-height:96px; display:block;
}
.a96 .hero-title{
  font-weight:400; font-size:62px; text-transform:uppercase;
  letter-spacing:var(--trk-title); line-height:.98; margin:0;
}
.a96 .hero-title::first-letter{ font-size:1em; }
.a96 .hero-sub{
  text-transform:uppercase; letter-spacing:var(--trk-lede);
  font-size:11px; margin:12px auto 0;
}
.a96 .hero-tag,.a96 .hero .thesis{
  margin:14px auto 0; max-width:var(--measure);
  font-size:18px; line-height:1.5; text-align:center;
}
.a96 .hero .mast-actions,.a96 .hero-body .mast-actions{ justify-content:center; }

/* Double classical rule — the primary divider under mastheads & pediments. */
.a96 .rule-double,
.a96 .rule2{
  height:0; border:0; border-top:3px double var(--line);
  max-width:640px; margin:18px auto;
}
.a96 .rule-single{
  height:0; border:0; border-top:1px solid var(--line); margin:14px 0;
}


/* ── 4 · SECTION HEADS + ROMAN-NUMERAL INDEX ───────────────────────────────
   A wing counts its sections with real inscriptional numerals (I · II · III).
   REQUIRES the page to reset the counter on its container:
       body.a96 main{ counter-reset:sec }
   Each .section increments it; the numeral is filled from --sec. Both the a96
   .section-head and a standalone .inscribe-head get the treatment. */
body.a96 main{ counter-reset:sec; }
.a96 .section{ counter-increment:sec; margin:34px 0 46px; }

.a96 .section-head,
.a96 .inscribe-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; border-bottom:2px solid var(--line); padding-bottom:6px; margin-bottom:14px;
}
.a96 .section-title,
.a96 .inscribe-head > .inscribe{
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--trk-title); font-size:16px;
}
.a96 .section-title::first-letter{ font-size:1em; }        /* uniform caps      */
.a96 .section-title::before,
.a96 .inscribe-head > .inscribe::before{
  content:counter(sec, upper-roman) " · ";
  font-family:var(--mono); letter-spacing:.05em; color:var(--muted);
}
/* Opt-out for heads that should not carry a numeral (e.g. utility bands). */
.a96 .section.no-index{ counter-increment:none; }
.a96 .section.no-index .section-title::before{ content:none; }


/* ── 5 · THE COLONNADE (portico grid) ──────────────────────────────────────
   N columns standing under one shared entablature, divided by column-rules,
   closed by a base rule. The default is a 3-bay portico. Use:
     <div class="colonnade">
       <div class="col-cap">…shared entablature label…</div>   (optional)
       <article class="col">…</article> × N
     </div>
   .role-grid / .role from the landing are aliased so existing markup becomes a
   colonnade for free. */
.a96 .colonnade{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); background:var(--panel); box-shadow:var(--raise);
}
.a96 .colonnade.bays-2{ grid-template-columns:repeat(2,1fr); }
.a96 .colonnade.bays-4{ grid-template-columns:repeat(4,1fr); }
/* Shared entablature: a single capital bar spanning all bays. */
.a96 .colonnade .col-cap{
  grid-column:1/-1; background:var(--line); color:var(--panel);
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:var(--trk-mono); text-align:center; padding:5px 6px;
}
/* Columns: transparent bays separated by carved column-rules. */
.a96 .colonnade .col,
.a96 .colonnade .role{
  background:transparent; box-shadow:none; border:0;
  border-right:1px solid var(--line); padding:0 0 18px;
  min-height:0; text-align:center;
}
.a96 .colonnade .col:last-child,
.a96 .colonnade .role:last-child{ border-right:0; }
/* Per-column capital (when a bay carries its own title band). */
.a96 .colonnade .window-title,
.a96 .colonnade .col-title{
  margin:0 0 0; background:var(--line); color:var(--panel); text-align:center;
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:var(--trk-mono); padding:5px 6px;
}
.a96 .colonnade .role-kicker,
.a96 .colonnade .col-kicker{
  display:block; margin-top:16px; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:var(--trk-lede); color:var(--muted);
}
.a96 .colonnade .role-title,
.a96 .colonnade .col h3{
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:18px; margin:4px 16px 10px;
}
.a96 .colonnade .role p,
.a96 .colonnade .col p{ padding:0 20px; margin:0 0 12px; }
/* Base rule — the stylobate line closing each bay before its link. */
.a96 .colonnade .role::after,
.a96 .colonnade .col.ruled::after{
  content:""; display:block; height:0; margin:0 20px 12px;
  border-top:2px solid var(--line);
}
.a96 .colonnade .role a,
.a96 .colonnade .col a{ font-family:var(--mono); font-size:12px; }
/* Alias the raw landing grid onto the colonnade. */
.a96 .role-grid{
  grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); background:var(--panel); box-shadow:var(--raise);
}
.a96 .role-grid .role{
  background:transparent; box-shadow:none; border-right:1px solid var(--line);
  padding:0 0 18px; min-height:0; text-align:center;
}
.a96 .role-grid .role:last-child{ border-right:0; }


/* ── 6 · INSCRIBED ORDERED LISTS (Roman-numeral steps) ─────────────────────
   Ordered procedure rendered as an inscription: big serif numerals I. II. III.
   in a right-aligned gutter, each step ruled top & bottom. Applies to any a96
   <ol> and to the explicit .inscribed-steps class. The chrome's .n chip is
   suppressed so numerals come from the CSS counter, not from markup. */
.a96 ol,
.a96 .inscribed-steps{
  counter-reset:step; list-style:none; padding:0; margin:6px 0 0;
}
.a96 ol > li,
.a96 .inscribed-steps > li{
  counter-increment:step; display:grid; grid-template-columns:60px 1fr; gap:16px;
  padding:14px 0; border-top:0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.a96 ol > li:first-child,
.a96 .inscribed-steps > li:first-child{ border-top:1px solid var(--line); }
.a96 ol > li .n{ display:none; }               /* retire the chrome step-chip */
.a96 ol > li::before,
.a96 .inscribed-steps > li::before{
  content:counter(step, upper-roman) ".";
  font-family:var(--serif); font-size:30px; line-height:1;
  text-align:right; color:var(--fg);
}


/* ── 7 · STONE TABLETS / PANELS (bevel relief) ─────────────────────────────
   The base .panel already carries --raise relief; here we give it inscriptional
   headings and offer explicit tablet variants:
     .tablet          — a raised stone slab (alias of panel relief)
     .tablet--sunk    — a sunken (incised) well for quotes / evidence
     .tablet--double  — bordered by the double classical rule (pediment stock) */
.a96 .tablet{
  background:var(--panel); border:0; box-shadow:var(--raise);
  padding:16px 18px; color:var(--fg);
}
.a96 .tablet--sunk{ box-shadow:var(--sink); background:var(--bg); }
.a96 .tablet--double{
  box-shadow:none; border-top:3px double var(--line); border-bottom:3px double var(--line);
  background:var(--panel);
}
.a96 .tablet h3,
.a96 .panel h3{ font-family:var(--serif); font-weight:700; }
.a96 .split .panel,
.a96 .split .tablet{ box-shadow:var(--raise); }
/* Facing-tablet comparison table (as on the landing) kept legible & carved. */
.a96 .comparison{ width:100%; border-collapse:collapse; margin:0; }
.a96 .comparison td{
  padding:7px 4px; border:0; border-bottom:1px solid var(--line); vertical-align:top;
}
.a96 .comparison tr:last-child td{ border-bottom:0; }
.a96 .comparison td:first-child{
  font-family:var(--mono); font-size:11px; color:var(--muted); width:34%;
}


/* ── 8 · CENSUS BOARD (inscribed register of counts) ───────────────────────
   Institution statistics laid out as a public register carved into one board —
   equal cells divided by hairlines, each a chisel-label over a monumental
   numeral. Aliases the landing's .state-grid / .state-cell.
     <div class="census">
       <div class="census-cell"><b>Works</b><div class="census-num">…</div></div>
     </div> */
.a96 .census,
.a96 .state-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; border:1px solid var(--line); background:var(--panel); box-shadow:var(--raise);
}
.a96 .census-cell,
.a96 .state-grid .state-cell{
  background:transparent; box-shadow:none;
  border-right:1px solid var(--faint); border-bottom:1px solid var(--faint);
  padding:12px 14px; text-align:center;
}
.a96 .census-cell b,
.a96 .state-grid .state-cell b{
  display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:var(--trk-mono); color:var(--muted); margin-bottom:4px;
}
.a96 .census-num,
.a96 .state-grid .state-value{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums;
}


/* ── 9 · THE FRAME (hung art + wall label) ─────────────────────────────────
   A work "hung on the wall": stone mat (raised bevel) around the image, with an
   incised wall label beneath giving title · artist · medium · price · availability.
   Hover lifts the frame; the whole frame is a link to the work's lightbox.
     <a class="frame" href="#work-ID">
       <span class="frame-mat"><img class="frame-art" src="…" alt="…"></span>
       <span class="wall-label">
         <b class="wl-title">…</b>
         <span class="wl-artist">…</span>
         <span class="wl-line">medium · year</span>
         <span class="wl-foot"><span class="wl-price">$…</span>
                               <span class="wl-avail">available</span></span>
       </span>
     </a>
   Honest states: give the mat .is-empty (no image) to show a carved placeholder;
   NEVER fabricate a work. */
.a96 .frame-wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px 20px; margin:6px 0 0;
}
.a96 .frame{
  display:block; text-decoration:none; color:var(--fg);
  background:var(--panel); box-shadow:var(--raise); padding:12px 12px 0;
  transition:box-shadow .08s, transform .08s;
}
.a96 .frame:visited{ color:var(--fg); }
.a96 .frame:hover{ transform:translateY(-2px); box-shadow:var(--raise),0 4px 0 rgba(0,0,0,.28); }
.a96 .frame:active{ transform:none; box-shadow:var(--sink); }
/* Stone mat — sunken window that seats the image below the frame face. */
.a96 .frame-mat{
  display:block; background:var(--bg); box-shadow:var(--sink);
  padding:10px; margin-bottom:10px;
}
.a96 .frame-art{
  display:block; width:100%; height:auto; border:1px solid var(--line);
  background:var(--panel);
}
/* Carved placeholder when no image is available (honest empty state). */
.a96 .frame-mat.is-empty{
  display:flex; align-items:center; justify-content:center;
  min-height:180px; box-shadow:var(--sink);
}
.a96 .frame-mat.is-empty::after{
  content:"NO IMAGE"; font-family:var(--mono); font-size:10px;
  letter-spacing:var(--trk-mono); color:var(--muted);
}
/* Wall label — the incised museum plaque. */
.a96 .wall-label{
  display:block; padding:2px 4px 12px; line-height:1.4;
}
.a96 .wall-label .wl-title{
  display:block; font-family:var(--serif); font-weight:700; font-size:15px;
}
.a96 .wall-label .wl-artist{
  display:block; font-family:var(--serif); font-style:italic; font-size:13px;
  color:var(--muted); margin-top:1px;
}
.a96 .wall-label .wl-line,
.a96 .wall-label .wl-foot{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted);
}
.a96 .wall-label .wl-foot{ justify-content:space-between; align-items:baseline; }
.a96 .wall-label .wl-price{ color:var(--fg); font-weight:700; letter-spacing:.02em; }
/* Availability seal — small carved token; states via modifier, no colour play. */
.a96 .wall-label .wl-avail{
  border:1px solid var(--line); background:var(--panel); box-shadow:var(--sink);
  padding:0 5px; color:var(--fg);
}
.a96 .wall-label .wl-avail.sold{ background:var(--line); color:var(--panel); box-shadow:none; }
.a96 .wall-label .wl-avail.reserved{ background:var(--gilt); }

/* Lightbox affordance — CSS-only, opened by :target (href="#work-ID").
   Overlay is hidden until its id is the fragment; a close link points to "#".
     <div class="lightbox" id="work-ID">
       <a class="lightbox-scrim" href="#" aria-label="Close"></a>
       <figure class="lightbox-plate">
         <img src="…" alt="…">
         <figcaption class="wall-label">…same label…</figcaption>
         <a class="lightbox-close" href="#">CLOSE ·×</a>
       </figure>
     </div> */
.a96 .lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.a96 .lightbox:target{ display:flex; }
.a96 .lightbox-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.72); cursor:zoom-out;
}
.a96 .lightbox-plate{
  position:relative; z-index:1; max-width:min(860px,94vw); max-height:90vh;
  overflow:auto; margin:0; padding:14px; background:var(--panel);
  border:var(--bevel-out); box-shadow:var(--raise);
}
.a96 .lightbox-plate img{
  display:block; max-width:100%; max-height:66vh; margin:0 auto;
  border:1px solid var(--line); background:var(--bg);
}
.a96 .lightbox-plate .wall-label{ text-align:center; padding-top:12px; }
.a96 .lightbox-close{
  position:absolute; top:8px; right:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:var(--trk-mono); text-decoration:none; color:var(--link);
  border:var(--bevel-out); background:var(--bg); padding:2px 7px;
}
.a96 .lightbox-close:active{ border:var(--bevel-in); }


/* ── 10 · DESK / TAB CHROME ────────────────────────────────────────────────
   The working surfaces (desk, author, rooms editor) use a raised tab strip over
   a stone worktop. Active tab pops up flush into the panel (bevel-in on strip,
   bevel-out + gilt on the live tab).
     <div class="deskbar"><a class="tab is-on">now</a><a class="tab">people</a>…</div>
     <div class="worktop">…panel content…</div> */
.a96 .deskbar{
  display:flex; flex-wrap:wrap; gap:2px; align-items:flex-end;
  border-bottom:1px solid var(--line); margin-bottom:0; padding:6px 6px 0;
  background:var(--bg);
}
.a96 .deskbar .tab{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; text-decoration:none; color:var(--link);
  background:var(--bg); border:var(--bevel-out); border-bottom:0;
  padding:5px 14px; margin-bottom:-1px;
}
.a96 .deskbar .tab:hover{ filter:brightness(1.06); }
.a96 .deskbar .tab.is-on{
  color:var(--fg); background:var(--gilt); box-shadow:var(--raise); border:0;
  padding-bottom:6px; cursor:default;
}
.a96 .worktop{
  background:var(--panel); box-shadow:var(--raise);
  padding:18px 20px; border-top:0;
}
/* Desk toolbar row — a thin band of mono controls over the worktop. */
.a96 .deskrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  padding:6px 0; border-bottom:1px solid var(--faint);
}


/* ── 11 · LEDGER (archive rows) ────────────────────────────────────────────
   The archive reads as a bound register: a header rule, then monospaced rows
   each carrying an index, a body, and a right-aligned figure/timestamp.
     <div class="ledger">
       <div class="ledger-head"><span>ref</span><span>entry</span><span>value</span></div>
       <a class="ledger-row" href="…">
         <span class="lg-ref">MMXXVI-014</span>
         <span class="lg-body"><b>…</b><span class="chisel">…</span></span>
         <span class="lg-val">…</span>
       </a>
     </div> */
.a96 .ledger{
  background:var(--panel); box-shadow:var(--raise); padding:0;
}
.a96 .ledger-head,
.a96 .ledger-row{
  display:grid; grid-template-columns:130px 1fr auto; gap:14px; align-items:baseline;
  padding:9px 16px;
}
.a96 .ledger-head{
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:var(--trk-mono); color:var(--muted);
  border-bottom:2px solid var(--line); background:var(--bg);
}
.a96 .ledger-row{
  border-bottom:1px solid var(--faint); text-decoration:none; color:var(--fg);
}
.a96 .ledger-row:last-child{ border-bottom:0; }
.a96 .ledger-row:visited{ color:var(--fg); }
.a96 .ledger-row:hover{ background:var(--gilt); }
.a96 .ledger-row .lg-ref{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.03em;
}
.a96 .ledger-row .lg-body b{ font-family:var(--serif); font-weight:700; display:block; }
.a96 .ledger-row .lg-val{
  font-family:var(--mono); font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums;
}


/* ── 12 · PEDIMENT + FOOTER FRIEZE ─────────────────────────────────────────
   The manifesto sits in the pediment: centered, tracked caps, bounded top &
   bottom by the double classical rule. The footer is a low frieze band —
   a single centered mono line of interpunct-separated clauses. */
.a96 .pediment,
.a96 .manifesto{
  background:var(--panel); box-shadow:var(--raise); text-align:center;
  text-transform:uppercase; letter-spacing:.05em; font-size:21px; line-height:1.45;
  padding:30px 34px; margin:40px auto;
  border-top:3px double var(--line); border-bottom:3px double var(--line);
}
.a96 .pediment b,
.a96 .manifesto b{ font-weight:400; }   /* emphasis by the frame, not by weight */

.a96 .frieze,
.a96 .footer-links{
  text-align:center; margin-top:34px; padding-top:12px;
  border-top:2px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
}
.a96 .frieze a,
.a96 .footer-links a{ color:var(--link); }


/* ── 13 · UTILITIES ────────────────────────────────────────────────────────*/
.a96 .axis{ text-align:center; margin-left:auto; margin-right:auto; }
.a96 .measure{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
.a96 .caps{ text-transform:uppercase; letter-spacing:var(--trk-title); }
/* Honest system states — loading / empty / error, in the register voice. */
.a96 .state-note{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  padding:14px 16px; text-align:center;
}
.a96 .state-note.error{ color:var(--fg); background:var(--warn); box-shadow:var(--raise); }


/* ── 14 · RESPONSIVE (collapse the portico; keep the axis) ──────────────────*/
@media (max-width:820px){
  .a96 .census,.a96 .state-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .a96 .colonnade,.a96 .colonnade.bays-2,.a96 .colonnade.bays-4,
  .a96 .role-grid{ grid-template-columns:1fr; }
  .a96 .colonnade .col,.a96 .colonnade .role,
  .a96 .role-grid .role{ border-right:0; border-bottom:1px solid var(--line); }
  .a96 .colonnade .col:last-child,.a96 .colonnade .role:last-child,
  .a96 .role-grid .role:last-child{ border-bottom:0; }
  .a96 .masthead-title,.a96 .hero-title{ font-size:40px; letter-spacing:.08em; overflow-wrap:anywhere; }
  .a96 .masthead-ico,.a96 .hero-ico{ width:76px; height:76px; font-size:44px; line-height:76px; }
  .a96 .pediment,.a96 .manifesto{ font-size:17px; padding:22px 18px; }
  .a96 .ledger-head,.a96 .ledger-row{ grid-template-columns:1fr auto; }
  .a96 .ledger-head span:first-child,.a96 .ledger-row .lg-ref{ grid-column:1/-1; }
}
@media (max-width:460px){
  .a96 .census,.a96 .state-grid{ grid-template-columns:1fr; }
  .a96 .frame-wall{ grid-template-columns:1fr 1fr; gap:14px; }
  .a96 ol > li,.a96 .inscribed-steps > li{ grid-template-columns:40px 1fr; gap:10px; }
  .a96 ol > li::before,.a96 .inscribed-steps > li::before{ font-size:22px; }
}