/* ---------- fonts ----------
   Variable, 400-700, one file per subset. `swap` because the fallback stack is a
   real serif and a real grotesque: a reader on a slow connection gets a page
   that is already correct rather than a page of nothing. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/source-serif-4-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/source-serif-4-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 700;
  font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 700;
  font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/karla-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/karla-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f6f5f2; --surface:#efede7; --surface-2:#e7e4dc;
  --ink:#26231f; --ink-70:#4a453e; --ink-55:#5a554d; --ink-45:#8a847a;
  --rule:#e2ded6; --rule-2:#d9d5cd; --rule-3:#c9c4ba;
  /* oklch(45% 0.1 30) and oklch(35% 0.1 30), the two the mockup names, resolved
     to sRGB so the whole file stays in one colour space. 7.2:1 on paper. */
  --accent:#843d33; --accent-dark:#652118;
  --accent-rule:rgb(132 61 51 / .55); --accent-tint:rgb(132 61 51 / .12);
  --on-accent:#f6f5f2;
  /* MAP. Sea and land used to be #dedbd9 and #e9e7e5 -- eleven levels apart,
     which on a schematic map of grey shapes is no edge at all. Land now
     reads as paper against a cooler sea, and the coastline is a real line
     rather than the general-purpose --rule-3. */
  --sea:#ccd4d8; --land:#f4f1ee; --coastline:#8b979c;
  --serif:"Source Serif 4","Source Serif Pro",Cambria,Charter,"Iowan Old Style",Georgia,serif;
  --sans:"Karla","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  /* The reading surface and the Greek both live here. Cambria first among the
     fallbacks because it is the one face on a stock Windows machine with real
     polytonic coverage, and it is what every Greek word on the site is set in. */
  --read:"Source Serif 4","Source Serif Pro",Cambria,Charter,"Iowan Old Style",Georgia,serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --magnifier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --wrap:70rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --gap:clamp(2.5rem,6vw,5.5rem);
  /* The measure the collection pages set their prose on. --wrap is the width of
     the page's STRUCTURE -- the rules, the row dividers, the section heads --
     and at 70rem it is nearly twice as wide as a line of text should be. Until
     this existed every paragraph on a collection page stopped between 46% and
     58% of the way across while every rule beside it ran the whole width, which
     read as a column of text pinned to the left of an empty page. Text sits on
     --measure; structure keeps --wrap; the gap between them is deliberate. */
  --measure:40rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1a17; --surface:#24211d; --surface-2:#2d2924;
  --ink:#f2efe9; --ink-70:#c9c3b8; --ink-55:#a49d92; --ink-45:#8a8378;
  --rule:#35312b; --rule-2:#423d36; --rule-3:#524c44;
  --accent:#e08b73; --accent-dark:#f0ab96;
  --accent-rule:rgb(224 139 115 / .55); --accent-tint:rgb(224 139 115 / .14);
  --on-accent:#1c1a17;
  --sea:#161d20; --land:#302d2b; --coastline:#5b686d;
}}
:root[data-theme="dark"]{
  --bg:#1c1a17; --surface:#24211d; --surface-2:#2d2924;
  --ink:#f2efe9; --ink-70:#c9c3b8; --ink-55:#a49d92; --ink-45:#8a8378;
  --rule:#35312b; --rule-2:#423d36; --rule-3:#524c44;
  --accent:#e08b73; --accent-dark:#f0ab96;
  --accent-rule:rgb(224 139 115 / .55); --accent-tint:rgb(224 139 115 / .14);
  --on-accent:#1c1a17;
  --sea:#161d20; --land:#302d2b; --coastline:#5b686d;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
  font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
  /* THIS CORPUS IS FULL OF WORDS THAT CANNOT BREAK. A provenance line carries
     `urn:cts:greekLit:tlg0062.tlg065.perseus-grc2` -- 44 characters with no
     space or hyphen in it, which the default `word-break:normal` will not
     divide. On a reading page that string sits in a plain paragraph, not in the
     scroll-wrapped tables, so at 360px it is wider than the content box and
     pushes the WHOLE PAGE sideways: every line of the text then sits short of
     the right edge and the reader is scrolling horizontally to read prose.
     `break-word` only acts when a word would otherwise overflow, so ordinary
     text is untouched. */
  overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:400;line-height:1.12;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-dark)}
