/* ==========================================================================
   Avlokan — design tokens
   --------------------------------------------------------------------------
   Everything visual is driven by the custom properties in :root. To restyle
   the whole archive, edit this block and nothing else — every rule below
   consumes a token rather than a literal value. No build step, no toolchain,
   nothing to reinstall in five years.
   ========================================================================== */
:root{
  /* colour */
  --c-ink:#1a1a18;          /* body text                */
  --c-ink-soft:#3a3a35;     /* quotations               */
  --c-muted:#6b6b64;        /* secondary text           */
  --c-line:#e3e3dc;         /* rules and borders        */
  --c-bg:#fbfbf9;           /* page                     */
  --c-surface:#ffffff;      /* raised areas             */
  --c-accent:#2f5fa8;       /* links, active state      */
  --c-accent-ink:#ffffff;   /* text on accent           */
  --c-mark:#fbeec4;         /* the line now playing     */
  --c-hover:#f2f2ec;
  --c-letterbox:#000;       /* behind the video frame   */
  --c-have:#2f7a4f;         /* published and playable   */
  --c-unpublished:#b07d2b;  /* recorded, not published  */
  --c-missing:#b0b0a8;      /* no recording at all      */
  --c-offsite:#6b6b64;      /* published, but only YouTube will play it */

  /* type */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-indic:"Noto Sans Gujarati","Noto Sans Devanagari",var(--font-body);
  --size-xs:.75rem; --size-sm:.85rem; --size-md:.95rem; --size-base:1.0625rem;
  --size-lg:1.25rem; --size-xl:1.5rem;
  /* Gujarati and Devanagari carry more strokes in the same square than Latin
     does, and matras sit above and below the line. Set at the size the Latin
     text is, they read smaller than it and the conjuncts close up. The book
     is a book — it is read continuously, not glanced at — so it gets its own
     step, a little larger again. */
  --size-indic:1.25rem; --size-indic-book:1.4rem;
  --leading-tight:1.3; --leading-body:1.75; --leading-indic:1.9;
  --weight-normal:400; --weight-medium:500; --weight-bold:600;
  --track-caps:.06em;

  /* space — one scale, used everywhere */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:5rem;

  /* shape and layout */
  --radius:3px;
  --measure:46rem;          /* reading column           */
  --measure-watch:76rem;    /* wider, for a transcript beside its video */
  --measure-book:68rem;     /* the book, beside its index */
  --w-index:15rem;          /* the book's index column   */
  --measure-prose:34rem;    /* narrower, for continuous prose */
  --border:1px solid var(--c-line);
  --rule:3px;               /* the thick left-hand marker */
  --w-time:4rem;            /* timestamp gutter         */
  --w-number:2.5rem;        /* sitting-count column     */
  --w-cover:10rem;          /* a book cover             */
  --h-sticky:4.5rem;        /* masthead, for scroll-margin */
  --underline-offset:2px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--c-bg);color:var(--c-ink);
 font:var(--weight-normal) var(--size-base)/var(--leading-body) var(--font-body)}
