/* Every page on the site loads this. The topbar, footer and player dock are
   injected by chrome.js, so their styling has to live somewhere shared or the
   subpages drift away from the landing page again. */
:root{
  --paper:#efe7d7; --ink:#191714; --rule:#c9bda6; --muted:#6e6555;
  --bar:#141210; --accent:#8a1c14;
  --serif:"Palatino Linotype",Palatino,"Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-size:18px; line-height:1.6; position:relative;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.45),transparent 60%),
                   radial-gradient(ellipse at 90% 100%,rgba(120,100,70,.10),transparent 55%);
}
/* The survey plan of the plaza, sitting under everything at the weight of a
   watermark. It is the drawing the whole book is measured from, so it belongs
   on the page — but as paper, not as illustration. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("/media/plaza-map.svg") no-repeat center center;
  background-size:cover;                 /* fill the viewport, crop rather than letterbox */
  opacity:.07; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.05);
}
@media (max-width:44rem){ body::before{opacity:.05} }
.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}

/* ---- top bar ----------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(239,231,215,.86);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.topbar .mark{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.topbar nav{display:flex;flex-wrap:wrap;gap:.3rem 1.35rem}
.topbar nav a{font-size:.8rem;color:var(--muted);text-decoration:none;padding:.15rem 0;
  border-bottom:1px solid transparent}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:44rem){
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:.1rem;padding-bottom:0}
  .topbar nav{flex-wrap:nowrap;gap:0 1.15rem;overflow-x:auto;width:100%;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar .wrap{width:100%;min-width:0}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{white-space:nowrap;min-height:44px;display:flex;align-items:center}
  .topbar nav a{font-size:.74rem}
}

/* ---- masthead ---------------------------------------------------------- */
header{padding:3rem 0 2.5rem;border-bottom:1px solid var(--rule)}
.hero{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:2.75rem;align-items:start}
.hero img{width:100%;height:auto;display:block;box-shadow:0 2px 5px rgba(0,0,0,.16),0 14px 40px rgba(0,0,0,.22)}
.eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
h1{font-size:clamp(2rem,5.4vw,3.1rem);line-height:1.06;margin:0 0 .5rem;font-weight:normal;letter-spacing:-.01em}
.sub{font-style:italic;color:var(--muted);margin:0 0 1.5rem;font-size:1.1rem}
.pitch{font-size:1.15rem;margin:0 0 1.75rem;max-width:34rem}
.byline{font-size:.95rem;color:var(--muted);margin:0 0 1.75rem}
.buy{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;padding:.62rem 1.15rem;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;font-size:.9rem;letter-spacing:.02em;background:transparent;transition:.15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn em{font-style:normal;opacity:.62;margin-left:.4rem;font-size:.86em}
.btn.ghost{border-style:dashed;color:var(--muted)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ---- sections ---------------------------------------------------------- */
section{padding:3.25rem 0;border-bottom:1px solid var(--rule)}
h2{font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
   margin:0 0 1.6rem;font-weight:normal}
.lede{font-size:1.15rem;max-width:44rem;margin:0 0 1.6rem}
p{max-width:44rem}

/* ---- player ------------------------------------------------------------ */
/* Transport, on the pattern of the Thirty-One Mirrors player: a circle, a hair
   line, and nothing else. The browser default control is a grey plastic slab
   and it fights everything around it. */
/* The dock rides at the bottom of the window for the whole visit, so a chapter
   keeps playing while you read the rest of the page. It only appears once
   something is playing — an empty transport bar is just furniture. */
.player{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;z-index:60;margin:0;
  display:flex;gap:1rem;align-items:center;
  padding:.7rem max(1.2rem,calc((100% - 46rem)/2)) .8rem;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
.player[hidden]{display:none}
body.docked{padding-bottom:5.4rem}
/* The dock is fixed to the bottom, so the footer needs clearance whenever it
   could be showing, not only once playback has started. */
footer{padding-bottom:6rem}
.play{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;font-size:.8rem;line-height:1;
  display:grid;place-items:center;transition:.15s;padding:0}
.play:hover{background:var(--ink);color:var(--paper)}
.player-meta{flex:1;min-width:0}
.player-meta .now{display:block;font-size:.95rem;margin-bottom:.5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:2px;background:var(--rule);cursor:pointer;position:relative}
.bar .fill{height:2px;width:0;background:var(--accent);transition:width .15s linear}
.player-meta .len{display:flex;justify-content:space-between;gap:1rem;
  font-size:.74rem;color:var(--muted);margin-top:.45rem;font-variant-numeric:tabular-nums}
audio{display:none}
ol.chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
ol.chapters li{border-bottom:1px solid var(--rule)}
ol.chapters button,ol.chapters .row{
  width:100%;display:grid;grid-template-columns:2.6rem 1fr auto;gap:.35rem 1rem;align-items:baseline;
  background:none;border:0;padding:.85rem .3rem;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sum{grid-column:2/4;font-size:.83rem;color:var(--muted);line-height:1.5;max-width:38rem;cursor:default}
/* Chapters that are not in the free ten point at the book instead of a player.
   Named bookref, not buy: .buy is the hero's button row, and sharing the name
   painted this rule's border-bottom straight across the masthead. */
.bookref{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;white-space:nowrap}
.bookref:hover{color:var(--accent);border-color:var(--accent)}
li.book .name{color:var(--ink)}
ol.chapters button:hover{background:rgba(0,0,0,.045)}
ol.chapters .num{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
ol.chapters .len{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
/* The playing row is marked with a rule in the margin and the title in accent.
   A tinted block across the full width reads as a selection highlight, which is
   not what it means. */
ol.chapters li{position:relative}
li.playing::before{content:"";position:absolute;left:-.9rem;top:.55rem;bottom:.55rem;
  width:2px;background:var(--accent)}
li.playing .name{color:var(--accent)}
li.playing .num{color:var(--accent)}
li.partmark{border-bottom:0}
li.partmark .part{padding:2.1rem .3rem .75rem;display:grid;gap:.28rem}
li.partmark:first-child .part{padding-top:.4rem}
.pnum{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ptitle{font-size:1.3rem}
.pblurb{font-size:.86rem;color:var(--muted);max-width:36rem}
li.pending button{cursor:default;opacity:.45}
li.pending button:hover{background:none}
.pending .len{font-style:italic}

/* ---- redaction rule, echoing the cover --------------------------------- */
.redact{height:.85rem;background:var(--bar);margin:0 0 1.4rem;width:min(100%,26rem)}
.redact.short{width:min(100%,17rem)}

.viewer{margin:0;padding:0;aspect-ratio:16/10;background:var(--bar);position:relative;
  border:1px solid var(--rule);overflow:hidden}
.viewer iframe{width:100%;height:100%;border:0;display:block}
.launch{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:url('/media/plaza-map.svg') center/cover no-repeat,var(--bar);
  display:grid;place-content:center;gap:.5rem;text-align:center;font:inherit;color:var(--paper)}
.launch::before{content:"";position:absolute;inset:0;background:rgba(24,22,20,.72)}
.launch>*{position:relative}
.lb{font-size:1.05rem;letter-spacing:.02em}
.ls{font-size:.76rem;opacity:.72}
.launch:hover .lb{color:var(--accent)}
.vnote{font-size:.82rem;color:var(--muted);margin:.9rem 0 0}
@media (max-width:44rem){ .viewer{aspect-ratio:4/3} }
.about p{margin:0 0 1.1rem}
/* Author portrait. Floated so the prose wraps it on a wide screen and it sits
   above the text on a narrow one. Hidden entirely if the file is not there,
   rather than showing a broken-image box. */
.portrait{float:right;width:13rem;margin:.3rem 0 1.4rem 2.2rem;shape-outside:margin-box}
.portrait img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04)}
.portrait figcaption{font-size:.78rem;color:var(--muted);margin-top:.5rem;line-height:1.4}
@media (max-width:44rem){ .portrait{float:none;width:10rem;margin:0 0 1.4rem} }
/* The prose column is the same measure as the rest of the page; without this the
   text beside the portrait sets too wide to read comfortably. */
.about .wrap{max-width:60rem}
.about p{max-width:none}
.about::after{content:"";display:block;clear:both}
footer{padding:2.75rem 0 4rem;color:var(--muted);font-size:.9rem;text-align:center}
footer a{color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.15rem;margin-bottom:.4rem}
footer nav a{font-size:.78rem;letter-spacing:.06em;text-decoration:none}
footer nav a:hover{color:var(--ink);text-decoration:underline}
footer .pub{font-size:.72rem;margin:1.1rem auto .55rem;max-width:none}
footer .copy{font-size:.78rem;margin:0 auto}
a{color:var(--ink)}

@media (max-width:44rem){
  /* Float rather than grid: the pitch, byline and buttons live inside a nested
     div, so grid-column cannot reach them and they were stuck in a column five
     words wide. Floating the cover lets the title sit beside it and everything
     below run the full width. */
  .hero{display:block}
  .hero img{float:left;width:7.5rem;max-width:7.5rem;margin:.2rem 1rem .5rem 0}
  .hero h1{font-size:1.95rem;line-height:1.08}
  .hero .sub{font-size:1rem}
  .hero .pitch{clear:both;font-size:1.02rem;padding-top:.4rem}
  .buy{clear:both;flex-direction:column;gap:.55rem}
  .buy .btn{text-align:center;min-height:46px;display:grid;place-items:center}
  body{font-size:17px}
}

/* ---- subpage chrome ------------------------------------------------------ */
.pagehead{padding:2.6rem 0 1.6rem;border-bottom:1px solid var(--rule)}
.pagehead h1{font-size:2.1rem;font-weight:400;margin:0}
.pagehead .upd{font-size:.78rem;color:var(--muted);margin:.55rem 0 0}
main{padding:2.2rem 0 3rem}
main h2{font-size:1.25rem;font-weight:400;margin:2.4rem 0 .8rem}
main h2:first-child{margin-top:0}
main p{margin:0 0 1.05rem;max-width:44rem}

/* The source shelf. 1,276 entries read as a wall in one column, so it sets in
   two on a wide screen; each entry is kept whole across the column break. */
ul.srclist{list-style:none;margin:0 0 1.4rem;padding:0;columns:2;column-gap:2.5rem}
ul.srclist li{break-inside:avoid;font-size:.86rem;line-height:1.5;color:var(--muted);
  margin:0 0 .62rem;padding-left:.9rem;text-indent:-.9rem}
@media (max-width:52rem){ ul.srclist{columns:1} }
hr.srcrule{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}

/* The model is not prose; it gets the window, not the reading measure. The
   intro above it has to widen with the container, or a 44rem lede inside an
   88rem box reads as text stopping halfway across the page. */
/* The page of the paperback where the supported claim appears. Set apart from
   the citation so the eye can run down the numbers alone. */
.srclist .pp{color:var(--ink);opacity:.55;font-variant-numeric:tabular-nums;
  margin-left:.5em;overflow-wrap:anywhere}
.srclist .pp::before{content:"p. "}

/* ---- the letters tracker ------------------------------------------------- */
.tk{border:1px solid var(--rule);padding:1.05rem 1.15rem;margin:0 0 .9rem;background:rgba(255,255,255,.28)}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.tk-title{font-size:1.06rem}
.tk-status{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--rule);padding:.2rem .5rem;color:var(--muted)}
.tk.sent .tk-status,.tk.filed .tk-status{color:var(--accent);border-color:var(--accent)}
.tk.answered .tk-status{color:#1f5c2f;border-color:#1f5c2f}
.tk.overdue .tk-status{color:var(--accent);border-color:var(--accent);font-weight:700}
.tk-sub{font-size:.85rem;color:var(--muted);margin:.4rem 0 0;max-width:none}
.tk-date{font-size:.82rem;margin:.5rem 0 0;font-variant-numeric:tabular-nums}
.tk-answer{font-size:.88rem;margin:.55rem 0 0}
.tk-answer.none{color:var(--muted);font-style:italic}
.tk details{margin-top:.7rem;font-size:.86rem}
.tk summary{cursor:pointer;color:var(--muted)}
.tk summary:hover{color:var(--ink)}
.tk .asks{margin:.6rem 0 0;padding-left:1.3rem}
.tk .asks li{margin:0 0 .45rem;color:var(--muted);line-height:1.5}
.tk details p{font-size:.86rem;color:var(--muted);margin:.55rem 0 0}
#tracker h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:2rem 0 .8rem}
#tracker h3:first-child{margin-top:.6rem}
.muted{color:var(--muted);font-size:.88rem}
.tweetnote{font-size:.8rem;color:var(--muted);margin-top:.8rem}

/* The letter itself, set as a document rather than as web copy. */
.letter{border-top:1px solid var(--rule);padding-top:1.6rem;margin-top:.6rem}
.letter p{max-width:42rem;margin:0 0 1rem}
.letter h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:2.2rem 0 .7rem;font-weight:400}
.letter .numbered{padding-left:1.4rem;text-indent:-1.4rem}
.letter .salutation-meta{font-size:.78rem;color:var(--muted);margin-bottom:1.6rem}
.letter .signoff{margin-top:2rem;font-size:.92rem}

/* ---- videos -------------------------------------------------------------- */
#film,#series{margin:0 0 3rem}
.film{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:2.2rem;align-items:start}
/* Placeholder key art: the frame the poster will occupy, not a fake poster. */
.film-art{aspect-ratio:16/9;background:var(--bar);color:var(--paper);
  display:grid;place-items:center;text-align:center;padding:1.5rem;
  border:1px solid var(--rule);font-size:1.15rem;letter-spacing:.02em;position:relative}
.film-art::after{content:"Key art to come";position:absolute;bottom:.8rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.film-status{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.film-meta h3{font-size:1.7rem;font-weight:400;margin:.5rem 0 1.1rem}
.film-meta dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;margin:0 0 1.2rem}
.film-meta dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.film-meta dd{margin:0;font-size:.98rem}
.film-note{font-size:.82rem;color:var(--muted);font-style:italic;margin:0}

.fmt{border:1px solid var(--rule);padding:1.1rem 1.3rem;margin:0 0 2.2rem;
  background:rgba(255,255,255,.28)}
.fmt-head{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 .7rem}
.fmt-list{margin:0;padding-left:1.3rem;font-size:.9rem;color:var(--muted)}
.fmt-list li{margin:0 0 .35rem}
.fmt-list b{color:var(--ink);font-weight:400}

.ep{border-top:1px solid var(--rule);padding:1.4rem 0}
.ep-head{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:baseline}
.ep-id{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ep-head h3{font-size:1.12rem;font-weight:400;margin:0;line-height:1.35}
.ep-status{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule);padding:.18rem .48rem;white-space:nowrap}
.ep.published .ep-status{color:var(--accent);border-color:var(--accent)}
.ep-blurb{font-size:.9rem;color:var(--muted);margin:.6rem 0 0;padding-left:4rem;max-width:52rem}
.ep details{margin:.7rem 0 0;padding-left:4rem;font-size:.86rem}
.ep summary{cursor:pointer;color:var(--muted)}
.ep summary:hover{color:var(--ink)}
.ep-secs{margin:.6rem 0 0;padding-left:1.2rem;color:var(--muted)}
.ep-secs li{margin:0 0 .3rem}
.ep-secs .bump,.ep-secs .intro,.ep-secs .outro{color:var(--ink);opacity:.55;font-style:italic}
@media (max-width:52rem){
  .film{grid-template-columns:1fr}
  .ep-head{grid-template-columns:2.4rem 1fr;gap:.6rem}
  .ep-status{grid-column:2}
  .ep-blurb,.ep details{padding-left:0}
}

/* ---- cast ---------------------------------------------------------------- */
.cast-status{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
/* Open by default. A disclaimer folded shut is a disclaimer nobody reads. */
.cast-disc{border:1px solid var(--rule);padding:1rem 1.2rem;margin:0 0 1.6rem;
  background:rgba(255,255,255,.34)}
.cast-disc summary{cursor:pointer;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.cast-disc p{font-size:.86rem;color:var(--muted);margin:.9rem 0 0;max-width:52rem;line-height:1.55}
.cast-count{font-size:.8rem;color:var(--muted);margin:0 0 1.4rem}
.cast-group{margin:0 0 2rem}
.cast-group h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .7rem;font-weight:400}
ul.cast{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
ul.cast li{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr minmax(6rem,8rem);
  gap:1rem;align-items:baseline;padding:.62rem .2rem;border-bottom:1px solid var(--rule)}
.cast-name{font-size:.96rem}
.cast-role{font-size:.85rem;color:var(--muted);line-height:1.45}
.cast-actor{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:right;
  color:var(--muted)}
/* Absent, not pending: a figure with no portrait is stated plainly rather than
   dressed up as a status. */
.cast-actor:not(.narr){opacity:.4;font-style:italic;letter-spacing:.04em;text-transform:none}
@media (max-width:52rem){
  ul.cast li{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .cast-role{grid-column:1/3}
  .cast-actor{text-align:left;grid-column:1}
}
/* Living subjects are flagged in the list itself, not only in the disclaimer,
   so the constraint is visible at the point where casting would be decided. */
.liv{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);padding:.05rem .3rem;margin-left:.5rem;vertical-align:.12em;
  white-space:nowrap}
/* Living people are narrated, never generated. The row says so where the
   decision gets made, not only in the note above the list. */
.cast-actor.narr{color:var(--accent);opacity:1;letter-spacing:.1em}
.fourofour{list-style:none;margin:1.4rem 0 0;padding:0}
.fourofour li{border-bottom:1px solid var(--rule);padding:.7rem 0}
.fourofour a{color:var(--ink);text-decoration:none}
.fourofour a:hover{color:var(--accent)}

/* Transport controls either side of the meta block. */
.pl-ctl{background:none;border:1px solid var(--rule);color:var(--muted);
  font:inherit;font-size:.72rem;letter-spacing:.04em;border-radius:999px;
  min-width:2.35rem;height:2.35rem;cursor:pointer;flex:none;
  display:grid;place-items:center;padding:0 .4rem}
.pl-ctl:hover{color:var(--ink);border-color:var(--ink)}
.pl-ctl.on{color:var(--accent);border-color:var(--accent)}
#pl-back{font-variant-numeric:tabular-nums}
#pl-back::before{content:"\21BA";margin-right:.12em}

/* The chapter permalink stays out of the way until the row is touched. */
ol.chapters li{position:relative}
.permalink{position:absolute;right:-.15rem;top:.6rem;color:var(--muted);opacity:0;
  text-decoration:none;font-size:.9rem;padding:.1rem .35rem;transition:opacity .12s}
ol.chapters li:hover .permalink,.permalink:focus{opacity:.55}
.permalink:hover{opacity:1;color:var(--accent)}
li:target .name{color:var(--accent)}
@media (max-width:44rem){
  .permalink{display:none}
  /* Every transport control stays. They are wanted more on a phone, not less;
     the meta block gives up the width instead. */
  .pl-ctl{min-width:2.1rem;height:2.1rem;font-size:.66rem}
  .player{gap:.45rem}
  .player-meta{min-width:0}
  .player .now{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}

/* The X embed brings its own width and ignores the page's. Cap it, and give it
   its own scroll box so a stubborn widget scrolls itself rather than the body. */
.twitter-tweet,.twitter-tweet-rendered{max-width:100% !important;margin-left:0 !important}
#tweetwrap{max-width:100%;overflow-x:auto}
#tweetwrap iframe{max-width:100% !important}

/* Long tokens must not set the page width. The letter quotes full archives.gov
   record URLs, 69 characters each, which at phone width pushed the whole
   document sideways. Applies everywhere: this class of bug recurs. */
p,li,dd,figcaption,.sum,.ep-blurb,.cast-role,.tk-sub{overflow-wrap:break-word}
.letter p,.srclist li{overflow-wrap:anywhere}
/* The dramatization notice is a standing statement, not a footnote. It sits
   above the list in its own rule so it cannot be missed or folded away. */
.dramatization{font-size:.8rem;letter-spacing:.02em;color:var(--ink);
  border-left:2px solid var(--accent);padding:.5rem 0 .5rem .8rem;margin:0 0 1.1rem;
  max-width:52rem;line-height:1.5}
/* Portraits in the depicted list. Black and white, because the generated colour
   reads as modern and these should sit beside the documents, not above them. */
ul.cast li{grid-template-columns:132px minmax(8rem,13rem) 1fr minmax(6rem,8rem);
  gap:1.2rem;padding:1rem .2rem}
.cast-face img{width:132px;height:165px;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.03);background:var(--rule)}
/* The blank tile belongs to the living, who are narrated and never depicted.
   It should read as a statement, not a broken image: a faint bust outline and
   the word for what it is. */
.noface{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;width:132px;height:165px;border:1px dashed var(--rule);
  background:
    radial-gradient(circle at 50% 30%, var(--rule) 0 14px, transparent 15px),
    radial-gradient(ellipse 30px 22px at 50% 62%, var(--rule) 0 60%, transparent 61%);
  background-repeat:no-repeat;opacity:.55}
.noface::after{content:"not depicted";font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:88px}
.age{font-size:.68rem;color:var(--muted);margin-left:.5em;font-variant-numeric:tabular-nums}
.age::before{content:"age "}
@media (max-width:52rem){
  ul.cast li{grid-template-columns:88px 1fr auto}
  .cast-face img,.noface{width:88px;height:110px}
  .cast-role{grid-column:1/4}
  .cast-actor{grid-column:2}
}
.ep-feat{font-size:.8rem;color:var(--muted);margin:.4rem 0 0;padding-left:4rem;font-style:italic}
@media (max-width:52rem){.ep-feat{padding-left:0}}
.cast-face a{display:block;line-height:0}
.cast-face a:hover img{filter:grayscale(1) contrast(1.12)}
.srcfilter{display:flex;align-items:baseline;gap:1rem;margin:1.6rem 0 .4rem}
#src-q{flex:1;max-width:30rem;font:inherit;font-size:.95rem;padding:.55rem .8rem;
  border:1px solid var(--rule);background:rgba(255,255,255,.5);color:var(--ink)}
#src-q:focus{outline:none;border-color:var(--accent)}
#src-count{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* ---- the reader ---------------------------------------------------------- */
.bk{max-width:44rem}
.bk-p{margin:0 0 1.1rem;line-height:1.72;font-size:1.04rem}
/* The margin mark hangs outside the measure, as it does on the printed page. */
.bk-marked{position:relative}
.bk-cm{position:absolute;left:-1.6rem;color:var(--accent);font-size:.9em;cursor:help}
.bk-sec{font-size:1.05rem;font-weight:700;margin:2.6rem 0 1rem;letter-spacing:.01em}
.bk-listen{font-size:.9rem;margin:0 0 2rem}
.bk-legend{font-size:.82rem;color:var(--muted);border-top:1px solid var(--rule);
  padding-top:1rem;margin-top:2.5rem}
.bk-nav{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0 0;font-size:.92rem}
.bk-nav a{text-decoration:none;color:var(--ink)}
.bk-nav a:hover{color:var(--accent)}
.bk-toc .len{white-space:nowrap}
@media (max-width:44rem){.bk-cm{position:static;margin-right:.4em}}

/* ==========================================================================
   Design pass. Ten fixes, in the order a designer would rank them.
   ========================================================================== */

/* 1. Anchor targets were landing under the sticky topbar, so a deep link to a
      chapter put its heading behind the bar. Every jump target now reserves
      the bar's height plus a little air. */
:target,[id]{scroll-margin-top:5rem}
html{scroll-behavior:smooth}

/* 2. Keyboard focus was a browser default outline that vanished against the
      paper. Anyone tabbing through 1,276 sources needs to see where they are. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
a:focus-visible,button:focus-visible{outline-offset:4px}

/* 3. A skip link. The topbar is the first thing in the DOM, so a screen reader
      or keyboard user met the whole nav before the text, on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bar);
  color:var(--paper);padding:.7rem 1.1rem;text-decoration:none;font-size:.9rem}
.skip:focus{left:.5rem;top:.5rem}

/* 4. Fluid type. The body was fixed, so the book read cramped on a laptop and
      loose on a wide display. This scales between the two without a media
      query, and stops growing before the measure breaks. */
body{font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem)}
.bk-p{font-size:clamp(1.02rem,0.98rem + 0.22vw,1.12rem)}

/* 5. Headings wrapped wherever the box ended, leaving one word stranded on the
      last line. Balance spreads them evenly; prose gets orphan protection. */
h1,h2,h3,.ptitle,.ep-head h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* 6. Selected text fell back to the browser blue, which is the one colour the
      palette does not contain. */
::selection{background:var(--accent);color:var(--paper)}

/* 7. Links in prose were the same weight as the text around them. A thin rule
      set below the baseline reads as a link without shouting, and thickens on
      hover so the target is unmistakable. */
.bk a,main p a,.lede a,.tk a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:var(--rule);
  transition:text-decoration-color .12s,color .12s}
.bk a:hover,main p a:hover,.lede a:hover,.tk a:hover{
  color:var(--accent);text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* 8. Motion is decoration here, not information, so anyone who has asked the
      system to stop animating gets a still site. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* 9. The book is meant to be printable: a reader who wants a chapter on paper
      should get the chapter, not the furniture. */
@media print{
  .topbar,footer,.player,#dock,.bk-nav,.bk-listen,.skip,.viewer{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap,.bk{max-width:none;padding:0}
  .bk-p{font-size:11pt;line-height:1.5;orphans:3;widows:3}
  .bk-cm{color:#000}
  a{text-decoration:none;color:#000}
  /* A printed page cannot be clicked, so the address goes inline. */
  .bk a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h1,h2,h3{break-after:avoid}
}

/* 10. Chapter rows only responded on hover, which does not exist on a phone,
       and the whole row was the target while only the button was clickable.
       The row now lifts on hover and holds a visible state while pressed. */
ol.chapters li:not(.partmark):not(.book){transition:background .14s}
ol.chapters li:not(.partmark):not(.book):hover{background:rgba(0,0,0,.028)}
ol.chapters button{width:100%;text-align:left}
ol.chapters button:active{background:rgba(0,0,0,.055)}
.bookref:active{color:var(--accent)}

/* Citations in the reader. The number sits tight to the sentence it belongs to
   and stays quiet until wanted; the note it points at highlights on arrival. */
.bk-ref{font-size:.62em;line-height:0;margin-left:.15em;white-space:nowrap}
.bk-ref a{color:var(--muted);text-decoration:none;padding:0 .08em}
.bk-ref a:hover{color:var(--accent)}
.bk-notes{border-top:1px solid var(--rule);margin-top:3rem;padding-top:1.6rem}
.bk-notes h2{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .6rem;font-weight:400}
.bk-notes-lede{font-size:.86rem;color:var(--muted);margin:0 0 1.2rem}
.bk-cites{font-size:.84rem;color:var(--muted);line-height:1.55;padding-left:1.6rem;margin:0}
.bk-cites li{margin:0 0 .5rem;scroll-margin-top:6rem}
.bk-cites li:target{color:var(--ink);background:rgba(138,28,20,.07);
  box-shadow:-.5rem 0 0 rgba(138,28,20,.07),.5rem 0 0 rgba(138,28,20,.07)}
@media print{.bk-ref a{color:#000}.bk-cites{font-size:9pt}}

/* ---- book contents ------------------------------------------------------- */
/* It was borrowing the audiobook list's styles, which are built around a play
   button, so the rows sat oddly and the reading times all ran together. */
.btoc-stats{display:flex;flex-wrap:wrap;gap:0 2.6rem;margin:1.6rem 0 1.2rem;
  padding:1rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.btoc-stats div{margin:0}
.btoc-stats dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.btoc-stats dd{margin:.15rem 0 0;font-size:1.15rem;font-variant-numeric:tabular-nums}
.btoc-alt{font-size:.9rem;color:var(--muted);margin:0 0 2rem}

.btoc{list-style:none;margin:0;padding:0}
.btoc-part div{padding:2rem .2rem .7rem;display:grid;gap:.28rem}
.btoc-part:first-child div{padding-top:.4rem}
.btoc-ch{border-top:1px solid var(--rule);display:flex;align-items:stretch;gap:.6rem}
.btoc-ch:last-child{border-bottom:1px solid var(--rule)}
.btoc-main{flex:1;display:grid;grid-template-columns:2.2rem 1fr auto;gap:1rem;
  align-items:baseline;padding:.95rem .2rem;text-decoration:none;color:var(--ink)}
.btoc-main:hover{background:rgba(0,0,0,.028)}
.btoc-num{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.btoc-title{display:block;font-size:1.06rem}
.btoc-sum{display:block;font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:.2rem;max-width:42rem}
.btoc-read{font-size:.8rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Listening is a second way in, not a competing link: quiet until hovered. */
.btoc-listen{display:flex;align-items:center;padding:0 .7rem;font-size:.76rem;
  color:var(--muted);text-decoration:none;border-left:1px solid var(--rule);white-space:nowrap}
.btoc-listen:hover{color:var(--accent);background:rgba(0,0,0,.028)}
.btoc-foot{font-size:.86rem;color:var(--muted);margin-top:2.2rem}
@media (max-width:44rem){
  .btoc-main{grid-template-columns:1.8rem 1fr;gap:.7rem}
  .btoc-read{grid-column:2;margin-top:.3rem}
  .btoc-stats{gap:0 1.6rem}
  .btoc-stats dd{font-size:1rem}
}

/* A one-line role told you nothing. The dates and the biography sit under the
   name, because who these people were is most of why the list is worth having. */
.cast-dates{display:block;font-size:.72rem;color:var(--muted);opacity:.75;margin-top:.1rem;
  font-variant-numeric:tabular-nums}
.cast-bio{display:block;font-size:.86rem;color:var(--ink);opacity:.82;line-height:1.55;
  margin-top:.55rem;max-width:44rem}
ul.cast li{padding:1.3rem .2rem;align-items:start}
.cast-name{padding-top:.1rem}

/* Names in the reader. A dotted underline says "there is more here" without
   competing with the real links in the prose. */
.pname{border-bottom:1px dotted var(--rule);cursor:help;text-decoration:none;color:inherit}
.pname:hover,.pname:focus{border-bottom-color:var(--accent);color:var(--accent);outline:none}
.pcard{position:absolute;z-index:60;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 6px 28px rgba(0,0,0,.16);padding:.9rem 1rem;display:flex;gap:.8rem;
  font-size:.85rem;line-height:1.5;max-width:340px;
  /* A card taller than this stops being a glance and starts being the page. */
  max-height:15rem;overflow:auto}
.pcard-m{display:inline-block;margin-top:.5rem;font-size:.76rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--rule)}
.pcard-m:hover{border-color:var(--accent)}
/* Touch has no pointer to move away, so the card needs a door. */
.pcard-x{position:absolute;top:.2rem;right:.35rem;background:none;border:0;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--muted);padding:.2rem .35rem}
.pcard-x:hover{color:var(--accent)}
.pcard img{width:72px;height:90px;object-fit:cover;flex:none;filter:grayscale(1);background:var(--rule)}
.pcard b{font-size:.95rem;font-weight:400}
.pcard-d{display:block;font-size:.72rem;color:var(--muted);margin-top:.1rem;font-variant-numeric:tabular-nums}
.pcard p{margin:.5rem 0 0;color:var(--muted)}
@media (max-width:44rem){.pcard{max-width:calc(100vw - 24px)}}
@media print{.pname{border:0}.pcard{display:none}}

/* The claim sits above the masthead, in the ink colour rather than the accent:
   a statement of record, not a sales flash. The second line is what backs it up,
   because the assertion alone is just an assertion. */
.banner{background:var(--bar);color:var(--paper);padding:.85rem 0}
.banner p{margin:0;font-size:.92rem;line-height:1.5;max-width:62rem}
.banner b{font-weight:400;letter-spacing:.01em}
.banner p b::after{content:" "}
@media (max-width:44rem){.banner p{font-size:.86rem}}
@media print{.banner{display:none}}

/* ---- usability pass ------------------------------------------------------ */
/* A reading position indicator, one pixel of information at the top of a long
   chapter, and a way back to the start of it. */
.rprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.rprog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .08s linear}
.rtop{position:fixed;right:1rem;bottom:1.2rem;z-index:55;width:2.6rem;height:2.6rem;
  border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  font-size:1.1rem;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.14)}
.rtop:hover{border-color:var(--accent);color:var(--accent)}
body.docked .rtop{bottom:6.4rem}
@media print{.rprog,.rtop{display:none}}

/* Chapter navigation at the head as well as the foot. */
.bk-nav-top{margin:0 0 1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);font-size:.85rem}

/* Where am I in this chapter, and can I get to the bit I want. */
.bk-jump{margin:0 0 1.8rem;font-size:.88rem}
.bk-jump summary{cursor:pointer;color:var(--muted)}
.bk-jump summary:hover{color:var(--ink)}
.bk-jump ol{margin:.7rem 0 0;padding-left:1.4rem;color:var(--muted)}
.bk-jump li{margin:0 0 .35rem}
.bk-jump a{color:var(--ink);text-decoration:none}
.bk-jump a:hover{color:var(--accent)}
@media print{.bk-jump,.bk-nav-top{display:none}}

/* The sources filter needed a way out of itself. */
.src-clear{background:none;border:1px solid var(--rule);color:var(--muted);font:inherit;
  font-size:.78rem;padding:.3rem .6rem;cursor:pointer;margin-left:.5rem}
.src-clear:hover{border-color:var(--accent);color:var(--accent)}
.srclist li{scroll-margin-top:6rem}

/* ---- reference pages ----------------------------------------------------- */
/* Breadcrumbs: where am I, and how do I get back up. */
.crumb{font-size:.76rem;color:var(--muted);margin:0 0 .9rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.55;margin:0 .15em}

/* A passage you can link to is a passage somebody can cite. */
.bk-p{position:relative}
.bk-permalink{position:absolute;right:-1.4rem;top:.15rem;color:var(--muted);opacity:0;
  text-decoration:none;font-size:.85rem;padding:0 .25rem;transition:opacity .12s}
.bk-p:hover .bk-permalink,.bk-permalink:focus{opacity:.5}
.bk-permalink:hover{opacity:1;color:var(--accent)}
.bk-p:target{background:rgba(138,28,20,.07);
  box-shadow:-.6rem 0 0 rgba(138,28,20,.07),.6rem 0 0 rgba(138,28,20,.07)}
@media (max-width:52rem){.bk-permalink{display:none}}

/* Record numbers are the whole point of a sourced book: make them go somewhere. */
.rif{white-space:nowrap;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:.16em;color:inherit}
.rif:hover{color:var(--accent)}

/* Search results */
.sresults{list-style:none;margin:1.4rem 0 0;padding:0}
.sresults li{border-top:1px solid var(--rule)}
.sresults a{display:block;padding:.85rem .2rem;text-decoration:none;color:var(--ink)}
.sresults a:hover{background:rgba(0,0,0,.028)}
.sr-ch{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sr-t{display:block;font-size:.9rem;color:var(--muted);line-height:1.55;margin-top:.3rem}
mark{background:rgba(138,28,20,.16);color:var(--ink)}

/* Index and glossary share an alphabet rail and an entry shape. */
.ix-alpha{margin:1.2rem 0 1.6rem;font-size:.9rem;letter-spacing:.12em}
.ix-alpha a{color:var(--muted);text-decoration:none;margin-right:.5em}
.ix-alpha a:hover{color:var(--accent)}
.ix-l{font-size:.76rem;letter-spacing:.2em;color:var(--accent);margin:2rem 0 .7rem;font-weight:400}
.ix-e{display:flex;flex-wrap:wrap;gap:0 .6rem;align-items:baseline;margin:0 0 .5rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.ix-n{color:var(--ink);text-decoration:none}
.ix-n:hover{color:var(--accent)}
.ix-d{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ix-r{margin-left:auto;font-size:.85rem;font-variant-numeric:tabular-nums}
.ix-r a{color:var(--muted);text-decoration:none;padding:0 .12em}
.ix-r a:hover{color:var(--accent)}
.glossary{margin:0}
.gl-e{border-bottom:1px solid var(--rule);padding:.9rem 0}
.gl-e dt{font-size:1rem;margin:0 0 .3rem}
.gl-e dd{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6;max-width:46rem}

/* ---- ask ----------------------------------------------------------------- */
.askbox{display:flex;gap:.6rem;margin:1.4rem 0 1.2rem}
.askbox input{flex:1;font:inherit;font-size:1.05rem;padding:.75rem .95rem;
  border:1px solid var(--rule);background:rgba(255,255,255,.55);color:var(--ink)}
.askbox input:focus{outline:none;border-color:var(--accent)}
.askbox button{font:inherit;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.75rem 1.5rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.askbox button:hover{background:var(--accent);border-color:var(--accent)}
.askeg{font-size:.86rem;color:var(--muted);line-height:2.1}
.eg{font:inherit;font-size:.84rem;background:none;border:1px solid var(--rule);color:var(--muted);
  padding:.3rem .7rem;margin:0 .3rem .3rem 0;cursor:pointer;text-align:left}
.eg:hover{border-color:var(--accent);color:var(--accent)}
#status{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:1.2em}
.askfoot{font-size:.82rem;color:var(--muted);margin-top:1.6rem;padding-top:1rem;
  border-top:1px solid var(--rule);max-width:44rem}

/* The written answer. It needs an opaque background of its own: the plaza map
   sits behind the whole page and was showing through the prose. */
.answer{background:#f6f1e6;border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:1.15rem 1.35rem 1rem;margin:1.4rem 0 1.8rem;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.answer-h{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .75rem;font-weight:400}
.answer-b p{margin:0 0 .8rem;font-size:1.02rem;line-height:1.62;max-width:42rem}
.answer-b p:last-child{margin-bottom:0}
/* A citation is a mark on a sentence, not a word in it. */
.answer-c{font-size:.62em;line-height:0;vertical-align:.5em;margin-left:.15em;
  color:var(--accent);text-decoration:none;font-variant-numeric:tabular-nums;
  padding:0 .1em;border-bottom:0}
.answer-c::before{content:"ch"}
.answer-c:hover{text-decoration:underline}
.answer-f{font-size:.75rem;color:var(--muted);margin:1rem 0 0;padding-top:.75rem;
  border-top:1px solid var(--rule);line-height:1.5;max-width:42rem;font-style:normal}
.answer.thinking{background:transparent;border-style:dashed;box-shadow:none}
.answer.thinking .answer-w{margin:0;font-size:.88rem;color:var(--muted)}
@keyframes ansPulse{0%,100%{opacity:.5}50%{opacity:.9}}
.answer.thinking{animation:ansPulse 1.3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.answer.thinking{animation:none}}
/* The count belongs between the answer and the evidence, not above both. */
#status{margin:0 0 .4rem}

/* ---- listening while you read -------------------------------------------- */
/* The book and the audiobook are the same work, so a chapter plays itself
   rather than sending the reader to the front page to find it. */
.pc{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  font:inherit;background:rgba(255,255,255,.42);border:1px solid var(--rule);
  border-left:3px solid var(--accent);padding:.8rem 1rem;margin:0 0 1.8rem;cursor:pointer}
.pc:hover{background:rgba(255,255,255,.7)}
.pc-i{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ink);
  position:relative}
/* A triangle drawn in borders, so there is no glyph to go missing. */
.pc-i::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:.55rem solid var(--paper);border-top:.36rem solid transparent;
  border-bottom:.36rem solid transparent}
.pc.on .pc-i::before{border:0;width:.5rem;height:.62rem;left:50%;
  border-left:.17rem solid var(--paper);border-right:.17rem solid var(--paper)}
.pc-label{font-size:.95rem}
.pc-len{margin-left:auto;font-size:.78rem;color:var(--muted);white-space:nowrap}
.pc.on{border-left-color:var(--accent);background:rgba(138,28,20,.06)}

.btoc-listen{display:flex;align-items:center;gap:.45rem;padding:0 .85rem;font:inherit;
  font-size:.76rem;color:var(--muted);background:none;border:0;border-left:1px solid var(--rule);
  cursor:pointer;white-space:nowrap}
.btoc-listen:hover{color:var(--accent)}
.btoc-listen .pc-i{width:1.35rem;height:1.35rem;background:var(--muted)}
.btoc-listen:hover .pc-i{background:var(--accent)}
.btoc-listen .pc-i::before{border-left-width:.4rem;border-top-width:.26rem;border-bottom-width:.26rem}
.btoc-listen.on{color:var(--accent)}
.btoc-listen.on .pc-i{background:var(--accent)}
.btoc-min{font-variant-numeric:tabular-nums}
@media (max-width:44rem){
  .btoc-listen{padding:0 .5rem}
  .btoc-listen .pc-label{display:none}
  .pc-len{display:none}
}
@media print{.pc,.btoc-listen{display:none}}

/* ---- following the voice ------------------------------------------------- */
/* The passage being read is marked in the margin rather than washed in colour:
   the page is a book, and a highlighter through the prose would fight it. */
.bk-p.reading{background:rgba(138,28,20,.045)}
.bk-p.reading::before{content:"";position:absolute;left:-.85rem;top:.25em;bottom:.25em;
  width:2px;background:var(--accent)}
/* The line under the voice right now. */
.rline.now{background:rgba(138,28,20,.16);border-radius:2px;
  box-shadow:0 0 0 2px rgba(138,28,20,.16)}
@media (prefers-reduced-motion:no-preference){
  .rline{transition:background .18s}
}
@media print{.bk-p.reading,.rline.now{background:none;box-shadow:none}.bk-p.reading::before{display:none}}

/* ---- the claims, made visible -------------------------------------------- */
/* Always on. A labelled claim is marked by a rule in the margin, a tinted band
   and a word naming what kind of claim it is. No control, nothing to discover,
   nothing to switch on. */
.bk-p[data-conf]{padding:.15rem 0 .15rem .9rem;margin-left:-.9rem;
  border-left:3px solid var(--rule)}
.bk-p[data-conf=disputed]{border-left-color:#a8611c;background:rgba(168,97,28,.055)}
.bk-p[data-conf=conspiracy]{border-left-color:#8a1c14;background:rgba(138,28,20,.055)}
.bk-p[data-conf=reconstructed]{border-left-color:#3f6470;background:rgba(63,100,112,.055)}
/* The margin dagger is redundant once the paragraph says it in words. */
.bk-p[data-conf] .bk-cm{display:none}

.claim-chip{display:inline-block;margin-left:.5em;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);padding:.08em .45em;
  vertical-align:.18em;white-space:nowrap;cursor:help}
.bk-p[data-conf=disputed] .claim-chip{color:#8a5015;border-color:#cfa87c}
.bk-p[data-conf=conspiracy] .claim-chip{color:#8a1c14;border-color:#cb9a95}
.bk-p[data-conf=reconstructed] .claim-chip{color:#33535e;border-color:#9bb6c0}
@media print{
  .bk-p[data-conf]{background:none;border-left-color:#999}
  .claim-chip{border:0;color:#555;padding-left:0}
}

/* ---- following the voice ------------------------------------------------- */
/* The passage being read is marked in the margin rather than washed in colour:
   the page is a book, and a highlighter through the prose would fight it. */
.bk-p.reading{background:rgba(138,28,20,.045)}
.bk-p.reading::before{content:"";position:absolute;left:-.85rem;top:.25em;bottom:.25em;
  width:2px;background:var(--accent)}
/* The line under the voice right now. */
.rline.now{background:rgba(138,28,20,.16);border-radius:2px;
  box-shadow:0 0 0 2px rgba(138,28,20,.16)}
@media (prefers-reduced-motion:no-preference){
  .rline{transition:background .18s}
}
@media print{.bk-p.reading,.rline.now{background:none;box-shadow:none}.bk-p.reading::before{display:none}}

/* ---- the claims, made visible -------------------------------------------- */

/* A chip on the paragraph itself, so the label is a fact about the sentence
   rather than a symbol you have to remember the meaning of. */
.claim-chip{display:inline-block;margin-left:.5em;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);
  padding:.08em .45em;vertical-align:.18em;white-space:nowrap;cursor:help}
.bk-p[data-conf=disputed] .claim-chip{color:#a8611c;border-color:#d8b48c}
.bk-p[data-conf=conspiracy] .claim-chip{color:#8a1c14;border-color:#d6a7a2}
.bk-p[data-conf=reconstructed] .claim-chip{color:#3f6470;border-color:#a9c2cb}

/* Asking to see one kind lights that kind and leaves the rest alone. */

/* Show only the unsettled claims: the rest recede rather than vanish, so the
   reader can still see how much of the chapter is not in question. */

/* ---- the cast list on a wide screen ------------------------------------- */

/* The cast row was four grid columns with a paragraph of biography wedged into
   one of them, which on a desktop left a narrow ribbon of text beside a lot of
   nothing. Portrait, then everything about the person, reading normally. */
ul.cast li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1.4rem;
  align-items:start;padding:1.4rem .2rem;border-bottom:1px solid var(--rule)}
.cast-body{min-width:0}
.cast-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem;margin:0 0 .25rem}
.cast-head .cast-name{font-size:1.12rem}
.cast-head .cast-dates{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;margin:0}
.cast-head .age{margin:0}
ul.cast .cast-role{font-size:.85rem;color:var(--muted);margin:0 0 .5rem;max-width:52rem}
ul.cast .cast-bio{font-size:.9rem;color:var(--ink);opacity:.86;line-height:1.6;margin:0;max-width:52rem}
.tag-narr,.tag-none{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.1em .5em;color:var(--muted);white-space:nowrap}
.tag-narr{color:var(--accent);border-color:var(--accent)}
@media (max-width:52rem){
  ul.cast li{grid-template-columns:88px minmax(0,1fr);gap:1rem}
}

/* ---- meeting somebody in the text ---------------------------------------- */
/* The portrait sits in the margin beside the paragraph that first names them,
   so the prose is never interrupted, only accompanied. */
.ip{float:right;width:9.5rem;margin:.35rem -4.5rem 1rem 1.6rem;clear:right;
  shape-outside:margin-box}
.ip img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04);
  background:var(--rule);border:1px solid var(--rule)}
.ip figcaption{font-size:.74rem;line-height:1.45;color:var(--muted);margin-top:.4rem}
.ip figcaption b{display:block;color:var(--ink);font-weight:400;font-size:.82rem}
.ip-d{display:block;font-variant-numeric:tabular-nums;opacity:.8}
.ip-r{display:block;margin-top:.2rem}
.ip-n{display:block;margin-top:.25rem;color:var(--accent);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase}
/* Without a face the card is only words, so it should not pretend to be a plate. */
.ip-nophoto{width:8.5rem;border-left:2px solid var(--rule);padding-left:.6rem}
.ip-nophoto figcaption{margin-top:0}

/* Once the margin runs out, the card sits in the column instead. */
@media (max-width:74rem){ .ip{margin-right:0} }
@media (max-width:52rem){
  .ip{float:none;width:auto;display:flex;gap:.9rem;align-items:flex-start;
    margin:1rem 0;padding:.7rem;border:1px solid var(--rule);background:rgba(255,255,255,.3)}
  .ip img{width:72px;flex:none}
  .ip figcaption{margin-top:0}
  .ip-nophoto{border-left-width:3px;border-left-color:var(--accent)}
}
@media print{.ip{float:right;border:0;background:none}.ip img{filter:grayscale(1)}}

/* The front page offers the ways in, and the chapter list lives with the book. */
/* One row, one height, and the green one first because it is the offer. The
   buttons were different heights and wrapping onto a second line, which made
   the third look like an afterthought stapled on. */
.frontways{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin:1.5rem 0 1.3rem}
.frontways .btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem 1.3rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;margin:0}
.frontnote{font-size:.9rem;color:var(--muted);max-width:44rem;margin:0}
@media (max-width:38rem){
  .frontways{flex-direction:column;align-items:stretch}
  .frontways .btn{width:100%}
}

/* The now-playing title is the way back to the words being read. */
.player-meta .now{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.player-meta .now:hover{color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.16em}

/* Listen free is the one green thing on the page: it is the offer, and it is
   the only control that starts something rather than going somewhere. */
.btn.listen{background:#1f5c2f;border-color:#1f5c2f;color:var(--paper);
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.62rem 1.15rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.btn.listen::before{content:"";width:0;height:0;border-left:.42rem solid var(--paper);
  border-top:.28rem solid transparent;border-bottom:.28rem solid transparent}
.btn.listen:hover{background:#17462420;background:#174624;border-color:#174624}

/* The green button gets a little life on press, since it is the one control
   that starts something. */
.btn.listen{transition:background .15s,transform .08s}
.btn.listen:active{transform:translateY(1px)}