/* Sidequesthings 3.0.0: all theme styles. style.css carries the theme header only. */

/* 1. Fonts ---------------------------------------------------------------- */
/* No @font-face here. inc/fonts.php prints the rules inline in the head, beside
   the preload tags, with file-date versioned URLs: a static stylesheet cannot
   carry that version, so fonts would download twice and never cache-bust.
   Japanese text falls through to the system fonts named in the stacks below. */

/* 2. Tokens --------------------------------------------------------------- */
/* Kosha's palette. Contrast is measured against --panel, the solid stand-in
   for the glass card (tests/contrast.test.mjs):
   --ink 16.1, --ink2 10.8, --muted 5.1, --blue 8.3, --violet-hi 8.9, --warn 12.6.
   --violet (4.1) and --rest (4.1) are for glows, fills and dots, never text.
   --on-grad is the text on gradient buttons: 4.6 on --violet, 9.5 on --blue. */
:root {
  --bg: #0d0814;
  --panel: #1c1430;
  /* Glass (approved 2026-10-11, brand/v3-art/backdrop-and-glass.css): a faint
     light-to-violet fill over a blurred backdrop, so the map behind shows
     through softly; lighter top and left borders; an inner top highlight and
     a soft drop shadow. */
  --card: linear-gradient(135deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 38%, rgba(168, 90, 187, .06) 100%);
  --glass-blur: blur(16px) saturate(1.5);
  --glass-blur-phone: blur(8px) saturate(1.3);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-border-top: rgba(255, 255, 255, .2);
  --glass-border-left: rgba(255, 255, 255, .14);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .25);
  --glass-shadow: var(--glass-edge), 0 14px 40px rgba(0, 0, 0, .35);
  --glass-sheen: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .10), transparent 55%);
  /* Without backdrop-filter the fill turns solid so text stays readable. */
  --glass-fallback: rgba(28, 20, 48, .92);
  /* Featured image behind a quest card: a little desaturated so it sits in
     the palette, under a shade that is darkest on the left where the text
     starts and lightest on the right, plus a fade up from the bottom.
     The zoom crops away the dark blurred borders many covers carry, so the
     artwork itself reaches the card edges: more on the wide full-width
     cards, less on the lane cards. */
  --card-image-opacity: .5;
  /* A soft dark scrim directly behind the text parts that would otherwise fall
     under 4.5:1 on a bright picture (category label, date, excerpt). The
     picture between and around them keeps its full strength. */
  --card-image-scrim: rgba(14, 10, 24, .5);
  --card-image-zoom: 1.5;
  --card-image-zoom-lane: 1.15;
  /* A post marked "Bordered cover": the artwork is only the middle third of
     the file, so the zoom is much higher. Phone cards are narrow and tall,
     and cover already crops most of the border there. */
  --card-image-zoom-bordered: 2.7;
  --card-image-zoom-bordered-phone: 1.55;
  --card-image-hover: 1.04;
  --card-image-filter: saturate(.7);
  --card-image-shade: linear-gradient(to top, rgba(14, 10, 24, .6) 0%, rgba(14, 10, 24, 0) 55%), linear-gradient(90deg, rgba(14, 10, 24, .85) 0%, rgba(14, 10, 24, .22) 100%);
  --track: rgba(13, 8, 20, .7);
  --glass: rgba(22, 15, 40, .72);
  --glass-solid: #171029;
  /* Page backdrop: two static glows over the night color; the map is drawn on top of it. */
  --backdrop: radial-gradient(1200px 600px at 30% -10%, rgba(168, 90, 187, .22), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(91, 190, 228, .08), transparent 60%), var(--bg);
  --map-opacity: .14;
  --hero-fade: radial-gradient(closest-side, rgba(13, 8, 20, .55), transparent);
  /* Phones: the text column fills the screen, so the fade is a wide, darker band. */
  --hero-fade-phone: linear-gradient(180deg, rgba(13, 8, 20, 0) 0%, rgba(13, 8, 20, .82) 14%, rgba(13, 8, 20, .82) 86%, rgba(13, 8, 20, 0) 100%);
  /* A dark disc behind the compass dial, so map landmarks do not show through the mark. */
  --compass-disc: radial-gradient(closest-side, var(--bg) 0%, rgba(13, 8, 20, .94) 42%, rgba(13, 8, 20, .7) 72%, rgba(13, 8, 20, 0) 100%);
  /* Hides the dial behind the whole mark, cut-outs included, so no rose line shows
     through the eyes, the channel between the J and the C, or the crescent. The mark
     is 44% of the sigil wide and sits 2% above its centre, so it fits a circle of 22%
     of the sigil around that point. The dial is clear to 23% and back to full by 26%
     (48% and 54% of the gradient's radius), so the rose points show around the mark. */
  --compass-mark-mask: radial-gradient(circle closest-side at 50% 48%, transparent 48%, #000 54%);

  --ink: #f6f3ff;
  --ink2: #cfc6e8;
  --muted: #8f84b0;
  --blue: #5bbee4;
  --violet-hi: #d3a9e3;
  --violet: #a85abb;
  --warn: #ffd2a6;
  --rest: #7d7499;
  --on-grad: #0d0814;

  --line: rgba(211, 169, 227, .22);
  --line-soft: rgba(211, 169, 227, .10);
  --line-strong: rgba(211, 169, 227, .45);
  --line-blue: rgba(91, 190, 228, .55);
  --fill-soft: rgba(211, 169, 227, .06);
  --veil: rgba(13, 8, 20, .6);

  --glow-blue: 0 0 0 1px rgba(91, 190, 228, .55), 0 0 18px rgba(91, 190, 228, .25);
  --glow-icon: drop-shadow(0 0 4px rgba(168, 90, 187, .6));
  --glow-mark: drop-shadow(0 0 26px rgba(168, 90, 187, .5));
  --grad: linear-gradient(90deg, var(--violet), var(--blue));

  --font-display: "Cinzel", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-serif: "Cormorant Garamond", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Inter", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --content-width: 720px;
  --lede-width: 36rem;
  --wide-width: 1180px;
  --radius: 14px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* 3. Reset and base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, [type="submit"], summary { cursor: pointer; }

::selection { background: var(--violet); color: var(--on-grad); }

/* 4. Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(1.7rem, 1.45rem + 1vw, 2.2rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-3); }

.mono { font-family: var(--font-mono); }

/* Cinzel label. Never below 13px. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--violet-hi);
}

/* 5. Layout --------------------------------------------------------------- */
/* No sidebar anywhere. .wrap is the 720px reading column (posts, pages, search,
   404); .wrap-wide carries the hero, the tiles and the full-width cards. */
.wrap {
  max-width: calc(var(--content-width) + 2 * var(--space-3));
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.wrap-wide {
  max-width: calc(var(--wide-width) + 2 * var(--space-3));
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (max-width: 480px) {
  .wrap, .wrap-wide { padding: 0 var(--space-2); }
}

/* Page backdrop: fixed behind everything, out of the content flow, hidden
   from screen readers in the markup. The overworld map is printed inline in
   it once (header.php) and takes its color from here. It never moves. */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--backdrop);
}

.site-backdrop .sqt-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  color: var(--violet-hi);
  opacity: var(--map-opacity);
}

