/* Imaginary Antiquity — the publication.
   Tokens, type scale and spacing are transliterated from
   design_handoff_imaginary_antiquity/. The prototype is a Design Compiler
   artifact and does not run standalone, so the numbers here are quoted from it
   rather than re-derived. Radius is 0 everywhere except the theme pill. */

/* ------------------------------------------------------------ fonts ----- */
/* latin subset only: every subject name across all five manifests is inside
   latin-1, and the latin subset covers U+2000-206F, where the editorial
   punctuation (· — ’) lives. 9 files, 131 KB. */
@font-face{font-family:Spectral;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-300.woff2)format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400.woff2)format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600.woff2)format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/spectral-700.woff2)format('woff2')}
@font-face{font-family:Spectral;font-style:italic;font-weight:300;font-display:swap;src:url(fonts/spectral-300-italic.woff2)format('woff2')}
@font-face{font-family:Spectral;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400-italic.woff2)format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2)format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2)format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2)format('woff2')}

/* ------------------------------------------------------------ tokens ---- */
:root{
  --paper:#efe9dc; --paper2:#e5ddcb; --ink:#1e1b16; --ink2:#6a6154;
  --rule:#cdc3ae; --accent:#7a2723; --gold:#9a7a3a; --ph1:#ded4bd; --ph2:#d4c8ad;
  /* shadow and postcard tilt both derive from one physicality value (0-100,
     default 30) so the skeuomorphism dials without touching layout */
  --shadow:0 6px 15px rgba(0,0,0,0.098);
  --tilt:0.76deg;
  --page:1180px;
  --serif:Spectral,Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme=dark]{
  --paper:#16130f; --paper2:#1e1a15; --ink:#ece5d5; --ink2:#9a9080;
  --rule:#38312a; --accent:#c2685a; --gold:#c9a253; --ph1:#252017; --ph2:#2c261d;
}
/* The Antiquities wall is fixed in both themes: oil paintings want a dark
   wall, dioramas and posters do not. Per-department treatment, not global. */
.wall{
  --paper:#14110d; --paper2:#14110d; --ink:#e8e0cf; --ink2:#9a9080;
  --rule:#3a332a; --gold:#c9a253; --mat:#0e0c09; --mat-outline:#4a4034;
  /* The wall overrode paper, ink, rule and gold but NOT the placeholder pair,
     so in light theme every un-loaded plate and every matted one painted the
     cream #ded4bd against a near-black wall — a bright band above The Ides of
     March, which is 3:2 inside a 1:1 frame. The wall is dark in both themes,
     so its placeholders have to be too. */
  --ph1:#1b1712; --ph2:#221d17;
  background:#14110d; color:#e8e0cf;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-weight:300; font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
::selection{background:var(--ph2)}
a{color:var(--accent);text-decoration:none}
/* height:auto is not optional here. Every <img> carries width/height
   attributes from the manifest so the grid cannot reflow as thumbnails
   arrive — but those attributes are presentational hints, so the height
   sticks at its pixel value while max-width shrinks the width. A 1536x1024
   plate rendered 772 wide stayed 1024 tall: a 99% vertical stretch. */
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.page{max-width:var(--page);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:60;background:var(--paper);padding:8px 12px;border:1px solid var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------- masthead ----- */
#masthead{
  position:sticky;top:0;z-index:20;display:flex;align-items:stretch;
  justify-content:space-between;gap:12px;padding:0 18px;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
#brand{display:flex;flex-direction:column;justify-content:center;padding:12px 0;flex:none}
#brand .est{font-family:var(--mono);font-size:9px;letter-spacing:0.22em;color:var(--ink2)}
/* DESIGN-BRIEF: "Imaginary" is typographically load-bearing. No monogram, and
   no wordmark that shrinks, lightens or abbreviates the first word. */
#brand .wm{font-size:16px;letter-spacing:0.02em;font-weight:600;color:var(--ink)}
#brand .wm i{font-style:normal;color:var(--accent)}
/* must scroll, never centre: centring makes the first department unreachable
   at narrow widths */
#depts{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;
  justify-content:flex-start;scrollbar-width:none}
#depts::-webkit-scrollbar{display:none}
#depts button{display:flex;align-items:center;white-space:nowrap;padding:0 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink2);border-bottom:2px solid transparent}
#depts button:hover,#depts button[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}
#mast-right{display:flex;align-items:center;gap:14px;flex:none}
#mast-right .lnk{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink2);white-space:nowrap}
#mast-right .lnk:hover{color:var(--accent)}
#theme{width:34px;height:18px;border:1px solid var(--rule);border-radius:9px;
  display:flex;align-items:center;padding:2px;background:var(--paper2);flex:none}