em{font-style:italic}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;z-index:100;font-family:var(--sans);font-weight:600;font-size:.85rem}
.skip:focus{left:0}

/* The optical hang. Under the old system this pulled 800-weight caps back by
   their side bearing; a regular-weight serif hangs far less, so it is now a
   nudge rather than a shove. Kept because every display line on the site uses
   it and the alignment it buys is still real. */
.hang{margin-left:-.02em}

/* ---------- chrome ---------- */
.topnav{border-bottom:1px solid var(--rule-2);background:var(--bg);
  position:sticky;top:0;z-index:50}
.topnav .row{max-width:var(--wrap);margin:0 auto;padding:1.35rem var(--pad);display:flex;
  align-items:baseline;gap:.75rem 1.6rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:600;font-size:1.375rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;margin-right:auto;white-space:nowrap}
.brand em{font-weight:400;font-style:italic}
.brand:hover{color:var(--accent)}
.navlinks{display:flex;gap:.75rem 1.6rem;flex-wrap:wrap;align-items:baseline;
  justify-content:flex-end;font-family:var(--sans);font-size:.94rem}
.navlinks a{color:var(--ink-55);text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--accent)}
.navsearch{display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--rule-3);padding-bottom:.2rem;
  color:var(--ink-45);text-decoration:none;min-width:10rem}
/* The magnifier as a mask rather than an image, so it takes currentColor and
   follows the link into hover and into dark mode without a second asset. */
.navsearch::before{content:"";flex:none;width:.85rem;height:.85rem;
  background:currentColor;
  -webkit-mask:var(--magnifier) center/contain no-repeat;
  mask:var(--magnifier) center/contain no-repeat}
.navsearch:hover{color:var(--accent);border-color:var(--accent)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
/* Quiet by default. Under the old palette every eyebrow on the site was red,
   including the ones labelling an author, a rights table or a passage count --
   which is the record, and the one thing the accent is not supposed to touch.
   The mockup sets its section labels in muted grey and spends its accent on the
   one label that is the site talking, so that is the rule now: brick where the
   site is warning you, ink everywhere it is naming something. */
.eyebrow{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);font-weight:600;margin:0 0 1rem}
.caveat .eyebrow,.note-b.warn .eyebrow{color:var(--accent)}
.rule{height:1px;border:0;margin:0;background:var(--rule-2)}

.sitefoot{border-top:1px solid var(--rule-2);margin-top:5rem}
.sitefoot .inner{max-width:var(--wrap);margin:0 auto;padding:1.75rem var(--pad) 2.75rem;
  font-family:var(--sans);font-size:.81rem;line-height:1.65;color:var(--ink-45)}
.sitefoot .links{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0 0 1.1rem;font-weight:500}
.sitefoot .links a{color:var(--ink-55);text-decoration:none}
.sitefoot .links a:hover{color:var(--accent)}
.sitefoot .links .end{margin-left:auto;font-weight:400}
.sitefoot p{margin:0 0 .6rem;max-width:70ch}
.sitefoot strong{color:var(--ink-70);font-weight:600}

/* ---------- hero ----------
   7fr/4fr: the proportion the whole site is built on. Text left, and beside it
   the margin the notes live in -- on the home page, the note about the notes. */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.75rem,5vw,4.5rem)}
.hero h1{font-size:clamp(2.5rem,6.4vw,3.75rem);line-height:1.08;letter-spacing:-.015em;
  margin:0 0 2.5rem}
.hero h1 span{display:block}
.hero h1 .alt{font-style:italic;color:var(--accent)}
.hero-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  column-gap:var(--gap);align-items:start}
/* `em`, not `ch`: this is the widest the lede may get when it is standing on its
   own at the top of a page. Inside the hero grid the 7fr column is already
   narrower than this, so the cap does nothing there -- which is the point. A
   `ch` cap sized for the column left a third of the column empty. */
