/* ============================================================

                  ✦
                  (
                 ( )
                (   )
                ( o )
                 \|/
                  |
               .------.
               |      |
              (|      |
               |      |
             .-'------'-.
             '-.______.-'

             Queer Speculative Fiction
             — reading by candlelight —

        ✦    ✦    ✦

   You went looking at the source. Hello, and welcome to the
   marginalia. A monthly catalogue of new queer speculative
   fiction, researched and set by hand: ink, embers & old
   paper. Mind the wax.

   ============================================================ */

/* ============================================================
   Queer Speculative Fiction — Ghost theme
   screen.css  —  layout chrome + prose + Koenig card styling

   Tokens (palette, type, dark-mode) live in colors_and_type.css,
   imported below. Card styling targets Ghost's REAL rendered
   class names so none of the platform defaults leak through.
   "Ink, embers & old paper."
   ============================================================ */

@import "colors_and_type.css";

/* Bespoke hand-engraved glyphs as recolourable CSS masks (data-URIs,
   so they never depend on file-path resolution). Sun/moon = theme
   toggle; search = header lens; bullet = cross-pattée list marker. */
:root {
  --sun-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-50%20-50%20100%20100'%3E%3Cg%20stroke='%232A1F14'%20stroke-width='7'%20stroke-linecap='round'%3E%3Cline%20x1='0'%20y1='-22'%20x2='0'%20y2='-33'/%3E%3Cline%20x1='0'%20y1='22'%20x2='0'%20y2='33'/%3E%3Cline%20x1='-22'%20y1='0'%20x2='-33'%20y2='0'/%3E%3Cline%20x1='22'%20y1='0'%20x2='33'%20y2='0'/%3E%3Cline%20x1='-15.5'%20y1='-15.5'%20x2='-23'%20y2='-23'/%3E%3Cline%20x1='15.5'%20y1='-15.5'%20x2='23'%20y2='-23'/%3E%3Cline%20x1='-15.5'%20y1='15.5'%20x2='-23'%20y2='23'/%3E%3Cline%20x1='15.5'%20y1='15.5'%20x2='23'%20y2='23'/%3E%3C/g%3E%3Ccircle%20cx='0'%20cy='0'%20r='12'%20fill='%232A1F14'/%3E%3C/svg%3E");
  --moon-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-50%20-50%20100%20100'%3E%3Cpath%20fill-rule='evenodd'%20d='M0,-29%20A29,29%200%201,1%200,29%20A29,29%200%201,1%200,-29%20Z%20M11,-24%20A24,24%200%201,1%2011,24%20A24,24%200%201,1%2011,-24%20Z'%20fill='%232A1F14'/%3E%3C/svg%3E");
  --search-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-50%20-50%20100%20100'%3E%20%3Cg%20stroke='%232A1F14'%20stroke-linecap='round'%3E%20%3Cline%20x1='0'%20y1='-28'%20x2='0'%20y2='-44'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='0'%20y1='28'%20x2='0'%20y2='44'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='-28'%20y1='0'%20x2='-44'%20y2='0'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='28'%20y1='0'%20x2='44'%20y2='0'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='-20'%20y1='-20'%20x2='-31'%20y2='-31'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='20'%20y1='-20'%20x2='31'%20y2='-31'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='20'%20y1='20'%20x2='31'%20y2='31'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3Cline%20x1='-20'%20y1='20'%20x2='-31'%20y2='31'%20stroke-width='0.8'%20opacity='0.5'/%3E%20%3C/g%3E%20%3Ccircle%20cx='0'%20cy='0'%20r='22'%20fill='none'%20stroke='%232A1F14'%20stroke-width='2.2'/%3E%20%3Ccircle%20cx='0'%20cy='0'%20r='15'%20fill='none'%20stroke='%232A1F14'%20stroke-width='0.8'/%3E%20%3Cpath%20d='M15,15%20L32,34%20C33,36%2032,38%2030,37%20L13,18%20Z'%20fill='%232A1F14'/%3E%20%3C/svg%3E");
  --bullet-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-30%20-30%2060%2060'%3E%3Cpath%20d='M0,-24C-4,-16%20-6,-10%20-5,-5C-10,-6%20-16,-4%20-24,0C-16,4%20-10,6%20-5,5C-6,10%20-4,16%200,24C4,16%206,10%205,5C10,6%2016,4%2024,0C16,-4%2010,-6%205,-5C6,-10%204,-16%200,-24Z'/%3E%3Ccircle%20r='5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--inkwell);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
.gh-skip { position: absolute; left: -9999px; }
.gh-site { display: flex; flex-direction: column; min-height: 100vh; }
.gh-site-main { flex: 1 0 auto; }

/* ============================================================
   HEADER — dark band, ember wordmark, thin ember rule, nav.
   ============================================================ */