#theme span{width:12px;height:12px;border-radius:50%;background:var(--ink);
  margin-left:0;transition:margin-left 120ms}
:root[data-theme=dark] #theme span{margin-left:14px}

/* ------------------------------------------------------- provenance ----- */
/* PROVENANCE.md, short form. Persistent, not dismissible, above the imagery.
   Sits directly under the masthead so it travels with every view. */
#provenance{
  position:sticky;top:49px;z-index:19;
  background:var(--paper2);border-bottom:1px solid var(--rule);
  padding:9px 28px;font-family:var(--mono);font-size:10px;line-height:1.5;
  letter-spacing:0.06em;color:var(--ink2);
}
#provenance b{font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:0.1em}
#provenance a{color:var(--accent);border-bottom:1px solid currentColor}

/* ------------------------------------------------------------- home ----- */
.hero{padding:88px 28px 64px;border-bottom:1px solid var(--rule);text-align:center}
.hero .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.34em;color:var(--ink2)}
.hero h1{font-size:76px;line-height:1.02;letter-spacing:-0.015em;margin:26px 0 0;font-weight:400}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .stand{max-width:660px;margin:26px auto 0;font-size:17px;line-height:1.65;
  color:var(--ink2);text-wrap:pretty}
.stats{display:flex;gap:44px;justify-content:center;margin-top:44px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;color:var(--ink2)}
.stats b{display:block;font-family:var(--serif);font-size:30px;letter-spacing:0;
  color:var(--ink);font-weight:400}

/* long provenance statement — above the fold, before any imagery */
.statement{border-bottom:1px solid var(--rule);padding:44px 0}
.statement .inner{max-width:760px}
.statement p{margin:0 0 18px;font-size:16px;line-height:1.7;color:var(--ink2)}
.statement p:first-child{font-size:19px;line-height:1.55;color:var(--ink);font-weight:400}
.statement p:first-child strong{font-weight:600}
.statement p:last-child{margin-bottom:0;font-style:italic;color:var(--ink);font-size:17px}

.dept-list{padding:0 0 72px}
.dept{display:grid;grid-template-columns:56px 1fr 300px 92px;gap:24px;align-items:baseline;
  padding:26px 0 22px;border-bottom:1px solid var(--rule);width:100%}
.dept:hover{background:var(--paper2)}
.dept .num{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:0.1em}
.dept .nm{font-size:32px;line-height:1.1;font-weight:400}
.dept:hover .nm{color:var(--accent)}
.dept .blurb{font-size:15px;font-style:italic;color:var(--ink2);line-height:1.5}
.dept .hold{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;color:var(--ink2);
  text-align:right;text-transform:uppercase}
.dept[data-queued]{opacity:0.55;cursor:default}
.dept[data-queued]:hover .nm{color:inherit}

/* entity of the month — the argument for the whole site */
.band{border:1px solid var(--rule);background:var(--paper2);padding:40px 44px;margin:0 0 72px}
.band .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.24em;color:var(--accent)}
.band h2{font-size:52px;margin:14px 0 0;font-weight:400;letter-spacing:-0.015em}
.band .meta{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink2);
  text-transform:uppercase;margin-top:10px}
.band .teasers{display:flex;gap:26px;margin-top:32px;flex-wrap:wrap}
.band .teasers>*{flex:1 1 150px;min-width:0}
.band .teasers .cap{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;
  color:var(--ink2);text-transform:uppercase;margin-top:8px}

/* ----------------------------------------------------- collection L1 ---- */
.l1head{padding:44px 0 0}
.l1head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.24em;color:var(--accent);
  text-transform:uppercase}
