/* One forest folio palette. Grain is on surfaces only; portraits are untouched. */
:root {
  color-scheme: dark;
  --forest: #39462c;
  --forest-deep: #2c3722;
  --forest-raised: #424f34;
  --moss: #39462c;
  --cream: #fef1d1;
  --paper: #fefae0;
  --gold: #e6b873;
  --muted: #d2d8c4;
  --ink: #283618;
  --rule: #829279;
  --grain: url('images/grain.svg');
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--forest); background-image: var(--grain); color: var(--cream); font-family: Georgia, 'Times New Roman', serif; line-height: 1.75; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.wrap { width: min(100% - 80px, 1320px); margin-inline: auto; }
.header-band { background-color: var(--paper); background-image: var(--grain); color: var(--ink); border-top: 4px solid var(--forest-deep); border-bottom: 1px solid #606c38; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.wordmark { width: 230px; flex-shrink: 0; }
nav { display: flex; gap: 12px; }
.header-band nav a { display: inline-block; border: 1px solid #606c38; border-radius: 2px; padding: 5px 12px; font-size: 14px; text-decoration: none; }
.header-band nav a:hover { background: var(--forest); color: var(--paper); }
.folio-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.folio-ornament { font-size: 25px; line-height: 1; color: var(--gold); }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding-block: 44px; }
.eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
h1, h2, h3 { font-weight: 400; }
h1 { margin: 0; font-size: clamp(64px, 8.3vw, 108px); letter-spacing: -.05em; line-height: 1; }
.title-period { color: var(--gold); }
.hero-subtitle { display: block; font-size: .4em; font-style: italic; line-height: 1.25; letter-spacing: -.025em; margin-top: 18px; }
.intro { max-width: 460px; margin-block: 24px; font-size: 20px; line-height: 1.65; color: var(--muted); }
.button { display: inline-flex; gap: 22px; align-items: center; background: var(--gold); color: var(--ink); border: 1px solid var(--gold); padding: 10px 18px; font-size: 15px; text-decoration: none; }
.button:hover { background: var(--paper); border-color: var(--paper); }
.text-link { display: inline-block; margin-left: 20px; font-size: 15px; }
figure { margin: 0; }
.hero-portrait { width: min(100%, 430px); justify-self: end; margin-right: 20px; }
/* Original image proportions, with no filters, crop, or overlays. */
.hero-portrait img, .about-portrait img { width: 100%; height: auto; filter: none; }
figcaption { margin-top: 10px; font-size: 12px; font-style: italic; text-align: center; color: var(--muted); }
.contents { display: grid; grid-template-columns: 100px repeat(5, minmax(0, 1fr)); align-items: center; gap: 20px; border-block: 3px double var(--rule); padding-block: 18px; }
.contents-label { color: var(--gold); font-variant: small-caps; font-size: 18px; }
.contents a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 15px; text-decoration: none; }
.contents a > span:last-child { color: var(--gold); font-size: 12px; }
.contents a:hover { text-decoration: underline; }
.contents-dots { display: none; }
.section, .interests { padding-block: 76px; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.section { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
.section > .eyebrow { margin-top: 8px; }
h2 { margin: 0 0 24px; font-size: clamp(34px, 4vw, 48px); line-height: 1.2; letter-spacing: -.025em; }
h3 { margin: 0; font-size: 26px; line-height: 1.3; }
p { font-size: 18px; }
.about-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.about-layout p { max-width: 60ch; color: var(--muted); }
.about-portrait { padding: 8px; border: 1px solid var(--rule); }
.interest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.interest-grid article { border-top: 1px solid var(--rule); padding-top: 16px; }
.note-label { display: block; font-variant: small-caps; color: var(--muted); font-size: 14px; }
.engraving { display: block; width: 100%; height: 145px; margin-block: 14px 20px; color: var(--gold); }
.interest-grid p { font-size: 17px; color: var(--muted); }
/* Warm paper makes the interactive interlude easy to find among the chapters. */
.wave-study { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 40px; background-color: var(--paper); background-image: var(--grain); color: var(--ink); margin-block: 64px; padding: 40px; border: 3px double #606c38; scroll-margin-top: 24px; }
.wave-study .eyebrow { color: #606c38; }
.study-heading p { font-size: 17px; }
.study-heading label { display: block; font-size: 15px; font-style: italic; margin-top: 24px; }
.study-heading output { font-variant-numeric: tabular-nums; font-weight: 600; }
input[type='range'] { color-scheme: light; accent-color: var(--forest); width: 100%; max-width: 320px; min-height: 36px; cursor: pointer; }
.study-figure { border-left: 1px solid #606c38; padding-left: 28px; }
.plate-heading { display: flex; justify-content: space-between; gap: 12px; font-variant: small-caps; font-size: 13px; }
.study-figure svg { display: block; width: 100%; height: auto; margin-top: 16px; }
.study-figure .plate-formula { text-align: center; font-size: 24px; font-style: italic; margin-block: 12px; }
.study-figure p { font-size: 16px; }
.study-caption { font-size: 12px; font-style: italic; }
#projects { border-top: 1px solid var(--rule); }
.project { background-color: var(--forest-raised); background-image: var(--grain); border: 1px solid var(--rule); padding: 28px; margin-top: 30px; }
.project-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.project p { color: var(--muted); }
.status { font-size: 13px; color: var(--gold); }
.tags { display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 22px 0 0; list-style: none; font-size: 13px; font-variant: small-caps; color: var(--muted); }
.next { font-size: 18px; font-style: italic; color: var(--muted); margin-top: 24px; }
.end-mark { text-align: center; font-size: 28px; color: var(--gold); margin-top: 30px; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 28px; font-size: 13px; color: var(--muted); }
.footer-ornament { font-size: 25px; color: var(--gold); line-height: 1; }
.skip-link { position: absolute; top: -100px; left: 20px; background: var(--paper); color: var(--ink); padding: 10px; z-index: 2; }
.skip-link:focus { top: 10px; }
@media (min-width: 851px) and (min-height: 650px) {
  .site-header { height: 96px; padding-block: 16px; }
  .opening { height: calc(100svh - 101px); display: flex; flex-direction: column; }
  .folio-heading { flex: 0 0 auto; padding-block: 12px; }
  .hero { flex: 1 1 0; min-height: 0; padding-block: 20px; }
  .hero h1 { font-size: clamp(56px, 9svh, 96px); }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero-subtitle { margin-top: 12px; }
  .intro { font-size: clamp(17px, 2.2svh, 20px); margin-block: 18px; }
  .hero-portrait { max-width: min(430px, calc(100svh - 330px)); }
  .contents { flex: 0 0 auto; margin-bottom: 14px; }
}
@media (max-width: 950px) {
  .section { grid-template-columns: 1fr; gap: 10px; }
  .text-link { display: block; margin: 14px 0 0; }
  .contents { grid-template-columns: 100px 1fr 1fr; gap: 10px 24px; }
  .contents-label { grid-row: span 3; }
  .wordmark { width: 200px; }
  .header-band nav a { padding-inline: 9px; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; justify-content: center; padding-block: 22px; gap: 18px; }
  .header-band nav { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .header-band nav a { font-size: 13px; }
  .folio-heading { font-size: 9px; gap: 10px; }
  .folio-ornament { display: none; }
  .hero { grid-template-columns: 1fr; padding-block: 36px; gap: 28px; }
  h1 { font-size: clamp(58px, 14vw, 82px); }
  .intro { font-size: 19px; }
  .hero-portrait { max-width: 310px; }
  .contents { grid-template-columns: 1fr; padding-block: 20px; gap: 14px; }
  .contents-label { grid-row: auto; }
  .contents a { padding-block: 3px; }
  .section, .interests { padding-block: 44px; }
  .about-layout, .interest-grid, .wave-study { grid-template-columns: 1fr; }
  .about-layout { gap: 26px; }
  .about-portrait { max-width: 300px; justify-self: center; }
  .interest-grid { gap: 24px; margin-top: 30px; }
  .engraving { max-width: 260px; margin-inline: auto; }
  .wave-study { margin-block: 40px; padding: 26px 22px; gap: 24px; }
  .study-figure { border-left: 0; border-top: 1px solid #606c38; padding: 22px 0 0; }
  .project { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Moss green sampled from the supplied reference, with the same paper grain. */
#about { position: relative; isolation: isolate; }
#about::before { content: ''; position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background-color: var(--moss); background-image: var(--grain); }
.interest-grid article { border-top-color: #a6ad83; }
.about-portrait { border-color: #a6ad83; }
/* Warm paper is the main canvas; the sampled moss green ties the folio together. */
body { color-scheme: light; background-color: var(--paper); color: var(--ink); }
.folio-heading { color: var(--forest); border-color: #8c9576; }
.folio-ornament, .title-period { color: var(--forest); }
.eyebrow { color: var(--forest); }
.intro, figcaption, .note-label, .interest-grid p, .next { color: #465338; }
.button { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.button:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.contents { border-color: #8c9576; }
.contents-label, .contents a > span:last-child { color: var(--forest); }
.section, .interests, #projects { border-color: #8c9576; }
.engraving { color: var(--forest); }
#about { color: var(--cream); }
#about .eyebrow { color: var(--gold); }
#about p, #about figcaption { color: var(--muted); }
.project { color: var(--cream); }
.project p, .project .tags { color: var(--muted); }
.wave-study { background-color: #f3e7c9; border-color: var(--forest); }
.end-mark, .footer-ornament { color: var(--forest); }
footer { color: #465338; }
/* Green bookends give the warm-paper opening a clear visual rhythm. */
.header-band { background-color: var(--forest); color: var(--paper); border-top-color: var(--forest-deep); border-bottom-color: var(--rule); }
.header-band .wordmark img { filter: invert(95%) sepia(16%) saturate(470%) hue-rotate(354deg) brightness(106%); }
.header-band nav a { border-color: #b2bd99; }
.header-band nav a:hover { background: var(--paper); color: var(--ink); }
.contents { position: relative; isolation: isolate; padding-inline: 20px; color: var(--paper); border-color: #a6ad83; background-color: var(--forest); background-image: var(--grain); }
.contents-label, .contents a > span:last-child { color: var(--gold); }
.contents a:hover { color: var(--paper); }
@media (max-width: 650px) {
  .contents { padding-inline: 20px; }
}

/* Shadows follow the opening PNG silhouette and lift the introduction print. */
.hero-portrait img { filter: drop-shadow(8px 16px 13px #17241038) drop-shadow(2px 4px 3px #17241022); }
.about-portrait { box-shadow: 9px 16px 25px #101c134a, 2px 4px 6px #101c1330; }
@media (max-width: 650px) {
  .hero-portrait { justify-self: center; margin-right: 0; }
  .hero-portrait img { filter: drop-shadow(5px 10px 9px #17241038); }
}
/* Engraved geometry fills the desktop pause between the text and portrait. */
.hero-engraving { display: none; }
@media (min-width: 1150px) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(130px, .45fr) minmax(0, 1fr); gap: 28px; }
  .hero-engraving { display: block; width: 100%; max-width: 190px; justify-self: center; color: #606c38; opacity: .65; }
  .hero-engraving svg { display: block; width: 100%; height: auto; }
}
/* Fine grain, directional fibers, and soft aging live behind the page content. */
body {
  background-image: url('images/paper-grain.svg'), radial-gradient(ellipse at 12% 20%, #dda15e19, transparent 58%), radial-gradient(ellipse at 88% 70%, #bc6c2510, transparent 60%);
  background-size: 240px 240px, 100% 100%, 100% 100%;
}
.wave-study { background-image: url('images/paper-grain.svg'); }

/* Small tactile responses; entrance and drawing animations live in studio.js. */
@media (prefers-reduced-motion: no-preference) {
  .button, .header-band nav a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .contents a { transition: color .2s ease; }
  .text-link { transition: text-underline-offset .2s ease; }
  .text-link:hover { text-underline-offset: 8px; }
  .button > span { transition: transform .25s ease; }
  .button:hover > span { transform: translate(3px, -3px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-portrait img, .about-portrait img { transition: transform .45s cubic-bezier(.2,.65,.3,1); }
  .hero-portrait:hover img, .about-portrait:hover img { transform: translateY(-5px); }
  .header-band nav a:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Shared collection pages: one folio, clear destinations. */
.header-band nav a[aria-current='page'] { color: var(--forest); background: var(--paper); }
.collection-directory { padding-block: 64px; }
.collection-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.collection-links > a { display: block; padding: 24px; border: 1px solid #8c9576; text-decoration: none; }
.collection-links .eyebrow { display: block; margin-bottom: 16px; }
.collection-links p { font-size: 17px; color: #465338; }
.collection-links > a > span:last-child { font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.collection-links > a:hover { background-color: #39462c0c; border-color: var(--forest); }
.collection-page { min-height: calc(100svh - 200px); }
.collection-heading { padding-block: 64px 44px; max-width: 860px; }
.collection-heading h1 { font-size: clamp(52px, 7vw, 88px); }
.collection-subtitle { font-size: clamp(24px, 3vw, 34px); font-style: italic; margin-block: 22px; line-height: 1.3; }
.collection-intro { max-width: 60ch; color: #465338; font-size: 19px; }
.collection-empty { padding: 38px; border-block: 3px double #8c9576; background-color: #39462c08; }
.collection-empty h2 { font-size: clamp(28px, 3vw, 38px); max-width: 30ch; }
.collection-empty > p:last-child { color: #465338; max-width: 55ch; }
.music-frontispiece { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 48px; }
.music-portrait img { width: 100%; height: auto; }
.folio-pagination { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block: 48px; font-size: 16px; }
.folio-pagination > span { color: var(--forest); font-size: 28px; }
@media (max-width: 750px) {
  .collection-links { grid-template-columns: 1fr; gap: 18px; }
  .music-frontispiece { grid-template-columns: 1fr; gap: 26px; }
  .music-portrait { max-width: 240px; justify-self: center; }
  .collection-heading { padding-top: 40px; }
  .collection-empty { padding: 26px 20px; }
  .collection-directory { padding-block: 44px; }
  .folio-pagination { font-size: 14px; }
}

/* A score-like reading column with a clearly identified MIDI demonstration. */
.music-frontispiece { align-items: start; }
.music-work { min-width: 0; }
.work-heading { border-top: 3px double #8c9576; padding-top: 24px; }
.work-heading .eyebrow { margin-bottom: 14px; }
.work-heading h2 { margin-bottom: 18px; }
.midi-label { display: inline-block; margin: 0 0 20px; padding: 7px 12px; background: var(--forest); color: var(--paper); font-size: 14px; }
.recording-player { border-block: 1px solid #8c9576; padding-block: 18px; }
.recording-player p { margin: 0 0 14px; font-size: 15px; color: #465338; }
.recording-player audio { display: block; width: 100%; color-scheme: light; }
.recording-download { display: inline-block; font-size: 13px; margin-top: 14px; }
.program-note { max-width: 66ch; padding-top: 30px; }
.program-note h3 { font-size: 26px; font-style: italic; }
.program-note p { font-size: 18px; line-height: 1.85; }
.program-signature { font-style: italic; }
@media (max-width: 750px) {
  .program-note p { font-size: 17px; }
}
.music-works { min-width: 0; }
.music-work { scroll-margin-top: 28px; }
.music-work + .music-work { margin-top: 64px; }
.work-index { flex-wrap: wrap; gap: 12px 24px; padding-bottom: 24px; font-size: 14px; }
.work-context { font-style: italic; font-size: 16px; color: #465338; margin-block: 0 18px; }
.cue-description { font-size: 18px; line-height: 1.8; max-width: 62ch; }

.work-credits { font-size: 16px; line-height: 1.7; color: #465338; margin-block: 0 22px; }
/* Clear divisions between concert compositions and film-score collections. */
.music-category-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.music-category-nav a { display: block; border: 1px solid var(--forest); padding: 16px 20px; text-decoration: none; font-size: 22px; }
.music-category-nav a:hover { background: #39462c0c; }
.music-category-nav span { display: block; font-size: 13px; color: #465338; margin-top: 4px; }
.music-category { scroll-margin-top: 24px; }
.music-category + .music-category { margin-top: 76px; }
.music-category-heading { padding: 24px 28px; background: var(--forest) var(--grain); color: var(--paper); margin-bottom: 26px; }
.music-category-heading .eyebrow { color: var(--gold); margin-bottom: 10px; }
.music-category-heading h2 { font-size: 40px; margin-bottom: 10px; }
.music-category-heading > p:last-child { font-size: 16px; margin: 0; color: var(--muted); }
.film-group { scroll-margin-top: 24px; }
.film-group + .film-group { margin-top: 56px; }
.film-title { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin: 0 0 22px; font-size: 32px; font-style: italic; border-bottom: 1px solid #8c9576; }
.film-title span { font-size: 14px; font-style: normal; color: #465338; }
.work-heading h3, .work-heading h4 { font-size: clamp(28px, 3vw, 38px); font-weight: 400; line-height: 1.2; margin: 0 0 18px; }
.program-note h4 { font-size: 26px; font-weight: 400; font-style: italic; margin-block: 0 22px; }
@media (max-width: 650px) {
  .music-category-nav { grid-template-columns: 1fr; gap: 12px; }
  .music-category-heading { padding: 22px; }
  .music-category-heading h2 { font-size: 34px; }
}

/* Portraits keep their original framing; paper borders stay outside the photos. */
.photo-collection { border-top: 3px double #8c9576; padding-top: 30px; }
.photo-collection-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
.photo-collection-heading h2 { margin-bottom: 0; }
.photo-collection-heading > p { max-width: 48ch; color: #465338; margin: 0; font-size: 18px; }
.gallery-instructions { font-size: 13px; color: #465338; margin-block: 24px 32px; }
.photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.gallery-photo-wide { grid-column: 1 / -1; }
.gallery-photo a { display: block; padding: 8px; border: 1px solid #8c9576; background: var(--paper); }
.gallery-photo a:hover { border-color: var(--forest); box-shadow: 0 6px 18px #2836181c; }
.gallery-photo img { width: 100%; height: auto; filter: none; }
.gallery-photo figcaption { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; text-align: left; font-size: 12px; color: #465338; }
@media (max-width: 650px) {
  .photo-collection-heading, .photo-gallery { grid-template-columns: 1fr; }
  .photo-collection-heading { gap: 18px; }
  .photo-gallery { gap: 28px; }
  .gallery-photo-wide { grid-column: auto; }
}
.photo-collection-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 40px; }
.photo-collection-nav a { border: 1px solid #8c9576; padding: 18px 22px; font-size: 22px; text-decoration: none; }
.photo-collection-nav a:hover { background: #39462c0c; }
.photo-collection-nav span { display: block; font-size: 14px; margin-top: 4px; color: #465338; }
.photo-collection { scroll-margin-top: 28px; }
.photo-collection + .photo-collection { margin-top: 70px; }
@media (max-width: 650px) { .photo-collection-nav { grid-template-columns: 1fr; } }

/* Companion portrait, aligned like the Music page's frontispiece. */
.photography-frontispiece { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 48px; }
.photography-portrait img { width: 100%; height: auto; filter: none; }
.photography-collections { min-width: 0; }
.photography-portrait figcaption { color: #465338; }
@media (max-width: 750px) {
  .photography-frontispiece { grid-template-columns: 1fr; gap: 30px; }
  .photography-portrait { max-width: 240px; justify-self: center; }
}

/* Lift photographs from the paper; keep original pixels and colors intact. */
.gallery-photo a { box-shadow: 0 3px 7px #28361818, 7px 12px 24px #28361824; }
.gallery-photo a:hover { box-shadow: 0 5px 10px #28361820, 9px 16px 30px #28361830; }
.music-portrait img, .photography-portrait img { box-shadow: 0 3px 7px #28361820, 8px 14px 25px #28361830; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-photo a { transition: box-shadow .3s ease, border-color .3s ease; }
}
@media (max-width: 650px) {
  .gallery-photo a { box-shadow: 0 2px 5px #28361818, 4px 8px 15px #28361824; }
}

/* A fine engraved flourish, used as a folio ornament. */
.musical-ornament { display: inline-block; width: 1em; height: 1.35em; vertical-align: middle; overflow: visible; }

/* Immersive folio: the original paper, forest, gold, and engraved character. */
.reading-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; z-index: 20; pointer-events: none; }
.header-band nav { flex-wrap: wrap; justify-content: flex-end; }
.header-band nav [aria-current="page"] { background: var(--forest); color: var(--paper); }
.journey-heading { text-align: center; padding: clamp(70px, 12vw, 160px) 0 65px; }
.journey-heading h2 { font-size: clamp(52px, 7vw, 100px); line-height: 1.02; }
.journey-heading > p:last-child { color: inherit; max-width: 40ch; margin: 28px auto 0; }
.chapter { position: relative; border-top: 1px solid var(--rule); }
.chapter-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 7vw, 110px); align-items: center; position: relative; min-height: 720px; padding: 70px 30px; }
.chapter-copy { z-index: 2; }
.chapter-copy h2 { font-size: clamp(46px, 5.5vw, 78px); letter-spacing: -.045em; line-height: 1.06; }
.chapter-copy > p:not(.eyebrow) { max-width: 39ch; color: var(--muted); }
.chapter-copy .button { margin-top: 16px; }
.chapter-art { position: relative; min-width: 0; will-change: transform; }
.chapter-art img { width: 100%; height: auto; filter: none; }
.sound-art { max-width: 350px; justify-self: center; }
.sound-art > img { position: relative; z-index: 1; box-shadow: 14px 24px 45px #15200e50; }
.resonance-rings { position: absolute; inset: 10% -30%; pointer-events: none; color: var(--gold); opacity: .35; }
.resonance-rings i { position: absolute; inset: 0; border: 1px solid; border-radius: 50%; }
.resonance-rings i:nth-child(2) { inset: 12%; }.resonance-rings i:nth-child(3) { inset: 24%; }
.preview-listen { margin-top: 32px; max-width: 360px; }
.preview-listen label { display: block; color: var(--gold); font-size: 12px; margin-bottom: 10px; }
.preview-listen audio { width: 100%; height: 38px; }
.chapter-detail { font-size: 13px; font-style: italic; margin-top: 28px; }
.chapter-pagination { position: absolute; bottom: 25px; right: 30px; color: var(--gold); font-size: 11px; letter-spacing: .18em; }
.photo-art { padding: 30px 0; }
.photo-front { position: relative; width: 73%; z-index: 2; padding: 9px; border: 1px solid var(--rule); background: var(--forest-deep); box-shadow: 10px 18px 35px #15200e50; }
.photo-back { position: absolute; right: 0; top: 2%; width: 58%; transform: rotate(7deg); padding: 8px; background: var(--paper); box-shadow: 8px 15px 30px #15200e40; }
.photo-front figcaption { font-size: 11px; }
.chapter-light .chapter-stage { grid-template-columns: 1fr 1.1fr; }
.manuscript { background: var(--paper) url('images/paper-grain.svg'); color: var(--ink); padding: clamp(24px, 4vw, 55px); box-shadow: 15px 22px 45px #15200e45; border: 1px solid #d4c6a2; transform: rotate(-3deg); }
.manuscript-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid #9ca185; padding-bottom: 18px; }
.quote-mark { font-size: 110px; color: #8c935f; line-height: 1; display: block; margin-top: 30px; height: 75px; }
.manuscript-question { font-size: clamp(26px, 3vw, 40px); font-style: italic; line-height: 1.35; }
.ink-lines { display: grid; gap: 14px; margin: 35px 0; }.ink-lines i { height: 1px; background: #9ca185; }.ink-lines i:last-child { width: 60%; }
.manuscript-end { font-style: italic; display: block; text-align: right; font-size: 25px; }
.home-contact { padding: 110px 0; text-align: center; }.home-contact h2 { font-size: clamp(42px, 6vw, 80px); }
.contact-opening { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 7vw; padding: 95px 0 110px; }
.contact-opening h1 { font-size: clamp(48px, 6vw, 84px); }.contact-opening .intro { font-size: 19px; }
.correspondence-card { position: relative; padding: 45px 32px 30px; background: var(--paper) url('images/paper-grain.svg'); color: var(--ink); border: 3px double #8c9576; box-shadow: 12px 20px 40px #15200e40; }
.correspondence-card .eyebrow { color: #59643e; }.correspondence-card h2 { font-size: 34px; }.correspondence-card > p { font-size: 16px; }
.letter-number { position: absolute; right: 25px; top: 20px; border: 1px solid #8c9576; padding: 6px 12px; font-style: italic; }
.contact-email { overflow-wrap: anywhere; font-size: clamp(19px, 2.2vw, 29px); text-decoration-thickness: 1px; }
.contact-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 28px; }.copy-email { font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid; cursor: pointer; padding: 4px 0; }.copy-email:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; }
.correspondence-card .mail-note { font-size: 12px; color: #59643e; }.copy-status { min-height: 1.75em; margin: 12px 0; font-size: 13px; }
.contact-topics { padding: 40px 0 90px; border-top: 1px solid var(--rule); }.contact-topics > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 40px; }.contact-topics article { border-top: 1px solid var(--rule); padding-top: 20px; }.contact-topics article > span { color: var(--gold); }.contact-topics h3 { margin-top: 14px; }.contact-topics article p { color: var(--muted); font-size: 16px; }
@media(min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter { min-height: 150svh; }
  .chapter-stage { position: sticky; top: 0; min-height: 100svh; padding-block: 50px; }
  .sound-art { max-width: min(350px, 39svh); }
  .photo-art { max-width: min(500px, 65svh); }
}
@media(max-width: 900px) {
  .chapter-stage, .chapter-light .chapter-stage { grid-template-columns: 1fr; gap: 45px; padding: 55px 0 75px; min-height: 0; }
  .chapter-copy { max-width: 580px; }.chapter-copy h2 { font-size: clamp(44px, 8vw, 68px); }
  .chapter-art { width: min(100%, 430px); justify-self: center; }.sound-art { max-width: 300px; }.photo-art { margin: 20px 0; }.writing-art { margin-bottom: 20px; }
  .contact-opening { grid-template-columns: 1fr; gap: 35px; padding: 55px 0; }.contact-topics > div { grid-template-columns: 1fr; gap: 24px; }
}
@media(max-width: 650px) {
  .site-header { align-items: flex-start; }.header-band nav { justify-content: flex-start; }.chapter-pagination { right: 0; }.journey-heading { padding-top: 70px; }.correspondence-card { padding: 55px 24px 25px; }.home-contact { padding-block: 70px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.chapter-art { transform: none !important; will-change: auto; }.reading-progress { display: none; } }

/* The collection becomes a continuous, three-part scroll narrative. */
.folio-journey { position: relative; }
.chapter-nav { position: relative; z-index: 5; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 9px 20px; gap: 24px; border: 1px solid var(--rule); border-radius: 40px; background: var(--forest-deep); box-shadow: 0 8px 28px #18200f25; flex-wrap: wrap; justify-content: center; }
.chapter-nav a { font-size: 13px; text-decoration: none; color: var(--muted); white-space: nowrap; }
.chapter-nav a span { color: var(--gold); margin-right: 6px; font-size: 10px; }
.chapter-nav a:hover, .chapter-nav a[aria-current] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.chapter-pagination { display: flex; align-items: center; gap: 24px; }
.chapter-pagination > span { font-size: 10px; font-style: italic; letter-spacing: .03em; color: var(--muted); }
.chapter { --scene: 0; }
.chapter-words { border-bottom: 1px solid var(--rule); }
@media(min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-nav { position: sticky; top: 18px; margin-bottom: -45px; backdrop-filter: blur(16px); background: #2c3722ed; }
  .chapter { min-height: 180svh; }
  .chapter-stage { padding-top: 105px; padding-bottom: 80px; }
  .chapter-copy h2 { transform: translateY(calc(16px - var(--scene) * 24px)); }
  .resonance-rings { transform: scale(calc(.85 + var(--scene) * .35)) rotate(calc(var(--scene) * 15deg)); }
  .photo-back { transform: translateX(calc(var(--scene) * 28px)) translateY(calc(var(--scene) * -26px)) rotate(calc(7deg + var(--scene) * 5deg)); }
  .photo-front { transform: translateX(calc(var(--scene) * -12px)) rotate(calc(var(--scene) * -3deg)); }
  .manuscript { transform: rotate(calc(-5deg + var(--scene) * 5deg)); }
  .ink-lines i { transform: scaleX(calc(.55 + var(--scene) * .45)); transform-origin: left; }
  .chapter-light .chapter-copy { order: 2; }.chapter-light .chapter-art { order: 1; }
}
@media(max-width: 650px) {
  .chapter-nav { gap: 14px; padding: 10px 15px; border-radius: 3px; }
  .chapter-nav a { font-size: 12px; }.chapter-pagination { gap: 14px; }
}

/* Color gives each chapter a distinct atmosphere without tinting the photos. */
.chapter { border-top: 0; }
.chapter-stage { padding-inline: clamp(24px, 4vw, 65px); isolation: isolate; }
.chapter-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--chapter-glow); opacity: .75; }
.chapter-sound { background: #263c34; --chapter-glow: radial-gradient(ellipse at 82% 48%, #ab713e66, transparent 65%); --gold: #f0c38b; --muted: #d6dfcf; }
.chapter-sound .chapter-copy h2 em { color: #f0c38b; }
.chapter-sound .resonance-rings { color: #f3ca85; opacity: .55; }
.chapter-light { background: #4a2939; --chapter-glow: radial-gradient(ellipse at 20% 48%, #c76e6059, transparent 65%); --gold: #f5c5a4; --muted: #ead7dc; --rule: #ad7b88; }
.chapter-light .chapter-copy h2 em { color: #f5c5a4; }
.chapter-light .photo-front { background: #362330; }
.chapter-words { background: #e8dcc0 url('images/paper-grain.svg'); color: #34402b; --chapter-glow: radial-gradient(ellipse at 78% 40%, #c18d4252, transparent 65%); --gold: #715027; --muted: #4d593e; --rule: #9c9b7e; border-bottom: 0; }
.chapter-words .chapter-copy h2 em { color: #7c4e2b; }
.chapter-words .button { background: #39462c; color: #fef1d1; border-color: #39462c; }
.chapter-words .button:hover { background: #283618; border-color: #283618; }
.chapter-words .manuscript { box-shadow: 15px 22px 45px #64462130; }
.chapter-pagination { right: clamp(24px, 4vw, 65px); }
@media(min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-stage::before { opacity: calc(.35 + var(--scene) * .65); }
}
@media(max-width: 900px) {
  .chapter-stage, .chapter-light .chapter-stage { padding-inline: clamp(20px, 5vw, 40px); }
}

/* Keep grain on the chapter surfaces, beneath the photographs and lettering. */
.chapter-sound, .chapter-light { background-image: var(--grain); }
.chapter-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .65; pointer-events: none; }

/* Extend the chapter surfaces to the viewport edges while keeping the folio
   content aligned to the same comfortable reading width. Clip the surface,
   rather than widening the layout, to avoid horizontal scrolling. */
.chapter { background: none; }
.chapter-stage { background: none; }
.chapter-stage::before {
  inset: 0 calc((min(100vw - 80px, 1320px) - 100vw) / 2);
  background-color: var(--chapter-surface);
  background-image: var(--grain), var(--chapter-glow);
  opacity: 1;
}
.chapter-stage::after {
  inset: 0 calc((min(100vw - 80px, 1320px) - 100vw) / 2);
}
.chapter-sound { --chapter-surface: var(--sound-color); }
.chapter-light {
  --chapter-surface: var(--photography-color);
  --chapter-glow: radial-gradient(ellipse at 22% 48%, #68a6bd4d, transparent 65%);
  --gold: #edcda3;
  --muted: #d5e2e9;
  --rule: #809eac;
}
.chapter-light .chapter-copy h2 em { color: #a9d6df; }
.chapter-light .photo-front { background: #1b3042; }
.chapter-words { --chapter-surface: #e8dcc0; }
@media (max-width: 650px) {
  .chapter-stage::before, .chapter-stage::after { inset-inline: -20px; }
}
body { overflow-x: clip; }

/* Both homepage photographs share the same paper frame. */
.chapter-light .photo-front { padding: 8px; border: 0; background: var(--paper); }
.chapter-light .photo-front figcaption { color: var(--ink); }

/* A muted plum close to the homepage collection. */
.chapter-words {
  --chapter-surface: var(--writing-color);
  --chapter-glow: radial-gradient(ellipse at 78% 40%, #b28eae52, transparent 65%);
  --gold: #f0c38b;
  --muted: #e6dce8;
  --rule: #a48ba8;
  color: var(--cream);
}
.chapter-words .chapter-copy h2 em { color: #f0c38b; }
.chapter-words .button { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chapter-words .button:hover { background: var(--paper); border-color: var(--paper); }

/* Inherit the same green as the collection heading. */
.journey-heading > p:last-child { color: inherit; }

/* Shared chapter colors keep the homepage and the collections in sync. */
:root { --sound-color: #263c34; --photography-color: #22255D; --writing-color: #44314B; }
.collection-shell { --folio-accent: var(--sound-color); --folio-highlight: #f0c38b; display: grid; grid-template-columns: clamp(240px, 23vw, 330px) minmax(0, 1fr); align-items: stretch; }
.theme-photography { --folio-accent: var(--photography-color); --folio-highlight: #b8d8ee; }
.theme-writing { --folio-accent: var(--writing-color); --folio-highlight: #e2c4e5; }
.collection-sidebar { background: var(--grain), radial-gradient(ellipse at 20% 60%, #ffffff0c, transparent 70%), var(--folio-accent); color: var(--cream); position: relative; }
.sidebar-inner { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; padding: 35px clamp(22px, 3vw, 42px); gap: 22px; }
.sidebar-home { font-size: 12px; text-decoration: none; color: var(--cream); }
.sidebar-chapter { color: var(--folio-highlight); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin: 8px 0 -12px; }
.collection-sidebar h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.12; margin: 0; }
.sidebar-portrait { width: min(100%, 165px); align-self: center; padding: 6px; background: var(--paper); box-shadow: 8px 12px 25px #00000025; }
.sidebar-portrait img { width: 100%; height: auto; filter: none; }
.collection-sidebar nav { display: grid; gap: 0; }
.collection-sidebar nav a { display: block; color: var(--cream); font-size: 13px; line-height: 1.4; padding: 13px 0 13px 12px; border-left: 1px solid #ffffff35; text-decoration: none; }
.collection-sidebar nav a span { display: block; font-size: 10px; color: var(--folio-highlight); margin-top: 4px; }
.collection-sidebar nav a[aria-current], .collection-sidebar nav a:hover { border-left: 3px solid var(--folio-highlight); padding-left: 10px; background: #ffffff08; color: var(--folio-highlight); }
.sidebar-bottom { margin-top: auto; padding-top: 15px; color: var(--folio-highlight); font-size: 10px; letter-spacing: .03em; }
.sidebar-track { height: 1px; background: #ffffff30; margin-top: 17px; }
.sidebar-track i { display: block; height: 2px; background: var(--folio-highlight); transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
.sidebar-engraving { padding: 0 0 35px; border-bottom: 1px solid #ffffff30; font-size: 110px; line-height: 1; color: var(--folio-highlight); }
.sidebar-engraving span { display: block; font-size: 25px; font-style: italic; line-height: 1.4; }
.collection-shell .collection-page { padding: 0 clamp(24px, 4vw, 70px); min-width: 0; }
.collection-shell .collection-heading { max-width: none; min-height: 65svh; display: flex; flex-direction: column; justify-content: center; padding-block: 65px; border-bottom: 1px solid #9ca185; margin-bottom: 45px; }
.collection-shell .collection-heading h1 { font-size: clamp(48px, 6.8vw, 100px); line-height: 1.03; }
.collection-shell .collection-heading .eyebrow, .collection-shell .collection-heading .title-period { color: var(--folio-accent); }
.collection-shell .music-frontispiece, .collection-shell .photography-frontispiece { display: block; }
.collection-shell .music-category-heading { background-color: var(--folio-accent); }
.collection-shell .photo-collection-heading { grid-template-columns: 1fr; gap: 18px; }
.collection-shell .photo-collection-heading h2 { font-size: clamp(36px, 4.5vw, 62px); }
.collection-shell .photo-collection { padding-top: 45px; }
.collection-shell .photo-gallery { gap: 65px 28px; }
.collection-shell .collection-empty { margin-block: 35px 75px; padding: clamp(30px, 5vw, 70px); background: url('images/paper-grain.svg'), #44314b09; }
.collection-shell .collection-empty h2 { font-size: clamp(34px, 4.5vw, 62px); }
.collection-shell .folio-pagination { border-top: 1px solid #9ca185; padding-top: 30px; margin-top: 75px; }
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .collection-shell .photo-gallery { align-items: start; padding-bottom: 50px; }
  .collection-shell .gallery-photo:nth-child(even):not(.gallery-photo-wide) { margin-top: 100px; }
  .collection-shell .photo-collection-heading > div, .collection-shell .work-heading { position: relative; }
  .collection-shell .music-work { padding-top: 35px; }
}
@media (max-height: 850px) and (min-width: 851px) {
  .sidebar-inner { gap: 16px; padding-block: 24px; }
  .sidebar-portrait { max-width: 115px; }
  .collection-sidebar nav a { padding-block: 9px; }
}
@media (max-width: 850px) {
  .collection-shell { display: block; }
  .sidebar-inner { position: relative; min-height: 0; padding: 28px 25px; gap: 18px; }
  .sidebar-portrait, .sidebar-engraving { display: none; }
  .collection-sidebar h2 { font-size: 30px; }
  .collection-sidebar nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .collection-sidebar nav a { padding: 5px 0; border-left: 0; border-bottom: 1px solid #ffffff35; }
  .collection-sidebar nav a[aria-current], .collection-sidebar nav a:hover { border-left: 0; padding: 5px 0; border-bottom: 1px solid var(--folio-highlight); }
  .sidebar-bottom { display: none; }
  .collection-shell .collection-heading { min-height: 0; padding-block: 50px; }
  .collection-shell .photo-gallery { gap: 35px 20px; }
}
@media (max-width: 650px) {
  .collection-shell .collection-page { padding-inline: 20px; }
  .collection-shell .music-category-nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-track { display: none; }
}

/* A more considered folio spine: inset rules, numbered index, paper portrait. */
.collection-sidebar { box-shadow: inset -1px 0 #ffffff20; }
.sidebar-inner { padding-inline: clamp(28px, 3.2vw, 46px); gap: 20px; }
.sidebar-inner::before { content: ''; position: absolute; inset: 14px; border: 1px solid #ffffff20; pointer-events: none; }
.sidebar-home { letter-spacing: .025em; color: var(--folio-highlight); }
.sidebar-chapter { font-size: 9px; letter-spacing: .18em; margin-top: 15px; }
.collection-sidebar h2 { font-style: italic; letter-spacing: -.035em; padding-bottom: 20px; border-bottom: 3px double #ffffff30; }
.sidebar-portrait { width: min(100%, 155px); margin-block: 5px; padding: 7px; outline: 1px solid #ffffff45; outline-offset: 5px; box-shadow: 6px 12px 24px #00000030; }
.sidebar-index-label { margin: 10px 0 -12px; font-size: 9px; text-transform: uppercase; letter-spacing: .18em; color: var(--folio-highlight); }
.collection-sidebar nav { counter-reset: folio-entry; }
.collection-sidebar nav a { counter-increment: folio-entry; position: relative; padding: 16px 8px 16px 32px; border-left: 0; border-bottom: 1px solid #ffffff20; font-size: 14px; }
.collection-sidebar nav a::before { content: counter(folio-entry, decimal-leading-zero); position: absolute; left: 0; top: 18px; color: var(--folio-highlight); font-size: 9px; letter-spacing: .06em; }
.collection-sidebar nav a span { color: #fef1d1b3; font-size: 10px; letter-spacing: .04em; }
.collection-sidebar nav a[aria-current], .collection-sidebar nav a:hover { border-left: 0; padding-left: 32px; color: var(--folio-highlight); background: linear-gradient(90deg, #ffffff0c, transparent); border-bottom-color: var(--folio-highlight); }
.sidebar-signoff { display: block; font-style: italic; font-size: 11px; color: #fef1d1bd; }
.sidebar-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; color: var(--cream); font-size: 12px; text-decoration: none; }
.sidebar-next:hover { color: var(--folio-highlight); }
@media (max-height: 850px) and (min-width: 851px) {
  .sidebar-inner { gap: 13px; }.sidebar-portrait { width: 105px; }.collection-sidebar h2 { padding-bottom: 14px; }
  .collection-sidebar nav a { padding-block: 12px; }.collection-sidebar nav a::before { top: 14px; }
  .sidebar-next { padding-top: 14px; }
}
@media (max-width: 850px) {
  .sidebar-inner { padding: 30px; gap: 18px; }
  .sidebar-inner::before { inset: 10px; }
  .collection-sidebar h2 { border-bottom: 0; padding-bottom: 0; }
  .sidebar-index-label { margin: 0 0 -10px; }
  .collection-sidebar nav { gap: 10px 24px; }
  .collection-sidebar nav a, .collection-sidebar nav a[aria-current], .collection-sidebar nav a:hover { padding: 10px 0 10px 26px; }
  .collection-sidebar nav a::before { top: 12px; }
}

/* Light lives behind the chapter content: warm stage light, indigo dusk,
   and a softer lavender glow at the writing desk. Grain remains above it. */
.chapter-sound { --light-rgb: 239, 184, 107; --light-secondary: 107, 161, 137; }
.chapter-light { --light-rgb: 143, 164, 246; --light-secondary: 138, 107, 188; }
.chapter-words { --light-rgb: 206, 161, 195; --light-secondary: 198, 161, 107; }
.chapter-atmosphere { position: absolute; inset: 0 calc((min(100vw - 80px, 1320px) - 100vw) / 2); z-index: -1; pointer-events: none; overflow: hidden; }
.chapter-light-pool { position: absolute; inset: -20%; background: radial-gradient(ellipse at 72% 42%, rgba(var(--light-rgb), .27), transparent 48%), radial-gradient(ellipse at 12% 78%, rgba(var(--light-secondary), .17), transparent 48%); opacity: .7; }
.chapter-cursor-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 430px 350px at var(--pointer-x, 65%) var(--pointer-y, 45%), rgba(var(--light-rgb), .4), transparent 75%); opacity: 0; }
.chapter-horizon { position: absolute; width: 85%; height: 1px; top: 72%; left: 30%; background: linear-gradient(90deg, transparent, rgba(var(--light-rgb), .5), transparent); transform: rotate(-32deg); box-shadow: 0 0 70px 20px rgba(var(--light-rgb), .07); opacity: .45; }
.chapter-copy { text-shadow: 0 2px 20px #00000012; }
.chapter-copy .eyebrow { color: var(--gold); }
.chapter-sound .chapter-art > img { box-shadow: 14px 24px 45px #101a1260, 0 0 70px rgba(var(--light-rgb), .13); }
.chapter-words .manuscript { box-shadow: 15px 22px 45px #150b2260, 0 0 65px rgba(var(--light-rgb), .12); }
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-light-pool { transform: translate3d(calc(8% - var(--scene) * 16%), calc(var(--scene) * -6%), 0) scale(calc(.9 + var(--scene) * .2)); opacity: calc(.55 + var(--scene) * .4); }
  .chapter-cursor-glow { opacity: var(--pointer-strength, 0); }
  .chapter-horizon { transform: translateY(calc(70px - var(--scene) * 140px)) rotate(calc(-36deg + var(--scene) * 12deg)); opacity: calc(.25 + var(--scene) * .35); }
  .chapter-sound .resonance-rings i { box-shadow: 0 0 25px rgba(var(--light-rgb), .08); }
  .chapter-pagination { opacity: calc(1 - var(--scene) * .45); }
}
@media (max-width: 650px) { .chapter-atmosphere { inset-inline: -20px; } }
@media (prefers-reduced-motion: reduce) { .chapter-cursor-glow, .chapter-horizon { display: none; }.chapter-light-pool { opacity: .5; } }

/* Theatrical light: broad luminous fields with a darker pocket behind copy. */
.chapter-light-pool {
  background: radial-gradient(ellipse at 77% 38%, rgba(var(--light-rgb), .76), transparent 43%), radial-gradient(ellipse at 12% 85%, rgba(var(--light-secondary), .48), transparent 50%), radial-gradient(ellipse at 92% 95%, rgba(var(--light-rgb), .35), transparent 42%);
  opacity: .95;
}
.chapter-cursor-glow { background: radial-gradient(ellipse 230px 230px at var(--pointer-x, 65%) var(--pointer-y, 45%), rgba(var(--light-rgb), .95), transparent 74%), radial-gradient(ellipse 650px 530px at var(--pointer-x, 65%) var(--pointer-y, 45%), rgba(var(--light-rgb), .55), transparent 80%); mix-blend-mode: screen; }
.chapter-beam { position: absolute; top: -65%; height: 230%; width: 32%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--light-rgb), .12) 20%, rgba(var(--light-rgb), .5) 49%, rgba(var(--light-rgb), .18) 65%, transparent); filter: blur(18px); mix-blend-mode: screen; transform-origin: 50% 15%; }
.chapter-beam-one { left: 45%; transform: rotate(-25deg); opacity: .65; }
.chapter-beam-two { left: 88%; width: 18%; transform: rotate(25deg); opacity: .5; }
.chapter-light-core { position: absolute; width: 65%; aspect-ratio: 1; right: -15%; top: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--light-rgb), .6), rgba(var(--light-secondary), .25) 35%, transparent 68%); mix-blend-mode: screen; }
.chapter-horizon { height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--light-rgb), .9), transparent); box-shadow: 0 0 45px 12px rgba(var(--light-rgb), .2), 0 0 120px 40px rgba(var(--light-rgb), .12); }
.chapter-copy { position: relative; }
.chapter-copy::before { content: ''; position: absolute; inset: -45px -35px; background: radial-gradient(ellipse, var(--chapter-surface) 15%, transparent 72%); opacity: .65; z-index: -1; pointer-events: none; }
.chapter-sound .chapter-art > img { box-shadow: 18px 30px 55px #101a1280, 0 0 80px rgba(var(--light-rgb), .35), 0 0 150px rgba(var(--light-secondary), .22); }
.chapter-light .photo-front, .chapter-light .photo-back { box-shadow: 15px 25px 45px #070b3865, 0 0 65px rgba(var(--light-rgb), .3); }
.chapter-words .manuscript { box-shadow: 18px 28px 50px #150b2280, 0 0 90px rgba(var(--light-rgb), .3); }
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-light-pool { transform: translate3d(calc(12% - var(--scene) * 24%), calc(var(--scene) * -12%), 0) scale(calc(.9 + var(--scene) * .35)); opacity: calc(.75 + var(--scene) * .25); }
  .chapter-cursor-glow { opacity: calc(var(--pointer-strength, 0) * 2.1); }
  .chapter-beam-one { transform: translateX(calc(var(--scene) * -45%)) rotate(calc(-35deg + var(--scene) * 60deg)); opacity: calc(.45 + var(--scene) * .4); }
  .chapter-beam-two { transform: translateX(calc(var(--scene) * -120%)) rotate(calc(32deg - var(--scene) * 55deg)); }
  .chapter-light-core { transform: translate3d(calc(var(--scene) * -18%), calc(var(--scene) * 12%), 0) scale(calc(.8 + var(--scene) * .5)); }
  .chapter-horizon { opacity: calc(.5 + var(--scene) * .4); }
}
@media (max-width: 900px), (max-height: 699px) { .chapter-beam { opacity: .3; }.chapter-light-core { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .chapter-beam { display: none; }.chapter-light-core { opacity: .4; }.chapter-light-pool { opacity: .65; } }

/* Chiaroscuro: restrained illumination against deeper, quieter shadows. */
.chapter-stage::before {
  background-image: var(--grain), radial-gradient(ellipse at 65% 42%, transparent 15%, #05071150 100%), var(--chapter-glow);
}
.chapter-light-pool {
  background: radial-gradient(ellipse at 76% 38%, rgba(var(--light-rgb), .47), transparent 43%), radial-gradient(ellipse at 12% 85%, rgba(var(--light-secondary), .24), transparent 50%);
}
.chapter-cursor-glow {
  background: radial-gradient(ellipse 160px 160px at var(--pointer-x, 65%) var(--pointer-y, 45%), rgba(var(--light-rgb), .48), transparent 75%), radial-gradient(ellipse 340px 290px at var(--pointer-x, 65%) var(--pointer-y, 45%), rgba(var(--light-rgb), .2), transparent 80%);
}
.chapter-beam { background: linear-gradient(90deg, transparent, rgba(var(--light-rgb), .07) 20%, rgba(var(--light-rgb), .29) 49%, rgba(var(--light-rgb), .09) 65%, transparent); }
.chapter-beam-two { opacity: .28; }
.chapter-light-core { background: radial-gradient(circle, rgba(var(--light-rgb), .32), rgba(var(--light-secondary), .12) 35%, transparent 68%); }
.chapter-horizon { box-shadow: 0 0 35px 8px rgba(var(--light-rgb), .1), 0 0 90px 25px rgba(var(--light-rgb), .06); }
.chapter-copy { text-shadow: 0 3px 12px #00000065; }
.chapter-copy::before { opacity: .35; background: radial-gradient(ellipse, #05071165 10%, transparent 72%); }
.chapter-sound .chapter-art > img { box-shadow: 18px 32px 55px #020706c9, 0 0 65px rgba(var(--light-rgb), .15); }
.chapter-light .photo-front, .chapter-light .photo-back { box-shadow: 18px 30px 50px #030416c9, 0 0 45px rgba(var(--light-rgb), .12); }
.chapter-words .manuscript { box-shadow: 18px 32px 55px #09030fc9, 0 0 65px rgba(var(--light-rgb), .12); }
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-cursor-glow { opacity: calc(var(--pointer-strength, 0) * 1.3); }
  .chapter-beam-one { opacity: calc(.3 + var(--scene) * .25); }
  .chapter-horizon { opacity: calc(.3 + var(--scene) * .25); }
  .chapter-copy h2 { text-shadow: 0 3px 14px #00000070, 0 0 30px rgba(var(--light-rgb), calc(.06 + var(--scene) * .12)); }
}

/* Collection atmospheres: a colored spine, a luminous opening, paper to read. */
.collection-shell { --folio-rgb: 148, 183, 140; }
.theme-photography { --folio-rgb: 139, 151, 228; }
.theme-writing { --folio-rgb: 180, 139, 185; }
.sidebar-inner { isolation: isolate; }
.sidebar-inner::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% calc(20% + var(--page-progress, 0) * 65%), rgba(var(--folio-rgb), .24), transparent 55%), linear-gradient(110deg, #00000038, transparent 60%); }
.sidebar-portrait { box-shadow: 10px 18px 30px #00000065, 0 0 45px rgba(var(--folio-rgb), .16); }
.collection-shell .collection-heading { position: relative; isolation: isolate; }
.collection-shell .collection-heading::before { content: ''; position: absolute; inset: 0 -20px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% 35%, rgba(var(--folio-rgb), .18), transparent 65%); }
.collection-shell .collection-subtitle { max-width: 25ch; }
.collection-shell .music-work { counter-increment: music-piece; position: relative; margin-block: 50px 80px; padding: 35px clamp(20px, 3vw, 40px); background: url('images/paper-grain.svg'), #fffdf03d; border: 1px solid #a6ad8365; box-shadow: 0 12px 30px #2836180a; }
.collection-shell .music-category { counter-reset: music-piece; }
.collection-shell .music-work::before { content: 'STUDY / ' counter(music-piece, decimal-leading-zero); display: block; color: #637052; font-size: 9px; letter-spacing: .18em; margin-bottom: 25px; }
.collection-shell .music-work.is-playing { border-color: var(--folio-accent); box-shadow: 0 15px 40px #152d2325, inset 4px 0 var(--folio-accent); }
.collection-shell .music-work.is-playing::before { content: 'LISTENING / ' counter(music-piece, decimal-leading-zero); }
.sidebar-listening { padding: 15px 0; border-block: 1px solid #ffffff30; }
.listening-label { color: var(--folio-highlight); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-listening .listening-title { margin: 8px 0 12px; color: var(--cream); font-size: 16px; line-height: 1.4; }
.listening-pause { background: transparent; color: var(--cream); border: 1px solid #ffffff55; padding: 6px 12px; font: 12px Georgia, serif; cursor: pointer; }
.listening-pause:hover { background: #ffffff12; }
.collection-shell .gallery-photo a { background: var(--paper); box-shadow: 8px 18px 32px #15184635, 0 0 30px rgba(var(--folio-rgb), .12); }
.collection-shell .gallery-photo a:hover { box-shadow: 10px 24px 40px #15184650, 0 0 45px rgba(var(--folio-rgb), .22); }
.photo-viewer { width: min(1300px, 95vw); max-width: 95vw; max-height: 95svh; padding: 20px; border: 1px solid #aeb2e14d; color: var(--cream); background: var(--grain), #15172d; box-shadow: 0 30px 100px #00000090; }
.photo-viewer::backdrop { background: #070914ed; backdrop-filter: blur(12px); }
.viewer-toolbar, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.viewer-toolbar p { font-size: 13px; margin: 0; }.viewer-bottom { font-size: 12px; padding-top: 15px; }
.photo-viewer button { font: 14px Georgia, serif; color: var(--cream); border: 1px solid #ffffff40; background: transparent; cursor: pointer; padding: 10px 14px; }
.photo-viewer button:hover { background: #ffffff15; }.photo-viewer button:focus-visible { outline: 2px solid #edcda3; outline-offset: 4px; }
.viewer-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 18px; align-items: center; padding-top: 20px; }
.viewer-image { width: 100%; height: min(72svh, 900px); object-fit: contain; }
.viewer-stage button { padding: 10px; }
.writing-desk { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, .8fr); gap: 35px; align-items: center; padding-bottom: 50px; }
.collection-shell .manuscript-sheet { margin: 20px 0 50px; background: url('images/paper-grain.svg'), #fff9e9; border: 1px solid #b4a591; box-shadow: 10px 20px 38px #36233d26, 5px 5px 0 #e5d8c4, 6px 6px 0 #b4a591; }
.draft-lines { display: grid; gap: 20px; margin-block: 45px; }.draft-lines i { height: 1px; background: #a99a843d; }.draft-lines i:last-child { width: 65%; }
.draft-signature { display: block; text-align: right; font-size: 28px; font-style: italic; color: #66516a; }
.desk-note { padding: 28px 0; border-block: 1px solid #9c8b9d; }.desk-note p { color: #5f5264; font-size: 15px; }.desk-note .eyebrow { color: var(--folio-accent); font-size: 10px; }.desk-note a { font-size: 13px; }
@media (max-width: 1100px) { .writing-desk { grid-template-columns: 1fr; }.desk-note { margin-bottom: 30px; } }
@media (max-width: 850px) { .sidebar-listening { display: none; }.collection-shell .music-work { margin-block: 35px 55px; } }
@media (max-width: 650px) { .viewer-stage { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }.viewer-stage button { padding: 8px 4px; }.photo-viewer { padding: 12px; }.viewer-toolbar, .viewer-bottom { gap: 10px; font-size: 10px; }.viewer-image { height: 65svh; } }
@media (prefers-reduced-motion: no-preference) { .music-work { transition: box-shadow .4s, border-color .4s; }.viewer-image { animation: photograph-arrive .3s ease-out; }@keyframes photograph-arrive { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* A scroll-responsive vignette frames the light without obscuring content. */
.chapter-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 57% 47%, transparent 28%, #04050d28 63%, #03040b99 100%);
  box-shadow: inset 0 50px 85px -50px #03040b90, inset 0 -55px 90px -50px #03040b90;
  opacity: .65;
}
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-vignette { opacity: calc(.45 + var(--scene) * .45); }
}
@media (max-width: 650px) { .chapter-vignette { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .chapter-vignette { opacity: .55; } }

/* Keep every lighting layer on the same viewport-wide surface. A gradient
   vignette avoids the rectangular edge produced by inset shadow layers. */
.chapter-stage::before,
.chapter-stage::after,
.chapter-atmosphere {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}
.chapter-vignette {
  inset: -2px;
  box-shadow: none;
  background: radial-gradient(ellipse at 57% 47%, transparent 28%, #04050d20 62%, #03040b80 100%), linear-gradient(to bottom, #03040b38, transparent 18%, transparent 82%, #03040b38);
}

/* Overscan the moving light field. Its previous initial translation and .9
   scale exposed its left boundary until the scroll animation moved it back. */
.chapter-light-pool { inset: -35%; }
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .chapter-light-pool {
    transform: translate3d(calc(6% - var(--scene) * 12%), calc(var(--scene) * -8%), 0) scale(calc(1.05 + var(--scene) * .2));
  }
}

/* Sound lighting lifts the existing green without introducing another hue. */
.chapter-sound { --light-rgb: 89, 141, 122; --light-secondary: 66, 104, 90; --chapter-glow: radial-gradient(ellipse at 82% 48%, #598d7a4d, transparent 65%); }

/* A paced closing invitation. Everything remains visible without JavaScript. */
.home-contact { position: relative; isolation: isolate; }
.home-contact::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, #dcb87618, transparent 65%); }
.contact-title-line { display: block; }
.contact-drawn-rule { width: min(180px, 40%); height: 1px; background: #829279; margin: 32px auto; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-contact .button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #28361820; }
}