.gh-header {
  position: relative;
  background: var(--dark);
  border-bottom: 3px solid var(--ember);
  padding: 30px 24px 22px;
  text-align: center;
}
.gh-theme { position: absolute; top: 14px; right: 18px; }
.gh-theme-btn { background: none; border: none; cursor: pointer; padding: 6px; line-height: 0; display: inline-flex; }
.gh-theme-ico {
  width: 20px; height: 20px; display: block; background: var(--paper-on-dark);
  opacity: .9; transition: opacity .12s, background .12s;
  -webkit-mask: var(--sun-mask) center/contain no-repeat;
          mask: var(--sun-mask) center/contain no-repeat;
}
.gh-theme-btn.is-on .gh-theme-ico {
  background: var(--ember); opacity: 1;
  -webkit-mask: var(--moon-mask) center/contain no-repeat;
          mask: var(--moon-mask) center/contain no-repeat;
}
@media (hover: hover) {
  .gh-theme-btn:hover .gh-theme-ico { opacity: 1; background: #fff; }
  .gh-theme-btn.is-on:hover .gh-theme-ico { background: var(--ember); }
}

.gh-wordmark {
  font-family: var(--font-logo);
  color: var(--ember);
  font-size: 46px;
  line-height: 1;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.gh-rule { width: 200px; height: 1px; background: var(--ember); opacity: .45; margin: 10px auto 8px; }
.gh-tagline {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--paper-on-dark);
}
.gh-nav {
  display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 18px;
  flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.gh-nav a { color: var(--paper-on-dark); text-decoration: none; cursor: pointer; opacity: .85; transition: opacity .12s, color .12s; }
.gh-nav a:hover { opacity: 1; color: #fff; }
.gh-nav a.is-active { color: var(--ember); opacity: 1; }
.gh-nav a.gh-nav-sub { color: var(--ember); opacity: 1; }
.gh-nav a.gh-nav-sub:hover { color: var(--ember); opacity: .72; }

.gh-search-btn, .gh-theme-btn { -webkit-appearance: none; appearance: none; }
.gh-search-btn { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; line-height: 0; }
.gh-search-ico {
  width: 16px; height: 16px; display: block; background: var(--paper-on-dark);
  -webkit-mask: var(--search-mask) center/contain no-repeat;
          mask: var(--search-mask) center/contain no-repeat;
  transform: translateY(-1px);
  transition: background .12s;
}
@media (hover: hover) {
  .gh-search-btn:hover .gh-search-ico { background: #fff; }
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.gh-main { max-width: 760px; margin: 0 auto; padding: 0 28px 90px; }
.gh-wide { max-width: 1080px; }
.gh-kicker {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--foxed); display: block; margin: 56px 0 14px;
}

/* ============================================================
   PROSE  (article body + static pages)
   ============================================================ */
.gh-prose h1 { font-family: var(--font-head); font-weight: 400; font-size: var(--size-h1); line-height: 1.08; color: var(--inkwell); margin: 0 0 20px; }
.gh-prose h2 { font-family: var(--font-head); font-weight: 400; font-size: var(--size-h2); line-height: 1.18; color: var(--inkwell); margin: 40px 0 12px; }
.gh-prose h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--size-h3); color: var(--inkwell); margin: 26px 0 8px; }
.gh-prose h4 { font-family: var(--font-body); font-weight: 500; font-size: 17px; color: var(--inkwell); margin: 22px 0 6px; }
.gh-prose h5, .gh-prose h6 {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--foxed); margin: 20px 0 6px; font-weight: 400;
}
.gh-prose p { margin: 0 0 20px; }
/* Drop cap — an illuminated initial on the first paragraph of a post body, a
   nod to the "old paper" pillar. Set in Crimson (--font-body), an upright
   roman versal that contrasts the script post title instead of doubling it,
   with a hard ember offset (no blur) — the same two-colour, mis-registered-
   print device as the comment avatars — so it rhymes with that surface and
   pulls in the "embers" pillar. Inkwell + ember both invert, so it reads in
   candlelight. Posts only (.post-template); the :first-child guard means a
   post that opens on an image, heading, or quote gets no stray cap. Nudge the
   padding / margin-top (or the text-shadow offset) if a metric sits off.

   Dispatch dateline: Ghost injects HTML-card content RAW (no wrapper element),
   so the dateline <p class="gh-dateline"> is itself the first child paragraph.
   :not(.gh-dateline) keeps the cap OFF it; the second selector then puts the cap
   on the intro paragraph immediately after it. (Comment nodes between the two
   <p>s are ignored by the + combinator, so the adjacency holds.) */
.post-template .gh-content > p:first-child:not(.gh-dateline)::first-letter,
.post-template .gh-content > p.gh-dateline + p::first-letter {
  float: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.72;
  color: var(--inkwell);
  text-shadow: 4px 4px 0 var(--ember);
  padding: 4px 12px 0 0;
  margin-top: 0;
}
.gh-prose .lede { font-size: var(--size-lede); line-height: var(--lh-lede); color: var(--aside-brown); }
.gh-prose em, .gh-prose i { font-style: italic; }
.gh-prose strong, .gh-prose b { font-weight: 500; }
.gh-prose a { color: var(--ember); font-style: italic; text-decoration: underline; text-underline-offset: 3px; transition: opacity .12s; }
.gh-prose a:hover { opacity: .82; text-decoration-thickness: 2px; }
.gh-prose figure { margin: 30px 0; }

/* ordered lists keep numerals; unordered lists get the cross-pattée bullet */
.gh-prose ol { padding-left: 1.4em; margin: 0 0 20px; }
.gh-prose ol li { margin-bottom: 8px; }
.gh-prose ul { list-style: none; padding: 0; margin: 0 0 20px; }
.gh-prose ul li { position: relative; padding-left: 30px; margin-bottom: 8px; }
.gh-prose ul li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px;
  background: var(--ember);
  -webkit-mask: var(--bullet-mask) center/contain no-repeat;
          mask: var(--bullet-mask) center/contain no-repeat;
}

