/* 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:.5rem}
  .topbar nav{gap:.3rem 1rem}
  .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}
.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){
  .hero{grid-template-columns:1fr;gap:1.75rem}
  .hero img{max-width:14rem}
  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. */
.wrap.wide{max-width:88rem}
.wrap.wide .lede{max-width:70rem}
/* 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;
  white-space:nowrap;margin-left:.5em}
.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}
}