/* =====================================================================
   bobelliott.org — v2
   Two themes: BLUEPRINT (cyanotype deep blue, white line — DEFAULT) and
   PAPER (white paper, drafting-blue line — toggled-to / scraped page).
   The toggle is a structural unlock: marginalia in cyanotype-color text
   sit invisible against the cyanotype default; flipping to paper reveals
   them as drafting-blue ink on white. Palimpsest mechanic — the surface
   is the latest layer; toggling reveals the older draft scraped beneath.
   ===================================================================== */

/* ---------- Theme tokens ---------- */
:root {
  /* BLUEPRINT (default) — cyanotype deep blue, white line */
  --paper:        #0a2540;       /* cyanotype deep blue */
  --paper-deep:   #06192e;
  --ink:          #fbfaf6;       /* the white "print" of a cyanotype */
  --ink-soft:     #cfd9e6;
  --ink-faint:    #8ea0ba;
  --rule:         #fbfaf6;
  --rule-mid:     #8ea0ba;
  --rule-faint:   #2b446a;
  --accent:       #ff8a5a;       /* warmer coral for the dark side */
  --accent-soft:  rgba(255, 138, 90, 0.14);
  --link:         #fbfaf6;
  --link-under:   #ff8a5a;
  --selection-bg: #ff8a5a;
  --selection-fg: #06192e;

  /* Marginalia color — fixed at cyanotype-color in BOTH modes.
     Invisible against the cyanotype default; visible against paper. */
  --marginalia:   #0a2540;

  --display: "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hand:    "Architects Daughter", "Bradley Hand", "Segoe Script", cursive;

  --content-w: 68ch;
  --gutter: 1.25rem;
  --rule-w: 1px;

  color-scheme: dark;
}

:root[data-theme="blueprint"] { color-scheme: dark; }

/* PAPER (toggled-to) — white paper, drafting blue */
:root[data-theme="paper"] {
  --paper:        #fbfaf6;       /* faint-warm white paper */
  --paper-deep:   #f0eee5;
  --ink:          #1a3a72;       /* drafting blue */
  --ink-soft:     #3d5a85;
  --ink-faint:    #7a8ba8;
  --rule:         #1a3a72;
  --rule-mid:     #7a8ba8;
  --rule-faint:   #c0cad9;
  --accent:       #a8262e;       /* surveyor's red */
  --accent-soft:  rgba(168, 38, 46, 0.10);
  --link:         #1a3a72;
  --link-under:   #a8262e;
  --selection-bg: #a8262e;
  --selection-fg: #fbfaf6;
  /* --marginalia stays #0a2540 — visible as dark-blue ink on white paper */
  color-scheme: light;
}

/* ============================================================
   Cyanotype texture stack — applied only on the blueprint default.
   Three layers from bottom to top:
     1. Body background-image: radial vignette + faint warm bleed
        (built into the body rule below via background-image).
     2. body::after  — low-frequency mottling (large soft patches
        of lighter / denser emulsion). soft-light blend.
     3. body::before — fine grain (existing). overlay blend.
   All hidden when the user toggles to paper.
   ============================================================ */

/* Layer 3 — fine grain (existing). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.15  0 0 0 0 0.25  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  background-repeat: repeat;
}
:root[data-theme="paper"] body::before { display: none; }

/* Layer 2 — fold cracks, creases, and edge wear. Hand-drawn-style
   white paths sit over the blue with soft-light, so the cyanotype
   emulsion reads as cracked or thinned in localized places, not
   uniformly cloudy. Edge wear patches are slightly heavier alpha
   to suggest paper showing through at the corners. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  /* Soft cyanotype mottling — no tears, no cracks. Atmospheric only. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.008' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.92  0 0 0 0 0.84  0 0 0 1.3 -0.25'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
  background-size: 1800px 1800px;
  background-repeat: repeat;
  background-position: 0 0;
}
:root[data-theme="paper"] body::after { display: none; }

/* Keep page content above the texture layers. */
body > * { position: relative; z-index: 1; }

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background-color: var(--paper);
  /* Layer 1 of the cyanotype texture stack:
     - radial highlight (top-center slightly lighter — paper held to light),
     - radial vignette at the edges (slightly denser),
     - faint warm bleed at the bottom corners where cyanotype paper ages first.
     All layered onto the solid --paper color above. */
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 28%,
      rgba(255, 240, 215, 0.06) 0%,
      rgba(255, 240, 215, 0.02) 35%,
      transparent 65%),
    radial-gradient(ellipse 120% 120% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.10) 85%,
      rgba(0, 0, 0, 0.18) 100%),
    radial-gradient(circle at 92% 96%,
      rgba(246, 230, 200, 0.18) 0%,
      rgba(246, 230, 200, 0.06) 18%,
      transparent 36%),
    radial-gradient(circle at 6% 94%,
      rgba(246, 230, 200, 0.14) 0%,
      rgba(246, 230, 200, 0.04) 14%,
      transparent 30%),
    radial-gradient(circle at 96% 6%,
      rgba(246, 230, 200, 0.10) 0%,
      transparent 22%);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum", "lnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 320ms ease, color 320ms ease;
}
:root[data-theme="paper"] body { background-image: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-color: var(--link-under); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; padding: 0.5rem 1rem;
  background: var(--ink); color: var(--paper); z-index: 999;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: var(--rule-w) solid var(--rule);
  /* Transparent — the body's cyanotype sheet (with cracks, tears, and
     edge bleeds) flows continuously up through the masthead area, so
     the "Bob Elliott" bar reads as part of the same drawing, not a
     separate header surface. A light backdrop-filter blur softens any
     content that scrolls beneath, keeping the nav text readable. */
  background: transparent;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(4px);
}
/* On paper side, the page is a clean sheet — restore a subtle paper
   tint so scrolled content doesn't bleed through too sharply. */