/* ---------- Rules & ornaments ---------- */
.gh-rule-ember { border: none; border-top: 3px solid var(--ember); margin: 48px 0; }

/* ============================================================
   THE BUTTON — outlined ember, fills on hover. The only button.
   ============================================================ */
.gh-btn {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); background: transparent;
  padding: .6rem 1.5rem; border-radius: 0; cursor: pointer; display: inline-block; text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.gh-btn:hover { background: var(--ember); color: var(--on-dark); }
.gh-btn:active { background: var(--ember-press); border-color: var(--ember-press); color: var(--on-dark); }

/* ============================================================
   MEMBERS CONTENT GATE  (Ghost's <aside class="gh-post-upgrade-cta">)
   Ghost paints the inner box with an inline ember background (the accent
   colour) — we keep that. But the bare <h2> inherits .gh-prose h2's
   *inverting* --inkwell (so it goes dark-on-ember in light mode), and the
   .gh-btn inherits .gh-prose a's italic. Bring it onto the brand: a constant
   cream heading (--on-dark never inverts, so the script reads light on ember
   in both modes), a de-italicised paper-and-ember button with square corners,
   a centred cream sign-in line, and a squared, shadow-free box to match the
   letterpress feel of the rest of the theme.
   ============================================================ */
.gh-post-upgrade-cta-content { border-radius: 0 !important; box-shadow: none !important; text-align: center; }
.gh-post-upgrade-cta-content h2 { color: var(--on-dark) !important; margin: 0 0 24px !important; }
.gh-post-upgrade-cta-content .gh-btn {
  background: var(--on-dark) !important; font-style: normal !important;
  border-radius: 0 !important; box-shadow: none !important; margin-top: 0 !important;
}
.gh-post-upgrade-cta-content .gh-btn:hover { background: var(--on-dark) !important; color: var(--ember-press) !important; }
.gh-post-upgrade-cta-content p,
.gh-post-upgrade-cta-content small { text-align: center; color: var(--on-dark); }
.gh-post-upgrade-cta-content p a { color: var(--on-dark) !important; }

/* ============================================================
   ISSUE INDEX  (home / archives)
   ============================================================ */
.gh-issue-list { list-style: none; margin: 0; padding: 0; }
.gh-issue-row { border-bottom: .5px solid var(--ink-20); }
.gh-issue-link { display: block; padding: 24px 0; text-decoration: none; color: inherit; }
.gh-issue-row:hover .gh-issue-title { color: var(--ember); }
.gh-issue-date { font-family: var(--font-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--foxed); display: block; }
.gh-issue-title { font-family: var(--font-head); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 6px 0 8px; color: var(--inkwell); transition: color .12s; }
.gh-issue-dek { font-size: 17px; color: var(--aside-brown); margin: 0; }

/* pagination */
.gh-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.gh-pagination a { color: var(--ember); text-decoration: none; }
.gh-pagination a:hover { opacity: .72; }
.gh-pagination .gh-page-where { color: var(--foxed); }

/* ============================================================
   HOME — frontispiece front matter + featured "current issue"
   plate + compact "back issues" contents list. Driven by the
   count-aware index.hbs. Hero recedes (.is-slim) once the run
   matures (4+ issues).
   ============================================================ */

/* ---------- Front matter / hero ---------- */
.gh-home-hero { text-align: center; max-width: 600px; margin: 60px auto 0; }
.gh-home-hero.is-slim { max-width: 640px; margin: 44px auto 0; }
.gh-home-eyebrow {
  font-family: var(--font-ui); font-size: var(--size-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--foxed); display: block; margin: 0 0 18px;
}
.gh-home-title {
  font-family: var(--font-head); font-weight: 400; font-size: 40px; line-height: 1.12;
  color: var(--inkwell); margin: 0 0 18px;
}
.gh-home-hero.is-slim .gh-home-title { font-size: 30px; margin-bottom: 0; }
.gh-home-lead {
  font-family: var(--font-body); font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--aside-brown); max-width: 520px; margin: 0 auto;
}

/* Frontispiece plate — an engraved ember frame around a vintage plate.
   The art is a recoloured CSS mask (like the theme's icons): painted with
   the inkwell token, so it flips ink -> cream in dark mode for free. */
.gh-home-plate { border: 1px solid var(--ember); padding: 6px; max-width: 360px; margin: 30px auto 0; }
.gh-home-plate-in { border: .5px solid var(--ink-30); padding: 16px; }
.gh-home-plate-art {
  width: 100%; aspect-ratio: 760 / 503; background-color: var(--inkwell);
  -webkit-mask: url("../images/frontispiece-book.png") center / contain no-repeat;
          mask: url("../images/frontispiece-book.png") center / contain no-repeat;
}
/* The hero recedes once the run matures (4+ issues): drop the plate too. */
.gh-home-hero.is-slim .gh-home-plate { display: none; }
.gh-home-plate figcaption {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--foxed); text-align: center; margin-top: 10px;
}

/* Three-star ornament with built-in vertical rhythm */
.gh-stars {
  text-align: center; color: var(--ember); font-size: 15px; letter-spacing: .5em;
  opacity: .55; margin: 34px 0;
}
.gh-home-hero.is-slim + .gh-stars { margin: 26px 0; }

