/* ═══════════════════════════════════════════════════════════
   The Powwow Guy — pagermanpowwow.com
   A quiet book page. Type: Libre Caslon Display (headings),
   Libre Caslon Text (body), UnifrakturMaguntia (masthead only).
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:        #f7f3ea;
  --paper:     #fffdf8;
  --text:      #2a2118;
  --accent:    #8b2c2c;
  --accent-dk: #6e2020;
  --muted:     #6f6253;
  --rule:      #d4c5a8;
  --rule-soft: rgba(212, 197, 168, 0.45);
  --max-width: 39rem;
  --max-width-wide: 56rem;
  /* 'Powwow Cross' leads each stack but carries one glyph, so it serves
     the charm cross and defers to Caslon for every other character. */
  --display:   'Powwow Cross', 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --body:      'Powwow Cross', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --fraktur:   'Powwow Cross', 'UnifrakturMaguntia', 'Libre Caslon Display', serif;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ───────────────────────────────────────────────── */
html { font-size: 112.5%; }  /* 18px at the browser default, but scales if the reader has changed it */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.8;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The masthead and footer are not prose — they should not be held to the
   reading measure. Without this the nav wraps to two lines at every width. */
.site-header .container,
.site-footer .container { max-width: var(--max-width-wide); }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  text-wrap: balance;
}
/* The scale is the only hierarchy tool here: Libre Caslon Display ships one
   weight, so a step that reads as a step has to come from size and the space
   around it. h3 sat 15% above body in the same face and colour, which is not
   enough separation to carry a reference page of twenty sections. */
h1 { font-size: 2rem;   margin-bottom: 1rem; }
h2 { font-size: 1.5rem; margin: 3.25rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 2.25rem 0 0.55rem; }
/* h4 is a label, not a title. Kept quieter than h3 on purpose: uppercase and
   letterspaced reads loud, and at its old size it outranked the h3 above it. */
h4 {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 0.5rem;
}
/* A heading that opens the page body needs no run-in space above it. */
.page-body > h2:first-child,
.page-body > h3:first-child { margin-top: 0; }

p            { margin-bottom: 1.25rem; text-wrap: pretty; }
ul, ol       { margin: 0 0 1.25rem 1.4rem; }
li           { margin-bottom: 0.4rem; }
strong       { font-weight: 700; }
em           { font-style: italic; }

/* One quotation shape, not two. This used to carry a tan rule and muted text
   while .quote-block carried a red rule and full-strength text, so a page
   showing both read as an inconsistency rather than a distinction. The charm
   is the treatment that is meant to look different, and it still does. */
blockquote {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-style: italic;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(139, 44, 44, 0.45);
  text-underline-offset: 0.18em;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover { color: var(--accent-dk); text-decoration-color: var(--accent-dk); }

/* Robert's Corner is a hundred posts read over months. Without a visited
   colour there is no way to tell, on returning, which ones you have already
   been through. Desaturated barn red rather than a new hue. */
.page-body a:visited { color: #7a5150; text-decoration-color: rgba(122, 81, 80, 0.4); }
.page-body a:visited:hover { color: var(--accent-dk); text-decoration-color: var(--accent-dk); }
.blog-list h2 a:visited,
.section-list a:visited,
.archive-list a:visited,
.tag-cloud a:visited,
.doorway:visited .doorway-title { color: var(--muted); }
/* The section index points into the page you are already on, so "visited"
   there means nothing and only makes the list look half greyed out. */
.page-index-list a:visited { color: var(--text); }

hr {
  border: none;
  text-align: center;
  margin: 2.75rem 0;
}
hr::after {
  content: '✦ ✦ ✦';
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.6rem;
  padding-left: 0.6rem;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(139, 44, 44, 0.16); }

/* ── Charm / sacred verse ────────────────────────────────
   Set like a charm text on the page of a Brauche-Buch:
   centered, italic, held between thin rules, marked ✛.    */
.charm {
  max-width: 32rem;
  margin: 2.75rem auto;
  padding: 1.6rem 1.25rem 1.4rem;
  border: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text);
  /* A written charm can be one long unbroken formula. Without this the
     four rivers of Paradise pushed /powwow/charms/ 69px wider than a
     375px phone viewport. */
  overflow-wrap: break-word;
}
.charm .charm-mark {
  display: block;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.8rem;
  font-style: normal;
}
.charm p { margin-bottom: 0.7rem; }
.charm p:last-of-type { margin-bottom: 0; }
/* A translation continues the charm above it rather than repeating the
   whole frame. :has() joins the two boxes into one; where it is unsupported
   the pair simply falls back to the old two-frame look, which still reads. */
.charm:has(+ .charm--translation) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0.9rem;
}
.charm--translation {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  font-style: normal;
  font-size: 0.97rem;
  color: var(--muted);
}
.charm-role {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 auto 0.8rem;
  padding-top: 0.9rem;
  max-width: 8rem;
  border-top: 1px solid var(--rule-soft);
}
/* A Spruch of four short lines centres well. A paragraph out of a
   Brauche-Buch does not: at eight centred lines every line start moves and
   the eye has no left edge to return to. Same frame, ragged right. */
