/* The Hitching Post — site styles.

   Dark is the ground, not a variant: it is the register the show is written in,
   and prefers-color-scheme cannot tell "no preference" from "light" (the
   no-preference value was dropped from Media Queries 5 and no browser reports
   it), so honouring the OS would hand most readers the other scheme. Light is
   one click away and remembered; see theme.js.

   FONTS ARE NOT LOADED HERE, and none will be. Remit §8: nothing that phones
   home without asking; self-hosting woff2 was weighed and declined. The stacks
   below are what ships, and nothing in the design depends on the exact face. */

:root{
  --bg:#151412; --panel:#1b1a17; --ink:#e6e1d8; --head:#f6f2ea;
  --muted:#a89f8f; --faint:#918878; --accent:#c9a227;
  --rule:#2e2b26; --link:#cfc8bb; --underline:#6b6355;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --measure:34rem;      /* speech column cap */
  --gutter:124px;       /* speaker-label column */
  --colgap:28px;        /* between the two */
  /* The content column on a transcript. Narrower than the shell on purpose --
     the rules and the page heading keep the full width, and this sits centred
     beneath them rather than hanging off the left edge. */
  --column:calc(var(--gutter) + var(--colgap) + var(--measure));
  --pad:clamp(20px,5vw,56px);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#faf8f4; --panel:#f3efe7; --ink:#201e1b; --head:#16140f;
  --muted:#5b5347; --faint:#6d6558; --accent:#85670f;
  --rule:#e2ddd2; --link:#3c382f; --underline:#bdb5a6;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* One measure for the chrome and the content under it, so the wordmark, the
   rule beneath it and the first line of the page all start on the same edge.
   The front page is the only one that earns the extra width, because it is the
   only one laid out in columns. */
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 18px/1.72 var(--serif);
  --shell:min(940px,100% - 2 * var(--pad))}
body.front{--shell:min(1120px,100% - 2 * var(--pad))}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--underline);text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

h1,h2,h3{color:var(--head);font-weight:400}
.eyebrow{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
.faint{color:var(--faint)}
.guests{font:400 16px/1.5 var(--serif);color:var(--muted);margin:6px 0 0}
.sub{font:italic 400 16px/1.55 var(--serif);color:var(--muted);margin:0 0 20px;max-width:44ch}
.more{margin:22px 0 0}
.more a{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---- chrome ------------------------------------------------------------- */

.topbar{width:var(--shell);margin:0 auto;padding:22px 0 18px;
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule)}
.wordmark{font:500 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;text-decoration:none;
  display:inline-flex;align-items:center;gap:.7em}
/* Sized in em so it tracks the wordmark, which is larger on the front page.
   flex:none because a flex item's default min-width would let it squash. */
.mark{width:1.7em;height:1.7em;flex:none;overflow:visible}
a.wordmark:hover{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--underline)}
.front .wordmark{font-size:15px;letter-spacing:.2em}
.topnav{margin-left:auto;display:flex;align-items:baseline;gap:22px;
  font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* The quotations page is called What guests have said, and the bar says so
   while the bar is wide enough for it; under 720px it says Said, which is what
   the path says. Both words ship in the markup and CSS picks one, so the label
   does not depend on a script. */
.topnav .navshort{display:none}
/* A subscription, not a page. Set back from the two links that are pages. */
.topnav .feedlink{color:var(--faint);margin-left:8px}
.topnav .feedlink:hover{color:var(--accent)}
/* Fixed width: the sun and the moon are not the same width, and a button that
   changed size as you pressed it would nudge the bar around. */
.themebtn{background:none;border:1px solid var(--rule);border-radius:3px;
  color:var(--muted);font:400 18px/1.1 var(--mono);letter-spacing:0;
  width:32px;padding:2px 0 3px;text-align:center;cursor:pointer}
.themebtn:hover{color:var(--accent);border-color:var(--accent)}

.page{width:var(--shell);margin:0 auto;padding:clamp(30px,5vw,56px) 0 96px}

/* ---- front page --------------------------------------------------------- */

.frontgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,52px)}
.cell{min-width:0}
.cell-closing,.cell-credits{grid-column:1}
.cell-closing{grid-column:1/-1;padding-top:30px;border-top:1px solid var(--rule)}
.cell-closing p{margin:0 0 14px;max-width:56ch;color:var(--muted)}
.cell-credits,.cell-contact{padding-top:30px;border-top:1px solid var(--rule);
  font-size:16px;line-height:1.6}
.cell-credits p,.cell-contact p{margin:0 0 14px}
.role{font:500 11px/1.6 var(--mono);letter-spacing:.09em;color:var(--accent)}
.aside{font:italic 400 15px/1.55 var(--serif);color:var(--muted)}
.address a{font:500 13px/1.6 var(--mono);letter-spacing:.02em}