/* ---------- The current issue (featured plate) ---------- */
.gh-current {
  display: block; background: var(--tanned); border: .5px solid var(--ink-25);
  padding: 30px 34px; text-decoration: none; color: inherit;
}
.gh-current:hover .gh-current-title,
.gh-current:hover .gh-current-cue { color: var(--ember); }
.gh-current-kicker {
  font-family: var(--font-ui); font-size: var(--size-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--foxed); display: block; margin: 0 0 14px;
}
.gh-current-date {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--foxed); display: block;
}
.gh-current-title {
  font-family: var(--font-head); font-weight: 400; font-size: 40px; line-height: 1.08;
  margin: 8px 0 12px; color: var(--inkwell); transition: color .12s;
}
.gh-current-dek { font-size: 18px; line-height: 1.7; color: var(--aside-brown); margin: 0 0 18px; }
.gh-current-cue {
  font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--ember);
  text-decoration: underline; text-underline-offset: 3px; transition: color .12s;
}

/* ---------- Back issues (compact contents list) ---------- */
.gh-backlist { list-style: none; margin: 14px 0 0; padding: 0; }
.gh-backlist li { border-bottom: .5px solid var(--ink-15); }
.gh-backlist a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 14px 2px; text-decoration: none; color: inherit;
}
.gh-backlist a:hover .gh-back-title { color: var(--ember); }
.gh-back-title {
  font-family: var(--font-body); font-style: italic; font-size: 18px; line-height: 1.3;
  color: var(--inkwell); transition: color .12s;
}
.gh-back-date {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--foxed); white-space: nowrap;
}

/* ---------- Sparse-state companions / empty state ---------- */
.gh-home-aside {
  text-align: center; font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  color: var(--aside-brown); max-width: 480px; margin: 34px auto 0;
}
.gh-home-aside--wide { max-width: 560px; }
.gh-home-aside a {
  color: var(--ember); font-style: italic; text-decoration: underline; text-underline-offset: 3px;
}
.gh-home-aside a:hover { opacity: .82; }
.gh-home-cta { text-align: center; margin: 28px 0 0; }

/* ============================================================
   404 / ERROR — a vintage wolf plate beneath the message (same
   flow as the home plate). Engraved frame + recoloured masks.
   Two stacked layers: body in ink (flips to cream in candlelight),
   tongue + eye in ember (stays ember in both modes).
   Current: grinning heraldic wolf (woodcut). Alternates kept in
   assets/images/ — to use one instead, drop the two-layer markup
   in error.hbs back to a single .gh-error-plate-art with one mask:
     • error-wolf-leaping.png  (aspect 700 / 772)
     • error-wolf-jackal.png   (aspect 800 / 662)
   ============================================================ */
.gh-error-plate { border: 1px solid var(--ember); padding: 6px; max-width: 300px; margin: 30px auto 34px; }
.gh-error-plate-in { border: .5px solid var(--ink-30); padding: 18px; }
.gh-error-plate-art { position: relative; width: 100%; aspect-ratio: 600 / 1122; }
.gh-error-plate-art > span { position: absolute; inset: 0; }
.gh-plate-ink {
  background-color: var(--inkwell);
  -webkit-mask: url("../images/error-wolf-grin-ink.png") center / contain no-repeat;
          mask: url("../images/error-wolf-grin-ink.png") center / contain no-repeat;
}
.gh-plate-ember {
  background-color: var(--ember);
  -webkit-mask: url("../images/error-wolf-grin-ember.png") center / contain no-repeat;
          mask: url("../images/error-wolf-grin-ember.png") center / contain no-repeat;
}

/* ============================================================
   ABOUT — closing plate (the crowned house beast, page.hbs scopes
   it to the About page). Same engraved frame + two-layer masks:
   body in ink (cream in candlelight), tongue + crown gems in ember.
   ============================================================ */
.gh-about-plate { border: 1px solid var(--ember); padding: 5px; max-width: 220px; margin: 52px auto 0; }
.gh-about-plate-in { border: .5px solid var(--ink-30); padding: 14px; }
.gh-about-plate-art { position: relative; width: 100%; aspect-ratio: 700 / 723; }
.gh-about-plate-art > span { position: absolute; inset: 0; }
.gh-about-ink {
  background-color: var(--inkwell);
  -webkit-mask: url("../images/about-hamish-ink.png") center / contain no-repeat;
          mask: url("../images/about-hamish-ink.png") center / contain no-repeat;
}
.gh-about-ember {
  background-color: var(--ember);
  -webkit-mask: url("../images/about-hamish-ember.png") center / contain no-repeat;
          mask: url("../images/about-hamish-ember.png") center / contain no-repeat;
}
/* This portrait is detail-dense and its charm (googly eyes, grin, teeth)
   lives in light-on-dark features, so a straight ink->cream flip reverses it
   into a muddy negative. In candlelight we instead mount it like a lit print:
   the art stays dark on a warm parchment mat that does NOT invert, so every
   detail and the ember hold exactly as in daylight. (The bolder home/404
   plates still flip — they reverse cleanly.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gh-about-plate-in { background-color: var(--paper-on-dark); }
  :root:not([data-theme="light"]) .gh-about-ink { background-color: #2A1F14; }
}
:root[data-theme="dark"] .gh-about-plate-in { background-color: var(--paper-on-dark); }
:root[data-theme="dark"] .gh-about-ink { background-color: #2A1F14; }

/* ============================================================
   POST (issue) masthead + meta
   ============================================================ */
