/* =============================================================================
   markup.css — the single stylesheet for Markup (markup.design)
   -----------------------------------------------------------------------------
   Organised in layers, top to bottom:
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Typographic scale
     05  Site shell: masthead, navigation, footer
     06  Editorial layout primitives
     07  The markup layer: notes, markers, overlays, steppers, players
     08  Figures and specimens
     09  Homepage
     10  Archive and collection indexes
     11  Article pages
     12  Utility, motion preferences, print
   Values are defined once in 02 and referenced everywhere else.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01  FONTS
   Newsreader (OFL, Production Type) — display, titles, pull quotes. Variable
   optical size 6–72 and weight 200–800, so the masthead and a 12px folio are
   drawn from the same file at the size each was designed for.
   Public Sans (OFL, USWDS) — reading text, interface, figure labels.
   IBM Plex Mono (OFL, IBM) — margin notes, folios, production marks.
   Licences ship beside the files in assets/fonts/.
-------------------------------------------------------------------------------*/
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations");
  font-weight:200 800; font-stretch:normal; font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-latin-standard-italic.woff2") format("woff2-variations");
  font-weight:200 800; font-stretch:normal; font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* -----------------------------------------------------------------------------
   02  TOKENS
-------------------------------------------------------------------------------*/
:root{
  /* Surfaces. A warm, nearly white reading surface; a deeper tone of the same
     paper for quieter bands; a near-black for the one dark plate per page. */
  --paper:        #FAF7F2;
  --paper-deep:   #F1EBE0;
  --paper-sunk:   #E7DFD1;
  --dark:         #14141A;
  --dark-2:       #1E1E26;

  /* Ink. Measured against --paper: 16.7, 7.1 and 4.7 to one. */
  --ink:          #17171B;
  --ink-2:        #55535A;
  --ink-3:        #6E6B75;
  --ink-inverse:  #F4F1EA;
  --ink-inverse-2:#A9A5AE;

  /* Rules. Hairlines are a tone of the paper, never grey. */
  --rule:         #DDD6C9;
  --rule-2:       #C8BFAE;
  --rule-dark:    #32323C;

  /* The annotation layer. Cobalt is reserved for markup: markers, structure
     overlays, carets, measurement. It is never an ordinary link or button
     colour, so its appearance on a page always means the same thing.
     Proof red is the correction pencil: revision marks and "before" states. */
  --cobalt:       #1B3CE0;
  --cobalt-deep:  #1730B8;
  --cobalt-wash:  rgba(27,60,224,.085);
  --cobalt-line:  rgba(27,60,224,.34);
  --proof:        #B72B18;
  --proof-wash:   rgba(183,43,24,.08);
  --proof-line:   rgba(183,43,24,.32);

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Measure and rhythm */
  --measure:      36rem;      /* ~64 characters at the body size */
  --measure-wide: 44rem;
  --gutter:       clamp(1.25rem, 5vw, 3.5rem);
  --rail:         17.5rem;    /* the margin-note column on wide screens */
  --rail-gap:     2.75rem;

  --space-1:.375rem; --space-2:.75rem;  --space-3:1.125rem; --space-4:1.75rem;
  --space-5:2.75rem; --space-6:4rem;    --space-7:6rem;     --space-8:9rem;

  --radius:2px;
  --shadow-lift:0 1px 2px rgba(23,23,27,.05), 0 12px 32px -18px rgba(23,23,27,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:420ms;
}

/* -----------------------------------------------------------------------------
   03  RESET AND BASE
-------------------------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:clamp(1.0625rem,.98rem + .34vw,1.1875rem);
  line-height:1.62;
  font-weight:380;
  letter-spacing:-.003em;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--ink);text-decoration-color:var(--rule-2);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:1px}
::selection{background:var(--cobalt-wash);color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-6) 0}
[hidden]{display:none!important}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--ink-inverse);padding:.7rem 1rem;
  font:500 .8125rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
}
.skip:focus{left:.75rem;top:.75rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -----------------------------------------------------------------------------
   04  TYPOGRAPHIC SCALE
   Display sizes carry a matching optical size so the same family reads as a
   masthead at 88px and as a caption at 13px.
-------------------------------------------------------------------------------*/
.d1,.d2,.d3,.d4,.dq{font-family:var(--font-display);font-weight:420;letter-spacing:-.018em;color:var(--ink);margin:0}
.d1{font-size:clamp(2.85rem,1.6rem + 5.4vw,6.2rem); line-height:.96; font-variation-settings:"opsz" 72; letter-spacing:-.028em}
.d2{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.9rem);  line-height:1.03;font-variation-settings:"opsz" 48; letter-spacing:-.022em}
.d3{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.45rem); line-height:1.12;font-variation-settings:"opsz" 32}
.d4{font-size:clamp(1.28rem,1.12rem + .7vw,1.65rem); line-height:1.22;font-variation-settings:"opsz" 24}
.dq{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem);  line-height:1.25;font-variation-settings:"opsz" 36;font-weight:360}