/* On phones the map is drawn larger against the text, so it steps back a little. */
@media (max-width: 720px) {
  :root { --map-opacity: .10; }
}

/* 6. Buttons and links ---------------------------------------------------- */
/* Every :hover rule in this file sits inside @media (hover: hover), so nothing
   sticks after a tap on a touch screen. */
a { color: var(--blue); text-decoration: none; transition: color .15s ease; }

@media (hover: hover) {
  a:hover { color: var(--violet-hi); }
}

/* The ring shows for keyboard focus only, never after a tap or click. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.55em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: var(--on-grad);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .2s ease, filter .2s ease;
}

@media (hover: hover) {
  .btn:hover {
    color: var(--on-grad);
    box-shadow: var(--glow-blue);
    filter: brightness(1.08);
  }
}

/* Solid blue: the main call to action (Portfolio page). Dark text on --blue is 9.5:1.
   The gradient was turned down for these buttons (James, 2026-10-15). */
.btn-solid { background: var(--blue); }

/* Outline: transparent, thin violet line, white text. */
.btn-outline {
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
}

@media (hover: hover) {
  .btn-outline:hover {
    border-color: var(--line-blue);
    color: var(--ink);
    filter: none;
  }
}

/* 7. Media ---------------------------------------------------------------- */
img, svg, video { max-width: 100%; }
img { height: auto; display: block; border-radius: var(--radius); }

.sqt-mark { display: block; width: 100%; height: auto; }

/* 8. Site header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

/* Frosted glass with a thin violet line once the page scrolls (sqt.js adds
   .is-scrolled). Without JavaScript the header is always frosted. */
.site-header.is-scrolled,
.site-header.is-menu-open,
html:not(.js) .site-header {
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
}

.site-title { margin: 0; flex-shrink: 0; }

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
}
@media (hover: hover) {
  .site-brand:hover { color: var(--ink); }
}

.site-brand-mark { width: 40px; height: 40px; flex-shrink: 0; }

.wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

/* The blink: sqt.js sets .is-blinking for 150ms. */
.sqt-mark--blink .mark-eyes--alt { display: none; }
.sqt-mark--blink.is-blinking .mark-eyes { display: none; }
.sqt-mark--blink.is-blinking .mark-eyes--alt { display: inline; }

.site-menu {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.site-nav { flex: 1; min-width: 0; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.site-nav li { position: relative; display: flex; align-items: center; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink2);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Pill hover, shared by menu links, the menu button and social links.
   The submenu toggle stays a plain chevron: it only brightens. */
@media (hover: hover) {
  .site-nav a:hover,
  .menu-toggle:hover,
  .social-link:hover {
    color: var(--ink);
    background-color: var(--fill-soft);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .submenu-toggle:hover { color: var(--ink); }
}

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_item > a { color: var(--violet-hi); }

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -0.5em;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink2);
  transition: color .15s ease;
}
.submenu-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-nav .sub-menu { display: none; }

.menu-toggle { display: none; }

.search-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  height: 44px;
  padding: 0 5px 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--fill-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .search-pill:hover { border-color: var(--line-blue); }
}
.search-pill:focus-within { border-color: var(--line-blue); box-shadow: var(--glow-blue); }

.search-pill-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }

.search-pill input[type="search"] {
  width: 11rem;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  -webkit-appearance: none;
  appearance: none;
}
.search-pill input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.search-pill input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The pill shows the focus; the field inside it does not need a second ring. */
.search-pill input[type="search"]:focus-visible { outline: none; }

/* Go / Search: white text in a thin outline like the other pills; no gradient. */
.search-pill-go {
  min-height: 34px;
  padding: 0 1.1em;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
}

@media (hover: hover) {
  .search-pill-go:hover {
    border-color: var(--line-blue);
    box-shadow: var(--glow-blue);
    color: var(--ink);
    filter: none;
  }
}

/* "Work with me": an outline pill in the phone and tablet drawer, to the Portfolio
   page's contact section. */
.header-cta { flex-shrink: 0; white-space: nowrap; }

/* Desktop: no separate pill (it did not fit beside a five-item menu and the
   search at any width). The Portfolio menu item itself is drawn as the outline
   pill instead; inc/portfolio.php gives it .menu-cta (James, 2026-10-16). */