.l1head h1{font-size:54px;margin:16px 0 0;font-weight:400;letter-spacing:-0.015em;line-height:1.05}
.l1head h1 em{font-style:italic;color:var(--accent)}
.l1head .sub{font-style:italic;color:var(--ink2);font-size:17px;margin:10px 0 18px}
.l1head .rule{border-bottom:2px solid var(--ink)}
/* Site search. Sits above the segmented controls because it filters whatever
   view they select, rather than being one more view option. */
.searchrow{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin:22px 0 0}
#q{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:9px 12px;min-width:16rem;flex:0 1 22rem;-webkit-appearance:none;appearance:none}
#q::placeholder{color:var(--ink2);text-transform:uppercase;letter-spacing:0.1em}
#q:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#q::-webkit-search-cancel-button{cursor:pointer}
.searchcount{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink2);margin:0}

.segs{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 0}
.seggroup{display:flex}
.seg{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--rule);margin-left:-1px;color:var(--ink2)}
.seg:first-child{margin-left:0}
.seg[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* gazetteer: two columns, non-negotiable. Most atlas plates carry callout
   labels, and at three-plus per row they are illegible. */
.region{margin:44px 0 0}
.region .rhead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:8px;border-bottom:1px solid var(--rule)}
.region .rhead h2{font-size:24px;font-style:italic;font-weight:400;margin:0}
.region .rhead .n{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink2);
  text-transform:uppercase;white-space:nowrap}
.sitegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;margin-top:26px}
/* Pantheon sections reuse the gazetteer's region furniture, but take the
   handoff's 2px gold rule instead of a hairline — that rule is what the
   design specifies for a pantheon head, and it distinguishes a grouping by
   authored attribute from the gazetteer's grouping by geography. */
.region.pantheon .rhead{border-bottom:none;border-top:2px solid var(--gold);
  padding-top:10px;padding-bottom:0;margin-top:8px}
.region.pantheon .rhead h2{font-style:normal}
/* The undated group takes the same furniture, so it reads as a peer of the
   chronology rather than as leftovers swept to the bottom. */
.region.undated .rhead{border-bottom:none;border-top:2px solid var(--gold);
  padding-top:10px;padding-bottom:0;margin-top:8px}
.region.undated .rhead h2{font-style:normal}

/* The standing head: what the images literally are, under the h1. */
/* The department head sits above the collection's own, so it reads as the wing
   introducing itself before the world does. Italic and lighter: context, not
   the subject of the page. */
.l1head .depthead{font-size:16px;line-height:1.6;font-style:italic;color:var(--ink2);
  max-width:62ch;margin:0 0 12px}
.l1head .standing{font-size:17px;line-height:1.6;color:var(--ink2);max-width:60ch;margin:0 0 18px}

/* "Before the labels" — an addition to the fixed banner, never a replacement.
   Set below it, smaller and in the collection's own voice, so it reads as the
   house speaking about this shelf rather than as part of the notice. Sharing
   the banner's ground keeps them visibly related; the lighter weight and the
   indent keep them visibly distinct. */
.beforelabels{padding:7px 28px 10px;background:var(--paper2);
  border-bottom:1px solid var(--rule)}
/* the band spans, the line does not: the banner above is a single line and
   never shows the problem, but at 1280px this ran to ~140 characters */
.beforelabels p{margin:0;max-width:104ch;font-family:var(--mono);font-size:10px;
  line-height:1.8;letter-spacing:0.04em;color:var(--ink2)}
@media (max-width:700px){ .beforelabels{padding:7px 16px 10px} }

/* The about page. One measure, generous leading: it is the only long-form
   reading on the site and the statement above it sets the width. */
.about{padding-top:44px;padding-bottom:80px;max-width:820px}
.about h2{font-size:24px;font-weight:400;font-style:italic;margin:38px 0 0;
  padding-top:16px;border-top:1px solid var(--rule)}