.lede{font-size:1.25rem;line-height:1.6;max-width:32em;margin:0}
.readhead .lede{margin-top:1.1rem;max-width:34em;font-size:1.1rem;color:var(--ink-70)}

/* The caveat is a margin note, not a warning box. It says the same thing the
   old red rectangle said; it says it in the voice of a note in a margin, which
   is what the site is for. */
.caveat{margin-top:.85rem;padding-left:1.4rem;border-left:2px solid var(--accent-rule)}
.caveat p{font-size:1rem;line-height:1.6;margin:0;color:var(--ink-70)}
.pagehead{padding:clamp(2.75rem,6vw,4.5rem) 0 2.25rem}
.pagehead h1{font-size:clamp(2.25rem,5.2vw,3.25rem);line-height:1.1;letter-spacing:-.015em}
.pagehead .lede{margin-top:1.4rem;max-width:30em;font-size:1.15rem}

/* The collaborate page is the one page whose head carries an argument rather
   than a two-line lede. Held in a single 62ch column it ran about 1100px down
   the left of the wrap while the body below it kept a 7fr/4fr grid, so the
   head was the only part of the page ignoring the grid everything else obeys.
   It now shares that grid exactly: the prose takes the content column, and the
   stat band -- a full-width row below the head until now -- stacks into the
   column the aside occupies further down, so the two line up on one edge. */
.headsplit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  column-gap:var(--gap);align-items:start}
.headsplit .stats{grid-template-columns:1fr;gap:1.6rem;padding:.4rem 0 0}

/* ---------- the stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.75rem;
  padding:2.75rem 0}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:2.25rem;
  line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-family:var(--sans);font-size:.875rem;color:var(--ink-45);
  margin-top:.55rem}
/* A zero that is the point of the sentence, not a gap in the data: nobody in the
   field has read these notes yet. The numbers are ink because they are the
   record; this one is brick because it is the site admitting something. */
.stat.zero b{color:var(--accent)}

/* ---------- two ways in ---------- */
.ways{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.way{padding:3rem 0 3.25rem}
.way+.way{border-left:1px solid var(--rule-2);padding-left:var(--gap)}
.way h2{font-size:clamp(1.6rem,3vw,2.125rem);margin:0}
.way p{font-size:1.06rem;line-height:1.6;margin:1rem 0 1.75rem;max-width:26em;
  color:var(--ink-70)}
.way .btn{font-size:.94rem}

/* ---------- section headers ---------- */
.sec{padding:4rem 0 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;border-bottom:1px solid var(--rule-2);padding-bottom:.9rem}
.sec-h h2{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45)}
.sec-h .n{font-family:var(--sans);font-size:.875rem;color:var(--ink-45)}

/* ---------- collection rows ---------- */
.crow{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 12rem;gap:0 2rem;
  align-items:start;padding:2.25rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit}
.crow:hover{background:var(--surface)}
.crow:last-of-type{border-bottom-color:var(--rule-2)}
.crow .num{font-family:var(--sans);font-weight:600;font-size:.875rem;margin:0;
  color:var(--ink-45);font-variant-numeric:tabular-nums}
.crow .mark{display:block;width:8px;height:8px;background:var(--accent);margin-top:.7rem}
.crow.soon .num{color:var(--ink-45)}
.crow.soon .mark{display:none}
.crow h3{font-size:clamp(1.4rem,2.6vw,1.875rem);letter-spacing:-.012em}
.crow:hover h3{color:var(--accent)}
.crow .blurb{font-size:1.06rem;line-height:1.6;margin:.7rem 0 0;max-width:34em;
  color:var(--ink-70)}
.crow .srcs{font-family:var(--sans);font-size:.85rem;line-height:1.7;margin:.9rem 0 0;
  color:var(--ink-45)}