/* The eyebrow / kicker / folio voice: mono, tracked, small, never shouting */
/* Production labels. 12px mono, uppercase, tracked. Deliberately not smaller:
   a label the reader cannot comfortably read is decoration. */
.kicker,.folio,.label{
  font-family:var(--font-mono);font-weight:500;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.kicker--cobalt{color:var(--cobalt)}
.kicker--proof{color:var(--proof)}

.standfirst{
  font-family:var(--font-display);font-variation-settings:"opsz" 20;
  font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);line-height:1.45;
  color:var(--ink-2);font-weight:380;letter-spacing:-.008em;
}

/* -----------------------------------------------------------------------------
   05  SITE SHELL
-------------------------------------------------------------------------------*/
.shell{max-width:80rem;margin:0 auto;padding-inline:var(--gutter)}
.shell--wide{max-width:92rem}

.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:30}
.masthead__in{
  max-width:92rem;margin:0 auto;padding:1.05rem var(--gutter);
  display:flex;align-items:center;gap:var(--space-4);
}
.wordmark{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.wordmark svg{height:2.1rem;width:auto;display:block}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem)}
.masthead nav a{
  font-family:var(--font-text);font-size:.875rem;font-weight:500;letter-spacing:.005em;
  text-decoration:none;color:var(--ink-2);padding-block:.4rem;position:relative;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current="page"]{color:var(--ink)}
.masthead nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.05rem;height:2px;background:var(--cobalt);
}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);
  border-radius:var(--radius);padding:.45rem .7rem;cursor:pointer;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:52rem){
  .nav-toggle{display:block}
  .masthead nav{
    margin-left:0;order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;
    gap:0;border-top:1px solid var(--rule);margin-top:.9rem;padding-top:.3rem;
  }
  .masthead nav a{width:100%;padding-block:.75rem;border-bottom:1px solid var(--rule);font-size:1rem}
  .masthead nav a:last-child{border-bottom:0}
  .masthead nav a[aria-current="page"]::after{display:none}
  .masthead nav a[aria-current="page"]{color:var(--cobalt)}
  .masthead__in{flex-wrap:wrap}
  .masthead nav[data-collapsed="true"]{display:none}
}

.foot{border-top:1px solid var(--rule);margin-top:var(--space-8);background:var(--paper-deep)}
.foot__in{
  max-width:92rem;margin:0 auto;padding:var(--space-6) var(--gutter) var(--space-5);
  display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.foot h3{font:500 .75rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{font-size:.9375rem;text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot__colophon{font-size:.875rem;color:var(--ink-3);line-height:1.55;max-width:24rem}
.foot__base{
  max-width:92rem;margin:0 auto;padding:0 var(--gutter) var(--space-5);
  font:400 .75rem/1.6 var(--font-mono);letter-spacing:.03em;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;
}

/* -----------------------------------------------------------------------------
   06  EDITORIAL LAYOUT PRIMITIVES
-------------------------------------------------------------------------------*/
.band{padding-block:var(--space-7)}
.band--tight{padding-block:var(--space-6)}
.band--deep{background:var(--paper-deep)}
.band--dark{background:var(--dark);color:var(--ink-inverse)}
.band--dark .d1,.band--dark .d2,.band--dark .d3,.band--dark .d4{color:var(--ink-inverse)}
.band--dark .standfirst{color:var(--ink-inverse-2)}
.band--dark a{color:var(--ink-inverse)}
.band--rule-top{border-top:1px solid var(--rule)}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  border-bottom:1px solid var(--ink);padding-bottom:.65rem;margin-bottom:var(--space-5);
}
.section-head h2{font-family:var(--font-display);font-variation-settings:"opsz" 28;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);font-weight:460;letter-spacing:-.018em;margin:0;line-height:1.1}
.section-head p{margin:0;font-size:.9375rem;color:var(--ink-2);max-width:26rem}
.section-head a{font:500 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--cobalt);white-space:nowrap}
.section-head a:hover{text-decoration:underline;text-decoration-color:var(--cobalt)}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose h2{
  font-family:var(--font-display);font-variation-settings:"opsz" 28;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);font-weight:500;letter-spacing:-.015em;
  line-height:1.2;margin:2.4em 0 .65em;
}
.prose h3{
  font-family:var(--font-text);font-size:1rem;font-weight:650;letter-spacing:.005em;
  margin:2em 0 .5em;color:var(--ink);
}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--ink-3)}
.prose strong{font-weight:640}
.prose em{font-style:italic}
.prose blockquote{
  margin:1.9em 0;padding-left:1.4rem;border-left:2px solid var(--cobalt);
  font-family:var(--font-display);font-variation-settings:"opsz" 24;
  font-size:1.2em;line-height:1.42;color:var(--ink);font-weight:380;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cobalt-line);text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--cobalt)}
