/* pedomellonaminno.com new edition, FB2 (packet 00-FB2-03): FB1's typographic scaffolding with the brief's own faces self-hosted,
   an economical shell, the measure applied, and the home page in S2-09's scene order. Still not the site's art direction (B1).
   Tokens from S2-01. Sizes in rem so real text zoom reflows. Faces: SIL OFL 1.1 (assets/fonts/OFL.txt, NOTICE.txt). */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --canvas: #000000; --text: #F5F7F6; --muted: #AEB9B3; --edge: #303D35; --raised: #0C100E; --deep: #0E3B2E;
  --sea: #86E0C5; --evergreen: #287054; --paper: #F9F4EB; --paper-ink: #1B211E; --copper: #E8AFA7;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --edit: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --measure: 62ch; --gutter: max(1rem, env(safe-area-inset-left)); --gutter-r: max(1rem, env(safe-area-inset-right));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--ui); background: var(--canvas); color: var(--text); overflow-wrap: break-word; }
a { color: var(--sea); text-underline-offset: 0.18em; }
a:hover { color: var(--paper); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: var(--gutter); top: -10rem; background: var(--paper); color: var(--paper-ink); padding: 0.6rem 1rem; z-index: 10; font-weight: 600; }
.skip:focus { top: 0.5rem; }
.wrap { max-width: 72rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
/* the measure: prose, drafts, notes and lists keep a comfortable line length */
main p, main li, main dl, .draft, .miss, .page-gaps, .lede, .featured, .photo-pending { max-width: var(--measure); }
h1, h2, h3 { line-height: 1.2; margin: 2rem 0 0.7rem; }
h1 { font: 400 clamp(2.1rem, 1.4rem + 3vw, 3.6rem)/1.1 var(--edit); letter-spacing: -0.01em; margin-top: 1.4rem; }
h2 { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.15 var(--edit); }
h3 { font: 600 1.1rem/1.3 var(--ui); }
p { margin: 0 0 1rem; }
.lede { font: 400 1.3rem/1.45 var(--edit); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* preview status: one compact line that reflows; never clipped */
.preview-banner { background: var(--deep); color: var(--text); font-size: 0.875rem; }
.preview-banner p { margin: 0; padding: 0.35rem 0; }

/* per-page provenance and gaps: one marker, one closed list with its count */
.page-gaps { margin: 0.4rem 0 1.4rem; font-size: 0.9375rem; color: var(--muted); }
.page-gaps summary { cursor: pointer; display: list-item; padding: 0.55rem 0; min-height: 2.75rem; list-style-position: inside; }
.page-gaps summary::marker { color: var(--copper); }
.page-gaps ul { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.page-gaps li { margin: 0.25rem 0; }
.page-gaps .gid { color: var(--copper); font-weight: 600; }
.draft { border-left: 2px solid var(--evergreen); padding-left: 1rem; margin: 1rem 0; }
.draft p:last-child { margin-bottom: 0; }
.miss { color: var(--muted); font-size: 0.9375rem; border-left: 2px solid var(--copper); padding-left: 1rem; margin: 0.8rem 0; }
.miss .gid { color: var(--copper); font-weight: 600; }
.photo-pending { border: 1px dashed var(--edge); background: var(--raised); display: grid; place-content: center; text-align: center; padding: 0.9rem; min-height: 6rem; margin: 1rem 0; color: var(--muted); font-size: 0.9375rem; }
.photo-pending p { margin: 0.1rem 0; max-width: none; }
.photo-pending .role { color: var(--text); }

/* FB8C: compact shared header; the inscription remains in the home arrival. */
.site-header { border-bottom: 1px solid var(--edge); position: relative; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 0.6rem; padding-bottom: 0.6rem; flex-wrap: wrap; }
.signature { font: 600 1.05rem/1.3 var(--ui); letter-spacing: 0.03em; color: var(--text); text-decoration: none; padding: 0.55rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; }
.nav-desktop a, .menu nav a { color: var(--text); text-decoration: none; padding: 0.55rem 0.2rem; display: inline-block; min-height: 2.75rem; line-height: 1.6rem; }
.nav-desktop a[aria-current="page"], .menu nav a[aria-current="page"] { color: var(--sea); text-decoration: underline; text-underline-offset: 0.35em; }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; border: 1px solid var(--edge); border-radius: 999px; padding: 0.5rem; min-height: 2.75rem; min-width: 2.75rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav ul { list-style: none; margin: 0; padding: 0; }
.menu nav a { display: block; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--edge); font-size: 1.1rem; }
@media (max-width: 48rem) {
  .nav-desktop { display: none; }
  .bar { column-gap: 0.5rem; }
  .menu { display: block; }
  .menu[open] summary { background: var(--raised); }
  .menu nav { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0; background: var(--canvas); border-bottom: 1px solid var(--edge); padding: 0.5rem var(--gutter-r) 1.5rem var(--gutter); }
}

/* page parts */
main { display: block; padding-bottom: 3rem; }
main:focus { outline: none; }
.scene { padding: 2.2rem 0; border-top: 1px solid var(--edge); }
.scene .rhythm { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.3rem; }
.scene h2 { margin-top: 0; }
.scene.quiet { padding: 1.4rem 0; }
.scene.quiet h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.arrival { padding: 3rem 0 1.5rem; }
.arrival .threshold { font: 400 clamp(2.4rem, 1.6rem + 4vw, 4.4rem)/1.05 var(--edit); margin: 0; }
.arrival .translation { font: italic 400 clamp(1.2rem, 1rem + 1vw, 1.6rem)/1.3 var(--edit); color: var(--muted); margin: 0.4rem 0 1.2rem; }
.arrival .ash { font: 600 1.3rem/1.3 var(--ui); letter-spacing: 0.03em; margin: 0 0 1rem; }
.art-slot { margin: 1.2rem 0 0.4rem; border: 1px solid var(--edge); background: linear-gradient(180deg, var(--raised), var(--canvas)); min-height: clamp(6rem, 22vw, 16rem); display: flex; align-items: flex-end; padding: 0.8rem 1rem; }
.art-slot p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin: 0.8rem 0; padding: 0; list-style: none; }
.actions li { max-width: none; }
.not-open { color: var(--muted); }
.not-open a { color: var(--muted); }
.featured { border: 1px solid var(--edge); padding: 1.1rem 1.2rem; margin: 1rem 0; }
.featured h3 { margin-top: 0; font: 400 1.6rem/1.2 var(--edit); }
.work-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1.1rem; }
.work-list li { border-top: 1px solid var(--edge); padding-top: 0.9rem; }
.work-list h3 { margin: 0 0 0.3rem; }
.stage { display: inline-block; font-size: 0.85rem; color: var(--paper-ink); background: var(--paper); border-radius: 3px; padding: 0.05rem 0.5rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.2rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.gallery { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0.8rem; }
.gallery li { max-width: none; }
.gallery .photo-pending { margin: 0; }
ol.roadmap { padding-left: 1.4rem; }
ol.roadmap li { margin: 0.5rem 0; }
.books-cat { margin: 1.4rem 0; }
.books-cat ul { padding-left: 1.1rem; }
.books-cat li { margin: 0.2rem 0; }
.site-footer { border-top: 1px solid var(--edge); padding: 1.6rem 0 2.6rem; color: var(--muted); font-size: 0.95rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.site-footer a { display: inline-block; padding: 0.4rem 0; min-height: 2.75rem; line-height: 2rem; }
.site-footer p { margin: 0.3rem 0; }
table.register { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
table.register th, table.register td { text-align: left; vertical-align: top; border-top: 1px solid var(--edge); padding: 0.6rem 0.8rem 0.6rem 0; }
.table-scroll { overflow-x: auto; }
.table-scroll table p, .table-scroll td { max-width: none; }

/* lightbox (preview-only test page; synthetic geometry) */
.thumbs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: 0.8rem; }
.thumbs li { max-width: none; }
.thumbs button { background: var(--raised); border: 1px solid var(--edge); padding: 0.3rem; cursor: pointer; width: 100%; color: var(--text); font: inherit; min-height: 2.75rem; }
.thumbs img { display: block; width: 100%; height: auto; }
dialog.lightbox { background: #000; color: var(--text); border: 0; padding: 1rem; width: min(96vw, 64rem); max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
dialog.lightbox img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.lb-bar button { background: transparent; color: var(--text); border: 1px solid var(--edge); border-radius: 999px; padding: 0.5rem 1rem; min-height: 2.75rem; font: inherit; cursor: pointer; }

/* motion: brief, optional; none under reduced motion */
.nav-desktop a { transition: color 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .draft, .miss, .photo-pending, .art-slot { border: 1px solid CanvasText; } }
/* FB5: the About page's portrait (the owner's, private preview only; check 62 l.30): shown whole, at its own proportions, never cropped */
.portrait { margin: 1.2rem 0 1.4rem; max-width: 36rem; }
.portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--edge); }

/* ===================== FB6: the visual successor (packet 00-C62V-03; root check 62 visual reset) =====================
   Composition B, "paper theatre": black canvas, cut-paper illustration with warm light, editorial type, one playful paper language
   (photo mounts, paper tabs, a gold thread). Composition A ("cinematic depth") is kept at /preview/composition-a/ for comparison.
   No motion here: these are the reviewed stills; a bounded motion study comes after review. Draft lines carry a visible "draft wording" tag. */
:root { --w-ink: #f6eedd; --w-soft: #d9ccb4; --w-muted: #cdbfa6; --w-dim: #b9ab95; --w-gold: #d9a441; --w-gold-hi: #f2cf7a; --w-mat: #efe3c8; --w-line: #2a211a; }
.prov-tag { display: inline-block; vertical-align: middle; font: 600 0.6875rem/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-muted); border: 1px solid #4a3d30; border-radius: 999px; padding: 0.3em 0.6em; margin-left: 0.4em; white-space: nowrap; }
.v-held { font: italic 400 1.0625rem/1.55 var(--edit); color: var(--w-soft); border-left: 2px dashed var(--w-gold); padding: 0.1rem 0 0.1rem 1rem; margin: 0 0 1.4rem; max-width: 46ch; }
.v-held-mark { color: var(--w-gold); font-style: normal; margin-right: 0.25em; }
/* arrival */
/* the arrival fills about the first screen, capped on very tall windows (zoom run 1: an svh height grew with a tall capture window, so the page never fit it) */
.v-arrival { position: relative; min-height: min(86svh, 60rem); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.v-arrival-text { align-self: center; width: 100%; box-sizing: border-box; padding-top: clamp(2rem, 7vh, 6rem); padding-bottom: 1.5rem; }
.v-threshold { font: 400 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.25 var(--edit); margin: 0 0 1.4rem; color: var(--w-ink); max-width: none; }
.v-threshold .translation { display: block; font-style: italic; color: var(--w-muted); font-size: 0.8em; margin-top: 0.15em; }
.v-ash { font: 600 clamp(4.25rem, 1.5rem + 12vw, 12.5rem)/0.88 var(--ui); letter-spacing: -0.045em; margin: 0; color: var(--w-ink); }
.v-line { font: italic 400 clamp(1.2rem, 1rem + 0.9vw, 1.7rem)/1.4 var(--edit); color: var(--w-soft); max-width: 34ch; margin: 1.3rem 0 0; }
.v-arrival-art img, .v-stage img, .a-depth-art img { display: block; width: 100%; height: auto; }
/* the person */
.v-person { display: grid; gap: 2rem 3.5rem; align-items: center; padding-top: clamp(3rem, 10vh, 7rem); padding-bottom: clamp(3rem, 10vh, 7rem); }
@media (min-width: 60em) { .v-person { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.v-photo, .v-cover { margin: 0; }
.v-mount { position: relative; background: var(--w-mat); padding: clamp(0.5rem, 1.2vw, 0.9rem); transform: rotate(-1.2deg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); }
.v-mount img { display: block; width: 100%; height: auto; }
.v-mount::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, #2a1d14 0 20px, transparent 20px) top left / 40px 40px no-repeat, linear-gradient(225deg, #2a1d14 0 20px, transparent 20px) top right / 40px 40px no-repeat,
    linear-gradient(45deg, #2a1d14 0 20px, transparent 20px) bottom left / 40px 40px no-repeat, linear-gradient(315deg, #2a1d14 0 20px, transparent 20px) bottom right / 40px 40px no-repeat; }
.v-mount-square { transform: none; }
.v-mount-square::before { content: none; }
.v-caption { font: 400 0.875rem/1.5 var(--ui); color: #d4c7af; margin: 1.1rem 0 0; max-width: 60ch; }
.v-headline { font: 400 clamp(2.375rem, 1.1rem + 4.2vw, 5.25rem)/1.02 var(--edit); letter-spacing: -0.01em; margin: 0 0 1.4rem; color: var(--w-ink); max-width: 16ch; }
.v-more a, .v-jump a { color: var(--w-gold-hi); font-weight: 600; }
/* the transition: shelf, pop-up, room */
.v-transition { padding: 1rem 0 3rem; }
.v-stage { max-width: 1320px; margin: 0 auto; }
.v-shelf, .v-popup { margin-bottom: clamp(1rem, 4vw, 3rem); }
.v-room-text { text-align: center; padding-top: 2.5rem; }
.v-center { text-align: center; margin-left: auto; margin-right: auto; }
.v-actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; justify-content: center; margin: 1.2rem 0 1.6rem; max-width: none; }
.v-btn { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0.6rem 1.35rem; border-radius: 999px; background: var(--w-gold); color: #1a1108; font: 600 1rem/1.2 var(--ui); text-decoration: none; border: 1px solid var(--w-gold); cursor: pointer; }
.v-btn:hover { background: var(--w-gold-hi); }
.v-ghost { background: transparent; color: var(--w-ink); }
.v-ghost:hover { background: #2a211a; }
.v-credit { font: italic 400 0.875rem/1.5 var(--ui); color: var(--w-dim); margin-left: auto; margin-right: auto; }
.v-elsewhere { padding-top: 2rem; padding-bottom: 4rem; border-top: 1px solid var(--w-line); }
.v-eyebrow { font: 600 0.8125rem/1.2 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-muted); margin: 0 0 1rem; }
.v-rooms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; max-width: none; }
.v-rooms li { max-width: none; }
.v-rooms a { display: inline-block; padding: 0.6rem 1.15rem; background: var(--w-mat); color: #1b140d; border-radius: 3px 3px 12px 3px; text-decoration: none; font: 600 1rem/1.2 var(--ui); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55); transform: rotate(-0.6deg); }
.v-rooms li:nth-child(even) a { transform: rotate(0.7deg); }
.v-rooms a:hover { background: #fff3da; }
/* About */
.v-about-head h1 { font: 400 clamp(2.6rem, 1.2rem + 5vw, 5.5rem)/1 var(--edit); margin: 2rem 0 0.5rem; }
.v-person-about { padding-top: 1.5rem; }
.v-tribute { padding-top: 3rem; padding-bottom: 4rem; border-top: 1px solid var(--w-line); }
.v-tribute-h { font: 400 clamp(2.4rem, 1.2rem + 4vw, 4.5rem)/1.05 var(--edit); margin: 0 0 1.8rem; }
.v-tribute-grid { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 52em) { .v-tribute-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.v-cover { max-width: 34rem; }
.v-tribute-sub { font: 400 1.7rem/1.2 var(--edit); margin: 2.2rem 0 0.8rem; }
.v-album-open[hidden] { display: none; }
.v-album-static { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; max-width: none; }
.v-album-static img { display: block; width: 100%; height: auto; }
.v-album-static span { display: block; font-size: 0.875rem; color: var(--w-muted); margin-top: 0.3rem; }
.v-about-more { padding-bottom: 1rem; }
/* the album viewer */
.v-album { border: 0; padding: 0; background: #07050a; color: var(--w-ink); width: min(96vw, 72rem); max-width: 96vw; max-height: 96vh; overflow: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); }
.v-album::backdrop { background: rgba(0, 0, 0, 0.84); }
.v-album-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--w-line); }
.v-album-title { font: 400 1.4rem/1.2 var(--edit); margin: 0; flex: 1 1 auto; }
.v-album-count { margin: 0; color: var(--w-muted); font: 400 0.9375rem/1 var(--ui); white-space: nowrap; }
.v-album-close, .v-album-prev, .v-album-next { min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--w-muted); background: transparent; color: var(--w-ink); font: 600 0.9375rem/1 var(--ui); cursor: pointer; }
.v-album-close:hover, .v-album-prev:hover, .v-album-next:hover { background: #2a211a; }
.v-album-figure { min-width: 0; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 1rem; display: grid; gap: 0.8rem; justify-items: center; }
/* the frame's height is explicit and the image is limited by the same value (WebKit does not resolve a percentage max-height inside a grid area:
   checks run 2's WebKit still showed the photograph at its natural size, cut off by the dialog) */
.v-album-frame { width: 100%; height: min(68vh, 48rem); display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.v-album-img { display: block; max-width: 100%; max-height: min(68vh, 48rem); width: auto; height: auto; object-fit: contain; }
.v-album-caption { font: italic 400 1.1rem/1.4 var(--edit); color: #e6d9c0; text-align: center; }
.v-album-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 0 1rem 1rem; }
/* composition A ("cinematic depth"), the alternative */
.v-note { font-size: 0.875rem; color: var(--muted); margin-top: 1rem; }
.a-arrival { position: relative; min-height: min(86svh, 60rem); display: grid; align-items: center; }
/* zoom run 2: at 320 and 2x text the 5rem minimum made "Ash" wider than the screen; the same 4.25rem minimum as composition B, and a wrapper that may shrink */
.a-arrival > .wrap { min-width: 0; width: 100%; box-sizing: border-box; }
.a-ash { font: 600 clamp(4.25rem, 1rem + 17vw, 17rem)/0.85 var(--ui); letter-spacing: -0.05em; margin: 0; }
.a-line { font: 400 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.45 var(--ui); color: #c9c4bc; margin-top: 1.5rem; max-width: 36ch; }
.a-hairline { position: absolute; right: 6vw; bottom: 9vh; width: 22vw; height: 1px; background: linear-gradient(90deg, transparent, var(--w-gold)); }
.a-person { display: grid; gap: 2rem; align-items: end; padding: 4rem 0; }
@media (min-width: 60em) { .a-person { grid-template-columns: 62% minmax(0, 1fr); } }
.a-photo { margin: 0; }
.a-photo img { display: block; width: 100%; height: auto; box-shadow: 0 0 120px rgba(255, 150, 70, 0.18); }
.a-photo .v-caption, .a-person-text { box-sizing: border-box; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.a-headline { font: 300 clamp(2.375rem, 1rem + 4.4vw, 5.5rem)/1 var(--ui); letter-spacing: -0.03em; margin: 0 0 1.2rem; overflow-wrap: anywhere; hyphens: auto; }
.a-depth-text { text-align: center; padding-top: 2rem; padding-bottom: 4rem; }
@media (forced-colors: active) { .v-mount, .v-rooms a, .v-btn { border: 1px solid CanvasText; } .v-mount::before { content: none; } }

/* ===================== FB7: chapters, margin notes and the personal space (packet 00-C62V-S1-03) ===================== */
.v-contents { padding-top: 1.2rem; padding-bottom: 1.4rem; }
.v-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; max-width: 40rem; counter-reset: none; }
.v-toc li { max-width: none; }
.v-toc a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; gap: 0.6rem; padding: 0.55rem 0.2rem; border-bottom: 1px dotted #4a3d30; text-decoration: none; color: var(--w-ink); }
.v-toc a:hover .v-toc-t { color: var(--w-gold-hi); }
.v-toc-n { font: italic 400 1.25rem/1 var(--edit); color: var(--w-gold); text-align: right; }
.v-toc-t { font: 400 clamp(1.25rem, 1rem + 0.9vw, 1.6rem)/1.25 var(--edit); }
.v-chapter { padding-top: clamp(1.5rem, 5vh, 3.5rem); }
.v-chapter-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; font: 400 clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem)/1.1 var(--edit); color: var(--w-ink); margin: 0 auto 1.4rem; }
.v-chapter-n { font: italic 400 clamp(2.4rem, 1.4rem + 3vw, 4rem)/1 var(--edit); color: var(--w-gold); }
.v-chapter .v-person { padding-top: 0.5rem; padding-bottom: clamp(2rem, 6vh, 4rem); }
.v-chapter .v-stage { max-width: 1180px; }
/* margin notes: a scholarly edition's marginalia, as disclosures (optional depth; nothing essential inside) */
.mnotes-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.3rem 0 0; max-width: none; }
.mnotes-center { justify-content: center; }
.mnote { max-width: 26rem; }
.mnote summary { cursor: pointer; font: italic 400 1.02rem/1.35 var(--edit); color: var(--w-soft); min-height: 2.75rem; display: flex; align-items: center; gap: 0.45rem; list-style: none; }
.mnote summary::-webkit-details-marker { display: none; }
.mnote summary:hover { color: var(--w-gold-hi); }
.mnote-mark { color: var(--w-gold); font-style: normal; }
.mnote p { font: 400 0.9375rem/1.55 var(--ui); color: #ddd1bb; border-left: 2px solid var(--w-gold); padding: 0.1rem 0 0.1rem 0.9rem; margin: 0.4rem 0 0.6rem; text-align: left; }
.v-mellon-wrap { border: 0 !important; padding: 0 !important; }
.v-mellon[hidden] { display: none; }
.v-mellon-said { min-height: 1.5em; margin: 0.6rem 0 0; font: italic 400 1.05rem/1.4 var(--edit); color: var(--w-gold-hi); }
.v-arrival-art { position: relative; }
.v-door-glow { position: absolute; left: 73.75%; top: 73.7%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.95) 0, rgba(255, 190, 100, 0.45) 35%, rgba(255, 170, 80, 0) 70%); }
@media (max-width: 43.75em) { .v-door-glow { left: 70%; top: 72.4%; width: 16%; } }
.v-arrival.is-open .v-door-glow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .v-door-glow { transition: opacity 600ms ease; } }
/* the person: doors into the About page */
.v-doors { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; max-width: 30rem; }
.v-doors li { max-width: none; }
.v-door { display: block; text-decoration: none; color: var(--w-ink); }
.v-door-img { display: block; background: var(--w-mat); padding: 0.3rem; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); aspect-ratio: 1; overflow: hidden; }
.v-door-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-door-label { display: block; font: 600 0.9375rem/1.3 var(--ui); margin-top: 0.5rem; }
.v-door:hover .v-door-label { color: var(--w-gold-hi); }
/* ideas: projects as a stack of books lying flat */
.v-reserved { border: 1px dashed #6b5a44; border-radius: 4px; padding: 1.2rem; margin: 1rem 0 1.8rem; min-height: 9rem; display: grid; place-items: center; color: var(--w-dim); font: italic 400 1rem/1.5 var(--edit); text-align: center; background: repeating-linear-gradient(135deg, #0b0806 0 12px, #100b08 12px 24px); max-width: none; }
.v-reserved p { max-width: 40ch; margin: 0; }
/* zoom run 1: at 320 px and 2x text the rem stagger and padding plus the longest title word made the track 302 px in a 256 px box; the track may
   now shrink, titles may break, and the stagger is capped by a share of the width */
.v-stack { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; max-width: 46rem; }
.v-vol { max-width: none; }
.v-vol a { overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.8rem 1.1rem; border-radius: 3px 8px 8px 3px; text-decoration: none; color: #f6eedd; box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.5); border-top: 3px double rgba(242, 207, 122, 0.55); border-bottom: 3px double rgba(242, 207, 122, 0.55); }
.v-vol-0 a { background: #6e231a; margin-left: min(0.4rem, 1.5%); } .v-vol-1 a { background: #22402e; margin-right: min(1.2rem, 4.5%); } .v-vol-2 a { background: #23355a; margin-left: min(1.6rem, 6%); } .v-vol-3 a { background: #5a3050; margin-right: min(0.6rem, 2.5%); } .v-vol-4 a { background: #6b4a1e; margin-left: min(0.8rem, 3%); }
.v-vol a:hover { filter: brightness(1.15); }
.v-vol-t { font: 400 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.25 var(--edit); }
.v-vol-s { font: 400 0.875rem/1.35 var(--ui); color: #eadcc0; }
.v-vol-flag a { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.v-vol-flag .v-vol-t { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.v-bookends { list-style: none; padding: 0; margin: 0 0 3rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; max-width: none; }
.v-bookends li { max-width: none; }
.v-bookends a { color: var(--w-gold-hi); font-weight: 600; }
/* About: jumps, the family, the dogs, interests */
.v-jumps { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; max-width: none; }
.v-jumps a { color: var(--w-gold-hi); font-weight: 600; }
.v-family, .v-dogs, .v-interests { padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--w-line); }
.v-dedication { font: 400 clamp(1.2rem, 1rem + 0.6vw, 1.45rem)/1.6 var(--edit); color: var(--w-ink); max-width: 30rem; }
.v-dedication p { margin: 0 0 0.9rem; max-width: none; }
.v-dedication p:first-child { font-style: italic; color: var(--w-soft); }
.v-pending { font: italic 400 0.9375rem/1.5 var(--ui); color: var(--w-dim); max-width: 36rem; }
.v-pets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.6rem; max-width: 44rem; }
.v-pets li { max-width: none; }
.v-pets figure { margin: 0; }
.v-mount-pet { transform: rotate(-0.8deg); }
.v-pets li:nth-child(2) .v-mount-pet { transform: rotate(0.9deg); }
.v-mount-pending { aspect-ratio: 753 / 1200; display: grid; place-items: center; background: #1a130d; color: var(--w-dim); font: italic 400 0.9375rem/1.4 var(--edit); text-align: center; padding: 1rem; }
.v-mount-pending::before { content: none; }
.v-mount-pending p { margin: 0; max-width: 20ch; }
.v-interests-grid { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 52em) { .v-interests-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.v-convention { margin: 0; max-width: 26rem; }
.v-mount-conv { display: block; transform: rotate(0.7deg); }
.v-index-h { font: 400 1.6rem/1.2 var(--edit); margin: 0 0 0.8rem; }
.v-index-sub { font-style: italic; color: var(--w-dim); font-size: 0.8em; }
.v-index { list-style: none; padding: 0; margin: 0; columns: 2 12rem; column-gap: 2rem; font: 400 1.05rem/1.9 var(--edit); max-width: none; }
.v-index li { break-inside: avoid; max-width: none; }
.v-index-s { font-style: italic; color: var(--w-soft); }
.v-rr-head { padding-top: 1.5rem; padding-bottom: 1rem; }
.v-rr-head h1 { font: 400 clamp(2.6rem, 1.2rem + 5vw, 5.5rem)/1 var(--edit); margin: 1rem 0 0.4rem; }
@media (max-width: 30em) { .v-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } .v-pets { gap: 1rem; } }
@media (forced-colors: active) { .v-vol a, .v-door-img, .v-reserved { border: 1px solid CanvasText; } }
/* FB7: at desktop widths the arrival's two notes stand in its right-hand margin, as marginalia do; each opens downward in its own column,
   so opening one never moves the text beside it. Narrower screens keep them in a row under the working line. */
@media (min-width: 64em) {
  .v-arrival-text { display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 5rem); }
  .v-arrival-main { flex: 1 1 auto; min-width: 0; }
  .mnotes-margin { flex: 0 0 clamp(15rem, 24vw, 21rem); flex-direction: column; flex-wrap: nowrap; gap: 0.4rem; margin: clamp(5rem, 9vw, 8rem) 0 0; padding-left: 1.2rem; border-left: 1px solid rgba(215, 168, 74, 0.3); }
  .mnotes-margin .mnote { max-width: none; }
}
/* FB8 (packet 00-C66C67-03; root check 67 reconciled against FB7):
   the arrival: a smaller "Ash S." and less top space, so the drawn door sits inside a 900 px first screen and a phone's first screen;
   chapter III: one compact sequence of three steps; the person: a smaller draft headline, more room for the owner's words in the caption;
   process labels: quieter held notes and a slim reserved place. */
.v-arrival { min-height: 0; }
.v-arrival-text { padding-top: clamp(1.25rem, 3.5vh, 2.75rem); padding-bottom: 1rem; }
.v-ash { font-size: clamp(3.25rem, 1.6rem + 5.2vw, 6.5rem); line-height: 0.92; }
.v-seq { margin: 0.5rem auto 0; }
.v-seq-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.v-seq-steps li { position: relative; margin: 0; max-width: none; }
.v-seq-steps img { display: block; width: 100%; height: auto; border-radius: 6px; }
.v-seq-n { position: absolute; top: 0.4rem; left: 0.4rem; z-index: 1; font: 600 0.875rem/1 var(--ui); color: var(--w-ink); background: rgba(0, 0, 0, 0.72); border: 1px solid var(--w-gold); border-radius: 999px; padding: 0.3em 0.6em; }
.v-seq-room { display: block; border-radius: 6px; }
.v-seq-cap { margin: 0.8rem 0 0; font: italic 400 1.05rem/1.5 var(--edit); color: var(--w-soft); text-align: center; }
@media (min-width: 48em) { .v-seq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.v-person-text .v-headline { font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.6rem); max-width: 22ch; margin-bottom: 1rem; }
.v-person .v-caption { font: italic 400 clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem)/1.5 var(--edit); color: var(--w-ink); max-width: 46ch; }
.v-person .held, .v-person [data-gap] { font-size: 0.9375rem; }
.v-reserved { min-height: 0; padding: 0.7rem 1rem; margin: 0.4rem 0 1.4rem; font-size: 0.9375rem; background: none; }
/* FB8, after viewing build 1: the empty live region no longer holds a blank line (it keeps its place for "mellon"), and "Stay awhile." is smaller. */
.v-mellon-said:empty { min-height: 0; margin: 0; }
.v-room-text .v-headline { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }