/* essay.css — Essays & Legacy pages */
.essay-head{padding:var(--s-12) 0 var(--s-8)}
@media(min-width:900px){.essay-head{padding:var(--s-16) 0 var(--s-8)}}
.essay-head h1{font-family:var(--serif);font-weight:300;font-size:var(--t-h1);line-height:1.06;letter-spacing:-.015em;max-width:16em;margin:var(--s-3) 0 var(--s-4)}
.standfirst{font-size:var(--t-lead);line-height:1.55;color:var(--dim);max-width:var(--measure)}
.essay-body{padding:0 0 var(--s-16)}
.essay-body .prose,.essay-body .sources,.essay-body .related{margin-left:auto;margin-right:auto}
.essay-body .prose p:first-child::first-letter{font-family:var(--serif);font-size:3.4em;line-height:.86;float:left;padding:.06em .1em 0 0;font-weight:300}
.essay-body .prose h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.3;margin:2em 0 .6em;letter-spacing:-.005em}
.dispute,.archival-note.inline{max-width:var(--measure);margin:var(--s-8) auto;border-left:2px solid var(--eerie);padding:var(--s-1) 0 var(--s-1) var(--s-4)}
.dispute .dl{font-size:var(--t-caption);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}
.dispute p{font-family:var(--sans)!important;font-size:0.96rem!important;line-height:1.65!important;margin-bottom:.9em!important;color:var(--dim)}
.dispute p strong{color:var(--eerie);font-weight:500}
.related{max-width:var(--measure);margin:var(--s-12) auto 0}
.related p.label{margin-bottom:var(--s-2)}
.related a{display:block;text-decoration:none;color:inherit;padding:var(--s-2) 0;border-top:1px solid var(--platinum);font-family:var(--serif);font-size:var(--t-lead);transition:padding-left var(--dur-base) var(--ease)}
.related a:hover{padding-left:6px}
.related a span.rm{display:block;font-family:var(--sans);font-size:var(--t-caption);color:var(--dim);margin-top:2px}
/* Essays index */
.erow{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--platinum);padding:var(--s-6) 0}
.erow:last-of-type{border-bottom:1px solid var(--platinum)}
.erow .inner{display:grid;grid-template-columns:1fr;gap:var(--s-2)}
@media(min-width:820px){.erow .inner{grid-template-columns:190px 1fr auto;gap:var(--s-6);align-items:baseline}}
.erow h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.14;letter-spacing:-.01em;transition:transform var(--dur-base) var(--ease)}
.erow p{color:var(--dim);max-width:32em;margin-top:var(--s-1)}
.erow .arrow{font-family:var(--serif);font-size:var(--t-h3);color:var(--platinum);justify-self:end;display:none;transition:color var(--dur-base) var(--ease)}
@media(min-width:820px){.erow .arrow{display:block}}
.erow:hover .arrow{color:var(--eerie)}
.erow:hover h3{transform:translateX(6px)}

/* ---------- INLINE FIGURES INSIDE ESSAY PROSE ----------
   These sit between paragraphs, at the argument's turns — not appended
   at the foot of the page. They break the measure slightly wider than
   the text so the reader registers them as evidence, not decoration. */
.inline-fig{
  margin:var(--s-12) 0;
  max-width:none;
  width:100%;
}
@media(min-width:1000px){
  /* Pull marginally wider than the prose measure on large screens. */
  .inline-fig{width:calc(100% + 5rem);margin-left:-2.5rem;margin-right:-2.5rem}
}
.inline-fig img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.03);
}
.inline-fig figcaption{
  font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;
  color:var(--dim);margin-top:var(--s-2);max-width:38em;
}
@media(min-width:1000px){.inline-fig figcaption{padding-left:2.5rem}}
/* The Tashkent sleeve is a square record cover, not a photograph —
   give it its own narrower column so it doesn't dominate. */
.inline-fig img[src*="essay10a"]{max-width:520px;margin:0 auto}
@media(min-width:1000px){.inline-fig img[src*="essay10a"]{margin-left:2.5rem}}

/* ---------- ESSAY SUB-NAVIGATION ----------
   The full run of essays at the foot of each one, so a reader can move
   sideways without going back to the index. Current essay is marked and
   not a link target the eye has to search for. */
.esub{border-top:1px solid var(--eerie);padding-top:var(--s-4);margin-top:var(--s-16)}
.esub-head{font-size:var(--t-caption);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-3)}
.esub-list{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.esub-list{grid-template-columns:1fr 1fr;column-gap:var(--s-8)}}
.esub-item{
  display:grid;grid-template-columns:2.4em 1fr;gap:var(--s-2);align-items:baseline;
  padding:var(--s-2) 0;border-bottom:1px solid var(--platinum);
  text-decoration:none;color:inherit;
  transition:padding-left var(--dur-base) var(--ease);
}
.esub-item:hover{padding-left:6px}
.esub-num{font-family:var(--serif);font-size:var(--t-caption);color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}
.esub-t{font-family:var(--serif);font-size:1.05rem;line-height:1.3}
.esub-item[aria-current="page"]{border-bottom-color:var(--eerie)}
.esub-item[aria-current="page"] .esub-t{font-style:italic;color:var(--dim)}
.esub-item[aria-current="page"] .esub-num{color:var(--eerie);font-weight:500}
.esub-item[aria-current="page"]:hover{padding-left:0;cursor:default}



/* Hero image directly below an essay title. Full measure, generous air after,
   so the opening paragraph does not sit tight against it. */
.essay-hero{margin:var(--s-8) auto var(--s-12);max-width:var(--page);padding:0 var(--s-3)}
.essay-hero img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03)}
.essay-hero figcaption{font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;
  color:var(--dim);margin-top:var(--s-2);max-width:44em}

/* A note written on the back of a photographic print. Set as a transcription,
   not as prose: the line breaks are the writer's, and the hand is contemporaneous. */
.fig-verso{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:var(--s-2) 0 var(--s-2)}
blockquote.verso{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.65;
  color:var(--eerie);border-left:1px solid var(--platinum);padding-left:var(--s-3);
  margin:0;max-width:36em}

/* ---------- ESSAY INDEX, GROUPED ---------- */
.eg-strip{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-top:var(--s-6);
  padding-top:var(--s-3);border-top:1px solid var(--platinum)}
.eg-strip a{font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.14em;color:var(--dim);text-decoration:none;padding:.25em 0;
  transition:color var(--dur-fast) var(--ease)}
.eg-strip a:hover{color:var(--eerie)}

.egroup{margin-top:var(--s-16);scroll-margin-top:var(--s-8)}
.eg-head{max-width:var(--measure);margin-bottom:var(--s-6)}
.eg-title{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);
  line-height:1.1;letter-spacing:-.01em}
.eg-note{font-size:var(--t-lead);line-height:1.55;color:var(--dim);margin-top:var(--s-2)}
.eg-count{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--platinum);margin-top:var(--s-2)}

.eg-rows{border-top:1px solid var(--eerie)}
.erow{display:grid;grid-template-columns:1fr auto;gap:var(--s-3);
  padding:var(--s-4) 0;border-bottom:1px solid var(--platinum);
  text-decoration:none;color:inherit;
  transition:padding-left var(--dur-base) var(--ease)}
@media(min-width:800px){.erow{grid-template-columns:9rem 1fr auto;gap:var(--s-6)}}
.erow:hover{padding-left:6px}
.erow:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.er-meta{display:flex;flex-direction:column;gap:.4em;align-items:flex-start}
.er-y{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;
  color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.er-flag{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--platinum);padding:.2em .5em}
.er-body{display:block;min-width:0}
.er-h{display:block;font-family:var(--serif);font-size:var(--t-h3);line-height:1.2}
.er-d{display:block;font-size:var(--t-caption);line-height:1.65;color:var(--dim);
  margin-top:.45em;max-width:44em}
.er-arrow{align-self:center;color:var(--platinum);font-size:1.1rem;
  transition:color var(--dur-fast) var(--ease)}
.erow:hover .er-arrow{color:var(--eerie)}

/* ---------- ESSAY RAIL, GROUPED ----------
   Fixed right, as before. Grouped so it stays the same height whether the
   register holds fifteen essays or fifty: the current group is open, the
   rest are collapsed headings that open on click. */