@media (min-width: 961px) {
  .header-cta { display: none; }

  .site-nav .menu-cta > a {
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .site-nav .menu-cta.current-menu-item > a,
  .site-nav .menu-cta.current_page_item > a { color: var(--violet-hi); }
}

@media (hover: hover) and (min-width: 961px) {
  .site-nav .menu-cta > a:hover { box-shadow: inset 0 0 0 1px var(--line-blue); }
}

/* Desktop: dropdowns as small glass panels. */
@media (min-width: 961px) {
  .site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    flex-direction: column;
    min-width: 220px;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--glass-solid);
  }

  .site-nav .menu-item-has-children.submenu-open > .sub-menu,
  html:not(.js) .site-nav .menu-item-has-children:focus-within > .sub-menu {
    display: flex;
  }

  .site-nav .sub-menu a {
    width: 100%;
    border-radius: 8px;
    white-space: nowrap;
  }
}

@media (hover: hover) and (min-width: 961px) {
  .site-nav .menu-item-has-children:hover > .sub-menu { display: flex; }
}

/* Phone and tablet: the menu and search collapse into a glass drawer.
   Only with JavaScript; without it they stay stacked and visible. */
@media (max-width: 960px) {
  .site-header-inner { flex-wrap: wrap; justify-content: space-between; }

  .site-menu {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .site-nav > ul { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; }
  .site-nav li { flex-wrap: wrap; }
  .site-nav a { min-height: 44px; }
  .submenu-toggle { width: 44px; height: 44px; margin-left: 0; }

  .site-nav .sub-menu {
    flex: 0 0 100%;
    flex-direction: column;
    margin-left: 0.95em;
    padding-left: 0.5rem;
    border-left: 1px solid var(--line);
  }
  .site-nav .menu-item-has-children.submenu-open > .sub-menu,
  html:not(.js) .site-nav .sub-menu { display: flex; }

  .search-pill input[type="search"] { flex: 1; width: auto; font-size: 1rem; }

  html.js .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
  .menu-toggle-icon { width: 18px; height: 18px; }

  html.js .site-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--space-2);
    right: var(--space-2);
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--glass-solid);
  }
  html.js .site-header.is-menu-open .site-menu { display: flex; }

  /* A faint dark veil over the page below the open drawer. It hangs from the
     header (absolute, not fixed: the header's backdrop blur makes it the
     containing block) and sits behind the drawer. A tap on it closes the drawer. */
  html.js .site-header.is-menu-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    height: 100lvh;
    background-color: var(--veil);
  }
}

@media (max-width: 480px) {
  .site-header-inner { min-height: 64px; }
  .wordmark { font-size: 0.9375rem; letter-spacing: 0.14em; }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  html.js .menu-toggle { width: 44px; padding: 0; justify-content: center; }
}

/* 9. Components ----------------------------------------------------------- */
/* Glass panel (cards, tiles, status window, related tiles, post and About
   panels): reads as glass over the map backdrop. .glass is the same surface
   for anything that is not a panel. */
.glass,
.panel {
  position: relative;
  overflow: hidden;
  background: var(--card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.panel { padding: var(--space-3); }

/* A soft sheen from the top left corner. */
.glass::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-sheen);
}

/* Content sits above the sheen. */
.glass > :not(.screen-reader-text),
.panel > :not(.screen-reader-text) { position: relative; }

/* Lighter blur on small screens for scroll performance. */
@media (max-width: 720px) {
  .glass,
  .panel {
    -webkit-backdrop-filter: var(--glass-blur-phone);
    backdrop-filter: var(--glass-blur-phone);
  }
}

/* Browsers without backdrop-filter get a more solid fill so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .panel { background: var(--glass-fallback); }
}

@media (hover: hover) {
  .panel:hover { border-color: var(--line-blue); box-shadow: var(--glass-shadow), var(--glow-blue); }
}

/* Load reveal: panels (and anything marked .reveal) rise 12px and fade in over
   0.5s, staggered 60ms by the --i index sqt.js sets; panels below the fold
   animate once when scrolled into view.

   Nothing is hidden unless sqt.js is running: the hidden start state applies
   only under html.sqt-reveal, a class that script adds itself. With JavaScript
   off, blocked, failed or delayed, every panel is simply visible. It also only
   applies when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html.sqt-reveal :is(.panel, .reveal):not(.is-revealed) {
    opacity: 0;
    transform: translateY(12px);
  }

  html.sqt-reveal :is(.panel, .reveal).is-revealed {
    transition: opacity .5s ease-out, transform .5s var(--ease-out), border-color .2s ease, box-shadow .2s ease;
    transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s;
  }
}

/* 10. Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-2);
}

.footer-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.footer-mark { width: 28px; height: 28px; flex-shrink: 0; color: var(--ink); }
.footer-credit { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.social-links { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--ink2);
  font-size: 0.9375rem;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.social-icon { width: 18px; height: 18px; flex-shrink: 0; }

.footer-tagline {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--violet-hi);
}

@media (max-width: 600px) {
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-brand { flex-direction: column; }
  .social-links { justify-content: center; }
}

/* 11. Accessibility and print --------------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer { display: none; }
  .panel, .reveal { opacity: 1 !important; transform: none !important; }
  .quest-card-media { display: none; }
}

/* 12. Page components ---------------------------------------------------- */

/* Page hero: the band at the top of the home, archive, search and 404 pages. */
.page-hero { padding: var(--space-4) 0; }

.page-hero .eyebrow { display: block; margin-bottom: var(--space-1); }

.page-hero .lede {
  max-width: var(--lede-width);
  font-size: 1.125rem;
  color: var(--ink2);
}

.page-hero .lede > :last-child { margin-bottom: 0; }

.archive-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.archive-title-row h1 { margin: 0; }
.archive-badge { width: 72px; height: 72px; flex-shrink: 0; }

@media (max-width: 600px) {
  .archive-badge { width: 56px; height: 56px; }
}