.prose code{font-family:var(--font-mono);font-size:.875em;background:var(--paper-deep);padding:.12em .3em;border-radius:var(--radius)}

.lede{
  font-family:var(--font-display);font-variation-settings:"opsz" 22;
  font-size:1.22em;line-height:1.45;color:var(--ink);font-weight:390;letter-spacing:-.01em;
  margin:0 0 1.5em;
}

/* -----------------------------------------------------------------------------
   07  THE MARKUP LAYER
   Three related devices share one visual system: a cobalt marker, a mono label
   and a hairline that connects an artefact to an explanation.
-------------------------------------------------------------------------------*/

/* -- 7.1  Margin notes ----------------------------------------------------- */
.annotated{position:relative;display:grid;gap:var(--space-3)}
.annotated__main{min-width:0}
.annotated__main > .prose{max-width:38rem}
.annotated__rail{display:grid;gap:var(--space-4);align-content:start;min-width:0}
@media (min-width:75rem){
  .annotated{
    grid-template-columns:minmax(0,1fr) var(--rail);
    column-gap:var(--rail-gap);
    align-items:start;
  }
  .annotated__rail .note{margin:0;max-width:none}
}
/* A specimen is allowed to be wider than the reading column it sits beside.
   The prose stays at its measure; the demonstration takes the room it needs. */
.annotated__main > .specimen,
.annotated__main > .film,
.annotated__main > .typespec{max-width:none}
.annotated__main > .exercise,
.annotated__main > .sources{max-width:var(--measure-wide)}
.annotated__main > .prose > .plate{max-width:var(--measure-wide)}

.note{
  margin:var(--space-3) 0 var(--space-4);
  padding-left:.9rem;border-left:1px solid var(--cobalt-line);
  font-size:.875rem;line-height:1.55;color:var(--ink-2);
  max-width:34rem;
}
.note__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45rem;height:1.45rem;margin-right:.45rem;vertical-align:.02em;
  border:1px solid var(--cobalt);color:var(--cobalt);background:var(--paper);
  font:500 .6875rem/1 var(--font-mono);letter-spacing:.02em;border-radius:var(--radius);
}
.note__h{display:block;font-weight:640;color:var(--ink);margin-bottom:.2rem;font-size:.875rem}
.note--proof{border-left-color:var(--proof-line)}
.note--proof .note__n{border-color:var(--proof);color:var(--proof)}
.note.is-linked{background:var(--cobalt-wash)}

/* The marker that lives on an artefact and points at a note. It is a real
   button: reachable by keyboard, announced, and never hover-only. */
.marker{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.6rem;height:1.6rem;padding:0 .3rem;
  background:var(--cobalt);color:#fff;border:0;border-radius:var(--radius);
  font:500 .6875rem/1 var(--font-mono);letter-spacing:.02em;cursor:pointer;
  box-shadow:0 0 0 2px var(--paper);
  transition:transform 140ms var(--ease);
}
.marker:hover,.marker:focus-visible{transform:translateY(-1px)}
.marker[aria-expanded="true"]{background:var(--cobalt-deep)}
.marker--proof{background:var(--proof)}
.marker--abs{position:absolute;transform:translate(-50%,-50%)}
.marker--abs:hover,.marker--abs:focus-visible{transform:translate(-50%,-50%) scale(1.08)}

/* -- 7.2  Show markup ------------------------------------------------------ */
.specimen{
  margin:var(--space-5) 0;
  border:1px solid var(--rule);
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
}
.specimen__stage{
  position:relative;
  background:var(--paper);
  padding:clamp(1rem,3vw,2rem);
  display:block;
}
.specimen__stage--deep{background:var(--paper-deep)}
.specimen__stage--sunk{background:var(--paper-sunk)}
.specimen__art{position:relative;display:block;width:100%}