.charm--prose {
  text-align: left;
  max-width: var(--max-width);
  padding-left: 0;
  padding-right: 0;
}
.charm--prose .charm-mark { text-align: center; }

.charm-source {
  display: block;
  margin-top: 1rem;
  font-size: 0.74rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Scholarly quote ─────────────────────────────────────── */
.quote-block {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--accent);
}
.quote-text {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}
.quote-ref {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0;
}
.quote-ref a { font-size: inherit; }

/* ── Masthead ────────────────────────────────────────────── */
.site-header {
  padding: 2.75rem 0 0;
  text-align: center;
}
/* 2.6rem put the masthead above every page h1 (2rem) on the same centred
   axis, so the brand outranked the page on every interior page. Blackletter
   carries weight beyond its size; 2.1rem still reads as a masthead. */
.site-title {
  font-family: var(--fraktur);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.15;
  color: var(--accent-dk);
  text-decoration: none;
  display: inline-block;
}
.site-title:hover { color: var(--accent); text-decoration: none; }
.site-tagline {
  text-wrap: balance;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.3rem 0 0;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.4rem;
  margin-top: 1.4rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Padding rather than leading does the work here: it grows the tap target
   without growing the type, which has to stay small to read as a running
   head. WCAG 2.5.8 wants 24×24 CSS px minimum. */
.site-nav a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0;
  transition: color 0.15s;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current] { color: var(--accent); }

/* ── Main content area ──────────────────────────────────── */
.site-main { padding: 3.25rem 0 4.5rem; }

/* ── Page header (title page feel) ───────────────────────── */
.page-header {
  text-align: center;
  margin-bottom: 2.75rem;
}
.page-header h1 { margin-bottom: 0.4rem; }
.page-description {
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  max-width: 30rem;
  margin: 0 auto;
  text-wrap: balance;
}
.page-header::after {
  content: '✦';
  display: block;
  color: var(--accent);
  font-size: 0.85rem;
  margin-top: 1.4rem;
}

/* ── Home hero ───────────────────────────────────────────── */
.home-hero {
  text-align: center;
  padding: 0;
  margin: -1.5rem 0 -0.75rem;
}
.home-hero img {
  max-width: min(320px, 78%);
  margin: 0 auto;
}
.home-sigil {
  font-size: 3.5rem;
  color: var(--accent);
  text-align: center;
  line-height: 1;
  margin: 1.5rem 0;
}

/* ── Section divider ─────────────────────────────────────── */
.section-divider {
  text-align: center;
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.6rem;
  padding-left: 0.6rem;
  margin: 2.75rem 0;
  user-select: none;
}

/* ── Bylines & article groups ────────────────────────────── */
.page-byline {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.15rem;
}
.page-header .page-byline { margin: -0.1rem 0 0.35rem; }
.group-heading {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 3.25rem 0 0.75rem;
}
.group-heading::before { content: '✦'; color: var(--accent); margin-right: 0.75rem; font-size: 0.7rem; }
.group-heading::after  { content: '✦'; color: var(--accent); margin-left: 0.75rem; font-size: 0.7rem; }

/* ── Index of this page's own sections ───────────────────
   The reference pages run long: healing-rituals is twenty-two sections and
   about twenty-five screens. Set like the contents leaf of a Brauche-Buch —
   a running head, then the sections, held between thin rules. No box, no
   sticky rail, nothing that behaves like a widget. */
/* Sits mid-flow, after the page's opening prose, so it needs space on both
   sides. The margin below collapses against the following h2's own 3.25rem. */