/* Home hero: the mark inside the compass, copy beside it. No box: they sit
   directly on the page, over the map. */
.hero-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
}

.hero-sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(280px, 30vw, 420px);
  aspect-ratio: 1;
}

/* A soft dark disc behind the dial (about r 270 of the ring's 300): the inside
   of the compass stays clean and the map still shows around it. */
.hero-sigil::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  pointer-events: none;
  background: var(--compass-disc);
}

/* Hero compass (brand/v3-art/compass-ring.svg, printed inline): colors, then
   motion. The mark sits on top, centred, at 44% of the ring, nudged up 2%. */
.sqt-compass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  color: var(--violet-hi);
  -webkit-mask-image: var(--compass-mark-mask);
  mask-image: var(--compass-mark-mask);
}
.sqt-compass .ring-dots { opacity: .45; }
.sqt-compass .ring { opacity: .5; }
.sqt-compass .ring-faint { opacity: .22; }
.sqt-compass .tick-minor { opacity: .35; }
.sqt-compass .tick-mid { opacity: .55; }
.sqt-compass .tick-major { opacity: .85; }
.sqt-compass .card {
  font: 600 22px/1 var(--font-display);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: .04em;
  fill: currentColor;
  stroke: none;
  opacity: .9;
}
.sqt-compass .card-n { fill: var(--blue); opacity: 1; }
.sqt-compass .deg {
  font: 400 11px/1 var(--font-mono);
  text-anchor: middle;
  dominant-baseline: central;
  fill: currentColor;
  stroke: none;
  opacity: .45;
}
.sqt-compass .rose-line { opacity: .32; }
.sqt-compass .rose-shade { fill: currentColor; stroke: none; opacity: .07; }
.sqt-compass .lubber { color: var(--blue); }

.sqt-compass .compass-dial,
.sqt-compass .compass-drift,
.sqt-compass .compass-rose,
.sqt-compass .compass-rose-wrap { transform-box: view-box; transform-origin: 300px 300px; }

/* With reduced motion none of this applies: the ring is still and points north. */
@media (prefers-reduced-motion: no-preference) {
  /* On load the dial swings past north and settles slowly, like a compass finding its bearing. */
  .sqt-compass .compass-dial { animation: sqt-compass-settle 6s .3s both; }
  .sqt-compass .compass-rose { animation: sqt-rose-settle 7s .6s both; }
  /* Then a slow, continuous sway that loops seamlessly (each layer on its own period). */
  .sqt-compass .compass-drift { animation: sqt-compass-sway 16s ease-in-out infinite alternate; }
  .sqt-compass .compass-rose-wrap { animation: sqt-rose-sway 22s ease-in-out infinite alternate; }
}