.crow .srcs b{font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.crow .tags{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;margin:.85rem 0 0;color:var(--ink-45)}
.crow .side{text-align:right}
.crow .side p{font-family:var(--sans);font-size:.85rem;line-height:1.8;margin:.85rem 0 0;
  color:var(--ink-45);font-variant-numeric:tabular-nums}

.tag{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;padding:.3rem .65rem}
.tag-open{background:var(--accent);color:var(--on-accent)}
.tag-soon{background:var(--surface-2);color:var(--ink-55)}
.tag-out{border:1px solid var(--accent);color:var(--accent)}
.tag-held{background:var(--ink);color:var(--bg)}

/* ---------- the in-preparation ledger ---------- */
.prep{padding:2.5rem 0 0}
.prep-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.5rem;font-family:var(--sans)}
.prep-h h3{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45)}
.prep-h span{font-size:.85rem;color:var(--ink-45)}
.prep-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap)}
.prep-cols a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.9rem 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.prep-cols a:hover{color:var(--accent)}
.prep-cols .t{font-size:1.06rem}
.prep-cols .w{font-family:var(--sans);font-size:.8rem;color:var(--ink-45);text-align:right;
  max-width:22ch}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);font-weight:600;padding:.7rem .8rem .7rem 0;
  border-bottom:1px solid var(--rule-2);white-space:nowrap}
td{padding:.9rem .8rem .9rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:hover{background:var(--surface)}
td.k{font-weight:600}
td.k .who{display:block;font-weight:400;color:var(--ink-45);font-size:.88rem}
.num,th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.end,th.end,td.end{text-align:right}
/* The last column is a single link -- "Read ->" -- and at this measure the
   arrow was wrapping onto a line of its own under every row. */
td.end a{white-space:nowrap}
td .mut{color:var(--ink-55)}

/* ---------- the closing band ----------
   The site addressing the reader directly, which is what brick is for. */
.band{background:var(--accent);color:var(--on-accent);margin-top:5rem}
.band .inner{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--pad)}
.band h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.015em}
.band h2 span{display:block}
.band h2 span+span{font-style:italic}
.band p{font-size:1.15rem;line-height:1.6;max-width:52ch;margin:1.5rem 0 1.75rem}
.band a.btn{color:var(--on-accent);border-color:rgb(246 245 242 / .5)}
.band a.btn:hover{background:var(--on-accent);color:var(--accent);
  border-color:var(--on-accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);
  font-weight:500;font-size:.94rem;line-height:1.2;padding:.8rem 1.35rem;
  text-decoration:none;border:1px solid var(--rule-3);color:var(--ink);
  background:transparent;cursor:pointer}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.5rem}

/* ---------- numbered prose (method) ---------- */
.steps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:var(--gap);
  align-items:start;padding:2.5rem 0 0}
.step{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0 1.75rem;
  padding:2.25rem 0;border-bottom:1px solid var(--rule)}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:0}
.step .n{font-family:var(--sans);font-weight:600;font-size:.875rem;margin:0;
  color:var(--ink-45);font-variant-numeric:tabular-nums}
.step h2{font-size:clamp(1.4rem,2.6vw,1.75rem);letter-spacing:-.014em}
.step p{font-size:1.06rem;line-height:1.65;margin:.8rem 0 0;max-width:56ch}
.step ul{margin:.85rem 0 0;padding-left:1.1rem;font-size:1.02rem;line-height:1.62;
  max-width:56ch}
.step li{margin:.4rem 0}
.aside{border-left:1px solid var(--rule-2);padding-left:var(--pad)}
.aside h3{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin:2rem 0 1rem;color:var(--ink-45)}
.aside>h3:first-child{margin-top:0}
.aside h3+p{margin-top:0}
.aside p{font-size:.98rem;line-height:1.6;color:var(--ink-70);margin:0 0 1.25rem}
/* The one box in an aside that is the site's own voice, so it gets the brick
   rule the notes get rather than a border on four sides. */