.page-index {
  margin: 2.75rem 0 2.5rem;
  padding: 1.2rem 0 1.3rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
hr + .page-index {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.page-index-label {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 1rem;
  line-height: 1.3;
}
.page-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Long indexes set in two columns so the contents stay one glance rather
   than a scroll of their own. Column count is capped, not fluid, so a
   fourteen-item list never splits into ragged slivers. */
.page-index--long .page-index-list { columns: 2; column-gap: 2.5rem; }
.page-index-list li {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
  text-indent: -1rem;
  break-inside: avoid;
}
.page-index-list li:last-child { margin-bottom: 0; }
.page-index-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-index-list li::before { content: '·'; color: var(--accent); margin-right: 0.5rem; }
.page-index-list a:hover { color: var(--accent); border-bottom-color: var(--rule); }

/* Anchored headings land under the masthead, not flush against the top. */
.page-body h2[id], .page-body h3[id] { scroll-margin-top: 1.5rem; }

/* ── Section listing (table of contents) ─────────────────── */
.section-list { list-style: none; margin: 0; padding: 0; }
.section-list li {
  border-bottom: 1px solid var(--rule-soft);
  padding: 1rem 0;
}
.section-list li:last-child { border-bottom: none; }
.section-list a {
  font-family: var(--display);
  font-size: 1.12rem;
  text-decoration: none;
  color: var(--text);
}
.section-list a:hover { color: var(--accent); }
.section-list .page-desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}

/* ── Blog / archive listing ──────────────────────────────── */
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list li {
  margin-bottom: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.blog-list li:last-child { border-bottom: none; }
.blog-list h2 {
  font-size: 1.25rem;
  margin: 0 0 0.15rem;
}
.blog-list h2 a { text-decoration: none; color: var(--text); }
.blog-list h2 a:hover { color: var(--accent); }
.blog-list time {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.blog-list p { margin-bottom: 0; color: var(--muted); font-size: 0.95rem; text-wrap: balance; }

.blog-meta {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3rem 0 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.blog-meta a { letter-spacing: 0.14em; }
/* Without this the first entry sits tight under the header rule while
   every entry after it has 2.25rem of air above. */
.blog-meta + .blog-list { padding-top: 1.8rem; }
/* Inside a page header the same element is a caption, not a list header:
   term.html prints the post count there and the header supplies its own
   centring and its own ornament below. */
.page-header .blog-meta {
  border-bottom: none;
  text-align: center;
  margin: 0.6rem 0 0;
  padding-bottom: 0;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin: 3rem 0 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.pagination > li > a, .pagination > li > span {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pagination > li > a:hover { color: var(--accent); border-bottom-color: var(--rule); }
.pagination .active > a, .pagination .active > span {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.pagination .disabled > a, .pagination .disabled > span { opacity: 0.35; }

/* ── Empty blog state ────────────────────────────────────── */
.blog-empty { text-align: center; padding: 1.5rem 0 2.5rem; color: var(--muted); }
.blog-empty .home-sigil { font-size: 2.5rem; margin: 0 0 1rem; }
.blog-empty p { font-style: italic; }
.blog-empty-note { font-size: 0.92rem; }

/* ── Tags on posts ───────────────────────────────────────── */
.post-tags {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
}
.post-tags-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted);
}
.tag-chip {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.tag-chip:hover { color: var(--accent-dk); border-bottom-color: var(--accent-dk); }

/* ── Tag index ───────────────────────────────────────────── */
.tag-cloud {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}
.tag-cloud a {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}
.tag-cloud a:hover { color: var(--accent); }
.tag-count {
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.25rem;
  vertical-align: super;
}

/* ── Archive by year ─────────────────────────────────────── */
.archive-year { margin-bottom: 2.5rem; }
.archive-year h2 {
  text-align: center;
  font-size: 1.3rem;
}
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  display: flex;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.archive-list li:last-child { border-bottom: none; }
.archive-list a {
  color: var(--text);
  text-decoration: none;
}
.archive-list a:hover { color: var(--accent); }
.archive-list time {
  flex: 0 0 3.6rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding-top: 0.3rem;
}

/* ── Page images ─────────────────────────────────────────── */
.page-image {
  margin: 2.25rem auto;
  max-width: 460px;
}
.page-image img { border: 1px solid var(--rule); padding: 6px; background: var(--paper); }
.page-image-caption {
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  margin: 2.25rem auto;
  max-width: 30rem;
}
.page-image figcaption {
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* ── Video ───────────────────────────────────────────────
   Framed like .page-image so a video sits on the page the way a
   photograph does. aspect-ratio keeps the box 16:9 at any width. */
.video-embed { margin: 2.25rem 0; }
.video-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  padding: 6px;
  background: var(--paper);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-embed figcaption {
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* ── 404 ─────────────────────────────────────────────────── */
.notfound { text-align: center; padding: 2rem 0 3rem; }
.notfound h1 { margin-bottom: 0.75rem; }
.notfound .page-description { margin-bottom: 1.25rem; }
.notfound-links { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.notfound-links li { margin-bottom: 0.6rem; }
.notfound-links a { font-family: var(--display); font-size: 1.05rem; }

/* ── Contact form ────────────────────────────────────────── */
.contact-form { margin: 2rem 0; }
.form-field { margin-bottom: 1.2rem; }
.form-field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
}
.contact-form textarea { resize: vertical; }
/* Border only. The 2px accent box-shadow that used to sit here stacked with
   the global :focus-visible outline, so a keyboard-focused field wore three
   concentric red rings and read as a validation error rather than focus. */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
}
.contact-form button {
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1.8rem;
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.contact-form button:hover { background: var(--accent); color: var(--bg); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  margin-top: 4rem;
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.82rem;
  line-height: 2;
  color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .footer-sigil {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.6rem;
  padding-left: 0.6rem;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  /* 103% held the body at 16.5px against a 1rem gutter, which squeezed the
     phone column to 342px. Dropping to the browser's own 16px and trimming
     the gutter buys back most of a line without shrinking the type further:
     a serif at 15px to win two characters is the wrong trade. */
  html { font-size: 100%; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.32rem; }
  h3 { font-size: 1.12rem; }
  .container { padding: 0 0.8rem; }
  .site-header { padding-top: 1.5rem; }
  .site-title { font-size: 1.85rem; }
  .site-tagline { font-size: 0.8rem; }
  /* The nav wraps to three rows on a phone. Each row therefore has to be a
     real tap target: 0.6rem of padding takes each link from 21px to ~43px,
     clearing WCAG 2.5.8 (24px) with room. Row gap goes to zero because the
     padding now supplies the separation. */
  .site-nav { gap: 0 1rem; padding: 0.3rem 0.25rem; margin-top: 1rem; }
  .site-nav a { font-size: 0.76rem; letter-spacing: 0.1em; padding: 0.6rem 0; }
  .site-main { padding-top: 2rem; }
  .page-index { margin-bottom: 2.25rem; }
  .page-index--long .page-index-list { columns: 1; }
  .page-index-list a,
  .charm-index .page-body > ul > li > a { display: inline-block; padding: 0.3rem 0; }
  .page-index-list li { margin-bottom: 0.15rem; }
  .blog-meta { letter-spacing: 0.08em; font-size: 0.7rem; }
  .blog-meta a { letter-spacing: 0.08em; }
  .home-hero img { max-width: min(240px, 72%); }
  .charm { padding-left: 0.5rem; padding-right: 0.5rem; }
  .quote-block { padding-left: 1rem; }
  blockquote { padding-left: 1rem; }
  .archive-list li { flex-direction: column; gap: 0; }
  .archive-list time { flex: none; padding-top: 0; }
  .page-image { max-width: 100%; }
}

/* === Doorways (group rooms) ═══════════════════════════════
   Was five bordered cards in a three-column grid: the only boxes on the
   site, and five-in-three left a hole in the second row. Set now as a ruled
   list, the same idiom .section-list already uses for the same job. */
/* Rules exactly as .section-list draws them: separators between entries,
   nothing closing the top or the bottom. The two lists do the same job on
   the same site and must not differ in their furniture. */
.doorways { margin: 0 0 2.5rem; }
.doorway {
  display: block;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  padding: 1rem 0;
  color: var(--text);
  text-decoration: none;
  transition: color .15s ease;
}
.doorway:last-child { border-bottom: none; }
.doorway-title {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  color: var(--text);
  transition: color .15s ease;
}
.doorway:hover .doorway-title { color: var(--accent); }
.doorway-desc {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: .2rem;
}
/* Same values as .group-heading, which is the site's existing small label.
   The bottom margin has to be clearly smaller than the space above it or the
   label floats between the button and the list instead of naming the list. */
.doorways-label {
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--muted);
  margin: 3rem 0 .9rem;
}

/* === Start Here band ══════════════════════════════════════
   The one filled shape and the one rounded corner on the site, which read
   as a product CTA on a book page. Uses the outlined button the contact
   form already establishes, so the site has a single button. */
.start-here-band { text-align: center; margin: 2.25rem 0; }
.start-here-band a {
  display: inline-block;
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  padding: .75rem 1.9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.start-here-band a:hover { background: var(--accent); color: var(--bg); }

/* === Accessibility === */
.skip-link {
  position: absolute;
  left: 0;
  top: -3rem;
  background: var(--accent);
  color: var(--bg);
  padding: .6rem 1rem;
  z-index: 100;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus, main:focus-visible { outline: none; }  /* skip-link target only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ── Tables, code, and long words ─────────────────────────
   Defensive: none of these appear in the site today, but a
   correspondence table or a Deitsch word list would otherwise
   blow out the 342px phone measure with nothing to catch it. */
.page-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.92rem; }
.page-body th, .page-body td { border-bottom: 1px solid var(--rule-soft); padding: 0.5rem 0.75rem; text-align: left; }
.page-body th { font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
pre { overflow-x: auto; background: var(--paper); border: 1px solid var(--rule-soft); padding: 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; }
code { font-size: 0.9em; }
.page-body a { overflow-wrap: anywhere; }

.footer-legal { font-size: 0.78rem; margin-top: 0.9rem; color: var(--muted); }
.footer-legal a { text-decoration-color: rgba(139, 44, 44, 0.35); }

/* ── Breadcrumb ──────────────────────────────────────────
   A running head, not a widget: small letterspaced caps
   above the title, in the same voice as the masthead nav. */
.crumbs {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumb-sep { margin: 0 0.5rem; color: var(--rule); }

/* ── Previous / next ─────────────────────────────────────
   Two facing pages, as in a book: earlier to the left,
   later to the right, each naming where it goes. */
.page-nav {
  display: flex;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.page-nav-prev, .page-nav-next { flex: 1 1 0; min-width: 0; }
.page-nav-next { text-align: right; }
.page-nav a { display: block; text-decoration: none; }
.page-nav-dir {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.page-nav-title {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.page-nav a:hover .page-nav-title { border-bottom-color: rgba(139, 44, 44, 0.45); }

/* ── Index of charms ─────────────────────────────────────
   Set like the index of a Brauche-Buch: no bullets, and a
   hanging indent so a wrapped entry aligns under its title. */
/* Direct children only. These target the page's own content structure, and
   as descendant selectors they also captured anything nested inside the body
   — the section index landed here and rendered its "On This Page" label at
   1.3rem, larger than the headings it was indexing. */
.charm-index .page-body > ul { list-style: none; margin-left: 0; }
.charm-index .page-body > ul > li {
  padding-left: 1.25rem;
  text-indent: -1.25rem;
  margin-bottom: 0.55rem;
  line-height: 1.6;
}
.charm-index .page-body > h2 { font-size: 1.3rem; margin-top: 2.4rem; }

/* ── Colour scheme ────────────────────────────────────────
   The palette is deliberately a paper page; opt out of the
   browser's dark-mode form-control chrome rather than fight it. */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Print ────────────────────────────────────────────────
   Charm and reference pages get printed and carried. Strip the
   furniture, keep the text, expose link targets. */
@media print {
  .site-nav, .site-footer, .skip-link, .start-here-band,
  .doorways, .pagination, .post-tags, .home-hero,
  .crumbs, .page-nav, .blog-meta,
  .page-index { display: none !important; }
  /* A video cannot print. Leave the caption, drop the empty black box. */
  .video-embed { display: none !important; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }
  a { color: #000; }
  .page-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
  .charm { break-inside: avoid; border-color: #999; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  img { max-width: 100% !important; }
}

/* ── Narrow screens: page-nav stacks ─────────────────────
   Declared last so it wins over the base .page-nav-next
   alignment, which appears later in this file than the
   main responsive block. */
@media (max-width: 600px) {
  .page-nav { flex-direction: column; gap: 1.4rem; }
  .page-nav-next { text-align: left; }
  .crumbs { margin-bottom: 1.1rem; }
}