/* Each segment eases in and out, so every swing slows at its turning point. */
@keyframes sqt-compass-settle {
  0% { transform: rotate(-42deg); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  30% { transform: rotate(16deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  52% { transform: rotate(-7deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  70% { transform: rotate(3deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  85% { transform: rotate(-1deg); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes sqt-rose-settle {
  0% { transform: rotate(24deg); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  34% { transform: rotate(-9deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  58% { transform: rotate(3.5deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  80% { transform: rotate(-1deg); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes sqt-compass-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes sqt-rose-sway { from { transform: rotate(1.6deg); } to { transform: rotate(-1.6deg); } }

.hero-mark {
  position: relative;
  width: 44%;
  margin-top: -4%;
  color: var(--ink);
  filter: var(--glow-mark);
}

/* A soft dark fade behind the text column only, so map lines never compete
   with the headline. */
.hero-inner { isolation: isolate; }
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-fade);
}

.hero-copy { min-width: 0; }
.hero-copy h1 { margin-bottom: var(--space-2); }
.hero-copy .lede { margin-bottom: var(--space-3); }

.hero-tagline {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  /* As wide as the intro above it; balanced so no line ends on a stray word. */
  max-width: var(--lede-width);
  text-wrap: balance;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  color: var(--violet-hi);
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }
  .hero-sigil { width: min(300px, 78vw); justify-self: center; }
  /* Kept inside the screen so the page never scrolls sideways. */
  .hero-copy::before { inset: -24px -16px; }
  .home-hero { overflow-x: clip; }
}

/* Phones: a wider, darker fade behind the hero text, edge to edge. */
@media (max-width: 720px) {
  .hero-copy::before {
    inset: -28px calc(-1 * var(--space-3));
    background: var(--hero-fade-phone);
  }
}

@media (max-width: 480px) {
  .page-hero { padding: var(--space-3) 0; }
  .hero-sigil { width: min(260px, 74vw); }
}

/* Quest log: the list of cards on the home, archive and search pages. */
.quest-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

/* Home feed: two lanes side by side, Current Quests and Quest Log, each with
   its count, its name and a See all link. They stack on phones and tablets. */
.quest-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.quest-lane { min-width: 0; }
.quest-lane .quest-log { margin-bottom: 0; }

.lane-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 var(--space-2);
  padding: 0 0.25rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}
.lane-count {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--blue);
}
.lane-title { margin: 0; }
.lane-all {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .quest-lanes { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* Quest card: a glass panel that is one link. The panel hover (section 9)
   gives the blue glow; nothing moves or scales. */
.quest-card { padding: 0; }

.quest-card-link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius);
  color: inherit;
}
/* The panel clips its overflow, so the focus ring is drawn just inside it. */
.quest-card-link:focus-visible { outline-offset: -4px; }

@media (hover: hover) {
  .quest-card-link:hover { color: inherit; }
}

/* Featured image behind the card (posts without one keep the plain glass).
   Layers, bottom to top: the image, the dark shade, the glass gradient and
   its top edge (the last three are one ::after, which paints over the image),
   the panel sheen, then the link with the text. The panel clips it all to
   the rounded corners and keeps its border. */
/* The card is its own stacking context whatever else it has (it used to rely
   on backdrop-filter for that), so the wrapper's negative z-index can never
   drop it behind anything outside the card. */
.quest-card.has-card-image { isolation: isolate; }

/* The image is zoomed with a transform and so is far larger than the card.
   Three independent clips keep it inside the rounded rectangle, because a
   scaled, composited image can slip past overflow alone in some browsers:
   overflow, a clip-path with the card's inner radius, and paint containment. */
.quest-card > .quest-card-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  -webkit-clip-path: inset(0 round calc(var(--radius) - 1px));
  clip-path: inset(0 round calc(var(--radius) - 1px));
  contain: paint;
  pointer-events: none;
}
.quest-card-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* A little above the middle, so faces and titles near the top of a cover stay in. */
  object-position: center 35%;
  transform: scale(var(--card-image-zoom));
  opacity: var(--card-image-opacity);
  filter: var(--card-image-filter);
  transition: transform .6s var(--ease-out);
}
/* Lane cards are about half as wide, so they need less crop. */
.quest-lane .quest-card { --card-image-zoom: var(--card-image-zoom-lane); }
/* Bordered covers (a per-post choice): the same higher zoom on lane and full-width cards. */
.quest-card.card-image-bordered { --card-image-zoom: var(--card-image-zoom-bordered); }
@media (max-width: 480px) {
  .quest-card.card-image-bordered { --card-image-zoom: var(--card-image-zoom-bordered-phone); }
}

.quest-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* The first background is the top one: glass over shade. */
  background: var(--card), var(--card-image-shade);
  box-shadow: var(--glass-edge);
}

/* The date is --muted on plain glass. Over a bright picture that falls under
   4.5:1 on the lighter right side of the shade, so it steps up to --ink2. */
.quest-card.has-card-image .quest-date { color: var(--ink2); }

/* Readability guard (tests/e2e/cardimage.spec.mjs measures it on a white
   picture): a scrim only behind the text that needs it. The shadow is the
   same color as the fill, blurred, so the scrim has no hard edge. */
.quest-card.has-card-image .quest-pillar,
.quest-card.has-card-image .quest-date,
.quest-card.has-card-image .quest-excerpt {
  background: var(--card-image-scrim);
  box-shadow: 0 0 10px 6px var(--card-image-scrim);
  border-radius: 6px;
}

/* The picture drifts closer on hover, on top of its base zoom; the card itself stays put. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .quest-card:hover .quest-card-image { transform: scale(calc(var(--card-image-zoom) * var(--card-image-hover))); }
}

/* Meta row: status pill, category with its line icon, date on the right.
   Shared by the cards and the post page. */
.quest-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem var(--space-2);
  margin-bottom: var(--space-2);
}

.quest-pillar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.quest-pillar .eyebrow { color: var(--violet-hi); }
.quest-pillar a { color: inherit; }

.quest-date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.quest-card h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.95rem);
}

.quest-excerpt {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink2);
}

.quest-readmore {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--blue);
}

/* Status: a small face of the mark and the status word in its color. No pill.
   Active sky blue (Excited), Pending light purple (Confused), On hold peach
   (Sleepy), Completed white (Happy). */
.quest-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--blue);
}
.quest-status.is-pending { color: var(--violet-hi); }
.quest-status.is-onhold { color: var(--warn); }
.quest-status.is-completed { color: var(--ink); }

.quest-status .sqt-mark { width: 28px; height: 28px; flex-shrink: 0; }

/* Category line icons: thin white outline, soft purple glow. */
.pillar-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink);
  filter: var(--glow-icon);
}
.pillar-icon svg { display: block; width: 20px; height: 20px; }

/* An icon dropped into post text by [sqt_icon] sits on the text line. */
.entry-content .pillar-icon { vertical-align: -0.2em; }

@media (max-width: 480px) {
  .quest-card-link { padding: var(--space-3) var(--space-2); }
  .quest-date { margin-left: 0; flex-basis: 100%; }
}

/* Post and page: meta row, title, byline, project details, body, tags. */
.single-quest { padding: var(--space-2) 0 var(--space-4); }

.single-quest h1 { margin-bottom: var(--space-2); }

.byline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Project details (Workshop posts): a glass panel (.panel) of label and value pairs. */
.project-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-3);
  max-width: var(--content-width);
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
}
.project-row { margin: 0; min-width: 0; }
.project-details dt {
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--violet-hi);
}
.project-details dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Featured image in a thin violet frame. */
.single-quest-thumb {
  max-width: var(--content-width);
  margin-top: var(--space-3);
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.single-quest-thumb img { width: 100%; border-radius: 7px; }

/* Body text: Inter 18px, line height 1.7, a column of about 720px. */
.entry-content {
  max-width: var(--content-width);
  margin-top: var(--space-4);
  overflow-wrap: break-word;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: var(--space-4); }

.entry-content a { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

@media (hover: hover) {
  .entry-content a:hover,
  .project-details dd a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}

.entry-content ul,
.entry-content ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content li::marker { color: var(--violet-hi); }

.entry-content blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--violet-hi);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--fill-soft);
  color: var(--ink2);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content code,
.entry-content kbd {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background-color: var(--fill-soft);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--violet-hi);
}

.entry-content pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--fill-soft);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}
.entry-content pre code { padding: 0; background: none; font-size: inherit; color: var(--ink2); }

.entry-content hr {
  margin: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.entry-content figure { margin: var(--space-3) 0; }
.entry-content figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.entry-content table {
  width: 100%;
  margin: 0 0 var(--space-3);
  border-collapse: collapse;
  font-size: 1rem;
}
.entry-content th,
.entry-content td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.entry-content th {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-hi);
}

.entry-content iframe,
.entry-content video { max-width: 100%; }