:root[data-theme="paper"] .masthead {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
}
.masthead-inner {
  /* Same column width as the content body on every page so the brand
     and toggle align with the page beneath. */
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
}
/* On mobile: hide the nav. Masthead becomes brand + toggle, period. */
.primary-nav { display: none; }
.brand {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1;
}
/* Hand-signature brand mark — the SVG is dropped in as a CSS mask, so
   the box's background-color is what shows through. That makes the
   wordmark inherit `currentColor` from `.brand` and tint correctly per
   theme (drafting blue on cyanotype, ink on paper) — no need to edit the
   ~370 individual fills inside the traced SVG itself. */
.brand-mark {
  display: inline-block;
  /* Aspect ratio of rje2: 1517 × 445 ≈ 3.41 : 1. Height controls the
     visual size in the masthead; width follows from aspect-ratio. */
  height: 2rem;
  aspect-ratio: 1517 / 445;
  background-color: currentColor;
  -webkit-mask-image: url('/img/brand-signature.svg');
          mask-image: url('/img/brand-signature.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  /* Slight optical lift — the signature's baseline sits a hair above
     the box's vertical midline, and a tiny nudge keeps it visually
     centered with adjacent nav text. */
  vertical-align: -0.1em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
.primary-nav {
  grid-column: 1 / -1;
  border-top: var(--rule-w) solid var(--rule-faint);
  padding-top: 0.6rem;
  margin-top: 0.2rem;
  overflow-x: visible;
}
.primary-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.2rem; flex-wrap: nowrap;
}
.primary-nav a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.2rem 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- Theme toggle — small, blue, half darker blue ---------- */
.theme-toggle {
  background: transparent;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 120ms ease;
  opacity: 0.85;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}
.theme-disc {
  width: 12px; height: 12px;
  display: block;
  transform: rotate(180deg);   /* default = blueprint side up */
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.theme-disc .disc-bg   { fill: transparent; }
.theme-disc .disc-fg   { fill: currentColor; opacity: 1; }
.theme-disc .disc-ring { fill: none; stroke: currentColor; stroke-width: 1; }
:root[data-theme="paper"] .theme-disc { transform: rotate(0deg); }

@media (min-width: 48rem) {
  .masthead-inner {
    grid-template-columns: auto 1fr auto;
    gap: 0 2rem;
  }
  .primary-nav {
    display: block;
    grid-column: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    justify-self: center;
  }
}

/* ---------- Main shell ---------- */
main { display: block; }
.page, .entry {
  max-width: 60rem;       /* match the home column for consistency */
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}
.entry-prose, .prose {
  max-width: 45rem;        /* match the home About prose column */
}

/* =====================================================================
   FOOTER — rule with rolling egg, cup, and emerging flag
   ===================================================================== */
.colophon {
  margin-top: 4rem;
  /* Transparent — the body's cyanotype sheet (with crinkles, tears,
     and bottom-edge bleeds) rolls up through the footer the same way
     it rolls up through the masthead. The header at the top and the
     footer at the bottom are part of the same sheet, not separate
     surfaces. */
  background: transparent;
  position: relative;
}
:root[data-theme="paper"] .colophon {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
}
.colophon-rule {
  position: relative;
  height: 30px;
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 var(--gutter);
}
.rule-svg {
  width: 100%;
  height: 30px;
  display: block;
  overflow: visible;
}
.rule-svg .rule-line {
  stroke: var(--rule);
  stroke-width: 1;
  fill: none;
}

/* The egg — bigger, asymmetric Easter shape, white + blue only.
   Rolls along the line without crossing it: pivot is the egg's
   geometric center, and JS supplies a vertical bob that keeps the
   egg's lowest-extending point glued to the rule line through every
   rotation angle. */
.footer-egg {
  position: absolute;
  /* Egg's bottom rests on the rule line at rest. Rule sits at y=20 of
     the 30-tall colophon-rule (10px above container bottom). The egg
     shape's bottom in CSS is ~2.1 px above the SVG's bottom edge, so
     `bottom: 8` puts the egg-shape bottom at the rule line. */
  bottom: 8px;
  left: 0;
  transform: translateX(var(--egg-x, 0px)) translateY(var(--egg-bob, 0px));
  width: 26px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  transition: transform 0ms;
}
.footer-egg:active { cursor: grabbing; }
.footer-egg svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--egg-roll, -9deg));
  transform-origin: 50% 50%;        /* pivot at the egg's geometric center */
  transition: transform 0ms;
}
.footer-egg .egg-body     { fill: var(--paper); }
.footer-egg .egg-tint     { fill: var(--ink); opacity: 0.07; }
.footer-egg .egg-squiggle { fill: none; stroke: var(--ink); stroke-width: 0.3;  stroke-linecap: round; stroke-linejoin: round; }
.footer-egg .egg-outline  { fill: none; stroke: var(--ink); stroke-width: 0.65; stroke-linejoin: round; }
.footer-egg.is-dropping {
  pointer-events: none;
  transition: transform 360ms cubic-bezier(.55, .05, .68, .53), opacity 360ms ease-in;
}
.footer-egg.is-gone { display: none; }
.footer-egg:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
  border-radius: 50%;
}

