/* ABOUTME: Long-form reading layout (essays, privacy policy, plain pages) for singular.php.
   ABOUTME: Same devices as site.css - mono for structure, sans for prose, dotted rules. Tokens only. */

/* ---------- document header ---------- */
.hero--doc{padding-bottom:clamp(2rem,4vw,3.25rem)}
.hero--doc h1{max-width:22ch}
.doc-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}

/* ---------- layout: reading column + section rail ---------- */
.longform{--read:68ch;padding-bottom:var(--band)}
.longform--toc{
  display:grid;grid-template-columns:minmax(0,var(--read)) minmax(12rem,15rem);
  justify-content:space-between;gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
@media (max-width:1023px){
  .longform--toc{display:block}
}

/* ---------- prose ---------- */
.prose--long{max-width:var(--read);overflow-wrap:break-word}
.prose--long > * + *{margin-top:1.15em}
.prose--long p{max-width:none}
.prose--long strong{font-weight:640;color:var(--e-text)}
.prose--long ::selection{background:var(--e-red-100);color:var(--e-ink-900)}
/* site.js fades every heading in as it scrolls into view. In a long document that
   leaves a heading blank right after a jump to it, so the article fades in once,
   as a whole, and its headings are simply there. */
html.js-reveal .prose--long [data-reveal]{opacity:1;transform:none;transition:none}

/* Section heads: the largest level the document uses (tagged .sec by the template).
   A dotted rule above, more air above than below. */
.prose--long .sec{
  clear:both;
  font-family:var(--font-sans);font-size:var(--step-2);font-weight:640;
  line-height:1.15;letter-spacing:-.02em;text-transform:none;color:var(--e-text);
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(1.5rem,3vw,2rem);
  background-image:radial-gradient(var(--e-rule) .6px,transparent .6px);
  background-size:var(--e-dither-cell) 1px;background-repeat:repeat-x;background-position:0 0;
}
.prose--long > .sec:first-child{margin-top:0}
.prose--long .sec{scroll-margin-top:calc(var(--header-clear) + 1rem)}
.prose--long .sec:focus{outline:none}
.prose--long .sec:focus-visible{outline:2px solid var(--e-accent);outline-offset:6px}

/* Sub-heads under a section. */
.prose--long :is(h2,h3):not(.sec){
  font-size:var(--step-1);line-height:1.25;letter-spacing:-.01em;margin-top:2.6rem;
}
/* Smallest heads are labels, so they take the site's mono label voice. */
.prose--long :is(h4,h5,h6):not(.sec){
  font-family:var(--font-mono);font-size:var(--step--1);font-weight:600;
  letter-spacing:var(--track-wide);text-transform:uppercase;line-height:1.4;
  margin-top:2.4rem;
}
.prose--long :is(h2,h3,h4,h5,h6) + *{margin-top:.7rem}
.prose--long :is(h4,h5,h6):not(.sec) + *{margin-top:.55rem}

/* Lists */
/* site.css strips list styling from any classed list; WordPress classes every list. */
.prose--long :is(ul,ol){padding-left:1.35em}
.prose--long ul{list-style:disc}
.prose--long ol{list-style:decimal}
.prose--long li + li,
.prose--long li > :is(ul,ol){margin-top:.45em}
.prose--long li::marker{color:var(--e-accent-text)}
.prose--long ol > li::marker{font-family:var(--font-mono);font-size:.88em}

/* Media */
.prose--long :is(figure,.wp-block-image){margin-block:2.25rem}
.prose--long img{height:auto;border-radius:var(--radius-comp)}
.prose--long :is(figcaption,.wp-element-caption){
  margin-top:.65rem;font-size:var(--step--1);line-height:1.45;color:var(--e-text-muted);
}
.prose--long .aligncenter,
.prose--long .aligncenter img{margin-inline:auto}
.prose--long .alignright{float:right;max-width:min(45%,22rem);margin:.35rem 0 1.25rem clamp(1.25rem,3vw,2.25rem)}
.prose--long .alignleft{float:left;max-width:min(45%,22rem);margin:.35rem clamp(1.25rem,3vw,2.25rem) 1.25rem 0}
@media (max-width:640px){
  .prose--long :is(.alignright,.alignleft){float:none;max-width:100%;margin:2rem 0}
}

/* Tables scroll inside their own frame instead of widening the page. */
.prose--long .wp-block-table{
  overflow-x:auto;border:1px solid var(--glass-border);border-radius:var(--radius-comp);
  background:color-mix(in srgb,var(--e-bg-raised) 70%,transparent);
}
.prose--long .wp-block-table table{margin:0}
.prose--long td{font-variant-numeric:tabular-nums}

.prose--long blockquote{
  padding-left:clamp(1rem,2.5vw,1.5rem);border-left:1px solid var(--e-accent);
  font-size:var(--step-1);line-height:1.45;color:var(--e-text);
}
.prose--long hr{
  border:0;height:1px;margin-block:3rem;
  background-image:radial-gradient(var(--e-rule) .6px,transparent .6px);
  background-size:var(--e-dither-cell) 1px;background-repeat:repeat-x;
}
.prose--long code{
  font-family:var(--font-mono);font-size:.88em;
  background:var(--e-paper-200);padding:.1em .35em;border-radius:4px;
}
.prose--long .doc-end{margin-top:clamp(3rem,6vw,4.5rem)}

/* ---------- on this page ---------- */
.toc ol{list-style:none;padding:0;margin:0}
.toc a{
  display:block;padding:.42rem 0 .42rem 1rem;margin-left:-1px;
  border-left:1px solid transparent;
  font-size:var(--step--1);line-height:1.35;color:var(--e-text-muted);text-decoration:none;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.toc a:hover{color:var(--e-text)}
.toc a[aria-current]{color:var(--e-accent-text);border-left-color:var(--e-accent)}

.toc__label,
.toc summary{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--e-text-muted);
}

/* Desktop: a sticky rail beside the text. */
.toc--rail{
  position:sticky;top:var(--header-clear);
  max-height:calc(100vh - var(--header-clear) - 2rem);overflow-y:auto;overscroll-behavior:contain;
}
.toc--rail .toc__label{margin-bottom:.9rem}
/* Logged-in users: the WordPress admin bar sits above the floating header. */
.admin-bar .toc--rail{top:calc(var(--header-clear) + var(--wp-admin--admin-bar--height,32px))}
.admin-bar .prose--long .sec{scroll-margin-top:calc(var(--header-clear) + var(--wp-admin--admin-bar--height,32px) + 1rem)}
.toc--rail ol{border-left:1px solid var(--e-rule)}

/* Narrow screens: a collapsed list above the text. */
.toc--inline{display:none;margin-bottom:2.5rem}
.toc--inline details{
  border:1px solid var(--e-rule);border-radius:var(--radius-comp);
  background:color-mix(in srgb,var(--e-bg-raised) 70%,transparent);
}
.toc--inline summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:48px;padding:.75rem 1rem;cursor:pointer;list-style:none;color:var(--e-text);
}
.toc--inline summary::-webkit-details-marker{display:none}
.toc--inline summary::after{
  content:"";width:.5rem;height:.5rem;flex:0 0 auto;margin-top:-.2rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease);
}
.toc--inline details[open] summary::after{transform:rotate(225deg);margin-top:.2rem}
.toc--inline summary:focus-visible{outline:2px solid var(--e-accent);outline-offset:3px;border-radius:var(--radius-comp)}
.toc--inline ol{padding:0 1rem 1rem}
.toc--inline a{border-left:0;padding-left:0}

@media (max-width:1023px){
  .toc--rail{display:none}
  .toc--inline{display:block}
}
@media (prefers-reduced-motion:reduce){
  .toc a,.toc--inline summary::after{transition:none}
}