/* Tags: small mono pills. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: var(--content-width);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.post-tags a,
.quest-filter a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink2);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

@media (hover: hover) {
  .post-tags a:hover,
  .quest-filter a:hover {
    border-color: var(--line-blue);
    background-color: var(--fill-soft);
    color: var(--ink);
  }
}

/* Comments. */
.comments-area {
  max-width: var(--content-width);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.comment-list { margin: var(--space-2) 0 var(--space-3); padding: 0; list-style: none; }
.comment-list .children { margin: 0; padding-left: var(--space-3); list-style: none; }
.comment-body {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 1rem;
}
.comment-author .avatar { display: inline-block; margin-right: 0.5rem; border-radius: 50%; vertical-align: middle; }
.comment-metadata,
.comment-notes,
.logged-in-as {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}
.comment-reply-title { font-size: 1.5rem; }
.comment-form label { display: block; margin-bottom: 0.35rem; font-size: 0.9375rem; color: var(--ink2); }
/* The cookie checkbox and its label sit on one row. */
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.6rem; }
.comment-form-cookies-consent input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin: 0.2rem 0 0; accent-color: var(--blue); }
.comment-form-cookies-consent label { margin: 0; line-height: 1.5; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--fill-soft);
  font-size: 1rem;
  color: var(--ink);
}
.comment-form input:focus-visible,
.comment-form textarea:focus-visible { border-color: var(--line-blue); }
.comment-form .submit {
  min-height: 44px;
  padding: 0.55em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: var(--on-grad);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Category archive: the large line badge beside the title. */
.archive-badge { border-radius: 0; filter: var(--glow-icon); }

/* Search. */
.search-term { font-style: normal; color: var(--blue); }

/* Reacting states (no results, 404): a large face of the mark. */
.state-mark {
  width: 128px;
  margin-bottom: var(--space-3);
  color: var(--ink);
  filter: var(--glow-mark);
}

.search-empty { padding: var(--space-2) 0 var(--space-4); }
.search-empty-text { margin-bottom: var(--space-3); font-size: 0.9375rem; color: var(--ink2); }

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.not-found .quest-filter { margin-top: var(--space-4); }

/* Category pills (search with no results, 404). Styled with the tag pills above. */
.quest-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}
.quest-filter a { min-height: 40px; }
.quest-filter .pillar-icon svg { width: 18px; height: 18px; }

/* Pagination: outlined circles with white numbers; the current page is a
   solid white circle with a dark number. Older / Newer are outlined pills. */
.pagination { margin: 0 0 var(--space-4); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink);
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pagination .page-numbers.current {
  border-color: var(--ink);
  background-color: var(--ink);
  font-weight: 500;
  color: var(--bg);
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next { width: auto; padding: 0 1.1em; }
.pagination .page-numbers.dots { width: auto; border-color: transparent; padding: 0 0.2em; color: var(--muted); }

@media (hover: hover) {
  .pagination a.page-numbers:hover {
    border-color: var(--line-blue);
    box-shadow: var(--glow-blue);
    color: var(--ink);
  }
}

@media (max-width: 480px) {
  .state-mark { width: 104px; }
  .not-found-actions .search-pill { flex: 1 1 100%; }
  .not-found-actions .search-pill input[type="search"] { flex: 1; width: auto; }
}

/* About: "The Mark" panel, below the page's own content. */
.mark-story {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4);
}

.mark-story-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.mark-story-mark {
  width: clamp(120px, 14vw, 168px);
  color: var(--ink);
  filter: var(--glow-mark);
}

.mark-story-title { margin-bottom: 0.5rem; }

.mark-story-intro {
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  color: var(--violet-hi);
}

.mark-story-entries {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.mark-story-entry {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.mark-story-entries dt {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--violet-hi);
}
.mark-story-entries dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink2);
}

/* The 12 expressions. */
.mark-faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}
.mark-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--ink);
}
.mark-face .sqt-mark { width: 64px; }
.mark-face-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 600px) {
  .mark-story { padding: var(--space-3) var(--space-2); }
  .mark-story-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .mark-story-mark { justify-self: center; }
  .mark-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--space-3); margin-top: var(--space-3); }
  .mark-face .sqt-mark { width: 56px; }
}

/* Side quest tiles: one small glass tile per category, a small line icon over
   a small Cinzel name. All eight in one row on desktop; 4 by 2 in the 720px
   reading column under a post, where eight across would not be legible; one
   horizontally swipeable row with scroll snap on phones. */
.quest-tiles {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 var(--space-4);
}

.wrap .quest-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Every tile has the same layout whether its name takes one line or two: the
   icon in a fixed row at the top, then a label area two lines tall. So all the
   icons line up, and so do the first lines of the names. */
.quest-tile {
  display: grid;
  grid-template-rows: 32px auto;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  padding: 0.9rem 0.5rem 0.75rem;
  text-align: center;
  color: var(--ink2);
}

/* The drawing fills about 60% of its box, so a 32px box draws a 20px icon. */
.quest-tile .pillar-icon svg { width: 32px; height: 32px; }