.curnum{font:500 12px/1.5 var(--mono);letter-spacing:.09em;color:var(--accent);margin:0 0 10px}
.curtitle{display:block;font:400 clamp(28px,4.2vw,38px)/1.2 var(--serif);
  color:var(--head);text-decoration:none;max-width:20ch}
.curtitle:hover{color:var(--accent)}
.curmeta{font:400 15px/1.5 var(--serif);color:var(--faint);margin:8px 0 0}

.recent{list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.recentrow{display:grid;grid-template-columns:2.4em 1fr auto;gap:0 16px;
  align-items:baseline;padding:9px 0;font-size:16px}
.recentnum{font:500 12px/1.5 var(--mono);letter-spacing:.09em;color:var(--faint)}
.recenttitle{color:var(--link)}
.recentdate{font:500 11px/1.6 var(--mono);letter-spacing:.05em;color:var(--faint);
  text-align:right;white-space:nowrap}

/* ---- the quotation panel ------------------------------------------------ */

.cell-said{background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(22px,2.6vw,30px);align-self:start}
.quote{margin:0 0 26px}
.quote:last-child{margin-bottom:0}
.quote p{font:400 19px/1.58 var(--serif);color:var(--ink);margin:0 0 10px;
  max-width:44ch;text-wrap:pretty}
.quote cite{font:500 11px/1.6 var(--mono);letter-spacing:.09em;color:var(--accent);
  font-style:normal}

/* Rotating: quotes.js stacks them and fades between. Only ever applied when
   the script runs and motion is welcome, so the no-JS page keeps the stack. */
.quotes.is-rotating{position:relative}
/* visibility keeps the quotations that are not showing out of the accessibility
   tree, but flipping it at once would cut the fade-out short and read as a
   blink. Held until the fade has finished on the way out, dropped immediately
   on the way in, so the two genuinely cross. */
.quotes.is-rotating .quote{position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.quotes.is-rotating .quote.is-on{opacity:1;visibility:visible;
  transition:opacity .55s ease,visibility 0s}
.qnav{display:flex;gap:14px;margin-top:20px;
  font:500 11px/1.6 var(--mono);letter-spacing:.1em}
.qbtn{background:none;border:0;padding:2px 4px;cursor:pointer;
  color:var(--faint);font:inherit}
.qbtn:hover{color:var(--accent)}

/* ---- before the first episode ------------------------------------------- */

.holding{max-width:34rem;margin-inline:auto;padding-top:clamp(10px,5vw,50px)}
.holding p{margin:0 0 18px;color:var(--muted)}
.holding .lede{font:400 clamp(24px,3.6vw,31px)/1.28 var(--serif);color:var(--head);
  margin-bottom:22px}
.holding .sign{font:500 11px/1.6 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin:36px 0 0}

/* ---- episodes index ----------------------------------------------------- */

.pagehead{padding-bottom:26px;margin-bottom:38px;border-bottom:1px solid var(--rule)}
.pagehead h1{font:400 clamp(27px,4.4vw,34px)/1.22 var(--serif);margin:0}
.idx,.lost{list-style:none;margin:0;padding:0}
.idxrow{display:grid;grid-template-columns:3em 1fr auto;gap:0 22px;
  align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.idxnum{font:500 13px/1.4 var(--mono);letter-spacing:.08em;color:var(--accent)}
.idxmain{min-width:0}
.idxtitle{font:400 21px/1.3 var(--serif);color:var(--head);text-underline-offset:4px}
.idxmain .guests{display:block}
.idxdate{font:500 11px/1.6 var(--mono);letter-spacing:.05em;color:var(--faint);
  text-align:right;white-space:nowrap}

.lostsec{margin-top:52px}
.lostrow{display:grid;grid-template-columns:3em 1fr auto;gap:0 22px;
  align-items:baseline;padding:10px 0;font-size:16px}
.lostmain{min-width:0}
.lostguest{color:var(--link)}
.losttopic{color:var(--muted)}
.losttopic::before{content:' — '}
.marker{font:500 10px/1.6 var(--mono);letter-spacing:.06em;color:var(--faint);
  text-align:right;white-space:nowrap}

/* ---- all the quotations ------------------------------------------------- */

/* The measure sits on the blockquote rather than the paragraph so the
   attribution can be set against the same right edge. It could not be capped on
   the paragraph: `ch` is relative to the element's own font, and the cite is
   smaller and monospaced, so 44ch there would be a different width entirely.
   The blockquote carries the paragraph's size for the same reason -- 44ch has
   to mean 44 characters of the quotation. */
.allsaid{display:grid;gap:34px;font-size:20px;max-width:44ch;margin-inline:auto}
.allsaid .quote{margin:0;padding-bottom:30px;border-bottom:1px solid var(--rule);
  font-size:inherit}
.allsaid .quote:last-child{border-bottom:0;padding-bottom:0}
.allsaid .quote p{font-size:inherit;max-width:none;margin-bottom:16px}
/* The dash is presentation, not content: the quotation fragments are shared
   with the front page's panel, where the attribution is a quiet label rather
   than a set-off line. */
.allsaid .quote cite{display:block;text-align:right;
  font-size:15px;letter-spacing:.03em}
.allsaid .quote cite::before{content:"\2013\00a0"}

/* ---- episode transcript ------------------------------------------------- */

.ephead{display:grid;grid-template-columns:var(--gutter) minmax(0,var(--measure));
  justify-content:center;gap:0 var(--colgap);
  padding-bottom:26px;margin-bottom:40px;border-bottom:1px solid var(--rule)}
.epnum{font:500 12px/1.5 var(--mono);letter-spacing:.09em;color:var(--accent);padding-top:8px}
.ephead h1{font:400 clamp(27px,4.4vw,33px)/1.22 var(--serif);margin:0}
.epmeta{font:400 15px/1.5 var(--serif);color:var(--faint);margin:6px 0 0}
.ephead .guests{margin-top:10px}

.transcript{display:grid;grid-template-columns:var(--gutter) minmax(0,var(--measure));
  justify-content:center;gap:22px var(--colgap);align-items:baseline}
.label{font:500 12px/1.5 var(--mono);letter-spacing:.09em;color:var(--accent)}
.speech{margin:0;max-width:var(--measure)}
.speech em{font-style:italic}
.wide{grid-column:1/-1}
.note{font:italic 400 14px/1.6 var(--serif);color:var(--faint);margin:2px 0}
i.note{font-size:.8em}
.brk{grid-column:1/-1;height:26px}          /* --- is space, not a rule */
.transcript h2.wide{font:400 22px/1.3 var(--serif);margin:38px 0 4px}

.docs{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:var(--gutter) minmax(0,var(--measure));
  justify-content:center;gap:0 var(--colgap)}
.docs h2{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0}
.docs ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  font-size:15px;line-height:1.5}

/* Unobtrusive: two quiet blocks, no buttons, no arrows the width of a thumb. */
.pn{display:grid;grid-template-columns:repeat(2,calc((var(--column) - 24px) / 2));
  justify-content:center;gap:24px;margin-top:60px;padding-top:24px;
  border-top:1px solid var(--rule)}
.pn-prev,.pn-next{min-width:0;text-decoration:none;color:var(--link)}
.pn-next{text-align:right}
.pn a:hover .pntitle{color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent)}
.pnlab{display:block;font:500 10px/1.6 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.pntitle{font:400 17px/1.35 var(--serif);color:var(--link)}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width:560px){
  .topbar{gap:12px 16px;padding-bottom:14px}
  .topnav{margin-left:0;width:100%;justify-content:space-between;gap:14px}
}
/* The point where the wordmark and the four nav items stop sharing a line. */
@media (max-width:720px){
  .topnav .navlong{display:none}
  .topnav .navshort{display:inline}
}
@media (max-width:860px){
  .frontgrid{grid-template-columns:1fr;gap:34px}
  .cell-closing,.cell-credits{grid-column:auto}
  .curtitle{max-width:none}
}
@media (max-width:640px){
  body{font-size:17px}
  /* The gutter cannot survive, so the label runs in ahead of the speech --
     which is the printed-transcript convention and needs no width. */
  .transcript,.ephead,.docs{display:block}
  .transcript .label{display:inline;margin:0}
  .transcript .label::after{content:':'}
  .transcript .speech{display:inline}
  .transcript .speech::after{content:'';display:block;height:17px}
  .transcript h2.wide,.note.wide{margin-top:26px}
  .epnum{padding-top:0;margin-bottom:12px}
  /* The break stays. Hiding it ran the two words together -- generated content
     cannot put the space back, br takes none -- and two short lines are right
     for the label here anyway. */
  .docs h2{margin-bottom:14px}
  .idxrow,.lostrow,.recentrow{grid-template-columns:2.6em 1fr}
  .idxdate,.recentdate,.marker{grid-column:2;text-align:left;margin-top:4px}
  .pn{grid-template-columns:minmax(0,1fr);gap:18px}
  .pn-next{text-align:left}
  .pn-prev:empty,.pn-next:empty{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}
@media print{
  .topbar,.pn,.qnav{display:none}
  :root{--bg:#fff;--ink:#000;--head:#000;--panel:#fff}
}