/* walpo.com — one typeface, one ornament, a great deal of air. */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #18181a;
  --ink-soft: #3a3a3e;
  --muted: #76767c;
  --rule: #e6e6e9;
  --accent: #27475f;
  --accent-soft: rgba(39, 71, 95, 0.55);
  --measure: 40rem;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121213;
    --ink: #e9e6df;
    --ink-soft: #c9c5bc;
    --muted: #8d897f;
    --rule: #2b2c2e;
    --accent: #a9c2d8;
    --accent-soft: rgba(169, 194, 216, 0.5);
  }
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.55;
  font-feature-settings: 'kern', 'liga', 'onum' 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  overflow-x: clip;
}
.nb { white-space: nowrap; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
::selection { background: var(--accent); color: var(--paper); }

main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

/* ---- Header & footer ------------------------------------------------- */

.top {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}
.top .brand { font-weight: 500; letter-spacing: 0.005em; }
.top .brand.mark { display: inline-flex; width: 1.6rem; height: 1.6rem; opacity: 0.8; transition: opacity 0.3s var(--ease); }
.top .brand.mark:hover { opacity: 1; }
.top nav { display: flex; gap: 1.5rem; }
.top nav a, .top .brand, .foot a, .ext, .about-links a, .plain a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
  padding-bottom: 1px;
}
.top nav a:hover, .top .brand:hover, .foot a:hover, .ext:hover, .about-links a:hover, .plain a:hover,
.top nav a[aria-current] { background-size: 100% 1px; }
.top nav a[aria-current] { color: var(--muted); }

.foot {
  width: 100%;
  max-width: var(--measure);
  margin: 6rem auto 0;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot-links { display: flex; gap: 1.25rem; }

/* ---- Arrival --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: arrive 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
@keyframes arrive { to { opacity: 1; transform: none; } }

/* ---- The armillary --------------------------------------------------- */

.motif {
  stroke: var(--accent-soft);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  overflow: visible;
}
.motif-turn {
  transform-origin: 100px 100px;
  transform-box: view-box;
  animation: turn 320s linear infinite;
}
.motif-turn > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.6s var(--ease) forwards;
}
.motif-turn > *:nth-child(2) { animation-delay: 0.25s; }
.motif-turn > *:nth-child(3) { animation-delay: 0.5s; }
.motif-turn > *:nth-child(4) { animation-delay: 0.75s; }
.motif-turn > *:nth-child(5) { animation-delay: 1.1s; animation-duration: 1.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes turn { to { transform: rotate(360deg); } }

/* With sphere.js the figure turns in three dimensions instead. */
.motif.is-3d .motif-turn { animation: none; }
.motif.is-3d .back { opacity: 0.32; }

.motif-mini { width: 100%; height: 100%; stroke-width: 0.9; stroke: var(--ink); }
.motif-mini .motif-turn > * { animation-duration: 1.4s; }
.motif-hero {
  position: absolute;
  right: -0.5rem;
  top: 0;
  width: clamp(9rem, 22vw, 14rem);
  height: auto;
  pointer-events: none;
  animation-delay: 0s;
}

/* ---- Home ------------------------------------------------------------ */

.hero, .about { position: relative; padding: clamp(12rem, 30vh, 16rem) 0 3.5rem; }
.hero h1, .about h1 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 4.25rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.tagline {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--muted);
}

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.posts li { border-bottom: 1px solid var(--rule); }
.posts .empty { padding: 2rem 0; color: var(--muted); font-style: italic; }
.post-link {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  grid-template-areas: 'date title' 'date sub';
  column-gap: 1.5rem;
  padding: 1.6rem 0 1.7rem;
  align-items: baseline;
}
.post-link time {
  grid-area: date;
  font-size: 0.82rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 0.45rem;
  font-feature-settings: 'onum', 'pnum';
  transition: color 0.3s var(--ease);
}
.post-title {
  grid-area: title;
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.005em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease), color 0.3s var(--ease), transform 0.5s var(--ease);
  width: fit-content;
  max-width: 100%;
}
.post-sub {
  grid-area: sub;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.45;
}
.post-link:hover .post-title { color: var(--accent); background-size: 100% 1px; }
.post-link:hover time { color: var(--ink-soft); }