main{max-width:var(--measure);margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-8)}
main.watching{max-width:var(--measure-watch)}
a{color:var(--c-accent)}
h1{font-size:var(--size-xl);line-height:var(--leading-tight);margin:var(--s-5) 0 var(--s-1)}
h2{font-size:var(--size-lg);margin:var(--s-6) 0 var(--s-2)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* ---------- text roles ---------- */
.tagline,.meta,.sub,.muted,.note{color:var(--c-muted);font-size:var(--size-sm)}
.lede{font-size:var(--size-lg);line-height:var(--leading-body)}
.indic{font-family:var(--font-indic);line-height:var(--leading-indic)}

/* ---------- masthead, crumbs, footer ---------- */
.masthead{display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap;
 padding:var(--s-4);border-bottom:var(--border);max-width:var(--measure);margin:0 auto}
.wordmark{font-weight:var(--weight-bold);letter-spacing:var(--track-caps);
 text-transform:uppercase;text-decoration:none;color:var(--c-ink)}
.navlink{margin-left:auto;font-size:var(--size-sm)}
.navlink+.navlink{margin-left:var(--s-3)}
.crumbs{margin:var(--s-3) 0 var(--s-1);font-size:var(--size-sm)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-1);margin:0;padding:0}
.crumbs li+li::before{content:"/";color:var(--c-line);margin-right:var(--s-1)}
.crumbs li[aria-current]{color:var(--c-muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
footer{max-width:var(--measure);margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-7);
 border-top:var(--border);color:var(--c-muted);font-size:var(--size-sm)}

/* ---------- controls ---------- */
.btn{font:inherit;font-size:var(--size-sm);padding:var(--s-1) var(--s-3);
 border:var(--border);border-radius:var(--radius);background:var(--c-surface);
 color:var(--c-ink);cursor:pointer}
.btn:hover{background:var(--c-hover)}
.btn[aria-pressed=true]{background:var(--c-ink);color:var(--c-accent-ink);border-color:var(--c-ink)}
.toolbar{position:sticky;top:0;z-index:5;display:flex;gap:var(--s-2);flex-wrap:wrap;
 align-items:center;background:var(--c-bg);border-bottom:var(--border);
 padding:var(--s-2) 0;margin-bottom:var(--s-3)}
.toolbar button{font:inherit;font-size:var(--size-sm);padding:var(--s-1) var(--s-3);
 border:var(--border);border-radius:var(--radius);background:var(--c-surface);
 color:var(--c-ink);cursor:pointer}
.toolbar button[aria-pressed=true]{background:var(--c-ink);color:var(--c-accent-ink);
 border-color:var(--c-ink)}

/* ---------- index and listings ---------- */
ul.texts{list-style:none;padding:0;margin:var(--s-5) 0;display:grid;gap:var(--s-5) var(--s-4);
 grid-template-columns:repeat(auto-fill,minmax(var(--w-cover),1fr))}
ul.texts a{display:block;text-decoration:none;color:inherit}
ul.texts .cover{display:block;width:100%;height:auto;aspect-ratio:780/1080;object-fit:cover;
 background:var(--c-hover);border:var(--border);border-radius:var(--radius)}
ul.texts a:hover .cover{border-color:var(--c-accent)}
ul.texts .cover-none{aspect-ratio:780/1080}
ul.texts .name{display:block;margin-top:var(--s-2);color:var(--c-accent);
 line-height:var(--leading-tight)}
ul.texts .sub{display:block;margin-top:var(--s-1);color:var(--c-muted);font-size:var(--size-sm)}
.text-head{display:flex;gap:var(--s-5);align-items:flex-start;margin:var(--s-5) 0 var(--s-4)}
.text-head .cover{flex:none;width:var(--w-cover);height:auto;border:var(--border);
 border-radius:var(--radius)}
.text-head h1{margin-top:0}
nav.series{margin:var(--s-5) 0;padding:var(--s-3) var(--s-4);background:var(--c-surface);
 border:var(--border);border-radius:var(--radius)}
nav.series .meta{margin:0}
nav.series .where{color:var(--c-ink);font-weight:var(--weight-medium)}
nav.series .links{display:flex;justify-content:space-between;gap:var(--s-4);margin:var(--s-2) 0 0}
nav.series .next{margin-left:auto;text-align:right}
nav.series details{margin-top:var(--s-3)}
nav.series summary{cursor:pointer;color:var(--c-muted);font-size:var(--size-sm)}
nav.series ol{margin:var(--s-2) 0 0;padding-left:var(--s-5);font-size:var(--size-sm)}
nav.series li{margin:var(--s-1) 0}
form.find{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
 margin:var(--s-5) 0 var(--s-3)}
form.find input[type=search]{flex:1;min-width:16rem;font:inherit;padding:var(--s-2) var(--s-3);
 border:var(--border);border-radius:var(--radius);background:var(--c-surface);color:var(--c-ink)}
form.find label{font-size:var(--size-sm);color:var(--c-muted);display:flex;
 align-items:center;gap:var(--s-2)}
ul.results{list-style:none;padding:0;margin:var(--s-4) 0}
ul.results li{padding:var(--s-3) 0;border-bottom:var(--border)}
ul.results a{text-decoration:none}
ul.results a:hover{text-decoration:underline}
ul.results .guj{font-family:var(--font-indic);line-height:var(--leading-indic);
 font-size:var(--size-indic)}
ul.results div{font-size:var(--size-sm);margin-top:var(--s-1)}
.block:target .w{background:var(--c-mark)}
nav.jump{margin:var(--s-4) 0 var(--s-6);line-height:2.1}
nav.jump a{display:inline-block;padding:var(--s-1) var(--s-3);margin:0 var(--s-1) var(--s-1) 0;
 border:var(--border);border-radius:var(--radius);text-decoration:none;
 font-size:var(--size-sm);color:var(--c-accent);background:var(--c-surface)}
nav.jump a:hover{background:var(--c-hover);border-color:var(--c-accent)}
nav.jump .jump-label{margin-right:var(--s-2);color:var(--c-muted);
 font-size:var(--size-sm);text-transform:uppercase;letter-spacing:var(--track-caps)}
nav.jump .yr{color:var(--c-muted);font-size:var(--size-xs)}
.run-block{margin:var(--s-6) 0}
.run-block h2{scroll-margin-top:var(--s-4);font-size:var(--size-lg);
 padding-bottom:var(--s-2);border-bottom:var(--border)}
.run-block h2 .muted{font-size:var(--size-sm);font-weight:var(--weight-normal)}
/* The player. It sits at the end of <body>, never inside the page, because
   moving an iframe reloads it and that would stop the recording every time you
   turned a page. While you are on its own page it is put exactly over the
   placeholder below; when you leave, it lets go and floats. */
#dock{z-index:20}
#dock .dock-frame{position:absolute;inset:0;background:var(--c-letterbox);
 border-radius:var(--radius);overflow:hidden}