.aside .box{border-left:2px solid var(--accent-rule);padding-left:1.25rem;margin-bottom:1.75rem}
.aside .box p{margin:0;color:var(--ink-70);font-size:.98rem}
.aside .list{font-family:var(--sans);font-size:.875rem;line-height:1.9;color:var(--ink-45);
  margin:0}

/* ---------- notes / callouts in prose ---------- */
.note-b{border-left:1px solid var(--rule-2);padding:.2rem 0 .2rem 1.4rem;margin:2.25rem 0;
  max-width:38rem}
.note-b p{margin:0 0 .7rem;font-size:1rem;line-height:1.6;color:var(--ink-70)}
.note-b p:last-child{margin-bottom:0}
.note-b ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.96rem;color:var(--ink-70)}
.note-b.warn{border-left:2px solid var(--accent-rule)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem;
  border-top:1px solid var(--rule-2);padding:2rem 0 0;margin-top:2.5rem}
.cards h3{font-size:1.25rem;margin:0 0 .5rem}
.cards p{font-size:.98rem;line-height:1.6;margin:0;color:var(--ink-70)}

/* ---------- work cards on a collection page ----------
   These used to carry an itinerary strip: the work's places drawn along a line
   with square ticks. It is gone. It drew a graphic for every work when only a
   handful are journeys, and its one-place special case published a sentence
   about invented islands over Cicero and Livy. See route_block() in
   build_site.py. What is left is a card that says what the work is and how much
   of it there is. */
.route{display:block;text-decoration:none;color:inherit;padding:2rem 0 1.85rem;
  border-bottom:1px solid var(--rule)}
.route:hover{background:var(--surface)}
/* All three rows of a card share one width, so the card is a block of text
   rather than three lines of different lengths. The head row is the reason:
   .r-kind is `margin-left:auto`, so before this it pushed BY SEA out to the far
   edge of --wrap while the blurb below it stopped at 56ch -- 475px of summary
   under a 1040px header row. Capping the head at --measure lands the kind label
   at the end of the text instead of the end of the page. The card's bottom
   border stays full width on purpose: the dividers are the page's structure. */
.r-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  max-width:var(--measure)}
.r-title{font-family:var(--serif);font-weight:600;font-size:1.375rem;letter-spacing:-.01em}
.route:hover .r-title{color:var(--accent)}
.r-author{font-size:.94rem;color:var(--ink-45)}
.r-kind{margin-left:auto;font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);font-weight:600}
.r-blurb{font-size:1.06rem;line-height:1.62;margin:.6rem 0 0;max-width:var(--measure);
  color:var(--ink-70)}
.r-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.85rem 0 0;font-family:var(--sans);
  font-size:.82rem;color:var(--ink-45);max-width:var(--measure)}
.r-meta b{color:var(--ink-70);font-weight:600;font-variant-numeric:tabular-nums}

/* The collection page's own prose, on the same measure as the cards below it.
   `.wrap>` is doing real work: .tnote is shared with the reading page, where it
   is a child of .readwrap and must keep the 38rem that matches the passage
   column. Collection pages are the only ones that hang a .tnote directly off
   .wrap, so this widens them without reaching the reading page at all. */
.wrap>.tnote{max-width:var(--measure)}
/* The lede is inside the 7fr column now, and that column is narrower than the
   30em cap, so the cap would win and leave the column short. Let the grid set
   the width -- the same reasoning as the note above .lede. */
.headsplit .lede{max-width:none}

/* ---------- the reading page ----------
   The one surface on the site that is not interface: a passage and, beside it,
   the margin the notes sit in. Everything else on the site is built to look
   like this page. */
#bar{position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--rule-2)}
#bar .row{max-width:var(--wrap);margin:0 auto;padding:.8rem var(--pad);display:flex;
  gap:.6rem 1rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:.85rem}
#bar label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-45);font-weight:600}
/* `width:auto` undoes the global `input,textarea,select{width:100%}`, which
   stretched both selects across the full wrap and made the reading page open on
   a form rather than on a book. */