.quest-tile-name {
  display: block;
  min-height: 2.6em;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.quest-tile.is-current {
  border-color: var(--line-blue);
  background-color: var(--fill-soft);
  color: var(--ink);
}

@media (hover: hover) {
  .quest-tile:hover { color: var(--ink); }
}

.quest-tiles-heading {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
}

@media (max-width: 1100px) {
  .quest-tile-name { letter-spacing: 0.04em; }
}

/* Tablet and phone: one row that swipes sideways, snapping tile by tile. It
   runs to the screen edges so the next tile peeks in. */
@media (max-width: 860px) {
  .quest-tiles,
  .wrap .quest-tiles {
    display: flex;
    grid-template-columns: none;
    gap: 0.6rem;
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    padding: 4px var(--space-3) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .quest-tiles::-webkit-scrollbar { display: none; }

  .quest-tile {
    flex: 0 0 auto;
    min-width: 116px;
    padding: 0.7rem 0.9rem;
    scroll-snap-align: start;
  }
  /* One line each in the swipe row, so the label area is one line tall. */
  .quest-tile-name { min-height: 0; letter-spacing: 0.08em; white-space: nowrap; }
}

@media (max-width: 480px) {
  .quest-tiles,
  .wrap .quest-tiles {
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    scroll-padding-left: var(--space-2);
  }
}

/* Share row at the end of a post. Buttons reuse .social-link (section 10). */
.share-quest {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.share-quest .eyebrow { display: block; margin: 0 0 0.75rem; }

.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.share-row .social-link {
  width: 44px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
}
.share-copy.is-copied { border-color: var(--line-blue); color: var(--blue); }

.share-status {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--blue);
}

/* Related quests under a post: three tiles from the same category, a link to
   the whole category, then older and newer. */
.related-quests {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

.related-title { margin-bottom: var(--space-3); font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.95rem); }

.related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}
.related-list li { display: flex; min-width: 0; }

.related-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  color: var(--ink);
}
.related-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.related-tile .quest-date { margin-left: 0; white-space: normal; }

.related-all { margin-top: 0; }

.post-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.post-steps a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  color: var(--ink);
}
.post-steps .step-next { text-align: right; }
.post-step-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--blue);
}
.post-step-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .related-tile:hover { color: var(--ink); }
  .post-steps a:hover .post-step-title { color: var(--violet-hi); }
}

@media (max-width: 600px) {
  .related-list { grid-template-columns: minmax(0, 1fr); }
}

.comments-title { display: block; margin: 0; }

/* Status window ([sqt_status]): a character sheet in a glass panel. The bars
   count published posts per category. */
.status-window {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  font-size: 1rem;
  line-height: 1.5;
}
.status-window p { margin: 0; }

.sw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.sw-name {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.45rem + 1vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.status-window .sw-class {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--violet-hi);
}
.sw-class span {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink2);
}
.sw-level {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--blue);
}
.sw-level span {
  margin-right: 0.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.status-window .sw-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}
.sw-profile > div { min-width: 0; }
.sw-profile dt,
.status-window .sw-label,
.sw-skill dt {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--violet-hi);
}
.sw-profile dd { margin: 0.15rem 0 0; color: var(--ink); overflow-wrap: anywhere; }

.status-window .sw-exp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0.75rem var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background-color: var(--fill-soft);
  color: var(--ink2);
}
.sw-exp strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--blue);
}

.status-window .sw-label {
  margin: var(--space-3) 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

/* Inside .entry-content, so these out-rank its list rules. */
.status-window .sw-stats { margin: 0; padding: 0; list-style: none; }
.status-window .sw-stats li { margin: 0; }
.status-window .sw-stats a {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 40px;
  color: var(--ink2);
  text-decoration: none;
}
/* Names never wrap: the name column is sized for the longest one. */
.sw-stat-name { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; white-space: nowrap; }
.sw-stats .pillar-icon { vertical-align: 0; }
.sw-stats .pillar-icon svg { width: 18px; height: 18px; }
.sw-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-align: right;
  color: var(--ink);
}

/* The bar is a <progress>, so it needs no inline style. The fill is the
   purple-to-blue gradient; the track stays dark. */
.sw-bar {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background-color: var(--track);
  -webkit-appearance: none;
  appearance: none;
}
.sw-bar::-webkit-progress-bar { background-color: var(--track); }
.sw-bar::-webkit-progress-value { border-radius: 999px; background: var(--grad); }
.sw-bar::-moz-progress-bar { border-radius: 999px; background: var(--grad); }

/* Bars draw in from the left once, on load. Still under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sw-bar { animation: sw-fill .9s var(--ease-out) .2s 1 backwards; }
}

@keyframes sw-fill {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (hover: hover) {
  .status-window .sw-stats a:hover { color: var(--ink); text-decoration: none; }
}

.sw-skill {
  padding: var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background-color: var(--fill-soft);
}
.sw-skill-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.sw-skill dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem var(--space-2);
  margin: 0.75rem 0 0;
}
.sw-skill dd { margin: 0; color: var(--ink2); }
.sw-skill-sub { display: block; font-weight: 600; color: var(--ink); }

@media (max-width: 480px) {
  .status-window { padding: var(--space-2); }
  .status-window .sw-stats a { grid-template-columns: 10.25rem minmax(0, 1fr) 1.75rem; gap: 0.5rem; }
  .sw-stat-name { gap: 0.5rem; }
  .sw-skill dl { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .sw-skill dd { margin-bottom: 0.6rem; }
}

/* Portfolio page (page-portfolio.php): the client-facing front door to the
   Workshop. Six sections in .wrap-wide; glass panels for the cards. Every grid
   is one column at phone width. Nothing here animates beyond the panels' load
   reveal, which every page has. */
.portfolio { padding-bottom: var(--space-5); }

.pf-section { margin-top: var(--space-5); }
.pf-section > h2 { margin: 0.4rem 0 var(--space-4); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.625rem); line-height: 1.1; }
.pf-section > .eyebrow { margin: 0; }

.pf-grid { display: grid; gap: 1.25rem; }
.pf-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pf-grid-projects { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.375rem; }

.pf-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.pf-more { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 0.8125rem; line-height: 1.5; }

.pf-icon { width: 34px; height: 34px; color: var(--violet-hi); }

/* Browser frame around a screenshot: three dots and the address, which links to the site. */
.pf-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.pf-frame img { display: block; width: 100%; height: auto; }
.pf-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--line-soft);
}
.pf-dots { display: flex; flex-shrink: 0; gap: 7px; }
.pf-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--rest); }
.pf-frame-url {
  display: block;
  overflow: hidden;
  min-height: 44px;
  margin: -2px 0;
  line-height: 44px;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .pf-frame-url:hover { color: var(--ink2); }
}