/* ---- Affiliations ---------------------------------------------------- */

.orgs {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  margin: 2.4rem 0 0;
}
.org {
  position: relative;
  display: inline-block;
  height: 2.1rem;
  color: var(--muted);
  line-height: 0;
}
.org svg { height: 100%; width: auto; display: block; }
.org-grey, .org-colour { display: block; height: 100%; transition: opacity 0.7s var(--ease); }
.org-colour { position: absolute; inset: 0; opacity: 0; }
.org:hover .org-colour, .org:focus-visible .org-colour { opacity: 1; }
.org:hover .org-grey, .org:focus-visible .org-grey { opacity: 0; }
.org-grey path, .org-grey rect, .org-grey circle, .org-grey text { fill: currentColor; }
.org-grey [fill="none"] { fill: none; }
.org-grey .k { fill: var(--paper); }
@media (prefers-color-scheme: dark) {
  .org-colour .dm { fill: var(--ink); }
}

/* ---- Subscribe ------------------------------------------------------- */

.subscribe { margin: 4rem 0 0; }
.subscribe label {
  display: block;
  font-size: 0.82rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.subscribe-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s var(--ease);
}
.subscribe-row:focus-within { border-color: var(--accent); }
.subscribe input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.15rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.7rem 0 0.6rem;
}
.subscribe input::placeholder { color: var(--muted); opacity: 0.7; font-style: italic; }
.subscribe input:focus { outline: none; }
.subscribe button {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.7rem 0 0.6rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.subscribe button:hover { color: var(--accent); }

/* ---- Post ------------------------------------------------------------ */

.post-head { padding: clamp(3.5rem, 10vh, 6rem) 0 2.5rem; }
.meta {
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-feature-settings: 'onum', 'pnum';
}
.meta .dot { margin: 0 0.6em; }
.post-head h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5.5vw, 3.1rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.subtitle {
  margin: 1rem 0 0;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--muted);
  font-style: italic;
  text-wrap: pretty;
}

.post-body { font-size: 1.16rem; line-height: 1.6; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.35em; text-wrap: pretty; }
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--accent-soft);
  transition: text-decoration-color 0.3s var(--ease);
}
.post-body a:hover { text-decoration-color: var(--accent); }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.7em;
  text-wrap: balance;
}
.post-body h1, .post-body h2 { font-size: 1.7rem; }
.post-body h3 { font-size: 1.35rem; }
.post-body h4 { font-size: 1.15rem; font-style: italic; font-weight: 400; }
.post-body h5, .post-body h6 { font-size: 0.85rem; font-variant-caps: all-small-caps; letter-spacing: 0.08em; margin: 2.4em 0 0.7em; }
.post-body strong { font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.35em; }
.post-body li { margin: 0.35em 0; }
.post-body li p { margin: 0; }
.post-body hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem auto;
  width: 5rem;
}
.post-body blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.35rem;
  border-left: 1px solid var(--accent-soft);
  color: var(--ink-soft);
  font-style: italic;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body .pullquote { margin: 2.5rem 0; font-size: 1.5rem; line-height: 1.3; font-style: italic; }
.post-body pre, .post-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.post-body pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  line-height: 1.5;
  margin: 0 0 1.5em;
}
.post-body pre code { font-size: inherit; }
.post-body code { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 0.1em 0.35em; border-radius: 3px; }
.post-body pre code { background: none; padding: 0; }
.post-body img, .post-body video { max-width: 100%; height: auto; display: block; }
.post-body img { margin: 0 auto; }
.post-body figure, .post-body .captioned-image-container { margin: 2.5rem 0; }
.post-body .captioned-image-container figure { margin: 0; }
.post-body figcaption, .post-body .image-caption {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.post-body a.image-link { text-decoration: none; display: block; cursor: default; }
.post-body .image-link-expand { display: none; }
.post-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: 0.95em; }
.post-body th, .post-body td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.post-body th { font-weight: 500; }
.post-body iframe { max-width: 100%; }
.post-body .youtube-wrap, .post-body .embedded-post-wrap, .post-body .tweet { margin: 2rem 0; }
.post-body .footnote { display: flex; gap: 0.7rem; font-size: 0.95rem; color: var(--ink-soft); margin: 1em 0; }
.post-body .footnote-number { color: var(--muted); text-decoration: none; flex: none; }
.post-body .footnote-content p { margin: 0 0 0.6em; }
.post-body sup, .post-body .footnote-anchor { font-size: 0.7em; line-height: 0; vertical-align: super; text-decoration: none; margin-left: 0.1em; }
.post-body .subscription-widget-wrap, .post-body .button-wrapper, .post-body .subscribe-widget,
.post-body .post-cta, .post-body .share-dialog { display: none !important; }