/* The overlay shares the artwork's viewBox, so every measurement it draws is
   the real geometry of the composition at whatever size it is rendered. */
.overlay{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.specimen.is-marked .overlay{opacity:1;visibility:visible;transition-delay:0s}
.overlay [data-ov]{
  opacity:0;transform-box:fill-box;
  transition:opacity 320ms var(--ease);
}
.specimen.is-marked .overlay [data-ov]{opacity:1}
.specimen.is-marked .overlay [data-ov="1"]{transition-delay:40ms}
.specimen.is-marked .overlay [data-ov="2"]{transition-delay:150ms}
.specimen.is-marked .overlay [data-ov="3"]{transition-delay:260ms}
.specimen.is-marked .overlay [data-ov="4"]{transition-delay:370ms}

/* An overlay may carry several scenes, one per state of the specimen. Only the
   scene belonging to the current state is drawn, so a measurement never appears
   over an arrangement it was not measured on. markup.js keeps this in step with
   the stepper and the player. */
.ov-scene{opacity:0;transition:opacity 260ms linear}
.ov-scene.is-current{opacity:1}

.ov-line{stroke:var(--cobalt);stroke-width:1;vector-effect:non-scaling-stroke}
.ov-line--dash{stroke-dasharray:4 3}
.ov-fill{fill:var(--cobalt-wash)}
.ov-box{fill:none;stroke:var(--cobalt);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.ov-text{fill:var(--cobalt);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.ov-tick{stroke:var(--cobalt);stroke-width:1;vector-effect:non-scaling-stroke}
.ov-proof{stroke:var(--proof);fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.ov-proof-text{fill:var(--proof);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}

/* -- 7.3  Controls shared by every demonstration --------------------------- */
.specimen__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  border-top:1px solid var(--rule);background:var(--paper-deep);
  padding:.55rem clamp(.65rem,2vw,1rem);
}
.specimen__bar .folio{margin-right:auto;letter-spacing:.12em}
.ctrl{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:.42rem .75rem;cursor:pointer;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);transition:border-color 160ms var(--ease),color 160ms var(--ease);
}
.ctrl:hover{border-color:var(--ink-3);color:var(--ink)}
.ctrl[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.ctrl[aria-pressed="true"] .ctrl__dot{background:#fff}
.ctrl__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--cobalt);flex:0 0 auto}
.ctrl--proof[aria-pressed="true"]{background:var(--proof);border-color:var(--proof)}
.ctrl:disabled{opacity:.45;cursor:default}

/* -- 7.4  Stepper (proof and revision) ------------------------------------- */
.stepper{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.stepper__btn{
  background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:.42rem .7rem;cursor:pointer;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-2);
}
.stepper__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ink-inverse)}
.stepper__btn:hover:not([aria-pressed="true"]){border-color:var(--ink-3);color:var(--ink)}

.state-copy{
  border-top:1px solid var(--rule);padding:clamp(.85rem,2.5vw,1.25rem);
  font-size:.9375rem;line-height:1.55;color:var(--ink-2);background:var(--paper);
}
.state-copy > [hidden]{display:none}
.state-copy strong{color:var(--ink);font-weight:640}
.state-copy .kicker{display:block;margin-bottom:.35rem}

/* -- 7.5  Tracing overlay -------------------------------------------------- */
.trace{
  position:absolute;inset:0;background:rgba(250,247,242,.82);
  backdrop-filter:none;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.specimen.is-tracing .trace{opacity:1;visibility:visible;transition-delay:0s}
.specimen.is-tracing .specimen__art{filter:none}

/* -----------------------------------------------------------------------------
   08  FIGURES AND SPECIMENS
-------------------------------------------------------------------------------*/
figure{margin:var(--space-5) 0}
/* A figure may be wider than the column of prose it interrupts, but never
   wider than the page's own gutters. */
.prose figure{width:var(--measure-wide);max-width:calc(100vw - 2 * var(--gutter))}
figure img{width:100%;border:1px solid var(--rule);background:var(--paper);border-radius:var(--radius)}
figcaption{
  margin-top:.7rem;display:flex;gap:.75rem;align-items:baseline;
  font-size:.875rem;line-height:1.5;color:var(--ink-2);
}
figcaption .fk{
  font:500 .75rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);flex:0 0 auto;white-space:nowrap;
}
.fig--bleed{margin-inline:calc(-1 * var(--space-3))}
@media (min-width:60rem){.fig--bleed{margin-inline:calc(-1 * var(--space-5))}}