/* 1. Hero: text and the Melendres page side by side; the frame drops below on phones. */
.pf-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--space-4) 3.5rem;
  align-items: center;
  padding-top: var(--space-5);
}
.pf-hero-text { display: flex; flex-direction: column; gap: 1.375rem; }
.pf-hero-text > * { margin: 0; }
.pf-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem); line-height: 1.02; }
.pf-lede { max-width: 34rem; font-size: 1.125rem; color: var(--ink2); }
.pf-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.375rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* 2. Problems I solve: the client's words, then the fix. */
.pf-problem { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem; }
.pf-problem > * { margin: 0; }
.pf-problem-quote { font-family: var(--font-serif); font-size: 1.375rem; font-style: italic; line-height: 1.3; color: var(--ink); }
.pf-fix,
.pf-story dt {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}
.pf-fix { color: var(--blue); }
.pf-problem-text { flex-grow: 1; color: var(--ink2); }

/* 3. Featured client project: two overlapping browser frames beside the story.
   The frames stay overlapped on phones, only smaller. */
.pf-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  margin-top: 1.125rem;
  padding: 0;
  border-radius: 18px;
}
.pf-featured-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 1.75rem;
  background: radial-gradient(ellipse 80% 70% at 30% 30%, rgba(168, 90, 187, .25), transparent 70%), rgba(13, 8, 20, .45);
}
.pf-featured-art .pf-frame { border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.pf-frame-back { margin-right: 12%; }
.pf-featured-art .pf-frame-front { position: relative; margin: -14% 0 0 12%; border-color: var(--line-blue); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.pf-featured-art .pf-frame-bar { min-height: 34px; padding: 0 0.75rem; }
.pf-featured-art .pf-dots span { width: 8px; height: 8px; }
.pf-featured-art .pf-frame-url { margin: -5px 0; font-size: 0.6875rem; }

.pf-featured-body { display: flex; flex-direction: column; gap: 1.125rem; padding: 2.25rem; }
.pf-featured-body > * { margin: 0; }
.pf-featured-body h2 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.375rem); line-height: 1.1; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; font-size: 0.75rem; }
.pf-chips li { padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink2); }
.pf-chips .is-live { border-color: var(--line-blue); color: var(--blue); }

.pf-story { display: grid; gap: 0.875rem; }
.pf-story dt { color: var(--violet-hi); }
.pf-story dd { margin: 0.25rem 0 0; color: var(--ink2); }

.pf-featured-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem; padding-top: 0.25rem; }
.pf-stack { font-size: 0.75rem; color: var(--muted); }

/* 4. More problems, solved: picture on top, then the tag, title, text and link. */
.pf-project { display: flex; flex-direction: column; padding: 0; }
.pf-project-media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: var(--panel); }
.pf-project-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Kosha's strip is very wide: the crop keeps the clock and the greeting at its left. */
.pf-project-media img.is-left { object-position: 0 50%; }
.pf-project-body { display: flex; flex-direction: column; flex-grow: 1; gap: 0.625rem; padding: 1.375rem; }
.pf-project-body > * { margin: 0; }
.pf-tag { font-size: 0.75rem; color: var(--blue); }
.pf-project h3 { font-size: 1.625rem; line-height: 1.15; }
.pf-project p { flex-grow: 1; font-size: 0.9375rem; color: var(--ink2); }

/* Life Inbox has no screenshot to show (the real inbox is private), so its picture
   is the flow itself: mail in, five labels, bills on the calendar. */
.pf-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(168, 90, 187, .18), transparent 70%);
  color: var(--ink);
  text-align: center;
}
.pf-flow-step { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pf-flow-step .pf-icon { width: 24px; height: 24px; }
.pf-flow-labels { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 19rem; padding: 0.875rem 0; }
.pf-flow-labels::before,
.pf-flow-labels::after { content: ""; position: absolute; left: 50%; width: 1px; height: 0.625rem; background: var(--line-strong); }
.pf-flow-labels::before { top: 0; }
.pf-flow-labels::after { bottom: 0; }
.pf-flow-labels span { padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--veil); font-size: 0.75rem; color: var(--ink2); }

/* 5. How working with me goes: four numbered steps on a top rule; the first is blue. */
.pf-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-steps li { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.125rem; border-top: 2px solid var(--line-strong); }
.pf-steps li:first-child { border-top-color: var(--blue); }
.pf-steps li > * { margin: 0; }
.pf-step-n { font-size: 0.875rem; color: var(--violet-hi); }
.pf-steps li:first-child .pf-step-n { color: var(--blue); }
.pf-steps h3 { font-size: 1.5625rem; }
.pf-steps p { font-size: 0.9375rem; color: var(--ink2); }

/* 6. Call to action. */
.pf-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  padding: 3.5rem 2.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(168, 90, 187, .28), transparent 60%), radial-gradient(ellipse 60% 120% at 100% 100%, rgba(91, 190, 228, .18), transparent 60%), var(--panel);
  text-align: center;
}
.pf-cta > * { margin: 0; }
.pf-cta h2 { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem); line-height: 1.1; }
.pf-cta p { max-width: 35rem; color: var(--ink2); }
.pf-cta .pf-actions { justify-content: center; padding-top: 0.375rem; }
.pf-email { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; color: var(--muted); }
@media (hover: hover) {
  .pf-email:hover { color: var(--ink2); }
}

@media (max-width: 600px) {
  .pf-hero { padding-top: var(--space-4); }
  .pf-problem { padding: 1.5rem; }
  .pf-featured-art { padding: 1.5rem 1rem; }
  .pf-featured-body { padding: 1.5rem; }
  .pf-cta { padding: 2.5rem 1.25rem; }
  .pf-actions .btn { flex: 1 1 100%; }
}