.about h2:first-child{margin-top:0}
.about p{font-size:16px;line-height:1.75;margin:14px 0 0;text-wrap:pretty}
.about em{font-style:italic;color:var(--accent)}
.about ul{margin:14px 0 0;padding-left:20px}
.about li{font-size:16px;line-height:1.75;margin-top:8px}
.about a{border-bottom:1px solid currentColor}

/* ----------------------------------------------------------- lightbox --- */
/* Dark regardless of theme: a plate at full size wants a neutral surround, and
   a cream one bounces light into the image. The house ground returns the moment
   it closes. */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;
  /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr), and the auto
     minimum grows the row to fit its content — so a 1024px plate pushed the
     stage past the viewport and the footer sat on top of the image instead of
     under it. The stage must be allowed to be smaller than what it holds. */
  grid-template-rows:auto minmax(0,1fr) auto;
  /* opaque, not 97%: at 0.97 the subject page ghosted through and the
     heading and fact table read as artefacts behind the plate. A plate at
     full size should be the only thing in the frame. */
  background:#0c0a08;
  color:#e8e0cf;padding:0}
.lbbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;border-bottom:1px solid rgba(232,224,207,0.14)}
.lbpos{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(232,224,207,0.66)}
.lbclose{font-size:18px;line-height:1;color:rgba(232,224,207,0.8);padding:4px 8px}
.lbclose:hover{color:#fff}

/* flex, not grid. A percentage max-height on a GRID item resolves against the
   grid area inconsistently across engines, and the plate stayed at its natural
   1024px inside a 794px stage — overflowing under the footer. In a flex
   container with a definite height the child's max-height:100% resolves. */
.lbstage{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:0;overflow:hidden;padding:18px}
/* the plate never crops and never exceeds its own resolution — 1536px is all
   there is, and scaling past it would invent detail */
/* min-height:0 lets the flex item shrink below its content size; without it
   the image refuses to go under its intrinsic height. Never upscaled: 1536px
   is all the resolution that exists, and stretching past it invents detail. */
.lbstage img{max-width:100%;max-height:100%;min-height:0;width:auto;height:auto;
  object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.5)}

.lbarrow{position:absolute;top:50%;transform:translateY(-50%);
  font-size:34px;line-height:1;padding:14px 18px;color:rgba(232,224,207,0.75);
  background:rgba(12,10,8,0.45)}