/* Type specimen block: a letter shown at size with production furniture. */
.typespec{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,2.5rem);align-items:center;
  border-block:1px solid var(--rule);padding-block:var(--space-5);margin-block:var(--space-5);
}
.typespec__glyph{
  font-family:var(--font-display);font-variation-settings:"opsz" 72;
  font-size:clamp(5rem,14vw,11rem);line-height:.8;font-weight:400;
  color:var(--ink);position:relative;
}
.typespec__glyph .baseline{
  position:absolute;left:-.08em;right:-.08em;bottom:0;height:1px;background:var(--cobalt-line);
}
.typespec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;font-size:.875rem}
.typespec dt{font:500 .75rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.typespec dd{margin:0;color:var(--ink-2)}
@media (max-width:40rem){.typespec{grid-template-columns:1fr}}

/* -----------------------------------------------------------------------------
   09  HOMEPAGE
-------------------------------------------------------------------------------*/
.statement{
  border-bottom:1px solid var(--rule);
  padding-block:clamp(1.6rem,4vw,2.6rem);
  display:grid;gap:var(--space-3);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:62rem){
  .statement{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-6);align-items:end}
}
.statement__line{
  font-family:var(--font-display);font-variation-settings:"opsz" 60;
  font-size:clamp(2.4rem,1.2rem + 5vw,4.6rem);line-height:.98;letter-spacing:-.028em;
  font-weight:400;margin:0;color:var(--ink);
}
/* The statement carries the wordmark's own gesture: an insertion caret set
   under the gap, in the annotation colour. The words themselves stay in ink,
   because cobalt on this site always means annotation and never emphasis. */
.statement__line .caret{position:relative;white-space:nowrap}
.statement__line .caret::after{
  content:"";position:absolute;left:.06em;bottom:-.26em;width:.34em;height:.17em;
  background:linear-gradient(to top right,transparent calc(50% - 2.2px),var(--cobalt) calc(50% - 2.2px),var(--cobalt) calc(50% + 2.2px),transparent calc(50% + 2.2px)) left/50% 100% no-repeat,
             linear-gradient(to top left, transparent calc(50% - 2.2px),var(--cobalt) calc(50% - 2.2px),var(--cobalt) calc(50% + 2.2px),transparent calc(50% + 2.2px)) right/50% 100% no-repeat;
}
.statement{padding-bottom:clamp(2.2rem,5vw,3.4rem)}
.statement__body{font-size:1rem;color:var(--ink-2);max-width:30rem;margin:0}
.statement__body b{color:var(--ink);font-weight:600}

/* Lead story */
.lead{padding-block:var(--space-5) var(--space-6);border-bottom:1px solid var(--rule)}
.lead__grid{display:grid;gap:var(--space-5)}
@media (min-width:64rem){
  .lead__grid{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
}
.lead__title{margin:.5rem 0 .9rem}
.lead__meta{
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;
  margin-top:var(--space-4);padding-top:.85rem;border-top:1px solid var(--rule);
}
.lead__cta{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:var(--space-4);
  font:500 .8125rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);text-decoration:none;
  padding:.85rem 1.25rem;border-radius:var(--radius);
}
.lead__cta:hover{background:var(--cobalt-deep)}

/* The feed */
.feed{display:grid;gap:0}
.feed__item{
  display:grid;gap:var(--space-3);padding-block:var(--space-5);
  border-bottom:1px solid var(--rule);
}
@media (min-width:58rem){
  .feed__item{grid-template-columns:7.5rem minmax(0,1fr) 16rem;gap:var(--space-5);align-items:start}
  .feed__item--reverse{grid-template-columns:7.5rem 20rem minmax(0,1fr)}
  .feed__item--reverse > div:nth-child(2){grid-column:3;grid-row:1}
  .feed__item--reverse > .feed__thumb{grid-column:2;grid-row:1}
  .feed__item--plain{grid-template-columns:7.5rem minmax(0,1fr)}
}
.feed__rail{display:grid;gap:.3rem;align-content:start}
.feed__title{
  font-family:var(--font-display);font-variation-settings:"opsz" 30;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);line-height:1.13;font-weight:460;letter-spacing:-.018em;
  margin:0 0 .5rem;
}
.feed__title a{text-decoration:none}
.feed__title a:hover{text-decoration:underline;text-decoration-color:var(--cobalt);text-underline-offset:.14em}
.feed__dek{margin:0;color:var(--ink-2);font-size:.9688rem;line-height:1.55;max-width:40rem}
.feed__thumb{border:1px solid var(--rule);background:var(--paper-deep);border-radius:var(--radius);overflow:hidden}
.feed__thumb svg,.feed__thumb img{display:block;width:100%;height:auto}
.feed__foot{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;margin-top:.8rem}