#bar select,#bar button{font-family:var(--sans);font-size:.85rem;font-weight:500;
  width:auto;max-width:100%;padding:.4rem .6rem;background:var(--bg);color:var(--ink);
  border:1px solid var(--rule-3);border-radius:0}
/* `min-width:0` is not optional here. A <select> sized `auto` is as wide as its
   LONGEST OPTION, and the longest option is "Anonymous, formerly ascribed to
   Arrian - The Periplus of the Erythraean Sea"; as a flex item it defaults to
   min-width:auto and refuses to shrink below that, which pushed the whole
   reading page sideways on a phone. It may now shrink and clip its own label. */
#bar select{max-width:26rem;min-width:0;flex:0 1 auto}
#bar button{cursor:pointer}
#bar button:hover{border-color:var(--accent);color:var(--accent)}
#bar #count{margin-left:auto;color:var(--ink-45);font-size:.8rem}
.readwrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
/* Everything above and below the passages sits on the passage's own measure --
   38rem is what 7fr of this grid comes to at full width -- so the page has one
   left edge and one line length instead of a 1120px header over a 600px text. */
.readhead,.limits,.tnote,.readwrap>.note-b,.books,.readfoot{max-width:38rem}
.readhead{padding:clamp(2.75rem,6vw,4.5rem) 0 1.5rem}
.readhead h1{font-size:clamp(2.25rem,5.4vw,3.5rem);line-height:1.08;letter-spacing:-.018em;
  max-width:18ch}
/* Serif, not Karla, because this line carries the work's title IN GREEK and
   Karla has no Greek at all: half the line came back in Karla and half in a
   fallback the stylesheet never chose. */
.readhead .sub{font-family:var(--read);font-size:1rem;color:var(--ink-45);margin:1rem 0 0}
.limits{border-left:2px solid var(--accent-rule);margin:2rem 0 0}
.limits summary{cursor:pointer;padding:.1rem 0 .1rem 1.4rem;font-family:var(--sans);
  font-weight:600;font-size:.94rem;color:var(--accent)}
.limits .in{padding:.9rem 0 .2rem 1.4rem;font-size:1rem;line-height:1.6;color:var(--ink-70)}
.limits .in p{margin:0 0 .8rem}
.limits .in ul{padding-left:1.1rem;margin:.4rem 0 0}
.tnote{border-left:1px solid var(--rule-2);padding:.2rem 0 .2rem 1.4rem;margin:2.25rem 0 0}
.tnote .lab{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--ink-45);margin-bottom:.5rem}
.tnote p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-70)}

/* A passage and its margin. `.unit-notes` is the column; on a narrow screen the
   grid collapses and the notes fall back under the text they belong to. */
.unit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  column-gap:var(--gap);align-items:start;
  padding:3rem 0;border-bottom:1px solid var(--rule)}
.unit-text{grid-column:1;min-width:0}
.unit-notes{grid-column:2;display:flex;flex-direction:column;gap:1.75rem;padding-top:.35rem}
/* Clean mode asks for the text and nothing else, so there is no margin to keep
   open. The measure stays what it is in the other two modes -- switching modes
   should not reset the line length the reader has settled into. */
.unit.clean{grid-template-columns:minmax(0,1fr)}
.unit.clean .unit-text{max-width:38rem}
.cite{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink-45)}
.cite a{color:inherit;text-decoration:none}
.cite a:hover{color:var(--accent)}
.eng{font-family:var(--read);font-size:1.3rem;line-height:1.65;margin:.8rem 0 0}
.eng p{margin:0 0 .9rem}
.eng p:last-child{margin-bottom:0}
.headnote{font-size:1.06rem;line-height:1.55;font-style:italic;color:var(--ink-70);
  border-left:2px solid var(--accent-rule);padding-left:1.1rem;margin:1rem 0 0}
.src{font-family:var(--read);font-size:1.1rem;line-height:1.8;
  border-left:1px solid var(--rule-2);padding-left:1.2rem;margin:1.4rem 0 0;
  color:var(--ink-55)}