.lbarrow.prev{left:8px} .lbarrow.next{right:8px}
.lbarrow:hover:not(:disabled){color:#fff;background:rgba(12,10,8,0.75)}
.lbarrow:disabled{opacity:0.18;cursor:default}

.lbfoot{padding:12px 18px 16px;border-top:1px solid rgba(232,224,207,0.14);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.lbcap{margin:0;font-size:16px;font-style:italic;color:#e8e0cf}
/* the provenance line is not decoration here: this is the largest the plate is
   ever shown, so it is the most important place for it to be legible */
.lightbox .plateprov{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(232,224,207,0.62);border:0;padding:0;margin:0}
.lbrecord{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:#c2685a;margin-left:auto;
  border-bottom:1px solid currentColor}
.lightbox :focus-visible{outline:2px solid #c2685a;outline-offset:2px}

/* the plate-page hero is a button now; it must not look like one */
button.art{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

@media (max-width:700px){
  .lbarrow{font-size:26px;padding:10px 12px}
  .lbfoot{padding:10px 14px 14px}
  .lbrecord{margin-left:0}
}
@media (prefers-reduced-motion:no-preference){
  .lightbox{animation:lbin 120ms ease-out}
  @keyframes lbin{from{opacity:0}to{opacity:1}}
}

/* ------------------------------------------------------------- ribbon --- */
/* The chronology, as a line with the dated subjects hung off it. An <ol>
   because it IS an ordered list; the rule is drawn on the list, so the order
   survives with styles off.

   It scrolls horizontally rather than wrapping: a timeline that wraps to a
   second row stops reading as a sequence. Seven items fit at desktop widths
   and scroll on a phone. */
.ribbon{margin:30px 0 4px;overflow-x:auto;padding-bottom:4px}
.ribbon ol{display:flex;list-style:none;margin:0;padding:0;min-width:min-content;
  border-top:2px solid var(--gold)}
.ribbon li{flex:1 1 0;min-width:132px}
.ribbon button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:100%;height:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:9px 14px 12px 0;color:inherit;font:inherit}
.ribbon .when{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
/* the notch that ties each entry to the line above it */
.ribbon .tick{width:1px;height:9px;background:var(--rule)}
.ribbon .what{font-size:15px;line-height:1.3}
.ribbon button:hover .what{color:var(--accent)}
.ribbon button:hover .tick{background:var(--accent)}
.ribbon button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the date repeated on the card, so the grid carries it too */
.card .cwhen{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);margin-top:7px}
/* A <button> centres its content vertically when something stretches it
   taller than that content — and a grid row does exactly that. So a card with
   one row of chips sat 14px lower than its neighbours with two, plates and
   all, in every card grid on the site. Laying the button out as a flex column
   overrides the centring and pins the plate to the top of the cell. */
.card{display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;width:100%}
.plate{position:relative;border:1px solid var(--rule);box-shadow:var(--shadow);
  background:var(--ph1);overflow:hidden}
/* Descendant, not child: every plate is a <picture> wrapping the <img>, so
   `.plate > img` matched nothing and the image sat at its intrinsic 480x320
   in the top-left of a 549x366 cell — read as a thick border down two sides.

   These two rules cover both shapes a plate takes. Where .plate carries an
   aspect-ratio the percentage heights resolve and object-fit crops to fill;
   where it does not (the L2 hero, the entity-band teasers) they resolve to
   auto against an auto-height parent and the image keeps its true ratio. */
.plate picture{display:block;width:100%;height:100%}
.plate img{width:100%;height:100%;object-fit:cover}
/* A plate whose own ratio differs from its department's frame is matted, not
   cropped. Only a handful per collection — five in the Pantheon, six in the
   atlas — and they are full compositions, so a crop would cut figures out of
   them rather than tighten them. */
/* `--mat` and `--mat-outline` were declared on .wall and read by nothing — the
   mount was always the placeholder colour. A mat should sit slightly deeper
   than the surface it hangs on, which is what those values were chosen for;
   everywhere else there is no --mat and the placeholder remains the fallback. */
.plate.mat img{object-fit:contain;background:var(--mat,var(--ph1))}
.plate.mat{background:var(--mat,var(--ph1));border-color:var(--mat-outline,var(--rule))}
.plate .dim{position:absolute;right:6px;bottom:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:0.08em;color:var(--ink2);background:var(--paper);padding:1px 4px}
.callout{position:absolute;display:flex;align-items:center;gap:5px;transform:translate(-2px,-50%);
  pointer-events:none}
.callout i{width:4px;height:4px;background:var(--ink);border-radius:50%;flex:none}
.callout span{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;background:var(--paper);
  color:var(--ink);padding:1px 5px;white-space:nowrap}
.card .cfoot{border-top:1px solid var(--rule);margin-top:10px;padding-top:9px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card .cfoot h3{font-size:22px;font-weight:400;margin:0}
.card:hover .cfoot h3{color:var(--accent)}
.card .cfoot .n{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--ink2);
  text-transform:uppercase;white-space:nowrap}
.card .vocab{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;color:var(--ink2);
  margin-top:5px}

/* the shelf — covers[] is a sibling array to sites[] and is easy to lose */
.shelf{border-top:2px solid var(--ink);margin-top:64px;padding-top:22px}
.shelf .shead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap}
.shelf h2{font-size:30px;font-style:italic;font-weight:400;margin:0}
.shelf .n{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink2);
  text-transform:uppercase}
.spines{display:flex;gap:14px;overflow-x:auto;padding:26px 0 0;border-bottom:6px solid var(--ink)}
/* Uniform height, not uniform width: the shelf edge is what the volumes line
   up on, and 15 of the 35 covers are landscape or square. Width comes from
   each cover's own aspect ratio, set inline. */
.spine{flex:none;height:198px}
.spine .plate{height:100%;width:auto}

/* completionist band — Merchandise only. COLLECT THEM ALL is printed on the
   artwork, so the device is native to the material rather than imposed. */
.band.collect{padding:22px 26px;margin:32px 0 0}
.collect .chead{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap}
.collect .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--accent)}
.collect .tally{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink2)}
.collect .cells{display:flex;gap:3px;margin-top:18px}
.collect .cell{flex:1;height:22px;border:1px solid var(--rule);background:transparent;
  min-width:0;padding:0}