/* The flag — shorter pole, base sits below the rule (suggests the
   stick continues off-screen below the page). Cloth flutter is real
   path-morph SMIL animation in the SVG itself; CSS adds the larger
   whole-flag sway on top. */
.footer-flag {
  position: absolute;
  bottom: -10px;      /* base 10px below the rule line */
  left: 0;
  width: 64px;
  /* Extra headroom above the SVG (16px) so SMIL keyframes that lift
     the pennant above the rest position aren't clipped by overflow. */
  height: 66px;
  pointer-events: none;
  overflow: hidden;   /* clip the svg sliding up from far below */
  z-index: 1;
  transition: opacity 320ms ease;
}
.footer-flag.is-hiding { opacity: 0; }
.footer-flag svg {
  width: 64px;
  height: 50px;
  display: block;
  position: absolute;
  bottom: -50px;
  left: 0;
  transition: bottom 600ms cubic-bezier(.34, 1.4, .64, 1);
  transform-origin: 8px 50px;
}
.footer-flag.is-emerged svg {
  bottom: 0;
  animation: flag-sway 1.7s ease-in-out 500ms infinite;
}
/* Whole-flag sway — pole + pennant rotate together as if the stick
   itself is flexing in the wind. The SMIL pennant flutter compounds
   on top, so the cloth ripples WHILE the pole is bobbing. */
@keyframes flag-sway {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(8deg); }
}
.footer-flag .flag-pole {
  stroke: var(--ink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.footer-flag .flag-finial {
  fill: var(--ink);
  stroke: none;
}
.footer-flag .flag-pennant {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* The persistent bubble — appears on second drop, stays.
   Block-caps in a revision cloud; visible in both modes via white-fill +
   blue-stroke cloud for light, swapped for dark. */
.footer-bubble {
  position: absolute;
  /* Lowered and shifted left so it stops crowding the palimpsest
     callout above (in About) while staying clear of the flag at the
     left end of the rule. Doesn't need to live in the right margin. */
  bottom: 50px;
  right: max(0.5rem, 22%);
  /* Auto-fit content: shrinks to fit on one line when there's room,
     wraps when the viewport is too narrow to hold it. */
  width: max-content;
  max-width: min(22rem, calc(100vw - 1.5rem));
  white-space: normal;
  text-align: center;
  font-family: var(--hand);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  /* Generous padding so text floats well inside the cloud and the
     puffs sit clearly outside the words. Was 1.4rem 2.4rem — bumped
     to give the bubble a cleaner "callout with breathing room" feel. */
  padding: 2rem 3rem;
  /* Default = cyanotype side: dark fill, white stroke. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A19,19 0 0 1 78,30 A7,7 0 0 1 92,30 A21,21 0 0 1 134,30 A9,9 0 0 1 152,30 A18,18 0 0 1 188,30 A14,14 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A16,16 0 0 1 184,70 A9,9 0 0 1 166,70 A20,20 0 0 1 126,70 A7,7 0 0 1 112,70 A18,18 0 0 1 76,70 A11,11 0 0 1 54,70 A15,15 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='%230a2540' stroke='%23fbfaf6' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 5;
  opacity: 0;
  transition: opacity 420ms ease 220ms;
  pointer-events: none;
}
:root[data-theme="paper"] .footer-bubble {
  /* Toggled paper side: white fill, drafting-blue stroke. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A19,19 0 0 1 78,30 A7,7 0 0 1 92,30 A21,21 0 0 1 134,30 A9,9 0 0 1 152,30 A18,18 0 0 1 188,30 A14,14 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A16,16 0 0 1 184,70 A9,9 0 0 1 166,70 A20,20 0 0 1 126,70 A7,7 0 0 1 112,70 A18,18 0 0 1 76,70 A11,11 0 0 1 54,70 A15,15 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='%23fbfaf6' stroke='%231a3a72' stroke-width='1.4' stroke-linejoin='round'/></svg>");
}
.footer-bubble.is-shown { opacity: 1; }

.colophon-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.colophon-text { color: var(--ink-faint); }
.colophon-link,
.colophon-mail {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-faint);
  padding-bottom: 1px;
}
.colophon-link:hover,
.colophon-mail:hover { color: var(--ink); border-bottom-color: var(--accent); }
.colophon-dot { color: var(--rule-mid); margin: 0 0.4em; }

/* =====================================================================
   HOME — sans-serif, basti format, lots of breath.
   Each section in its own pocket, separated by white space and a
   hairline rule above the section label.
   ===================================================================== */
.home main { padding-top: 0; }
.home-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 5rem var(--gutter) 4rem;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;       /* anchor for the absolutely-positioned toggle hint */
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin: 0 0 8rem;
  align-items: center;
  padding-top: 2rem;       /* room for the cloud-marked caret-insert above */
}
@media (min-width: 44rem) {
  .hero {
    grid-template-columns: 1fr 11rem;
    gap: 3rem;
  }
}
.hero-text { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }

/* Identity pill — small rounded outlined tag, sits ABOVE the name. */
.hero-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule-faint);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  margin: 0;
  position: relative;        /* anchor for the marginalia caret-insert + cloud */
  background: transparent;
  /* Lift the pill above its own ::before cloud so the text and border
     sit visually on top of the cloud's interior. */
  z-index: 1;
}

/* Marginalia cloud — one bouncy editorial circle that wraps BOTH the
   floating "HUSBAND, FATHER, RENAISSANCE MAN" phrase above AND the
   Architect/Developer/Visionary pill itself. Treats them as a single
   editorial mark of the same ilk. Visible only on the paper toggle. */
.hero-tag::before {
  content: "";
  position: absolute;
  /* Extends well above to enclose the floating marginalia, and to the
     right to cover that phrase's full width (longer than the pill).
     Bottom extends well past the pill so the oval sits entirely
     INSIDE the cloud rather than the cloud cutting through it. */
  top: -3.4rem;
  left: -0.8rem;
  right: -8rem;
  bottom: -0.9rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A19,19 0 0 1 78,30 A7,7 0 0 1 92,30 A21,21 0 0 1 134,30 A9,9 0 0 1 152,30 A18,18 0 0 1 188,30 A14,14 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A16,16 0 0 1 184,70 A9,9 0 0 1 166,70 A20,20 0 0 1 126,70 A7,7 0 0 1 112,70 A18,18 0 0 1 76,70 A11,11 0 0 1 54,70 A15,15 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%231a3a72' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="paper"] .hero-tag::before {
  opacity: 1;
}
/* Pill keeps its thin border on both themes — the cloud overlays it
   but the pill oval still reads as the identity tag. */

/* Name — the visual anchor of the hero */
.hero-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

/* Tagline — small body line under the name */
.hero-tagline {
  font-family: var(--body);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 36em;
}
.hero-tagline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-faint);
  padding-bottom: 1px;
  transition: border-color 120ms ease;
}
.hero-tagline a:hover { border-bottom-color: var(--accent); }