/* Small tag/attribute chips — quiet, never a pill-button field */
.attr{
  font:500 .75rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;
}
.attr--format{color:var(--cobalt)}
.attr:not(:last-child)::after{content:"·";margin-left:.62rem;color:var(--rule-2)}
a.attr:hover{color:var(--ink);text-decoration:underline}

/* Elements & Principles doorway */
.doors{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
@media (min-width:48rem){.doors{grid-template-columns:repeat(3,1fr)}}
.door{background:var(--paper);padding:var(--space-4);text-decoration:none;display:grid;gap:.6rem;align-content:start;min-height:12rem}
.door:hover{background:var(--paper-deep)}
.door__art{height:4.5rem}
.door__art svg{height:100%;width:auto}
.door h3{font-family:var(--font-display);font-variation-settings:"opsz" 24;font-size:1.25rem;font-weight:480;margin:0;letter-spacing:-.012em}
.door p{margin:0;font-size:.875rem;color:var(--ink-2);line-height:1.5}
.door--soon{opacity:.55}

/* Author note */
.author{display:grid;gap:var(--space-4)}
@media (min-width:56rem){.author{grid-template-columns:minmax(0,1fr) 18rem;gap:var(--space-6);align-items:start}}

/* -----------------------------------------------------------------------------
   10  ARCHIVE AND COLLECTION INDEXES
-------------------------------------------------------------------------------*/
.filters{
  border-block:1px solid var(--rule);padding-block:var(--space-3);margin-bottom:var(--space-2);
  display:grid;gap:.8rem;
}
.filters__row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
.filters__row > .label{flex:0 0 5.5rem;padding-top:.35rem}
.filters__set{display:flex;flex-wrap:wrap;gap:.4rem}
.filter{
  background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:.38rem .7rem;cursor:pointer;text-decoration:none;
  font:500 .75rem/1.25 var(--font-mono);letter-spacing:.05em;color:var(--ink-2);
}
.filter:hover{border-color:var(--ink-3);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ink-inverse)}
.filters__status{font:400 .8125rem/1.4 var(--font-mono);color:var(--ink-3);letter-spacing:.02em}
.filters__reset{
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.06em;color:var(--cobalt);
}
.js-only{display:none}
.has-js .js-only{display:revert}
.has-js .no-js-only{display:none}

.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-bottom:1px solid var(--rule)}
.index-list li[hidden]{display:none}
.index-row{
  display:grid;gap:.25rem .9rem;padding-block:1.05rem;text-decoration:none;align-items:baseline;
}
@media (min-width:52rem){
  .index-row{grid-template-columns:3.4rem minmax(0,20rem) minmax(0,1fr) auto}
}
.index-row:hover{background:var(--cobalt-wash)}
.index-row__n{font:500 .75rem/1.6 var(--font-mono);color:var(--ink-3);letter-spacing:.06em}
.index-row__t{font-family:var(--font-display);font-variation-settings:"opsz" 22;font-size:1.15rem;font-weight:480;letter-spacing:-.012em;line-height:1.25;color:var(--ink)}
.index-row__d{font-size:.9062rem;color:var(--ink-2);line-height:1.5}
.index-row__k{font:500 .75rem/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

.empty-state{padding:var(--space-6) 0;text-align:center;color:var(--ink-2)}

/* -----------------------------------------------------------------------------
   11  ARTICLE PAGES
-------------------------------------------------------------------------------*/
.article{padding-block:var(--space-5) var(--space-7)}
.crumbs{
  font:400 .75rem/1.6 var(--font-mono);letter-spacing:.04em;color:var(--ink-3);
  margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;gap:.45rem;
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--cobalt);text-decoration:underline}
.crumbs .sep{color:var(--rule-2)}

.article__head{max-width:var(--measure-wide);margin-bottom:var(--space-5)}
.article__head .kicker{display:block;margin-bottom:.9rem}
.article__head h1{margin:0 0 .75rem}
.article__meta{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;
  border-top:1px solid var(--rule);padding-top:.8rem;margin-top:var(--space-4);
}