.gh-post-head { margin: 56px 0 0; }
.gh-post-feature { margin: 0 0 26px; border: .5px solid var(--ink-20); background: var(--tanned); display: block; width: 100%; }
.gh-post-title { font-family: var(--font-head); font-weight: 400; font-size: var(--size-h1); line-height: 1.08; color: var(--inkwell); margin: 8px 0 16px; }
.gh-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 0; }
.gh-tag { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--foxed); border: .5px solid var(--ink-30); padding: 4px 9px; text-decoration: none; }
.gh-tag:hover { color: var(--ember); border-color: var(--ember); }

/* ============================================================
   FOOTER — dark band mirror of the header.
   ============================================================ */
.gh-footer { background: var(--dark); border-top: 3px solid var(--ember); padding: 44px 28px; margin-top: 60px; flex-shrink: 0; }
.gh-footer-in { max-width: 760px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.gh-footer p { color: var(--paper-on-dark); font-size: 15px; line-height: 1.7; margin: 0 0 10px; max-width: 360px; }
.gh-footer a { color: var(--ember); font-style: italic; text-decoration: underline; text-underline-offset: 3px; }
.gh-footer-links { display: flex; flex-direction: column; gap: 9px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.gh-footer-links a { color: var(--paper-on-dark); font-style: normal; text-decoration: none; }
.gh-footer-links a:hover { color: var(--ember); }
.gh-foot-logo { font-family: var(--font-logo); color: var(--ember); font-size: 26px; line-height: 1; }

/* Hamish — a small heraldic supporter beside the footer mark. The footer
   band is always dark, so the body is cream (paper-on-dark) with the claws,
   tongue and eye held in ember, in both light and candlelight. Two masked
   layers, like the wolf plate. */
.gh-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.gh-foot-beast { position: relative; display: block; width: 36px; aspect-ratio: 200 / 257; flex: none; }
.gh-foot-beast > span { position: absolute; inset: 0; }
.gh-foot-beast-ink {
  background-color: var(--paper-on-dark);
  -webkit-mask: url("../images/footer-hamish-ink.png") center / contain no-repeat;
          mask: url("../images/footer-hamish-ink.png") center / contain no-repeat;
}
.gh-foot-beast-ember {
  background-color: var(--ember);
  -webkit-mask: url("../images/footer-hamish-ember.png") center / contain no-repeat;
          mask: url("../images/footer-hamish-ember.png") center / contain no-repeat;
}
.gh-foot-fine { font-family: var(--font-ui); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--foxed); margin-top: 6px; }

/* ============================================================
   KOENIG CARDS — styled against Ghost's REAL output classes.
   (Ghost renders these inside .gh-content; card_assets load
   first, this file loads after and wins.)
   ============================================================ */

/* image */
.gh-content figure.kg-card.kg-image-card { margin: 30px 0; }
.gh-content .kg-image-card img,
.gh-content .kg-image {
  width: 100%; display: block; border: .5px solid var(--ink-20); background: var(--tanned);
}
/* Ornament images (the ouroboros tailpiece, future spot engravings) are transparent
   PNGs and must NOT get the book-cover frame/tint. Add the class "qsf-ornament" to the
   image card (Ghost editor: card menu → "…" → add the class, or wrap in an HTML card)
   to drop the border/background and let the transparent canvas sit flat on the page. */
.gh-content figure.qsf-ornament img,
.gh-content figure.qsf-ornament,
.gh-content .qsf-ornament .kg-image {
  border: none; background: transparent;
}
.gh-content figure.qsf-ornament { margin: 24px 0; }
.gh-content .kg-image-card figcaption,
.gh-content figcaption {
  font-family: var(--font-body); font-style: italic; font-size: 15px;
  color: var(--foxed); text-align: center; margin-top: 10px;
}
.gh-content .kg-width-wide { width: 105%; margin-left: -2.5%; }
.gh-content .kg-width-full { width: 100%; }  /* brand = single measured column; full ≈ column width */

/* gallery */
.gh-content .kg-gallery-container { display: flex; flex-direction: column; gap: 8px; margin: 30px 0; }
.gh-content .kg-gallery-row { display: flex; gap: 8px; }
.gh-content .kg-gallery-image img { width: 100%; display: block; border: .5px solid var(--ink-20); }

/* bookmark */
.gh-content .kg-bookmark-card { margin: 30px 0; }
.gh-content .kg-bookmark-container {
  display: flex; min-height: 0; border: .5px solid var(--ink-25); background: var(--tanned);
  text-decoration: none; border-radius: 0; box-shadow: none; color: var(--inkwell);
}
.gh-content .kg-bookmark-content { padding: 18px 20px; flex: 1 1 auto; order: 0; }
.gh-content .kg-bookmark-title { font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--inkwell); margin-bottom: 6px; }
.gh-content .kg-bookmark-description { font-size: 15px; line-height: 1.55; color: var(--aside-brown); margin-bottom: 12px; }
.gh-content .kg-bookmark-metadata { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--foxed); display: flex; align-items: center; gap: 8px; }
.gh-content .kg-bookmark-metadata .kg-bookmark-icon { width: 16px; height: 16px; }
.gh-content .kg-bookmark-thumbnail { width: 150px; flex: 0 0 150px; position: relative; }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; border-left: .5px solid var(--ink-20); display: block; }