.post-foot { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.ext { font-size: 0.95rem; color: var(--muted); }
.ext:hover { color: var(--ink); }
.post-foot .subscribe { margin-top: 3rem; }

/* ---- About & plain pages -------------------------------------------- */

.about-text { margin-top: 2.5rem; font-size: 1.3rem; line-height: 1.45; max-width: 30ch; }
.about-text p { margin: 0 0 0.9em; text-wrap: pretty; }
.about-links { margin-top: 2.5rem; display: flex; gap: 1.5rem; color: var(--muted); font-size: 0.95rem; }
.about-links a:hover { color: var(--ink); }

.plain { padding: clamp(5rem, 14vh, 9rem) 0 3rem; }
.plain h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 300; line-height: 1.05; }
.plain p { margin: 0 0 0.5rem; }

/* ---- Small screens --------------------------------------------------- */

@media (max-width: 40rem) {
  body { font-size: 1.05rem; }
  .top { padding-top: 1.25rem; }
  .hero, .about { padding-top: 9.5rem; }
  .motif-hero { right: -1rem; top: 0; width: 7.5rem; }
  .orgs { gap: 1.5rem; margin-top: 2rem; }
  .org { height: 1.85rem; }
  .post-link { grid-template-columns: 1fr; grid-template-areas: 'date' 'title' 'sub'; row-gap: 0.35rem; padding: 1.35rem 0 1.45rem; }
  .post-link time { padding-top: 0; }
  .post-title { font-size: 1.35rem; }
  .post-body { font-size: 1.08rem; }
  .subscribe-row { flex-direction: column; align-items: stretch; gap: 0; }
  .subscribe button { text-align: left; padding-top: 0.35rem; }
  .foot { margin-top: 4rem; flex-wrap: wrap; }
}

/* ---- Motion preferences ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none; }
  .motif-turn { animation: none; }
  .motif-turn > * { stroke-dashoffset: 0; animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- Landing: one screen, no scrolling ------------------------------- */

.top { padding-top: 1.25rem; }
body.home { height: 100dvh; min-height: 0; }
body.home main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: clamp(1rem, 3.5vh, 2.25rem);
}