.collect .cell{background:var(--ink);border-color:var(--ink)}
.collect .cell.divus{background:var(--gold);border-color:var(--gold)}
.collect .cell:hover{outline:2px solid var(--accent);outline-offset:1px}
.collect .legend{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink2)}
.collect .legend span{display:flex;align-items:center;gap:6px}
.collect .sw{width:10px;height:10px;background:var(--ink);display:inline-block}
.collect .sw.divus{background:var(--gold)}

/* generic collection grid (figures, gods, postcards) */
.subjgrid{display:grid;gap:26px;margin-top:32px}
.subjgrid.c4{grid-template-columns:repeat(4,1fr)}
.subjgrid.c3{grid-template-columns:repeat(3,1fr)}
.subjgrid.c2{grid-template-columns:repeat(2,1fr)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;padding:3px 6px;
  border:1px solid var(--rule);color:var(--ink2);text-transform:uppercase}
.chip.gold{border-color:var(--gold);color:var(--gold)}
.card.gold .plate{border-color:var(--gold)}
/* travel-bureau rack: one degree of rotation, not a scrapbook */
.rack .card{transform:rotate(var(--r,0deg));transition:transform 160ms ease,translate 160ms ease}
.rack .card:hover{transform:rotate(0deg);translate:0 -6px}

/* --------------------------------------------------------- subject L2 --- */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink2);margin:26px 0 0;display:inline-block}
.crumb:hover{color:var(--accent)}
.l2head{display:grid;grid-template-columns:1fr 320px;gap:52px;padding:26px 0 44px}
.l2head .heroplate{position:relative}
.l2head .heroplate .flag{position:absolute;left:8px;bottom:8px;background:var(--paper);
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 6px;color:var(--ink2);
  text-transform:uppercase}
.l2meta .deptline{font-family:var(--mono);font-size:10px;letter-spacing:0.24em;
  color:var(--accent);text-transform:uppercase;display:block}
.l2meta h1{font-size:46px;line-height:1.05;margin:12px 0 0;font-weight:400;letter-spacing:-0.015em}
.l2meta .stand{font-style:italic;color:var(--ink2);margin:10px 0 22px}
.facts{border-top:1px solid var(--rule)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase}
.facts div span:first-child{color:var(--ink2)}
.facts div span:last-child{text-align:right}
/* Disputed sovereignty is a sentence, not a table cell. Shown deliberately:
   build_places.py withholds a country here rather than adopting Natural
   Earth's de-facto call on the reader's behalf. */
.disputed{font-family:var(--mono);font-size:9px;line-height:1.7;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink2);margin:10px 0 0;
  border-left:2px solid var(--rule);padding-left:10px}
.alsoin{border:1px solid var(--accent);padding:14px 16px;margin-top:22px;display:block;width:100%}
.alsoin:hover{background:var(--accent);color:var(--paper)}
.alsoin .k{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent)}
.alsoin:hover .k{color:var(--paper)}
.alsoin .v{font-size:17px;margin-top:4px}
/* An inferred link is drawn as a dashed edge, so the difference between "read
   off a caption" and "read off the subject matter" is visible before the text
   is read. PROVENANCE.md names the Carnuntum scenes as the clearest case. */
.alsoin.inferred{border-style:dashed}
.alsoin .inf{font-family:var(--mono);font-size:9px;line-height:1.7;letter-spacing:0.06em;
  color:var(--ink2);margin-top:8px;text-align:left}
.alsoin .inf em{color:var(--accent);font-style:italic}
.alsoin:hover .inf,.alsoin:hover .inf em{color:var(--paper)}
.volstrip{padding:0 0 26px}
.volstrip .k{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:9px}
.plates{display:grid;gap:26px;padding-bottom:72px}
.plates.c2{grid-template-columns:repeat(2,1fr)}
.plates.c6{grid-template-columns:repeat(6,1fr)}
.plates.c4{grid-template-columns:repeat(4,1fr)}
.plates .prow{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:0.06em;color:var(--ink2);
  text-transform:uppercase}