#dock iframe,#dock .dock-frame>div{position:absolute;inset:0;width:100%;height:100%;border:0}
#dock .dock-bar{display:none}
#dock.afloat{position:fixed;right:var(--s-4);bottom:var(--s-4);left:auto;top:auto;
 width:min(26rem,84vw);height:auto;aspect-ratio:16/9;box-shadow:0 6px 28px rgba(0,0,0,.28);
 border-radius:var(--radius);background:var(--c-letterbox)}
#dock.afloat .dock-bar{display:flex;position:absolute;top:0;left:0;right:0;
 align-items:center;gap:var(--s-2);margin:0;padding:var(--s-1) var(--s-2);
 background:rgba(0,0,0,.72);color:#fff;font-size:var(--size-xs);
 border-radius:var(--radius) var(--radius) 0 0;z-index:2}
#dock.afloat .dock-title{color:#fff;text-decoration:none;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap;flex:1}
#dock.afloat .dock-title:hover{text-decoration:underline}
#dock.afloat .dock-close{flex:none;background:transparent;border:0;color:#fff;
 cursor:pointer;font-size:var(--size-base);line-height:1;padding:0 var(--s-1)}
/* The placeholder keeps the space and the sticky behaviour; the player above
   is laid over it. Once playing, its own play button is gone. */
.video.is-playing button.play{display:none}
@media (max-width:40rem){
  #dock.afloat{right:var(--s-2);bottom:var(--s-2);width:min(18rem,72vw)}
}

/* Video and transcript together. The recording stays put while the words
   scroll past it, because following a highlighted line is the whole point and
   scrolling to read used to carry the video off the top of the screen. */
.watch{margin-top:var(--s-5)}
.watch .stage{margin-bottom:var(--s-5)}
@media (min-width:64rem){
  .watch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
   gap:var(--s-6);align-items:start}
  .watch .stage{position:sticky;top:var(--s-4);margin-bottom:0}
  .watch .transcript{margin-top:0}
  .watch .transcript h2{margin-top:0}
}
/* Narrow: the recording pins to the top of the screen and gives up most of
   its height, so there is still room to read. */
@media (max-width:63.99rem){
  .watch .stage{position:sticky;top:0;z-index:5;background:var(--c-bg);
   padding:var(--s-2) 0;margin:0 0 var(--s-4)}
  .watch .stage .video{max-height:34vh;padding-top:min(56.25%,34vh);margin:0}
  .watch .stage .links{margin:var(--s-2) 0 0}
  .block{scroll-margin-top:42vh}
}
.mark{white-space:nowrap}
.mark .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
 margin-right:var(--s-2);vertical-align:baseline}