/* callout — brand forces a single treatment: tanned, ember left rule */
.gh-content .kg-callout-card {
  display: flex; gap: 14px; background: var(--tanned) !important;
  border: .5px solid var(--ink-20); border-left: 3px solid var(--ember);
  border-radius: 0; padding: 16px 20px; margin: 30px 0;
}
.gh-content .kg-callout-emoji { font-size: 18px; line-height: 1.5; color: var(--ember); }
.gh-content .kg-callout-text { font-size: 16.5px; line-height: 1.6; }

/* toggle */
.gh-content .kg-toggle-card { border: .5px solid var(--ink-20); border-radius: 0; margin: 30px 0; padding: 0; }
.gh-content .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; background: var(--tanned); margin: 0; }
.gh-content .kg-toggle-heading-text { font-family: var(--font-body); font-weight: 500; font-size: 17px; color: var(--inkwell); }
.gh-content .kg-toggle-card-icon { color: var(--ember); width: 14px; height: 14px; }
.gh-content .kg-toggle-content { padding: 4px 18px 16px; font-size: 16px; line-height: 1.65; }

/* quote / blockquote */
.gh-content blockquote {
  border-left: 3px solid var(--ember); padding: 4px 0 4px 22px; margin: 28px 0;
  font-style: italic; font-size: 17px; line-height: 1.7; color: var(--aside-brown);
}
.gh-content blockquote.kg-blockquote-alt {
  font-family: var(--font-head); font-style: normal; font-size: 26px; line-height: 1.3;
  color: var(--inkwell); border-left: 3px solid var(--ember); padding-left: 24px;
}

/* horizontal rule / divider card */
/* Section ornament = the three ember stars. Use an HTML card containing
   <div class="gh-stars">&#10022;&nbsp;&nbsp;&#10022;&nbsp;&nbsp;&#10022;</div>
   — the same markup the templates use (styled at .gh-stars). A plain typed
   "✦ ✦ ✦" paragraph renders as unstyled black glyphs, so don't do that.
   (Native divider card stays a thin rule — kept as a quieter alternative.) */
.gh-content hr { border: none; border-top: .5px solid var(--ink-25); margin: 30px 0; }

/* button card — the one outlined ember button */
.gh-content .kg-button-card { margin: 30px 0; text-align: center; }
.gh-content .kg-button-card.kg-align-left { text-align: left; }
.gh-content .kg-button-card .kg-btn {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); background: transparent; border: 1px solid var(--ember); border-radius: 0;
  padding: .6rem 1.5rem; min-height: 0; height: auto; font-weight: 400; box-shadow: none;
  transition: background .12s ease, color .12s ease;
}
.gh-content .kg-button-card .kg-btn:hover { background: var(--ember); color: var(--on-dark); }

/* ---------- Hand-authored brand classes (raw HTML cards on static pages) ----------
   Ported from the QSF brand guide, with its hex values mapped onto the matching
   theme tokens (#ED3F2C=--ember, #141414=--dark, #C9B89A=--paper-on-dark,
   #5C4226=--aside-brown) so pasted brand markup stays faithful to the guide.
   .aside is a left ember rule (not a box); .support-block is a dark block. */
.gh-content .ornament { text-align: center; color: var(--ember); font-size: 16px; letter-spacing: 0.5em; opacity: 0.55; margin: 2.5rem 0; }

.gh-content .aside { border-left: 3px solid var(--ember); padding: 0.25rem 0 0.25rem 1.25rem; margin: 1.75rem 0; }
.gh-content .aside p { font-size: 17px; color: var(--aside-brown); font-style: italic; line-height: 1.7; margin-bottom: 0; }

.gh-content .support-block { background: var(--dark); padding: 2rem; margin: 2.5rem 0 0; border-top: 2px solid var(--ember); }
.gh-content .support-block p { color: var(--paper-on-dark); font-size: 17px; line-height: 1.75; margin: 0 0 1rem; }

.gh-content .btn-outline {
  display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ember); background: transparent; border: 1px solid var(--ember);
  border-radius: 0; padding: 0.55rem 1.4rem; cursor: pointer; text-decoration: none; font-style: normal;
  transition: background .12s ease, color .12s ease;
}
.gh-content .btn-outline:hover { background: var(--ember); color: var(--on-dark); text-decoration: none; }

/* ---------- Footnotes (hand-authored: a .qsf-fn-ref superscript inside an
   HTML-card paragraph, plus one .qsf-footnotes list card at the foot of the
   post). Anchors are page-level (#fnN / #fnrefN) so a marker and its note link
   up across separate cards and across the public-preview break. Numerals are
   ember Volume Sans editorial marks; the notes block is a hairline rule, not a
   box (letterpress). Every token inverts, so it reads in candlelight.
   NB: the visible list number is a CSS counter (positional), so keep each note's
   marker and definition on the SAME side of the paywall — otherwise member vs.
   preview numbering can drift. If you must cross the break, hard-code the digit
   in the <li> and drop the counter for that one. Links inside note text keep the
   normal prose style (ember italic underline); only the ↩ back-arrow is plain. */