/* ----------------------------------------------------------- plate L3 --- */
.l3{display:grid;grid-template-columns:1fr 300px;gap:52px;padding:26px 0 72px}
.l3 .art{display:flex;align-items:flex-start;justify-content:center}
.l3 .art picture{display:block;max-width:900px;width:100%;box-shadow:0 22px 60px rgba(0,0,0,0.30)}
.l3 .side .k{font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink2)}
.l3 .side h1{font-size:34px;margin:12px 0 0;font-weight:400;line-height:1.15}
.l3 .side .cap{font-style:italic;color:var(--ink2);margin:8px 0 26px}
.l3 .prov-k{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink2);border-bottom:1px solid var(--rule);padding-bottom:7px}
.provtable div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10px;
  letter-spacing:0.04em}
.provtable div span:first-child{color:var(--ink2);text-transform:uppercase;flex:none;
  letter-spacing:0.1em}
.provtable div span:last-child{text-align:right;word-break:break-all}
/* PROVENANCE.md one-liner: survives a deep link or a right-click save */
.plateprov{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:8px 10px;margin:0 0 22px}
.l3nav{display:flex;gap:0;margin-top:26px}

/* --------------------------------------------------------- entity ------- */
.ehead{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;padding:26px 0 0}
.ehead h1{font-size:64px;margin:0;font-weight:400;letter-spacing:-0.015em;line-height:1}
.ehead .meta{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink2);
  text-transform:uppercase}
.erule{border-bottom:2px solid var(--ink);margin-top:14px}
.ebody{display:grid;grid-template-columns:2fr 1fr;gap:52px;padding:32px 0 72px}
.elink{display:grid;grid-template-columns:120px 1fr 80px 70px;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);width:100%}
.elink:hover{background:var(--paper2)}
.elink .nm{font-size:22px}
.elink:hover .nm{color:var(--accent)}
.elink .coll{font-family:var(--mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink2);margin-top:3px}
.elink .rel{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--accent);
  text-transform:uppercase}
/* confidence=inferred is surfaced, never silently presented as fact */
.elink .rel .inf{color:var(--ink2);display:block;font-size:9px;letter-spacing:0.06em}
.elink .n{font-family:var(--mono);font-size:10px;text-align:right;color:var(--ink2)}
.eside{background:var(--paper2);padding:26px;align-self:start}
.eside .k{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:14px}
.eside a{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:var(--ink)}
.eside a:hover{color:var(--accent)}
.eside a span:last-child{font-family:var(--mono);font-size:9px;color:var(--ink2);white-space:nowrap}
.eside .note{font-family:var(--mono);font-size:9px;line-height:1.7;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink2);margin-top:22px;border-top:1px solid var(--rule);
  padding-top:14px}
.eside .note em{color:var(--accent);font-style:italic}
.eindex{columns:3;column-gap:36px;padding:26px 0 72px}
.eindex a{display:block;break-inside:avoid;padding:6px 0;color:var(--ink)}
.eindex a:hover{color:var(--accent)}
.eindex a span{font-family:var(--mono);font-size:9px;color:var(--ink2);margin-left:8px}

/* ------------------------------------------------------------- map ------ */
#mapwrap{position:relative;border:1px solid var(--rule);background:var(--paper2);margin-top:26px}
#map{display:block;width:100%;height:min(72vh,720px);cursor:grab;touch-action:none}
#map.dragging{cursor:grabbing}
#map .land{fill:var(--ph1);stroke:var(--rule);stroke-width:0.5;vector-effect:non-scaling-stroke}
#map .grat{stroke:var(--rule);stroke-width:0.4;opacity:0.5;fill:none;vector-effect:non-scaling-stroke}
#map .pin circle{fill:var(--accent);fill-opacity:0.72;stroke:var(--paper);stroke-width:0.6;
  vector-effect:non-scaling-stroke;cursor:pointer}