/* Machine-written apparatus: brick rule, brick label, no exceptions. */
.note{border-left:2px solid var(--accent-rule);padding:.1rem 0 .1rem 1.4rem}
.note .lab{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:.5rem}
.note p{margin:0 0 .6rem;font-size:.98rem;line-height:1.55;color:var(--ink-70)}
.note p:last-child{margin-bottom:0}
.note .q{font-family:var(--read);color:var(--ink-55);font-style:italic}
.note .comp{font-size:.92rem}
.note .ev{margin:.25rem 0 .6rem;padding-left:1.1rem;font-size:.92rem;color:var(--ink-55)}
.note .ev li{margin:.2rem 0}
.r-cap{font-family:var(--sans);font-size:.85rem;line-height:1.5;color:var(--ink-45);margin:0}
.eng .turn{margin:0 0 .9rem}
.eng .spk{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--ink-45);margin-right:.6rem}
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.75rem 0 0}
/* Jump strip for a work too long to scroll. Empty unless reader.js fills it,
   so it costs nothing on the 24 works that do not need one. */
.books:not(:empty){margin:2.5rem 0 0;padding:1.1rem 0;border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2)}
.books .lab{display:block;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-45)}
.books .chips{margin:.7rem 0 0}
.books .chip{text-decoration:none;display:inline-block;min-width:2.2rem;text-align:center}
.chip{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:0;
  padding:.35rem .75rem;border:1px solid var(--rule-3);background:transparent;
  color:var(--ink-55);cursor:pointer;border-radius:0}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tone{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-45)}
.prec{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-45)}
.readfoot{padding:2.75rem 0 1rem;border-top:1px solid var(--rule-2);margin-top:2.5rem;
  font-family:var(--sans);font-size:.85rem;line-height:1.65;color:var(--ink-45);max-width:70ch}
.readfoot p{margin:0 0 .7rem}
.readfoot strong{color:var(--ink-70);font-weight:600}

/* ---------- map dialog ---------- */
dialog{border:1px solid var(--rule-3);background:var(--bg);color:var(--ink);padding:0;
  max-width:min(46rem,94vw);border-radius:0}
dialog::backdrop{background:rgb(38 35 31 / .5)}
.dlg-h{display:flex;align-items:center;gap:.8rem;padding:1rem 1.4rem;
  border-bottom:1px solid var(--rule-2)}
.dlg-h h2{font-size:1.15rem}
.dlg-b{padding:1.4rem}
.dlg-b .basis{font-size:.95rem;color:var(--ink-70);margin:1rem 0 0}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1rem 0 0;font-family:var(--sans);
  font-size:.8rem;color:var(--ink-45)}
.legend .dot{display:inline-block;width:9px;height:9px;margin-right:.4rem}
.maplinks{display:flex;gap:.9rem;flex-wrap:wrap;margin:1rem 0 0;font-family:var(--sans);
  font-size:.85rem}
#mapholder svg{width:100%;height:auto;display:block;border:1px solid var(--rule)}

/* ---------- forms ---------- */
.form{max-width:38rem}
.field{display:block;margin:0 0 1.4rem}
.field>span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--ink-45);margin-bottom:.45rem}
.field .hint{display:block;font-family:var(--sans);font-size:.82rem;letter-spacing:0;
  text-transform:none;font-weight:400;color:var(--ink-45);margin:.3rem 0 0}
input,textarea,select{font:inherit;font-family:var(--sans);font-size:.95rem;width:100%;
  padding:.65rem .8rem;background:var(--bg);color:var(--ink);
  border:1px solid var(--rule-3);border-radius:0}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--accent)}
textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px}
#f-status{font-size:.95rem;margin:1rem 0 0}
#f-fallback{border-left:2px solid var(--accent-rule);padding:.2rem 0 .2rem 1.4rem;
  margin:1.4rem 0 0}
#f-copy{font-family:var(--mono);font-size:.8rem;white-space:pre-wrap;background:var(--surface);
  padding:.9rem;margin:.8rem 0 0;overflow-x:auto}