.intro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
  padding-top: clamp(1.5rem, 7vh, 5rem);
}
.intro h1 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(2.3rem, 6.5vw, 3.9rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.intro-text {
  grid-column: 1;
  margin-top: clamp(1rem, 2.6vh, 1.75rem);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
.intro-text p { margin: 0 0 0.6em; text-wrap: pretty; }
.intro-text p:last-child { margin-bottom: 0; }
.intro .orgs { grid-column: 1; margin-top: clamp(1.1rem, 3vh, 2rem); }
.intro .motif-hero {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 3;
  width: clamp(8.5rem, 22vw, 14rem);
  align-self: center;
}

.latest {
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--rule);
}
.latest .meta { margin-bottom: 0.6rem; }
.latest-link { display: block; }
.latest-link .post-title { display: block; font-size: clamp(1.35rem, 3vw, 1.6rem); }
.latest-link .post-sub { display: block; margin-top: 0.35rem; }
.latest-link:hover .post-title { color: var(--accent); background-size: 100% 1px; }
.all-notes {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.all-notes:hover { color: var(--ink); }

body.home .subscribe { margin-top: auto; padding-top: clamp(1.25rem, 3vh, 2rem); }

.notes-head { padding: clamp(2rem, 7vh, 4.5rem) 0 1.75rem; }
.notes-head h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 300; line-height: 1.05; }
.foot { margin-top: 4rem; }

@media (max-width: 40rem) {
  .intro { grid-template-columns: 1fr auto; }
  .intro h1 { grid-column: 1 / -1; }
  .intro .motif-hero { grid-row: 2 / span 2; width: 6.25rem; align-self: start; margin-top: 1rem; }
  .intro-text { font-size: 1.02rem; }
  .org { height: 1.7rem; }
  .orgs { gap: 1.35rem; }
  .latest-link .post-sub { font-size: 0.98rem; }
  body.home .subscribe-row { flex-direction: row; align-items: flex-end; gap: 1rem; }
  body.home .subscribe button { padding-top: 0.7rem; }
}
@media (max-height: 700px) {
  .intro { padding-top: 1rem; }
  .latest { margin-top: 1.25rem; }
  .intro-text { font-size: 1rem; }
}
/* name spans the full width; the sphere sits beside the words below it */
.intro h1 { grid-column: 1 / -1; }
.intro .motif-hero { grid-row: 2 / span 2; }
.intro-text { max-width: 38ch; }
@media (max-height: 820px) and (min-width: 40.01rem) {
  .intro { padding-top: 0.75rem; }
  .intro h1 { font-size: 3.3rem; }
  .intro-text { margin-top: 0.9rem; font-size: 1.12rem; }
  .intro .orgs { margin-top: 1.1rem; }
  .intro .motif-hero { width: 10.5rem; }
  .latest { margin-top: 1.4rem; padding-top: 1rem; }
  .all-notes { margin-top: 0.5rem; }
}
@media (max-height: 600px) {
  .intro h1 { font-size: 2.1rem; }
  .intro-text { font-size: 0.97rem; margin-top: 0.7rem; }
  .intro .orgs { margin-top: 0.9rem; }
  .latest { margin-top: 1rem; padding-top: 0.8rem; }
  .latest-link .post-title { font-size: 1.2rem; }
  .all-notes { margin-top: 0.4rem; }
  body.home .subscribe { padding-top: 0.8rem; }
}
/* centre the whole landing composition vertically; subscribe follows closely */
body.home main { justify-content: center; }
body.home .subscribe { margin-top: 0; padding-top: clamp(1.5rem, 5vh, 3rem); }
.intro { padding-top: 0; }
body.home main { padding-top: clamp(0.5rem, 2vh, 1.5rem); }
@media (max-height: 600px) {
  .all-notes { display: none; }
  .intro-text p { margin-bottom: 0.4em; }
  .intro-text { line-height: 1.38; }
}

/* Social links: a quiet line under the emblems */
.social {
  grid-column: 1;
  display: flex;
  gap: 1.4rem;
  margin: clamp(0.8rem, 2vh, 1.2rem) 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.social a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
  padding-bottom: 1px;
}
.social a:hover { color: var(--ink); background-size: 100% 1px; }
.intro .motif-hero { grid-row: 2 / span 3; pointer-events: auto; cursor: default; }
.motif .streak { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 40rem) {
  .intro .motif-hero { grid-row: 2 / span 2; }
  .social { gap: 1.1rem; font-size: 0.88rem; }
}
@media (max-height: 600px) {
  .social { margin-top: 0.5rem; font-size: 0.85rem; }
  .intro .orgs { margin-top: 0.7rem; }
  .org { height: 1.55rem; }
}
@media (max-height: 600px) { .latest { margin-top: 0.8rem; } }
@media (max-height: 600px) { body.home main { padding-bottom: 0.6rem; } .top { padding-top: 0.9rem; } }
@media (max-height: 600px) {
  body.home .subscribe label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Social icons in the header, after About / Notes */
.top nav { align-items: center; }
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  margin-left: 0.4rem;
  padding-left: 1.35rem;
  border-left: 1px solid var(--rule);
  height: 1rem;
}
.top nav a.soc {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--muted);
  background: none;
  padding: 0;
  transition: color 0.5s var(--ease), transform 0.5s var(--ease);
}
.top nav a.soc:hover, .top nav a.soc:focus-visible { color: var(--hover); transform: translateY(-1px); }
.soc svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@media (max-width: 40rem) {
  .top nav { gap: 1.1rem; }
  .social-icons { gap: 0.85rem; padding-left: 1.1rem; margin-left: 0.1rem; }
}

