/* Adopted watercolor palette and composition, 2026-11-06. */
:root { color-scheme:light; --paper:#F1E9DE; --ink:#302824; --ink-2:#51443E; --sub:#74645B; --accent:#806477; }
:root.dark { color-scheme:dark; --paper:#30282F; --ink:#F2E7DE; --ink-2:#D8C8C2; --sub:#BFAAA5; --accent:#D0AFA7; }
::selection { background:#BFA79B66; }
body { background-color:var(--paper); }
.ambient { opacity:.25; }
.ink-trail { display:none; }
.skip-link { position:fixed; top:8px; left:8px; z-index:200; padding:10px 16px; background:var(--paper); translate:0 -160%; }
.skip-link:focus { translate:0; }
.hero { padding-top:18vh; min-height:100svh; padding-bottom:90px; isolation:isolate; }
.hero-painting { position:absolute; inset:0; z-index:0; pointer-events:none; }
html .hero .scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; opacity:1 !important; filter:none !important; -webkit-mask-image:none !important; mask-image:none !important; transition:none !important; }
.hero h1 { --ink-name:#3D3430; opacity:1 !important; color:var(--ink-name) !important; animation:none !important; }
.dark .hero h1 { --ink-name:#F3E6DE; }
.hero .role,.hero .lede,.hero .lede .w,.hero > .hello-link { visibility:visible !important; opacity:1 !important; filter:none !important; translate:none !important; text-shadow:none; transition:none !important; }
.hero .role { grid-column:1 / span 8; max-width:660px; margin-top:4.5vh; font-size:28px; font-weight:600; color:#211D1B; text-wrap:initial; }
.hero .lede { grid-column:1 / span 9; max-width:760px; margin-top:18px; font-size:22px; line-height:1.55; font-weight:500; color:#211D1B; }
.dark .hero .role,.dark .hero .lede { color:#FFF8F1; text-shadow:none; -webkit-text-stroke:.55px #31232C; paint-order:stroke fill; }
.hero > .hello-link { color:#302824; }
.dark .hero > .hello-link { color:#FFF8F1; }
.ramp { height:24px; margin:0; background:none; }
html .ramp canvas, html.lite .ramp canvas { display:block; top:-24vh; height:70vh; min-height:360px; z-index:3; pointer-events:none; }
.text p { font-size:18px; line-height:1.65; }
.text .when { color:var(--ink-2); }
svg.wash.in { opacity:.48; }
.lite .lite-wash.in { opacity:.42; }
.dark .lite-wash.in { opacity:.13; }
.dark .note { background:#42353E; }
.note { background:#FAF4EB; }
.copy { background:#E2D6C9; }
.dark .copy { background:#57454F; }
.motion-toggle { background:color-mix(in srgb,var(--paper) 88%,transparent); }
.end { min-height:0; padding-top:24vh; padding-bottom:12vh; }
.end .porto-painting { position:absolute; inset:auto 0 0; width:100%; height:100%; z-index:0; pointer-events:none; }
html .end .porto { position:absolute; inset:auto auto 0 -7%; width:114%; height:46vh; object-fit:cover; object-position:center bottom; opacity:.16; filter:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 58%); mask-image:linear-gradient(to bottom,transparent 0,#000 58%); }
.end h2.hello { clip-path:none; }
.end .charms { align-self:start; }
.dark .print figcaption,.dark .print.solo figcaption.credit { color:#70635C; }
@media (min-width:1600px) { .hero .lede { max-width:800px; } }
@media (min-width:821px) and (max-height:700px) { .hero { padding-top:110px; min-height:740px; } .hero h1 { font-size:150px; } .hero .role { margin-top:22px; } }
@media (max-width:1080px) and (min-width:821px) { .hero .lede { max-width:650px; grid-column:1 / span 9; font-size:21px; } .hero .role { font-size:26px; } }
@media (max-width:820px) {
 .hero { display:flex; flex-direction:column; min-height:0; padding:100px 24px 0; overflow:hidden; }
 .hero-painting { position:relative; inset:auto; order:4; width:calc(100% + 48px); height:auto; aspect-ratio:1.48; margin:26px -24px 0; }
 html .hero .scene { object-fit:cover; object-position:right bottom; }
 .hero h1 { font-size:clamp(76px,18vw,136px); line-height:1.12; white-space:nowrap; }
 .hero .role { margin:22px 0 0; font-size:26px; line-height:1.25; max-width:100%; color:var(--ink); }
 .hero .lede { margin:18px 0 0; max-width:38em; font-size:19px; line-height:1.6; color:var(--ink); }
 .dark .hero .role,.dark .hero .lede { color:var(--ink); -webkit-text-stroke:0; }
 .hero > .hello-link { top:24px; right:24px; font-size:20px; }
 .hero .mark { left:26px; top:auto; bottom:20px; }
 .ramp { height:12px; }
 .text p { font-size:17px; }
 .end { min-height:0; padding:120px 18px 96px; }
 .end .porto-painting { height:100%; }
 html .end .porto { width:130%; max-width:none; left:-15%; height:32vh; min-height:240px; object-fit:cover; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Keep the new footer painting out of the story grid and below the contact line. */
html .end > .porto-painting { position:absolute !important; inset:auto 0 0; z-index:0; width:100%; }
html.dark .end .porto { opacity:.10; filter:none; }
/* Text is present as the reader reaches it; the ink thread still draws on scroll. */
html main .text .fade, html main .text .fade .lw, html .when-ink .c { opacity:1 !important; translate:none !important; filter:none !important; transition:none !important; }
html.js main .ch[data-cap] > :not(.text):not(.mark):not(.wash):not(.beat) { opacity:1; transition:none; }
html.js .edmodo .handset { opacity:1; filter:none; }
html.js .dote .print { opacity:1; }
html .charms > li { opacity:1; }

/* The lower pigment edge dissolves into the same paper as the first chapter. */
html .hero .scene { -webkit-mask-image:url("assets/scene/shoreline-edge.svg") !important; mask-image:url("assets/scene/shoreline-edge.svg") !important; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
@media (max-width:820px) {
 html .hero .scene { -webkit-mask-image:url("assets/scene/shoreline-edge-mobile.svg") !important; mask-image:url("assets/scene/shoreline-edge-mobile.svg") !important; }
}
/* The transition uses the page's paper; the old dusk ramp added a visible stripe. */
html.dark .ramp { background:none; }

@media (prefers-reduced-motion:reduce) { html .ramp canvas, html.lite .ramp canvas { display:none; } }

/* Longer, smoother dark-paper transitions; the light painting treatment stays as approved. */
html.dark .hero .scene { -webkit-mask-image:url("assets/scene/shoreline-edge-dark.svg") !important; mask-image:url("assets/scene/shoreline-edge-dark.svg") !important; }
html.dark .end .porto {
 filter:blur(1.5px);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 25%,#000 55%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 25%,#000 55%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
 -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media (max-width:820px) { html.dark .hero .scene { -webkit-mask-image:url("assets/scene/shoreline-edge-dark-mobile.svg") !important; mask-image:url("assets/scene/shoreline-edge-dark-mobile.svg") !important; } }

/* Keep the contact note inside a phone viewport when opened from the first charm. */
@media (max-width:820px) { .end .charms > li:first-child .note { left:0; translate:0 0; max-width:calc(100vw - 96px); } }