.mark-video .dot{background:var(--c-have)}
.mark-unpublished .dot{background:var(--c-unpublished)}
.mark-missing .dot{background:var(--c-missing)}
.mark-offsite .dot{background:var(--c-offsite)}
.mark-missing{color:var(--c-muted)}
p.unpublished{margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);
 background:var(--c-surface);border:var(--border);border-radius:var(--radius);
 font-size:var(--size-sm);color:var(--c-ink)}
.titlepage{text-align:center;font-family:var(--font-indic);
 line-height:var(--leading-indic);margin:var(--s-6) 0;padding-bottom:var(--s-5);
 border-bottom:var(--border);color:var(--c-ink-soft)}
.titlepage p{margin:var(--s-1) 0}
.titlepage p:first-child{font-size:var(--size-lg);color:var(--c-ink)}
ul.gallery{list-style:none;padding:0;margin:var(--s-5) 0;display:grid;gap:var(--s-4);
 grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
ul.gallery img{width:100%;height:auto;border:var(--border);border-radius:var(--radius);
 display:block}
ul.legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-4);padding:0;
 margin:var(--s-3) 0 0;font-size:var(--size-sm);color:var(--c-muted)}
table.listing td.pt{text-align:right;color:var(--c-muted);font-variant-numeric:tabular-nums;
 width:var(--w-number)}
figure.portrait{margin:0 0 var(--s-6)}
figure.portrait img{width:100%;height:auto;border-radius:var(--radius)}
figure.portrait figcaption{margin-top:var(--s-2);color:var(--c-muted);
 font-size:var(--size-sm)}
@media (max-width:34rem){.text-head .cover{width:7rem}}
table.listing{width:100%;border-collapse:collapse;font-size:var(--size-sm);margin-top:var(--s-4)}
table.listing th{text-align:left;font-size:var(--size-xs);text-transform:uppercase;
 letter-spacing:var(--track-caps);color:var(--c-muted);border-bottom:var(--border);
 padding:var(--s-1) var(--s-2)}
table.listing td{padding:var(--s-1) var(--s-2);border-bottom:var(--border)}

/* ---------- discourse ---------- */
.video{position:relative;padding-top:56.25%;background:var(--c-letterbox);border-radius:var(--radius);
 overflow:hidden;margin:var(--s-4) 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The play button stands in for the player until it is pressed, so opening a
   page fetches nothing at all — not even a thumbnail. */
.video.elsewhere{padding-top:0;background:var(--c-surface);border:var(--border);
 display:grid;place-content:center;gap:var(--s-2);padding:var(--s-6) var(--s-4);
 text-align:center;color:var(--c-ink)}
.video.elsewhere p{margin:0;max-width:var(--measure-prose)}
button.play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
 background:transparent;display:grid;place-items:center}
button.play:hover .play-mark,button.play:focus-visible .play-mark{background:var(--c-accent)}
.play-mark{width:4.5rem;height:3.2rem;border-radius:var(--radius);background:#5a5a5a;
 display:block;position:relative;transition:background .12s}
.play-mark::after{content:"";position:absolute;top:50%;left:50%;
 transform:translate(-42%,-50%);border-style:solid;border-width:.62rem 0 .62rem 1.05rem;
 border-color:transparent transparent transparent var(--c-accent-ink)}
.links{font-size:var(--size-sm)}
.links a{margin-right:var(--s-4)}
.transcript .note{margin:var(--s-1) 0 var(--s-4)}
.block{display:flex;gap:var(--s-3);margin:0 0 var(--s-3);scroll-margin-top:var(--h-sticky)}
.block .t{flex:none;width:var(--w-time);color:var(--c-muted);font-size:var(--size-sm);
 font-variant-numeric:tabular-nums;padding-top:.35rem}
.block .w{flex:1;font-family:var(--font-indic);line-height:var(--leading-indic);
 font-size:var(--size-indic)}
.block.is-live .w{background:var(--c-mark);box-shadow:0 0 0 var(--s-1) var(--c-mark);
 border-radius:var(--radius)}
.block .t[role=button]{cursor:pointer;color:var(--c-accent);text-decoration:underline;
 text-underline-offset:var(--underline-offset)}
.block.is-marked .w{border-left:var(--rule) solid var(--c-accent);padding-left:var(--s-2)}

/* ---------- prose and quotations ---------- */
.prose{max-width:var(--measure-prose)}
.prose h1{margin-top:var(--s-5)}
.prose blockquote{margin:var(--s-5) 0;padding:0 0 0 var(--s-4);
 border-left:var(--rule) solid var(--c-line);color:var(--c-ink-soft)}