.observation{
  max-width:var(--measure-wide);
  border-left:2px solid var(--cobalt);padding:.15rem 0 .15rem 1.25rem;
  font-family:var(--font-display);font-variation-settings:"opsz" 26;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);line-height:1.38;font-weight:390;
  color:var(--ink);margin:0 0 var(--space-5);letter-spacing:-.012em;
}

.related{border-top:1px solid var(--ink);margin-top:var(--space-7);padding-top:var(--space-2)}
.related h2{font:500 .75rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:.9rem 0 .4rem}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule)}
@media (min-width:52rem){.related ul{grid-template-columns:repeat(3,1fr)}}
.related li{background:var(--paper)}
.related a{display:grid;gap:.35rem;padding:1.1rem 0;text-decoration:none;align-content:start;height:100%}
@media (min-width:52rem){.related a{padding:1.1rem 1.1rem 1.1rem 0}}
.related a:hover .related__t{text-decoration:underline;text-decoration-color:var(--cobalt)}
.related__k{font:500 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.related__t{font-family:var(--font-display);font-variation-settings:"opsz" 22;font-size:1.0625rem;font-weight:480;line-height:1.25;letter-spacing:-.01em}

.pager{
  display:grid;gap:var(--space-3);margin-top:var(--space-6);
  border-top:1px solid var(--rule);padding-top:var(--space-4);
}
@media (min-width:46rem){.pager{grid-template-columns:1fr 1fr;gap:var(--space-5)}}
.pager a{text-decoration:none;display:grid;gap:.25rem}
.pager__k{font:500 .75rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pager__t{font-family:var(--font-display);font-variation-settings:"opsz" 22;font-size:1.0625rem;font-weight:480;line-height:1.3}
.pager a:hover .pager__t{text-decoration:underline;text-decoration-color:var(--cobalt)}
.pager__next{text-align:right}

.exercise{
  border:1px solid var(--ink);border-radius:var(--radius);
  padding:clamp(1.1rem,3vw,1.75rem);margin:var(--space-6) 0;max-width:var(--measure-wide);
  background:var(--paper-deep);
}
.exercise .kicker{display:block;margin-bottom:.6rem;color:var(--ink)}
.exercise h2{margin-top:0}
.exercise ol{margin:0;padding-left:1.25em}
.exercise li{margin-bottom:.55em}

.sources{max-width:var(--measure-wide);margin-top:var(--space-6)}
.sources h2{font:500 .75rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin:0 0 .9rem}
.sources ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sources li{font-size:.9062rem;line-height:1.5;color:var(--ink-2);padding-left:1.4rem;position:relative}
.sources li::before{content:"§";position:absolute;left:0;color:var(--rule-2);font-family:var(--font-mono);font-size:.8125rem}

/* -----------------------------------------------------------------------------
   12  MEDIA, MOTION PREFERENCES, PRINT
-------------------------------------------------------------------------------*/
.film{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--dark)}
.film__stage{position:relative;aspect-ratio:16/9;background:var(--dark)}
.film__stage > svg,.film__stage > video{position:absolute;inset:0;width:100%;height:100%}
.film__poster{position:absolute;inset:0;display:grid;place-items:center;background:var(--dark);z-index:2}
.film__poster[hidden]{display:none}
.film__play{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--paper);color:var(--ink);border:0;border-radius:var(--radius);
  padding:.9rem 1.4rem;cursor:pointer;
  font:500 .8125rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
}
.film__play:hover{background:#fff}
.film__bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--dark-2);padding:.6rem .85rem;border-top:1px solid var(--rule-dark)}
.film__bar .folio{color:var(--ink-inverse-2);margin-right:auto}
.film__bar .ctrl{background:transparent;border-color:var(--rule-dark);color:var(--ink-inverse-2)}
.film__bar .ctrl:hover{border-color:var(--ink-inverse-2);color:var(--ink-inverse)}
.film__scenes{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule)}
@media (min-width:52rem){.film__scenes{grid-template-columns:repeat(5,1fr)}}
.film__scenes li{background:var(--paper);padding:1rem .9rem 1.1rem;display:grid;gap:.35rem;align-content:start}
.film__scenes .folio{color:var(--cobalt)}
.film__scenes p{margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .overlay [data-ov]{transition:none}
}