/* ---------- search ---------- */
.hit{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.hit a{font-family:var(--serif);font-weight:600;font-size:1.15rem;text-decoration:none;
  color:var(--ink)}
.hit a:hover{color:var(--accent)}
.hit .where{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);font-weight:600}
.hit p{font-size:1rem;line-height:1.6;margin:.5rem 0 0;color:var(--ink-70)}
.hit mark{background:var(--accent-tint);color:inherit;
  box-shadow:inset 0 -1px 0 var(--accent-rule);padding:0 .12em}

/* ---------- responsive ---------- */
@media (max-width:64rem){
  .hero-cols,.steps,.headsplit,.unit{grid-template-columns:1fr;row-gap:2.25rem}
  .headsplit .stats{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.75rem;
    padding:0}
  /* NO MARGIN ON A PHONE, SO THE MARGIN BECOMES A SEQUENCE. The notes fall in
     under the passage they belong to, in the same order they sit in the margin
     on a wide screen. What is lost is adjacency, so the boundary has to be
     drawn instead: a rule above the chip row says the passage has ended and
     everything below it is apparatus. Each note still opens by quoting the
     phrase it is about, which is what re-anchors it to a passage the reader
     has now scrolled past. */
  .unit-text,.unit-notes{grid-column:1}
  .unit-notes{padding-top:0;margin-top:1.5rem}
  .unit-text .chips{border-top:1px solid var(--rule-2);padding-top:1.5rem}
  .unit.clean .unit-text{max-width:none}
  .caveat{margin-top:0}
  .ways{grid-template-columns:1fr}
  .way{padding:2.5rem 0}
  .way+.way{border-left:0;border-top:1px solid var(--rule-2);padding-left:0}
  .crow{grid-template-columns:2.5rem minmax(0,1fr);gap:0 1.25rem}
  .crow .side{grid-column:2;text-align:left;margin-top:1rem}
  .crow .side p{margin-top:.5rem}
  .prep-cols{grid-template-columns:1fr}
  .aside{border-left:0;border-top:1px solid var(--rule-2);padding:1.75rem 0 0}
  .step{grid-template-columns:2.5rem minmax(0,1fr);gap:0 1rem}
}
/* A TABLE WITH EIGHT COLUMNS IS A TABLE ON A DESK. The library's is 390px wide
   on a phone, which put the work titles one word per line and pushed five of the
   eight columns into a horizontal scroller nobody scrolls. Below 48rem each row
   becomes a block and each cell carries its own column heading, so every field
   survives at full width. `.tw` only -- the layout grids elsewhere are not
   tables and must not be caught by this. */
@media (max-width:48rem){
  .tw table,.tw tbody,.tw tr,.tw td{display:block}
  .tw thead{position:absolute;left:-9999px}
  .tw tr{padding:1.4rem 0;border-bottom:1px solid var(--rule-2)}
  .tw tbody tr:hover{background:transparent}
  .tw td{border:0;padding:.22rem 0;text-align:left}
  .tw td:empty{display:none}
  .tw td[data-label]::before{content:attr(data-label) " ";font-family:var(--sans);
    font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-45)}
  .tw td.k{font-size:1.15rem;padding-bottom:.45rem}
  .tw td.end{padding-top:.7rem}
}
@media (max-width:34rem){
  .stat b{font-size:1.875rem}
  .eng{font-size:1.2rem}
  .r-kind{margin-left:0;width:100%}
  /* The note chips are the one control a reader uses constantly, and at
     .35rem of padding they stand about 27px tall -- over the 24px minimum and
     well under anything comfortable for a thumb. Given more room on the one
     device where it matters. */
  .chip{padding:.55rem .85rem}
  .chips{gap:.6rem}
  /* margin-left:auto pushes the licence line to the right of a single row; once
     the row wraps on a phone it strands it, so let it sit under its siblings. */
  .sitefoot .links .end{margin-left:0;width:100%}
}