.prose blockquote p{margin:var(--s-1) 0}
.prose blockquote p:first-child{font-family:var(--font-indic);line-height:var(--leading-indic)}
.prose blockquote p:last-child{color:var(--c-muted);font-size:var(--size-md);font-family:var(--font-body)}

/* ---------- the book ---------- */
.aphorism{padding:var(--s-5) 0;border-bottom:var(--border)}
.aphorism:last-child{border-bottom:0}
.aphorism .n{display:inline-block;font-size:var(--size-xs);letter-spacing:var(--track-caps);
 text-transform:uppercase;color:var(--c-muted);text-decoration:none}
.aphorism .n:hover{color:var(--c-accent)}
.aphorism .guj{font-family:var(--font-indic);line-height:var(--leading-indic);
 font-size:var(--size-indic-book);margin:var(--s-3) 0}
.aphorism .guj p{margin:0 0 var(--s-4)}
.aphorism .guj p:last-child{margin-bottom:0}
.aphorism .guj h3{font-size:var(--size-lg);line-height:var(--leading-tight);
 margin:var(--s-5) 0 var(--s-3);font-weight:var(--weight-medium)}
.aphorism .eng{color:var(--c-ink-soft);margin:var(--s-3) 0 0;
 padding-left:var(--s-4);border-left:var(--rule) solid var(--c-line)}
.aphorism .eng p{margin:var(--s-1) 0}
.aphorism .pending{color:var(--c-muted);font-size:var(--size-sm);font-style:italic;
 margin-top:var(--s-2)}
.book-head{border-bottom:var(--border);padding-bottom:var(--s-4);margin-bottom:var(--s-2)}

/* ---------- the book, beside its index ----------
   The index is real links in the page, not built by script: it is how you
   find your way through a hundred and fourteen aphorisms, and it has to work
   in a browser that runs nothing. Script only marks which one you are at. */
main.reading{max-width:var(--measure-book)}
/* `minmax(0,1fr)` and not `1fr`: a grid track's default minimum is its
   content's own width, and the index is a row of a hundred and fourteen
   links that scrolls sideways. Left to size itself the track grew to hold all
   of them, the column overflowed the screen, and the centred title page went
   with it — off the right-hand edge, leaving a band of nothing behind. */
.book-layout{display:grid;grid-template-columns:minmax(0,1fr);
 gap:var(--s-6);align-items:start}
@media (min-width:62rem){
  .book-layout{grid-template-columns:var(--w-index) minmax(0,1fr)}
  .book-index{position:sticky;top:var(--h-sticky);max-height:calc(100vh - var(--h-sticky) - var(--s-5));
   overflow-y:auto;overscroll-behavior:contain;border-right:var(--border);
   padding-right:var(--s-4)}
}
.book-index h2{margin:0 0 var(--s-3);font-size:var(--size-sm);
 letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--c-muted);
 font-weight:var(--weight-medium)}
.book-index ol{list-style:none;margin:0;padding:0}
.book-index li{margin:0}
.book-index a{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--s-2);
 padding:var(--s-2) var(--s-2) var(--s-2) 0;text-decoration:none;color:var(--c-ink-soft);
 border-radius:var(--radius);line-height:var(--leading-tight)}
.book-index a:hover{background:var(--c-hover);color:var(--c-ink)}
.book-index .num{font-size:var(--size-sm);color:var(--c-muted);
 font-variant-numeric:tabular-nums;text-align:right}