/* No font-size or stroke-width here: CSS beats the presentation attributes
   that rescale() sets, and the labels would stop tracking the zoom.
   The face is a design choice, not a constraint — declutter() measures each
   label with getBBox() and caches the result in em, so it does not care
   whether the font is monospaced. An earlier version did derive widths from
   the character count, which is where the "monospace is load-bearing" note
   that used to sit here came from; it was consistently narrow and the labels
   kept touching. */
#map .pin text{fill:var(--ink);stroke:var(--paper);paint-order:stroke;
  font-family:'IBM Plex Mono',monospace}
/* suppressed by declutter() because something more substantial is in the way */
#map .pin.nolabel text{display:none}
/* Modern national boundaries: a reference overlay on an ancient map, so they
   read as annotation rather than as part of the world being shown. Lines only —
   the source carries no names, which is the point: you can see which modern
   country a site falls in without modern labels stamped over antiquity. */
#map .borders path{fill:none;stroke:var(--ink2);stroke-width:0.7;opacity:0.45;
  vector-effect:non-scaling-stroke;pointer-events:none}
/* An approximate pin is hollow: "about here", not "less important". Ringed
   rather than faded, because fading would compete with .dim, which means
   "filtered out" — a different claim entirely. */
#map .pin.soft circle{fill:var(--paper);fill-opacity:0.55;
  stroke:var(--accent);stroke-width:1.4}
#map .pin.soft:hover circle{fill-opacity:0.8}
#map .pin.dim{opacity:0.18}
#map .pin.sel circle{fill:var(--gold);fill-opacity:1}
#maptools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
#maptools button{width:28px;height:28px;border:1px solid var(--rule);background:var(--paper);
  font-family:var(--mono);font-size:13px;line-height:1;display:grid;place-items:center}
#maptools button:hover{border-color:var(--accent);color:var(--accent)}
#tip{position:absolute;transform:translate(10px,-50%);background:var(--paper);
  border:1px solid var(--rule);padding:5px 8px;font-family:var(--mono);font-size:10px;
  pointer-events:none;z-index:3;box-shadow:var(--shadow)}
#tip b{display:block;font-family:var(--serif);font-size:13px;font-weight:400}
#mapnote{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;color:var(--ink2);
  text-transform:uppercase;margin:8px 0 0}

/* ---------------------------------------------------------- footer ------ */
footer{border-top:1px solid var(--rule);padding:44px 0 64px;margin-top:auto}
footer .cols{display:flex;gap:52px;flex-wrap:wrap;justify-content:space-between}
footer p{font-family:var(--mono);font-size:9px;line-height:1.9;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink2);max-width:520px;margin:0}
footer a{color:var(--ink2);border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--accent)}

#app{min-height:100vh;display:flex;flex-direction:column}
#view{flex:1}
.loading{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink2);padding:88px 0}
.error{border:1px solid var(--accent);color:var(--accent);padding:22px 26px;margin:44px 0;
  font-family:var(--mono);font-size:11px;line-height:1.8;letter-spacing:0.06em}

/* -------------------------------------------------------- responsive ---- */
/* the atlas grid collapses to one column below 900px and is NEVER three
   columns above it — the callout labels stop being legible */
@media (max-width:900px){
  .sitegrid,.plates.c2{grid-template-columns:1fr}
  .plates.c6{grid-template-columns:repeat(3,1fr)}
  .plates.c4,.subjgrid.c4,.subjgrid.c3{grid-template-columns:repeat(2,1fr)}
  .l2head,.l3,.ebody{grid-template-columns:1fr;gap:32px}
  .hero{padding:52px 18px 40px}
  .hero h1{font-size:44px}
  .l1head h1{font-size:38px}
  .dept{grid-template-columns:36px 1fr;gap:14px}
  .dept .blurb,.dept .hold{grid-column:2}
  .dept .hold{text-align:left}
  .ehead h1{font-size:40px}
  .eindex{columns:1}
  .elink{grid-template-columns:70px 1fr 60px;gap:12px}
  .elink .n{display:none}
  .page{padding:0 18px}
  .band{padding:26px 22px}
  .band h2{font-size:36px}
  #provenance{padding:9px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}