.gh-content sup.qsf-fn-ref { line-height: 0; }
.gh-content sup.qsf-fn-ref a {
  font-family: var(--font-ui); font-size: .72em; font-weight: 400; font-style: normal;
  color: var(--ember); text-decoration: none; padding-left: .12em;
  scroll-margin-top: 2rem; transition: color .12s ease;
}
.gh-content sup.qsf-fn-ref a:hover { color: var(--ember-press); text-decoration: underline; text-underline-offset: 2px; }

.gh-content .qsf-footnotes { margin: 3rem 0 0; padding-top: 1.5rem; border-top: .5px solid var(--ink-25); }
.gh-content .qsf-footnotes-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--foxed); margin: 0 0 1rem;
}
.gh-content .qsf-footnotes ol { list-style: none; counter-reset: qsf-fn; padding-left: 0; margin: 0; }
.gh-content .qsf-footnotes li {
  counter-increment: qsf-fn; position: relative; padding-left: 1.4em; margin: 0 0 .85rem;
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--aside-brown);
  scroll-margin-top: 2rem;
}
/* numeral hangs right-aligned in a fixed box, so the gap to the text is small
   and identical whether the note is #1 or #12 (no big indent on single digits) */
.gh-content .qsf-footnotes li::before {
  content: counter(qsf-fn) "."; position: absolute; left: 0; top: .15em; width: 1.3em; text-align: right;
  font-family: var(--font-ui); font-size: 11px; color: var(--ember);
}
/* back-link: the same engraved return arrow as the comment Reply control, drawn
   as an ember mask so we control its size and vertical centring (the bare ↩
   glyph rode the baseline differently across faces). The literal ↩ in the HTML
   stays as a no-CSS fallback, indented out of view here. */
.gh-content .qsf-fn-back {
  display: inline-block; width: .78em; height: .78em; margin-left: .25em; vertical-align: -0.16em;
  text-indent: -9999px; overflow: hidden; background: var(--ember);
  scroll-margin-top: 2rem; transition: background .12s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='2%202%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203%20L3%208%20L8%2013'/%3E%3Cpath%20d='M3%208%20H15%20a6%206%200%200%201%206%206%20V21'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='2%202%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203%20L3%208%20L8%2013'/%3E%3Cpath%20d='M3%208%20H15%20a6%206%200%200%201%206%206%20V21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gh-content .qsf-fn-back:hover { background: var(--ember-press); }

/* header / signup card — dark band, ember rules, the brand button */
.gh-content .kg-header-card, .gh-content .kg-header-card-v2 { background: var(--dark) !important; border-top: 3px solid var(--ember); border-bottom: 3px solid var(--ember); border-radius: 0; padding: 54px 40px; text-align: center; }
.gh-content .kg-header-card h2, .gh-content .kg-header-card-v2 .kg-header-card-heading { font-family: var(--font-head); color: var(--on-dark) !important; font-size: 40px; margin: 0 0 12px; }
.gh-content .kg-header-card-v2 .kg-header-card-subheading { color: var(--paper-on-dark) !important; font-size: 17px; }

.gh-content .kg-signup-card { background: var(--dark) !important; border-radius: 0; padding: 48px 40px; }
.gh-content .kg-signup-card-heading { font-family: var(--font-head) !important; color: var(--on-dark) !important; font-size: 36px; }
.gh-content .kg-signup-card-subheading { color: var(--paper-on-dark) !important; font-size: 17px; }
.gh-content .kg-signup-card-input { background: transparent; border: 1px solid var(--ember); border-radius: 0; color: var(--on-dark); font-family: var(--font-body); }
.gh-content .kg-signup-card-button { background: transparent; border: 1px solid var(--ember); border-radius: 0; color: var(--ember); font-family: var(--font-ui); letter-spacing: .18em; text-transform: uppercase; box-shadow: none; }
.gh-content .kg-signup-card-button:hover { background: var(--ember); color: var(--on-dark); }
.gh-content .kg-signup-card-disclaimer { color: var(--foxed) !important; font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* code */
.gh-content pre { background: var(--dark); border: none; border-radius: 0; padding: 18px 20px; overflow: auto; margin: 30px 0; }
.gh-content pre code { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.6; color: var(--paper-on-dark); background: none; padding: 0; }
.gh-content :not(pre) > code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--ink-045); padding: .1em .35em; border: .5px solid var(--ink-15); }

/* embed / video / audio / file / product */
.gh-content .kg-embed-card { margin: 30px 0; }
.gh-content .kg-video-card, .gh-content .kg-embed-card iframe { border: .5px solid var(--ink-25); border-radius: 0; }
.gh-content .kg-audio-card { display: flex; align-items: center; gap: 14px; border: .5px solid var(--ink-20); background: var(--tanned); border-radius: 0; padding: 14px 18px; margin: 30px 0; }
.gh-content .kg-audio-title { font-family: var(--font-body); font-weight: 500; }
.gh-content .kg-audio-play-icon, .gh-content .kg-audio-pause-icon { color: var(--ember); }
.gh-content .kg-file-card { margin: 30px 0; }
.gh-content .kg-file-card-container { display: flex; justify-content: space-between; align-items: center; border: .5px solid var(--ink-25); background: var(--tanned); border-radius: 0; padding: 16px 20px; box-shadow: none; }
.gh-content .kg-file-card-title { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--inkwell); }
.gh-content .kg-file-card-caption { font-size: 14.5px; color: var(--aside-brown); }
.gh-content .kg-file-card-metadata { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--foxed); }
.gh-content .kg-product-card-container { border: .5px solid var(--ink-25); background: var(--tanned); border-radius: 0; padding: 22px 24px; box-shadow: none; }
.gh-content .kg-product-card-title { font-family: var(--font-head); font-size: 26px; margin: 0 0 6px; }