.book-index .open{font-family:var(--font-indic);font-size:var(--size-sm);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-index a[aria-current]{background:var(--c-hover);color:var(--c-ink)}
.book-index a[aria-current] .num{color:var(--c-accent);font-weight:var(--weight-bold)}
/* On a phone the same links become one scrollable row of numbers, so the book
   still begins at the top of the screen. A hundred and fourteen entries with
   their opening words would be a page of its own before the text started, and
   collapsing it behind a control would need script to stay collapsed. */
@media (max-width:61.999rem){
  .book-index{position:sticky;top:0;z-index:5;margin:0 calc(-1 * var(--s-4));
   padding:var(--s-2) var(--s-4);background:var(--c-bg);
   border-bottom:var(--border)}
  .book-index h2{position:absolute;width:1px;height:1px;overflow:hidden;
   clip-path:inset(50%);white-space:nowrap}
  .book-index ol{display:flex;gap:var(--s-1);overflow-x:auto;
   overscroll-behavior-x:contain;scroll-snap-type:x proximity;
   -webkit-overflow-scrolling:touch}
  .book-index li{scroll-snap-align:center}
  .book-index a{display:block;padding:var(--s-2) var(--s-3);min-width:2.75rem;
   text-align:center}
  .book-index .open{display:none}
  .book-index .num{text-align:center;font-size:var(--size-md)}
}
.aphorism:target{scroll-margin-top:var(--h-sticky)}

/* ---------- where you left off ----------
   Quiet on purpose. It sits above the texts and must not compete with them:
   a way back in for someone who was already listening, not an invitation. */
.recent[hidden]{display:none}
.recent{margin:var(--s-6) 0 var(--s-7);padding-top:var(--s-5);
 border-top:var(--border)}
.recent h2{margin:0 0 var(--s-4);font-size:var(--size-sm);
 letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--c-muted);
 font-weight:var(--weight-medium)}
.recent ol{list-style:none;margin:0;padding:0}
.recent li{border-bottom:var(--border)}
.recent li:last-child{border-bottom:0}
.recent a{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
 padding:var(--s-3) 0;text-decoration:none;color:var(--c-ink)}
.recent a:hover{background:var(--c-hover)}
.recent a strong{font-weight:var(--weight-medium)}
.recent a:hover strong{color:var(--c-accent);
 text-decoration:underline;text-underline-offset:var(--underline-offset)}
.recent .muted{font-size:var(--size-sm);color:var(--c-muted)}
.recent .at{margin-left:auto;font-size:var(--size-sm);color:var(--c-muted);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.recent .forget{margin-top:var(--s-3);font:inherit;font-size:var(--size-sm);
 padding:var(--s-1) var(--s-3);color:var(--c-muted);background:none;
 border:var(--border);border-radius:var(--radius);cursor:pointer}
.recent .forget:hover{color:var(--c-ink);background:var(--c-surface)}

@media (max-width:34rem){
  .recent .at{margin-left:0;width:100%}
}

/* ---------- the correction form ----------
   Hidden until Shift+E or ?edit. Deliberately plain: it is a tool, not part
   of the archive, and it should not look like something a reader was meant
   to find. */
.fix[hidden]{display:none}
.fix{margin:var(--s-6) 0 0;padding:var(--s-5);background:var(--c-hover);
 border:var(--border);border-radius:var(--radius)}
.fix h2{margin:0 0 var(--s-2);font-size:var(--size-lg)}
.fix .note{margin:0 0 var(--s-4)}
.fix label{display:block;margin-bottom:var(--s-3);font-size:var(--size-sm);
 letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--c-muted)}
.fix input,.fix textarea{display:block;width:100%;margin-top:var(--s-1);
 padding:var(--s-2) var(--s-3);font:inherit;font-size:var(--size-md);
 text-transform:none;letter-spacing:normal;color:var(--c-ink);
 background:var(--c-surface);border:var(--border);border-radius:var(--radius)}
.fix textarea{line-height:var(--leading-body);resize:vertical}
.fix input:focus,.fix textarea:focus{outline:2px solid var(--c-accent);
 outline-offset:1px}
.fix button{font:inherit;font-size:var(--size-md);padding:var(--s-2) var(--s-4);
 border:var(--border);border-radius:var(--radius);background:var(--c-surface);
 color:var(--c-ink);cursor:pointer}
.fix button[type=submit]{background:var(--c-accent);border-color:var(--c-accent);
 color:var(--c-accent-ink)}
.fix .said{margin:var(--s-3) 0 0;font-size:var(--size-sm);color:var(--c-muted);
 white-space:pre-wrap;word-break:break-word}
/* A sitting whose record has been corrected by hand. */
.corrected{font-size:var(--size-sm);color:var(--c-muted);margin-top:var(--s-4);
 padding-left:var(--s-4);border-left:var(--rule) solid var(--c-unpublished)}

@media (max-width:34rem){
  .block{flex-direction:column;gap:var(--s-1)}
  .block .t{width:auto;padding:0}
}