/* ---- Post headings: three tiers, whatever H-levels Substack used ---- */

.post-body .hd { scroll-margin-top: 1.5rem; text-wrap: balance; font-style: normal; }
.post-body .hd-a {
  font-size: 1.62rem;
  font-weight: 450;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 3.2rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.post-body > .hd-a:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.post-body .hd-b {
  font-size: 1.24rem;
  font-weight: 450;
  font-style: italic;
  line-height: 1.25;
  margin: 2.3rem 0 0.6rem;
}
.post-body .hd-c {
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 2rem 0 0.4rem;
}
.post-body .hd-a + .hd-b { margin-top: 1.2rem; }
.post-body .hd + p { margin-top: 0; }
@media (max-width: 40rem) {
  .post-body .hd-a { font-size: 1.42rem; margin-top: 2.6rem; padding-top: 1.3rem; }
  .post-body .hd-b { font-size: 1.15rem; }
}

/* ---- Contents: a quiet column on the left on wide screens ---------- */

.post-main { position: relative; }
.toc { display: none; }
@media (min-width: 76rem) {
  .toc {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + 3.5rem);
    width: 14rem;
  }
  .toc-inner { position: sticky; top: 2.5rem; max-height: calc(100dvh - 5rem); overflow-y: auto; scrollbar-width: none; }
  .toc-inline { display: none; }
}
.toc-label, .toc-inline summary {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.toc ol, .toc-inline ol { list-style: none; margin: 0; padding: 0; }
.toc li, .toc-inline li { margin: 0; }
.toc a, .toc-inline a {
  display: block;
  padding: 0.32rem 0 0.32rem 0.9rem;
  border-left: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--muted);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
  text-wrap: pretty;
}
.toc .toc-b a, .toc-inline .toc-b a { padding-left: 1.7rem; font-size: 0.84rem; font-style: italic; }
.toc a:hover, .toc-inline a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--accent); }

.toc-inline {
  margin: 0 0 2.5rem;
  padding: 0.9rem 0 0.4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.toc-inline summary { cursor: pointer; margin: 0 0 0.5rem; list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: ' +'; }
.toc-inline[open] summary::after { content: ' –'; }
.toc-inline ol { padding-bottom: 0.6rem; }

/* ---- Quotations ------------------------------------------------------ */

/* Block quote: the quoted voice, set in from the text with a hairline. */
.post-body blockquote.q-block {
  margin: 2.2rem 0;
  padding: 0.15rem 0 0.15rem 1.4rem;
  border-left: 1px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
  font-size: 1.08em;
  line-height: 1.55;
}
.post-body blockquote.q-block p { margin: 0 0 0.8em; }
.post-body blockquote.q-block p:last-child { margin-bottom: 0; }

/* Pull quote: a line lifted out of the text, centred between two short rules. */
.post-body blockquote.q-pull {
  margin: 3rem auto;
  padding: 1.6rem 0;
  max-width: 32rem;
  text-align: center;
  border: 0;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
.post-body blockquote.q-pull::before,
.post-body blockquote.q-pull::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 3rem;
  height: 1px;
  margin-left: -1.5rem;
  background: var(--accent);
}
.post-body blockquote.q-pull::before { top: 0; }
.post-body blockquote.q-pull::after { bottom: 0; }
.post-body blockquote.q-pull p { margin: 0 0 0.6em; }
.post-body blockquote.q-pull p:last-of-type { margin-bottom: 0; }

/* Attribution, for either kind. */
.post-body .q-cite {
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.8rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.post-body .q-cite::before { content: '— '; }
.post-body blockquote.q-pull .q-cite { margin-top: 1.1rem; }
@media (max-width: 40rem) {
  .post-body blockquote.q-pull { font-size: 1.25rem; margin: 2.4rem auto; }
}