/* email-only CTA card (renders on web when set to "both") */
.gh-content .kg-email-cta-card { border-top: .5px solid var(--ink-20); border-bottom: .5px solid var(--ink-20); padding: 22px 0; }

/* ============================================================
   TABLES — the catalogue's core data shape. Markdown/HTML-card
   tables (plain <table>) pick these up automatically.
   ============================================================ */
.gh-content table, .gh-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); margin: 32px 0; }

/* Wide catalogue tables (e.g. the bookshop list) outgrow the measure on
   narrow screens. Rather than letting that overflow push the whole document
   wider than the viewport — which stranded the masthead, prose and footer at
   their original width while the page scrolled sideways — each table scrolls
   inside its OWN box. theme.js wraps every content table in .gh-table-wrap;
   the table keeps width:100% so it still fills the column when it fits and
   only scrolls when it can't. The margin moves onto the wrap so spacing is
   unchanged. */
.gh-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 32px 0; }
.gh-table-wrap > table { margin: 0; }

/* Proximity for section headings that sit between tables (the Bookshops country
   list). A heading must read as belonging to the table it introduces, so open
   the gap ABOVE it (clear of the previous table) and tighten the gap BELOW it.
   Covers both the JS-wrapped table (.gh-table-wrap) and the pre-JS bare <table>.
   Only matches heading-beside-table, so prose pages (About, colophon) are
   unaffected. */
.gh-prose .gh-table-wrap + h2,
.gh-prose table + h2 { margin-top: 56px; }
.gh-prose h2 + .gh-table-wrap,
.gh-prose h2 + table { margin-top: 8px; }

/* Fallback before theme.js runs (or if JS is off): a bare table that is still
   a direct child of .gh-content becomes its own scroll box. Once it's wrapped
   it is no longer a direct child, so this rule stops matching and the wrapper
   above takes over. Placed after the base rule so it wins on equal specificity. */
.gh-content > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gh-content table thead th, .gh-table thead th {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--foxed); text-align: left; font-weight: 400; padding: 14px 14px 10px; white-space: nowrap;
  border-bottom: 1.5px solid var(--ember);
}
.gh-content table tbody td, .gh-table tbody td {
  padding: 12px 14px; vertical-align: baseline; line-height: 1.45; font-size: 15.5px;
  color: var(--inkwell); border-bottom: .5px solid var(--ink-12);
}
.gh-content table tbody tr:nth-child(even), .gh-table tbody tr:nth-child(even) { background: var(--ink-045); }
.gh-content table tbody tr:hover, .gh-table tbody tr:hover { background: rgba(237,63,44,.07); }

/* ============================================================
   COMMENTS heading wrapper (the widget itself is an isolated
   Ghost component; its accent follows the admin accent colour).
   ============================================================ */
.gh-comments { border-top: 3px solid var(--ember); margin-top: 64px; padding-top: 24px; }
.gh-cmt-head { display: flex; justify-content: space-between; align-items: baseline; }
.gh-comments-title { font-family: var(--font-head); font-weight: 400; font-size: var(--size-h2); color: var(--inkwell); margin: 0 0 8px; }

/* logged-out membership invite (the prototype's empty state, theme-side) */
.gh-cmt-invite { text-align: center; padding: 40px 20px 30px; }
.gh-cmt-invite h3 { font-family: var(--font-head); font-weight: 400; font-size: 34px; color: var(--inkwell); margin: 0 0 12px; }
.gh-cmt-invite p { font-size: 17px; line-height: 1.6; color: var(--aside-brown); margin: 0 auto 24px; max-width: 440px; }
.gh-cmt-signin { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--foxed); margin-top: 22px !important; }
.gh-cmt-signin a { color: var(--ember); font-style: italic; text-decoration: underline; text-underline-offset: 3px; transition: color .12s ease; }
.gh-cmt-signin a:hover { color: var(--ember-press); }

/* the iframe mount; ember accent for the widget is set in Admin → Brand */
.gh-cmt-frame { margin-top: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .gh-wordmark { font-size: 38px; }
  .gh-header { padding-top: 48px; }
  .gh-theme { top: 10px; }
  .gh-post-title, .gh-prose h1 { font-size: 38px; }
  .gh-issue-title { font-size: 27px; }
  .gh-home-title { font-size: 31px; }
  .gh-home-hero.is-slim .gh-home-title { font-size: 26px; }
  .gh-current { padding: 24px 22px; }
  .gh-current-title { font-size: 30px; }
  .gh-nav { gap: 18px; }
  .gh-content .kg-bookmark-container { flex-direction: column; }
  .gh-content .kg-bookmark-thumbnail { width: 100%; flex-basis: auto; height: 180px; order: -1; }
  .gh-content .kg-bookmark-thumbnail img { border-left: none; border-bottom: .5px solid var(--ink-20); }
  .gh-content .kg-width-wide { width: 100%; margin-left: 0; }
}

/* Anchor-jump breathing room for deep-linked content headings (e.g. the
   Bookshops country index). */
.gh-content h2, .gh-content h3 { scroll-margin-top: 1.5rem; }