/* Hero social — row of rounded pills */
.hero-pills {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Reusable .pill — rounded outlined capsule for links and tags */
.pill {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule-faint);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  background: transparent;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.pill:hover {
  border-color: var(--ink);
  background: var(--paper-deep);
}

/* Portrait — rounded corners, modest size */
.hero-portrait {
  position: relative;  /* anchor for the swooping connector SVG */
  margin: 0;
  width: 100%;
  max-width: 11rem;
  justify-self: start;
}
@media (min-width: 44rem) {
  .hero-portrait { justify-self: end; }
}
.hero-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
  border: 1px solid var(--rule-faint);
  /* Slight desaturation as the cyanotype-default treatment.
     Restored to full color when toggled to paper. */
  filter: grayscale(0.15) contrast(0.96);
}
:root[data-theme="paper"] .hero-portrait img {
  filter: none;
}

/* ---------- Section blocks (Currently / The Work / Recent / Featured / About) ----------
   Equal padding above and margin below so the hairline rule sits CENTERED
   in the white space between sections — not glued to the next section. */
.home-block {
  margin: 0 0 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--rule-faint);
}
.home-block:last-of-type { margin-bottom: 4rem; }

.block-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
}
.block-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.85rem;
  max-width: 24em;
}
.block-intro {
  font-family: var(--body);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2.4rem;
  max-width: 38em;
}
.block-body {
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.block-link {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0;
}
.block-link a {
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-faint);
}
.block-link a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Currently — list of active works ---------- */
.currently-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.currently-link {
  display: grid;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--ink);
}
.currently-link:hover .currently-name { color: var(--accent); }
.currently-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.currently-meta {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.currently-blurb {
  font-family: var(--body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.currently-link-quiet .currently-name {
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* ---------- The work — three sheet rows ---------- */
.sheets {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.sheet-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.sheets dt { margin: 0; }
.sheets dt a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.sheets dt a:hover { color: var(--accent); }
.sheets dd {
  margin: 0;
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.sheets dd em { font-style: italic; }

/* Marginalia row inside .sheets — the 4th index (Travel Log) lives
   here. Collapses to zero height on the cyanotype default; expands
   into a full row on the paper toggle, with a single big editor's
   cloud wrapping the whole line (title + description). */
.sheet-row-margin {
  position: relative;        /* anchor for the ::before encircle cloud */
  height: 0;
  opacity: 0;
  overflow: visible;         /* allow the cloud to extend past the row */
  margin-top: -1.6rem;       /* swallow the parent gap when collapsed */
  transition: height 320ms ease, opacity 320ms ease, margin-top 320ms ease;
}
/* Editor's circle around the entire row — generous padding (an
   invisible "line of text" buffer around the words inside) and 11
   puffs per side so the long horizontal cloud reads as rolling puffs. */
.sheet-row-margin::before {
  content: "";
  position: absolute;
  inset: -2rem -3rem -2rem -3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A11,11 0 0 1 62,30 A7,7 0 0 1 76,30 A9,9 0 0 1 94,30 A8,8 0 0 1 110,30 A11,11 0 0 1 132,30 A7,7 0 0 1 146,30 A9,9 0 0 1 164,30 A8,8 0 0 1 180,30 A10,10 0 0 1 200,30 A8,8 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A9,9 0 0 1 198,70 A7,7 0 0 1 184,70 A11,11 0 0 1 162,70 A8,8 0 0 1 146,70 A10,10 0 0 1 126,70 A7,7 0 0 1 112,70 A11,11 0 0 1 90,70 A7,7 0 0 1 76,70 A9,9 0 0 1 58,70 A8,8 0 0 1 42,70 A9,9 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%231a3a72' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="paper"] .sheet-row-margin::before {
  opacity: 1;
}
:root[data-theme="paper"] .sheet-row-margin {
  height: auto;
  opacity: 1;
  margin-top: 0;
}
.sheet-row-margin dt a {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--marginalia);
}
.sheet-row-margin dd {
  /* dd is the bubble cell — give the inner span the cloud */
  padding: 0;
}
.callout-text {
  /* The row's ::before cloud now wraps the whole line, so this span
     just provides hand-font + block-caps styling, no per-bubble bg. */
  font-family: var(--hand);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--marginalia);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

/* ---------- Recent — flat dated list ---------- */
.recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.recent-list li {
  font-family: var(--body);
  font-size: 0.82rem;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.recent-date {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.recent-list a {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}
.recent-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Featured — card grid (basti pattern, image-led) ---------- */
.featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 36rem) {
  .featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  .featured-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.featured-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--rule-faint);
  border-radius: 0.6rem;
  padding: 0.95rem;
  background: var(--paper);
  transition: border-color 140ms ease, transform 140ms ease;
}
.featured-item:hover {
  border-color: var(--rule);
}
/* Placeholder image area — soft tinted block when no <figure> is provided.
   When the card contains a .featured-thumb, the placeholder is hidden
   and the real image takes its visual slot. */
.featured-item::before {
  content: "";
  display: block;
  aspect-ratio: 2 / 1;
  border-radius: 0.4rem;
  background:
    linear-gradient(135deg, var(--paper-deep) 0%, var(--paper) 100%);
  border: 1px solid var(--rule-faint);
  margin: -0.15rem 0 0.45rem;
}
.featured-item:has(.featured-thumb)::before { display: none; }
.featured-thumb {
  margin: -0.15rem 0 0.45rem;
  aspect-ratio: 2 / 1;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--rule-faint);
  background: var(--paper-deep);
}
.featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-source {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.featured-source .featured-year {
  color: var(--rule-mid);
  margin-left: 0.5em;
}
.featured-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
/* Stretched-link pattern: a .featured-link inside a card's headline
   makes the whole card clickable via an invisible ::after that fills
   the .featured-item bounds. */
.featured-item { position: relative; }
.featured-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.featured-link:hover { border-bottom-color: var(--accent); }
.featured-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.featured-pull {
  font-family: var(--body);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.featured-item-todo {
  border-style: dashed;
  background: transparent;
}
.featured-item-todo::before {
  background: transparent;
  border-style: dashed;
}
.featured-item-todo .featured-source { color: var(--rule-mid); }
.featured-item-todo .featured-pull { color: var(--ink-faint); font-style: italic; }

/* ---------- About — long-form bio at the bottom ---------- */
.about-prose {
  font-family: var(--body);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 45rem;     /* ~75% of the 60rem page column */
}
.about-prose p { margin: 0 0 1.2em; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose em { font-style: italic; }

@media (max-width: 36rem) {
  .home-page { padding: 3rem var(--gutter) 2.5rem; }
  .hero { margin-bottom: 5rem; }
  .home-block { margin-bottom: 4.5rem; }
  .sheet-row { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
  .recent-list li { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
}

/* =====================================================================
   MARGINALIA — the toggle's first unlock.
   Color is fixed at --marginalia (paper-color). Invisible against
   light paper; visible against blueprint. The transition is the reveal.
   ===================================================================== */

/* Architect's block-caps for all marginalia — the way drafters actually
   hand-letter notes onto a drawing. Uppercase, slightly tracked, hand font. */
.margin-note,
.margin-hint,
.margin-insert-text {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inline marginalia — collapses to zero in light, expands in dark */
.margin-note {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--marginalia);
  font-size: 0;
  transition: font-size 280ms ease;
}
.margin-note::before { content: " — "; }
.margin-note::after  { content: ""; }

:root[data-theme="paper"] .margin-note {
  font-size: 0.92rem;
}

/* Toggle-hint annotation — sits above the photo in the hero, points up
   at the theme toggle in the masthead. The arrow is the proofreader's
   "look up here" mark; the line below is the punchline. Hidden on the
   default cyanotype side, revealed on the paper toggle. */
.margin-hint {
  display: block;
  font-family: var(--hand);
  font-weight: 400;
  color: var(--marginalia);
  font-size: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
  text-align: right;
  line-height: 1.25;
  transition: font-size 280ms ease, margin 280ms ease, height 280ms ease;
}
:root[data-theme="paper"] .margin-hint {
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
  height: auto;
}
/* Toggle-hint annotation — anchored to the hero so it scrolls away
   naturally with the page. The connector arc uses z-index above the
   masthead so the arrowhead can draw over the sticky header and land
   on the theme toggle button. Wide-viewport only. */
.margin-hint-toggle {
  display: none;
  position: absolute;
  top: 0.4rem;
  right: 13rem;          /* clear of the 11rem photo column */
  max-width: 13rem;
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--marginalia);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 4;
}
:root[data-theme="paper"] .margin-hint-toggle {
  opacity: 1;
}

/* Bubble cloud wrapping the toggle hint text. */
.hint-bubble {
  display: inline-block;
  padding: 1rem 1.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M24,30 A9,9 0 0 1 42,30 A20,20 0 0 1 82,30 A6,6 0 0 1 94,30 A18,18 0 0 1 130,30 A7,7 0 0 1 144,30 A16,16 0 0 1 176,30 Q200,30 200,50 Q200,70 176,70 A14,14 0 0 1 148,70 A7,7 0 0 1 134,70 A19,19 0 0 1 96,70 A8,8 0 0 1 80,70 A18,18 0 0 1 44,70 A10,10 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%231a3a72' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 1.25;
}

/* Connector — anchored to the hero (scrolls away with it), z-index
   above the masthead so the arc draws over the sticky header. The
   container's right edge sits where the toggle button is, so the
   arrowhead (at viewBox right) lands on the toggle. The container's
   aspect ratio matches the viewBox so the SVG renders without distortion. */
.hint-connector {
  display: none;
  position: absolute;
  top: -1.4rem;          /* extends up over the masthead */
  right: 1.6rem;         /* right edge ≈ where the toggle button sits */
  width: 12rem;
  height: 3rem;          /* 12:3 = 4:1, matches viewBox 240:60 */
  color: var(--marginalia);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
  overflow: visible;
  z-index: 60;           /* above masthead's z-index 50 */
}
:root[data-theme="paper"] .hint-connector {
  opacity: 1;
}

@media (min-width: 44rem) {
  .margin-hint-toggle { display: block; }
  .hint-connector    { display: block; }
}

/* Strike-and-replace — editor's mark for "this got crossed out and
   replaced." Original word stays in flow with a marginalia-colored
   strikethrough; the replacement floats above in architect block caps. */
.margin-edit {
  position: relative;
  display: inline-block;
}
.margin-edit-strike {
  text-decoration: line-through;
  text-decoration-color: var(--marginalia);
  text-decoration-thickness: 1px;
  position: relative;
  z-index: 1;
}
/* Editor's circle — one bouncy cloud wraps the whole strike-replace,
   so both the original struck word ("Three") and the floating
   replacement ("FOUR") sit inside a single editorial mark. The cloud
   only appears on the paper toggle, in lockstep with the replacement
   text fading in above. */
.margin-edit::before {
  content: "";
  position: absolute;
  /* Extends above the struck word to enclose the floating FOUR. */
  top: -2em;
  left: -0.9em;
  right: -0.9em;
  bottom: -0.25em;
  /* Simple 3-puff cloud — for a bubble around a single word, three
     big rounded bumps read cleaner than a row of tiny ones. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M24,30 A28,28 0 0 1 80,30 A25,25 0 0 1 130,30 A23,23 0 0 1 176,30 Q200,30 200,50 Q200,70 176,70 A24,24 0 0 1 128,70 A26,26 0 0 1 76,70 A26,26 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%231a3a72' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="paper"] .margin-edit::before {
  opacity: 1;
}
.margin-edit-replacement {
  position: absolute;
  /* Floats above the struck word; the cloud above wraps both. */
  bottom: 1.3em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.95em;
  color: var(--marginalia);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
:root[data-theme="paper"] .margin-edit-replacement {
  opacity: 1;
}

/* =====================================================================
   FLOATING MARGIN CALLOUT — pulls long marginalia out of the prose flow
   into the right gutter, with a short arc connector pointing back at
   the anchor word. Wide-viewport only; on narrow screens the callout
   hides (no room in the gutter to extend into).

   Pattern in HTML:
     <p>
       prose with <span class="callout-anchor">anchor phrase</span> more prose
       <aside class="margin-callout" data-margin>
         <svg class="callout-arrow">…</svg>
         <span class="callout-bubble">UPPERCASE HAND-NOTE</span>
       </aside>
     </p>
   ===================================================================== */
/* Wrapper for a paragraph + its margin callout. <aside> isn't valid
   inside <p>, so we group them in a <div> here and anchor the absolute
   callout to that. Spacing matches the surrounding paragraphs. */
.about-prose .prose-aside {
  position: relative;
  margin: 0 0 1.2em;
}
.about-prose .prose-aside p { margin: 0; }
.margin-callout {
  display: none;               /* shown via media query on wide viewports */
  position: absolute;
  top: 0.3rem;
  /* Shifted further into the right gutter so the cloud and arrow
     don't crowd the prose column on the left. */
  right: -16rem;
  width: 10rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
/* Variant — pin to the bottom of the prose-aside instead of the top.
   Used on the palimpsest callout because the anchor word ("palimpsest")
   sits in the LAST line of its paragraph, so a bottom-aligned callout
   reads as pointing at it. */
.margin-callout-bottom {
  top: auto;
  bottom: 0.3rem;
}
:root[data-theme="paper"] .margin-callout {
  opacity: 1;
}
.callout-bubble {
  display: block;
  padding: 1.1rem 1.4rem;     /* roomier breathing space inside */
  font-family: var(--hand);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--marginalia);
  /* 6-puff cloud with even sizing — for a tall narrow bubble this
     reads as a clean cumulus rather than a busy lumpy outline. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A16,16 0 0 1 56,30 A14,14 0 0 1 84,30 A18,18 0 0 1 120,30 A13,13 0 0 1 146,30 A19,19 0 0 1 184,30 A16,16 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A15,15 0 0 1 186,70 A17,17 0 0 1 152,70 A14,14 0 0 1 124,70 A18,18 0 0 1 88,70 A15,15 0 0 1 58,70 A17,17 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%231a3a72' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Longer connector arc — sits in the gap between callout and prose,
   arrowhead reaching back toward the anchor word in the paragraph.
   Now sized to clearly extend from the bubble's left edge back into
   the prose's right margin. */
.callout-arrow {
  position: absolute;
  left: -5rem;
  top: 1.2rem;
  width: 5rem;
  height: 2.4rem;
  color: var(--marginalia);
  pointer-events: none;
}
/* Anchor word — marker class used by the connector, but rendered as
   plain prose (no underline). The bubble + arc carry the visual cue. */
.callout-anchor {
  /* intentionally bare */
}

@media (min-width: 70rem) {
  .margin-callout { display: block; }
}

/* Caret-and-insert — proofreader's mark above the line, with a
   revision cloud (architectural mark for "this got changed"). */
.margin-insert {
  display: inline-block;
  position: relative;
  width: 0;
  vertical-align: baseline;
}
.margin-insert-text {
  position: absolute;
  /* Sits just above the pill with a hair of space so the cloud can
     enclose both with margin to spare. */
  bottom: 1.1em;
  left: 0;
  white-space: nowrap;
  font-family: var(--hand);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--marginalia);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  padding: 0.25em 0.95em;
}
/* When the insert is at the very start of a line (hero), keep the
   inserted phrase left-aligned to the line so it doesn't overflow. */
.margin-insert-hero .margin-insert-text { left: 0; }
/* When the insert is mid-sentence (default), center it above the caret. */
.margin-insert:not(.margin-insert-hero) .margin-insert-text {
  transform: translateX(-50%);
}
/* Revision cloud — softer scalloped edge with generous padding so the
   outline never intersects the words inside. */
/* (No cloud directly around the marginalia text — the larger cloud
   on .hero-tag::before encompasses both this floating phrase and the
   Architect/Developer/Visionary pill below, treating them as one
   editorial mark. Keeping this rule for any non-hero margin-insert
   use elsewhere on the site.) */
.margin-insert:not(.margin-insert-hero) .margin-insert-text::before {
  content: "";
  position: absolute;
  inset: -1.5em -2em -1.6em -2em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M24,30 A9,9 0 0 1 42,30 A20,20 0 0 1 82,30 A6,6 0 0 1 94,30 A18,18 0 0 1 130,30 A7,7 0 0 1 144,30 A16,16 0 0 1 176,30 Q200,30 200,50 Q200,70 176,70 A14,14 0 0 1 148,70 A7,7 0 0 1 134,70 A19,19 0 0 1 96,70 A8,8 0 0 1 80,70 A18,18 0 0 1 44,70 A10,10 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='none' stroke='%230a2540' stroke-width='1.3' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}
.margin-insert-caret {
  position: absolute;
  bottom: -0.15em;
  left: 0.05em;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 1.4em;
  line-height: 1;
  color: var(--marginalia);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
:root[data-theme="paper"] .margin-insert-text,
:root[data-theme="paper"] .margin-insert-caret {
  opacity: 1;
}

/* =====================================================================
   PALIMPSEST TERM — hover/tap-revealed definition tooltip.
   Visual language matches the marginalia revision cloud (architect
   block-caps, scalloped cloud border) so it ties into the layered
   markup language of the rest of the site. */
.palimpsest-term {
  position: relative;
  cursor: help;
  font-style: normal;
  border-bottom: 1px dotted var(--rule-mid);
  padding-bottom: 1px;
  outline: none;
  transition: color 140ms ease, border-color 140ms ease;
}
.palimpsest-term:hover,
.palimpsest-term:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.palimpsest-def {
  position: absolute;
  bottom: calc(100% + 0.55em);
  left: 50%;
  margin-left: -12em;     /* center via negative margin instead of transform */
  width: 24em;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  padding: 1.1rem 1.7rem;
  /* Default = cyanotype side: dark fill, white stroke. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A19,19 0 0 1 78,30 A7,7 0 0 1 92,30 A21,21 0 0 1 134,30 A9,9 0 0 1 152,30 A18,18 0 0 1 188,30 A14,14 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A16,16 0 0 1 184,70 A9,9 0 0 1 166,70 A20,20 0 0 1 126,70 A7,7 0 0 1 112,70 A18,18 0 0 1 76,70 A11,11 0 0 1 54,70 A15,15 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='%230a2540' stroke='%23fbfaf6' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="paper"] .palimpsest-def {
  /* Toggled paper side: white fill, drafting-blue stroke. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'><path d='M24,30 A8,8 0 0 1 40,30 A19,19 0 0 1 78,30 A7,7 0 0 1 92,30 A21,21 0 0 1 134,30 A9,9 0 0 1 152,30 A18,18 0 0 1 188,30 A14,14 0 0 1 216,30 Q240,30 240,50 Q240,70 216,70 A16,16 0 0 1 184,70 A9,9 0 0 1 166,70 A20,20 0 0 1 126,70 A7,7 0 0 1 112,70 A18,18 0 0 1 76,70 A11,11 0 0 1 54,70 A15,15 0 0 1 24,70 Q0,70 0,50 Q0,30 24,30 Z' fill='%23fbfaf6' stroke='%231a3a72' stroke-width='1.4' stroke-linejoin='round'/></svg>");
}
.palimpsest-term:hover .palimpsest-def,
.palimpsest-term:focus .palimpsest-def,
.palimpsest-term:focus-within .palimpsest-def {
  visibility: visible;
  opacity: 1;
}

/* =====================================================================
   PROSE (interior pages — kept from v1, palette swap is automatic)
   ===================================================================== */
.prose, .entry-prose {
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
}
.prose p, .entry-prose p { margin: 0 0 1.15em; }
.prose h2, .entry-prose h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.012em;
  margin: 2.4rem 0 0.7rem;
}
.prose h3, .entry-prose h3 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2rem 0 0.5rem;
}
.prose blockquote, .entry-prose blockquote {
  margin: 1.5rem 0; padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
.prose ul, .entry-prose ul,
.prose ol, .entry-prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.45rem; }
.prose code, .entry-prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--accent-soft);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}
.prose hr, .entry-prose hr {
  border: 0; border-top: var(--rule-w) solid var(--rule-faint);
  margin: 2.2rem 0;
}
.prose img, .entry-prose img {
  border: 1px solid var(--rule-faint);
  border-radius: 0.4rem;
  margin: 1.8rem 0;
}
.prose figure, .entry-prose figure { margin: 1.8rem 0; }
.prose figcaption, .entry-prose figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- Generic page head ---------- */
.page-head, .entry-head { margin-bottom: 3rem; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.eyebrow-num { color: var(--accent); }
.eyebrow-sep { color: var(--rule-mid); }
.eyebrow-status { color: var(--ink-soft); }
.page-title, .entry-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}
.dek {
  font-family: var(--body);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38em;
  margin: 0 0 1rem;
}

/* ---------- Data sheet ---------- */
.data-sheet {
  margin: 2rem 0 3rem;
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule-w) solid var(--rule-faint);
  border-bottom: var(--rule-w) solid var(--rule-faint);
}
.data-sheet > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  padding: 0.6rem 0;
  border-bottom: var(--rule-w) solid var(--rule-faint);
}
.data-sheet > div:last-child { border-bottom: 0; }
.data-sheet dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.data-sheet dd {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-feature-settings: "tnum", "lnum";
  color: var(--ink);
  margin: 0;
}
@media (min-width: 48rem) {
  .data-sheet { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .data-sheet > div { border-bottom: var(--rule-w) solid var(--rule-faint); }
}

/* ---------- References ---------- */
.refs { margin: 4rem 0 0; padding-top: 1.5rem; border-top: var(--rule-w) solid var(--rule-faint); }
.refs-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.refs-list {
  list-style: decimal;
  padding-left: 1.6rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.refs-list li { margin-bottom: 0.45rem; }
.refs-list a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.refs-pub { color: var(--ink-faint); }

/* ---------- Entry nav ---------- */
.entry-nav {
  margin: 5rem 0 0;
  padding-top: 1.2rem;
  border-top: var(--rule-w) solid var(--rule-faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.entry-nav-back { color: var(--ink-soft); text-decoration: none; }
.entry-nav-back:hover { color: var(--accent); }

/* =====================================================================
   COLLECTION INDEX PAGES (Projects / Paintings / Notes)
   ===================================================================== */
.index-intro {
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38em;
  margin-bottom: 2.5rem;
}

.list-table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--rule-w) solid var(--rule-faint);
  border-bottom: var(--rule-w) solid var(--rule-faint);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.list-row { border-bottom: var(--rule-w) solid var(--rule-faint); }
.list-row:last-child { border-bottom: 0; }
.list-row a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 120ms ease;
}
.list-row a:hover { background: var(--accent-soft); }
.list-row .row-no {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.list-row .row-body { display: grid; gap: 0.2rem; }
.list-row .row-title {
  font-family: var(--display);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.list-row .row-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.list-row .row-status {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

@media (min-width: 60rem) {
  .list-row a {
    grid-template-columns: 3rem minmax(14rem, 1fr) minmax(10rem, 1fr) 9rem 9rem;
  }
  .list-row .row-body { grid-template-rows: auto auto; }
}

/* ---------- Notes specific ---------- */
.note-list {
  list-style: none; padding: 0; margin: 0;
  border-top: var(--rule-w) solid var(--rule-faint);
}
.note-list li {
  border-bottom: var(--rule-w) solid var(--rule-faint);
}
.note-list a {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.2rem;
  padding: 0.95rem 0;
  text-decoration: none;
  color: var(--ink);
  align-items: baseline;
  transition: background-color 120ms ease;
}
.note-list a:hover { background: var(--accent-soft); }
.note-date {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.note-title {
  font-family: var(--display);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Paintings index — card grid ---------- */
.works-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 40rem) {
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule-faint);
  border-radius: 0.6rem;
  background: var(--paper);
  padding: 1rem;
  transition: border-color 140ms ease;
}
.work-card:hover { border-color: var(--rule); }
.work-card-no {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}
.work-card-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.15rem 0 0.1rem;
}
.work-card-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ---------- About / Index page ---------- */
.about-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .about-grid { grid-template-columns: 2fr 1fr; }
}
.about-side {
  border-top: var(--rule-w) solid var(--rule);
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.about-side h2 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.5rem 0 0.5rem;
}
.about-side h2:first-child { margin-top: 0; }
.about-side ul { list-style: none; padding: 0; margin: 0; }
.about-side li { padding: 0.25rem 0; border-bottom: var(--rule-w) solid var(--rule-faint); }
.about-side li:last-child { border-bottom: 0; }
.about-side dfn { font-style: normal; color: var(--ink-faint); margin-right: 0.4rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}