.essay-rail{display:none}
@media(min-width:1300px){
  .essay-rail{position:fixed;right:var(--s-6);top:50%;transform:translateY(-50%);
    z-index:40;display:block;width:12.5rem;max-height:76vh;overflow-y:auto;
    padding-left:var(--s-3);border-left:1px solid var(--platinum);
    overscroll-behavior:contain}
  .essay-rail::-webkit-scrollbar{width:2px}
  .essay-rail::-webkit-scrollbar-thumb{background:var(--platinum)}
  .essay-rail .er-head{display:flex;justify-content:space-between;align-items:baseline;
    font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-3)}
  .er-all{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--platinum)}
  .er-all:hover{color:var(--eerie)}

  .erg{margin-bottom:var(--s-2)}
  .erg-t{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);
    cursor:pointer;font-family:var(--sans);font-size:10px;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
    padding:.45em 0;border-bottom:1px solid var(--platinum);
    transition:color var(--dur-fast) var(--ease)}
  .erg-t:hover{color:var(--eerie)}
  .erg.is-open .erg-t{color:var(--eerie)}
  .erg-n{font-size:9px;color:var(--platinum);font-variant-numeric:tabular-nums}
  .erg-list{display:none;flex-direction:column;padding:.3em 0 .5em}
  .erg.is-open .erg-list{display:flex}
  .erg-item{font-family:var(--serif);font-size:.84rem;line-height:1.3;
    color:var(--dim);text-decoration:none;padding:.34em 0;
    transition:color var(--dur-fast) var(--ease)}
  .erg-item:hover{color:var(--eerie)}
  .erg-item.is-current{color:var(--eerie);font-style:italic}
  .erg-item:focus-visible{outline:2px solid var(--eerie);outline-offset:2px}
}
@media(min-width:1600px){.essay-rail{right:calc(50% - 40rem)}}

/* Lists recovered from ASCII tables in source documents. */
.jl{list-style:none;margin:var(--s-4) 0;padding-left:var(--s-4);
  border-left:1px solid var(--platinum);max-width:var(--measure)}
.jl li{font-size:.96rem;line-height:1.7;color:var(--dim);padding:.18em 0}

/* ---------- CONTACT FORM ----------
   Set as a document, not as a web form: generous measure, no boxes
   around anything that does not need one, and the routes read as
   choices rather than radio buttons. */
.cform{max-width:44rem;margin-top:var(--s-8)}
.cf-row{margin-bottom:var(--s-8)}
.cf-two{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media(min-width:700px){.cf-two{grid-template-columns:1fr 1fr;gap:var(--s-8)}}

.cf-label{display:block;font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}

.cf-input{width:100%;appearance:none;background:transparent;
  border:none;border-bottom:1px solid var(--platinum);
  font-family:var(--serif);font-size:1.05rem;line-height:1.6;color:var(--eerie);
  padding:.5em 0;transition:border-color var(--dur-fast) var(--ease)}
.cf-input:focus{outline:none;border-bottom-color:var(--eerie)}
.cf-input::placeholder{color:var(--platinum)}
.cf-area{resize:vertical;min-height:11rem;border:1px solid var(--platinum);padding:var(--s-3)}
.cf-area:focus{border-color:var(--eerie)}
.cf-hint{font-size:var(--t-caption);line-height:1.65;color:var(--dim);margin-top:var(--s-2);max-width:42em}

/* Routes */
.cf-routes{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--eerie)}
@media(min-width:700px){.cf-routes{grid-template-columns:1fr 1fr;column-gap:var(--s-8)}}
.cf-route{display:block;cursor:pointer;padding:var(--s-3) 0;
  border-bottom:1px solid var(--platinum);
  transition:padding-left var(--dur-base) var(--ease)}
.cf-route:hover{padding-left:5px}
.cf-route input{position:absolute;opacity:0;width:1px;height:1px}
.cr-t{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.3;color:var(--dim);
  transition:color var(--dur-fast) var(--ease)}
.cr-d{display:block;font-family:var(--sans);font-size:var(--t-caption);line-height:1.5;
  color:var(--platinum);margin-top:.25em}