@media print{
  .masthead nav,.specimen__bar,.filters,.nav-toggle,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .specimen.is-marked .overlay{opacity:1;visibility:visible}
  a{text-decoration:none;color:#000}
}

/* =============================================================================
   13  LONG-FORM COMPONENTS
   -----------------------------------------------------------------------------
   Pull quotes, definition rows, worked examples, applied lists, badges,
   footnotes and exhibit blocks, set in Markup's own typography.
   ========================================================================== */

.prose .art-body{display:contents}

/* pull quotes */
.prose blockquote.art-pull{font-size:1.28em;line-height:1.36;margin:2.1em 0}

/* eyebrow used inside imported essays */
.prose .pp-kicker,.prose .fig-kicker{
  font:500 .75rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);margin:2.6em 0 .5em;
}
.prose .pp-kicker:first-child{margin-top:0}

/* a definition, set apart from the argument around it */
.prose .pp-def{
  border-left:2px solid var(--ink);padding:.1rem 0 .1rem 1.25rem;margin:1.6em 0 1.8em;
  font-family:var(--font-display);font-variation-settings:"opsz" 24;
  font-size:1.16em;line-height:1.42;font-weight:390;
}
.prose .pp-def b{font-weight:inherit}

/* worked examples: a named case with labelled rows */
.prose .mex{
  border:1px solid var(--rule);border-radius:var(--radius);
  margin:1.6em 0;background:var(--paper-deep);
}
.prose .mex-head{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:baseline;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--rule);
}
.prose .mex-name{font-family:var(--font-display);font-variation-settings:"opsz" 22;font-size:1.15rem;font-weight:500;letter-spacing:-.012em}
.prose .mex-meta{font:500 .75rem/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prose .mex-row{display:grid;gap:.1rem .9rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--rule);background:var(--paper)}
.prose .mex-row:last-child{border-bottom:0}
@media (min-width:40rem){.prose .mex-row{grid-template-columns:9.5rem minmax(0,1fr)}}
.prose .mex-k{font:500 .75rem/1.7 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.prose .mex-v{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

/* applied lists: where a framework is used */
.prose .pp-apply,.prose .pp-method,.prose .pp-analyze{margin:1.6em 0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.prose .pp-apply__row{background:var(--paper);display:grid;gap:.15rem .9rem;padding:.7rem 1rem}
@media (min-width:40rem){.prose .pp-apply__row{grid-template-columns:14rem minmax(0,1fr)}}
.prose .pp-apply__row dt{font-weight:640;font-size:.9375rem;color:var(--ink)}
.prose .pp-apply__row dd{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.prose .pp-method__body{padding:1rem;background:var(--paper)}

/* small status chips */
.prose .pp-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2em 0}
.prose .pp-badge{
  font:500 .75rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:var(--radius);padding:.38rem .6rem;color:var(--ink-2);
}
.prose .pp-badge--strong{border-color:var(--ink);color:var(--ink)}
.prose .pp-badge--emerging{border-color:var(--cobalt);color:var(--cobalt)}
.prose .pp-badge--open{border-color:var(--proof);color:var(--proof)}

.prose .pp-note,.prose .pp-fallback{
  font-size:.875rem;line-height:1.55;color:var(--ink-2);
  border-left:1px solid var(--rule-2);padding-left:.9rem;margin:1.3em 0;
}

/* footnotes */
.prose .art-fn-ref{font-size:.7em;vertical-align:super;line-height:0;color:var(--cobalt);text-decoration:none;font-family:var(--font-mono)}
.prose .art-footnotes{border-top:1px solid var(--rule);margin-top:2.6em;padding-top:1.1em;font-size:.875rem;line-height:1.55;color:var(--ink-2)}
.prose .art-footnotes ol{padding-left:1.2em}

/* exhibit blocks */
.prose .book-exhibit{margin:2em 0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper-deep)}
.prose .book-exhibit__preview img{border:0;border-radius:0;display:block}
.prose .book-exhibit__cta,.prose .pp-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.9rem 1rem;border-top:1px solid var(--rule)}
.prose .btn,.prose .pp-action{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:var(--radius);padding:.62rem .95rem;color:var(--ink-2);
}
.prose .btn:hover,.prose .pp-action:hover{border-color:var(--ink);color:var(--ink)}
.prose .pp-action--primary{background:var(--ink);border-color:var(--ink);color:var(--ink-inverse)}
.prose .pp-action--primary:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep);color:#fff}
.prose .arr,.prose .chev{font-family:var(--font-text)}