.cf-route input:checked ~ .cr-t{color:var(--eerie)}
.cf-route input:checked ~ .cr-t::before{content:'\2014\00a0'}
.cf-route input:checked ~ .cr-d{color:var(--dim)}
.cf-route input:focus-visible ~ .cr-t{outline:2px solid var(--eerie);outline-offset:3px}

/* The honeypot must be unreachable to people but present to bots:
   never display:none, which some bots skip. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-foot{border-top:1px solid var(--platinum);padding-top:var(--s-6)}
.cf-send{appearance:none;cursor:pointer;background:var(--eerie);color:var(--white);
  border:1px solid var(--eerie);
  font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;padding:1em 3em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.cf-send:hover{background:transparent;color:var(--eerie)}
.cf-send:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.cf-send[disabled]{opacity:.45;cursor:default}
.cf-note{font-size:var(--t-caption);line-height:1.7;color:var(--dim);
  margin-top:var(--s-4);max-width:42em}

.cf-alt{margin-top:var(--s-12);padding-top:var(--s-4);border-top:1px solid var(--platinum);
  max-width:44rem}
.cf-alt a{font-family:var(--serif);font-size:1.05rem;color:var(--eerie);
  text-decoration:none;border-bottom:1px solid var(--platinum)}
.cf-alt a:hover{border-bottom-color:var(--eerie)}

/* Banners */
.cf-banner{max-width:44rem;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-8);
  font-size:var(--t-caption);line-height:1.7}
.cf-ok{border-left:2px solid var(--eerie);background:var(--apparatus)}
.cf-err{border-left:2px solid var(--dim);background:var(--apparatus)}
.cf-banner a{color:var(--eerie)}

/* ---------- VIDEO FACADE ----------
   A still frame and a play button. The YouTube iframe is created only
   on click, so a reader who came to read loads nothing from YouTube. */
.vfacade{position:relative;margin:var(--s-8) 0 var(--s-12);max-width:var(--page);
  aspect-ratio:16/9;background:var(--eerie) center/cover no-repeat;overflow:hidden}
.vfacade.has-poster::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,.15) 0%,rgba(20,20,20,.72) 100%)}
.vf-btn{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.35em;padding:var(--s-5);text-align:left;cursor:pointer;
  background:transparent;border:none;color:var(--white);
  transition:background var(--dur-base) var(--ease)}
.vf-btn:hover{background:rgba(20,20,20,.18)}
.vf-btn:focus-visible{outline:2px solid var(--white);outline-offset:-6px}
.vf-play{display:block;width:0;height:0;margin-bottom:var(--s-3);
  border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent var(--white);
  transition:transform var(--dur-base) var(--ease)}
.vf-btn:hover .vf-play{transform:scale(1.12)}
.vf-t{font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;max-width:26em}
.vf-m{font-family:var(--sans);font-size:var(--t-caption);letter-spacing:.02em;opacity:.82}
.vfacade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfacade.is-playing::after{display:none}
.vfacade figcaption{position:absolute;left:0;right:0;bottom:0;
  transform:translateY(100%);padding-top:var(--s-2);
  font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;color:var(--dim)}

/* Timecodes inside the prose. */
.tc{font-family:var(--sans);font-size:.72em;font-weight:500;letter-spacing:.08em;
  color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;
  border:1px solid var(--platinum);padding:.15em .5em;margin:0 .15em}

/* ---------- OUTBOUND VIDEO ----------
   Where a film is not embedded — because the only available copy was
   posted by someone other than the rights holder — it is named,
   credited and linked, with the situation stated plainly. */
.vlink{max-width:var(--measure);margin:var(--s-8) 0 var(--s-12);
  border-top:1px solid var(--eerie);padding-top:var(--s-4)}
.vl-label{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}
.vl-t{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);line-height:1.2}
.vl-m{font-family:var(--sans);font-size:var(--t-caption);color:var(--dim);margin-top:.4em}
.vl-go{margin:var(--s-4) 0}
.vl-go a{font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--eerie);text-decoration:none;
  border-bottom:1px solid var(--platinum);padding-bottom:.3em;
  transition:border-color var(--dur-fast) var(--ease)}
.vl-go a:hover{border-bottom-color:var(--eerie)}
.vl-note{font-size:var(--t-caption);line-height:1.7;color:var(--dim);
  padding-top:var(--s-3);border-top:1px solid var(--platinum)}