/* VOL. 002 — a living character studio. Layout refinements over the original theme. */
:root {
  --bg: #0d0e10;
  --surface: #171717;
  --ink: #eee5cf;
  --muted: #a59f90;
  --yellow: #d5b577;
  --signal: #d44e35;
  --line: #39352d;
}
html { overflow-x: clip; scroll-padding-top: 112px; }
body { overflow-x: clip; }
.site-header {
  position: sticky; top: 0; height: 88px;
  background: #0d0e10f5; backdrop-filter: blur(16px);
  border-bottom: 1px solid #5d4a33;
}
.site-header::before { content: ''; position: absolute; bottom: -1px; left: 72px; width: 48px; height: 2px; background: var(--signal); }
.nav-link { position: relative; padding-block: 14px; }
.nav-link[aria-current] { color: var(--yellow); }
.nav-link[aria-current]::after { content: ''; position: absolute; bottom: 3px; left: 0; width: 18px; height: 2px; background: var(--signal); }
.brand small { font-size: 9px; }
.reading-progress { height: 3px; }
.reading-progress i { background: var(--signal); }
.hero { min-height: 780px; padding-top: 62px; padding-bottom: 86px; gap: 48px; grid-template-columns: .92fr 1.08fr; }
.hero-copy { padding-bottom: 10px; }
.hero .eyebrow { font-size: 10px; letter-spacing: 1.05px; color: #c5ac7d; }
.hero-edition { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 27px; color: #a19a8c; font-size: 10px; letter-spacing: 1px; }
.hero-edition span:first-child::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; background: var(--signal); }
.hero h1 { position: relative; font-size: clamp(52px, 5.35vw, 84px); font-weight: 650; line-height: 1.34; margin: 23px 0 29px; letter-spacing: -3px; white-space: nowrap; }
.hero h1 > span { display: inline-block; padding-left: .5em; color: var(--yellow); }
.hero h1 > i { position: absolute; top: -.15em; right: .05em; font: normal .6em var(--mono); color: var(--signal); }
.hero-description { font-size: 13px; line-height: 2.15; letter-spacing: .3px; }
.primary-link { background: #b6412c; border-color: #e06240; color: #fff0d6; padding: 17px 23px; }
.primary-link:hover { background: #d34f34; }
.hero-foot { margin-top: 40px; }
.hero-art { height: 594px; min-width: 0; }
.hero-art::before { content: ''; position: absolute; inset: 76px -7px 81px 25px; border: 1px solid #803d2b; transform: rotate(4deg); background: #b8412412; pointer-events: none; }
.art-index { font-size: 9px; letter-spacing: .7px; }
.orbit-window { top: 53px; height: 440px; width: 97%; transform: rotate(-3deg); border-color: #95764c; background-color: #101315; box-shadow: 12px 20px 0 #0003; }
.window-bar { height: 36px; font-size: 9px; padding-inline: 16px; }
.window-dots { color: var(--signal); letter-spacing: 4px; }
.orbit-window canvas { height: 308px; width: 100%; display: block; outline-offset: -5px; }
.orbit-window::after { inset: 36px 0 94px; }
.orbit-caption { font-size: 9px; padding: 12px 16px; color: #b9a47c; }
.time-tile { top: 20px; right: -5px; width: 166px; min-height: 123px; padding: 16px; background: #301713; border-color: #b35136; transform: rotate(7deg); box-shadow: 7px 9px 0 #0004; }
.time-tile strong { font-size: 34px; color: #efd7a4; }
.time-tile .mono { font-size: 7px; color: #d6a37f; }
.time-tile > span:last-of-type { font-size: 10px; }
.flower-tile { bottom: 34px; left: -12px; width: 300px; height: auto; min-height: 87px; padding: 12px 15px; gap: 9px; transform: rotate(2deg); background: #191b19; box-shadow: 6px 8px 0 #0003; }
.flower-tile > span:first-child { font-size: 8px; }
.flower-tile > span:last-child { display: none; }
.object-buttons { flex-direction: row; gap: 4px; }
.object-buttons button { flex: 1; white-space: nowrap; padding: 9px 5px; font-size: 10px; letter-spacing: 0; }
.object-buttons button.active { border-color: #ac6146; background: #9b4a3528; color: #f1d39a; }
.vertical-label { right: -20px; bottom: 133px; font-size: 8px; }
.engine-help { position: absolute; bottom: 0; right: 0; font-size: 10px; color: #a9997b; letter-spacing: .3px; }
.engine-controls { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block: 1px solid #63543a70; padding: 11px 14px; background: #181918; z-index: 3; }
.engine-controls label { display: flex; align-items: center; gap: 6px; font-size: 10px; white-space: nowrap; color: #bdb29a; }
.engine-controls select { border: 1px solid #68563a; background: #101315; color: #ead3a4; font-size: 10px; padding: 4px 1px; border-radius: 0; }
.engine-controls input { width: 54px; accent-color: var(--signal); margin: 0; }
.engine-controls output { font: 10px var(--mono); min-width: 27px; }
.engine-controls button { background: transparent; color: #edca88; padding: 5px 0; font-size: 10px; white-space: nowrap; }
.engine-controls button:hover { color: #fff0d6; }
.engine-controls button span { color: var(--signal); margin-left: 5px; }
.manifest-strip { transform: rotate(-2deg) scaleX(1.015); padding: 27px 0; margin: 0 0 103px; border-color: #675237; background: #151410; }
.manifest-strip > div { font-size: 24px; gap: 52px; will-change: transform; }
.manifest-strip b { color: var(--signal); }
.outline-word { font-size: 31px; -webkit-text-stroke-color: #b09a70; }
.section-heading h2 { font-size: 36px; color: #e8dfca; font-weight: 550; }
.section-heading .eyebrow { color: #c08866; }
.section-heading > p { font-size: 13px; }
.filter { font-size: 12px; padding: 11px 14px; }
.filter.active { border-color: #b06143; background: #672c201c; }
.filter span { font-size: 9px; }
.collection-label { font-size: 9px; color: #a18e6a; }
.project-grid { gap: 76px 60px; }
.project-spring { margin-top: 126px; }
.project-palette { margin-top: 112px; }
.project-stage { border-color: #6d5a3c; }
.stage-tag { font-size: 9px; letter-spacing: .7px; }
.stage-top > .mono { color: #da7452; }
.stage-bottom { font-size: 12px; }
.stage-button, .range-control { font-size: 12px; }
.project-type { font-size: 10px; color: #b7a17d; }
.project-description h3 { font-size: 25px; font-weight: 550; }
.project-description p:last-child:not(.project-type) { font-size: 13px; }
.project-arrow { width: 42px; height: 42px; color: #dec48b; }
.spring-stage { background-color: #291713; border-color: #945038; }
.spring-ball { background: #a03c29; border-color: #d49361; color: #ffe0a8; }
.timer-start { background: #ac3d2a; border-color: #cf6443; font-size: 12px; }
.timer-controls select { font-size: 12px; width: 86px; }
#timer-status { font-size: 11px; }
.timer-kicker { font-size: 9px; }
.swatch span { font-size: 10px; }
.collection-bottom { font-size: 12px; }
.collection-bottom .mono { font-size: 9px; }
.scroll-story { background-color: #141413; border-color: #655035; }
.story-sticky { top: 88px; max-height: calc(100svh - 88px); }
.story-copy h2 { font-size: 39px; }
.story-copy > p:last-of-type { font-size: 13px; }
.story-progress > .mono { font-size: 10px; }
.story-progress i { background: var(--signal); }
.piece-two, .piece-four { background: #873c29; border-color: #bc7952; }
.note-row { padding-block: 34px; }
.note-main strong { font-size: 23px; }
.note-tag, .note-length { font-size: 10px; }
.note-summary { font-size: 13px; }
.sample-note { font-size: 11px; line-height: 1.8; }
.about-symbol { color: var(--signal); }
.about h2 { font-size: 47px; }
.about p:not(.eyebrow) { font-size: 13px; }
.footer-bottom { font-size: 9px; line-height: 1.8; }
canvas:focus-visible { outline: 2px solid var(--yellow); }
.motion-paused .manifest-strip > div { will-change: auto; }

@media (max-width: 1100px) {
  .site-header::before { left: 40px; }
  .hero { gap: 35px; min-height: 710px; padding-top: 48px; }
  .hero h1 { font-size: 57px; }
  .hero h1 > i { right: -.05em; }
  .hero .eyebrow { font-size: 8px; }
  .hero-edition { font-size: 9px; gap: 8px; }
  .hero-art { height: 535px; }
  .orbit-window { top: 54px; height: 384px; }
  .orbit-window canvas { height: 251px; }
  .engine-controls { gap: 6px; padding-inline: 10px; }
  .engine-controls input { width: 38px; }
  .engine-speed-control { gap: 3px !important; }
  .engine-controls output { display: none; }
  .time-tile { width: 141px; min-height: 113px; }
  .time-tile strong { font-size: 30px; }
  .time-tile .mono { font-size: 6px; }
  .flower-tile { width: 278px; bottom: 32px; }
  .project-grid { gap: 65px 35px; }
  .section-heading h2 { font-size: 31px; }
  .story-copy h2 { font-size: 33px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 94px; }
  .site-header { height: 76px; padding-inline: 20px; }
  .site-header::before { left: 20px; }
  .site-header nav { gap: 18px; margin-right: 17px; }
  .brand small { font-size: 7px; }
  .hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 35px; padding-bottom: 44px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .4px; }
  .hero-edition { margin-top: 21px; gap: 16px; font-size: 9px; }
  .hero h1 { font-size: clamp(44px, 10.4vw, 70px); margin: 20px 0 22px; letter-spacing: -2px; }
  .hero h1 > span { padding-left: .45em; }
  .hero h1 > i { right: 12%; }
  .hero-description { font-size: 12px; }
  .hero-description .mobile-br { display: initial; }
  .hero-foot { margin: 0; right: 0; bottom: 9px; }
  .hero-art { width: min(96%, 500px); height: 520px; margin-top: 8px; }
  .hero-art::before { inset: 69px -4px 100px 14px; }
  .art-index { font-size: 8px; }
  .orbit-window { top: 51px; left: 0; height: 367px; width: 98%; }
  .orbit-window canvas { height: 234px; }
  .window-bar { font-size: 8px; }
  .engine-controls label, .engine-controls select, .engine-controls button { font-size: 9px; }
  .engine-controls { padding-inline: 9px; gap: 5px; min-height: 47px; }
  .engine-controls input { width: 45px; }
  .orbit-caption { font-size: 8px; }
  .time-tile { top: 24px; right: -6px; width: 132px; min-height: 101px; padding: 12px 14px; }
  .time-tile strong { font-size: 28px; }
  .time-tile > span:last-of-type { font-size: 9px; }
  .flower-tile { left: -3px; bottom: 34px; width: 282px; padding: 11px 12px; min-height: 82px; }
  .object-buttons button { font-size: 10px; padding: 10px 5px; }
  .vertical-label { right: -17px; font-size: 7px; bottom: 150px; }
  .engine-help { font-size: 9px; right: 0; bottom: 4px; }
  .manifest-strip { padding: 20px 0; margin-bottom: 57px; }
  .manifest-strip > div { font-size: 20px; gap: 34px; }
  .outline-word { font-size: 26px; }
  .section-heading h2 { font-size: 26px; }
  .section-heading { display: block; }
  .section-heading > p { font-size: 11px; max-width: none; margin-top: 13px; }
  .section-heading > p br { display: none; }
  .filter { font-size: 11px; padding-inline: 10px; }
  .project-grid { gap: 42px; }
  .project-spring, .project-palette { margin-top: 0; }
  .project-description h3 { font-size: 23px; }
  .project-description p:last-child:not(.project-type) { font-size: 12px; }
  .stage-tag { font-size: 8px; }
  .stage-bottom, .stage-button, .range-control { font-size: 11px; }
  .project-type { font-size: 9px; }
  .story-sticky { top: 76px; max-height: calc(100svh - 76px); padding-top: 30px; }
  .story-copy h2 { font-size: 31px; }
  .story-copy > p:last-of-type { font-size: 12px; }
  .story-art { height: 280px; }
  .note-main strong { font-size: 18px; }
  .note-summary { font-size: 11px; }
  .sample-note { font-size: 10px; }
  .about h2 { font-size: 34px; }
  .about p:not(.eyebrow) { font-size: 12px; }
  .footer-bottom { font-size: 8px; }
}
@media (max-width: 380px) {
  .site-header nav { gap: 14px; margin-right: 12px; }
  .hero h1 { font-size: 43px; }
  .hero .eyebrow { font-size: 7px; }
  .hero-edition { font-size: 8px; gap: 9px; }
  .hero-art { height: 478px; }
  .orbit-window { height: 331px; }
  .orbit-window canvas { height: 198px; }
  .flower-tile { width: 253px; }
  .object-buttons button { font-size: 9px; }
  .engine-controls input { width: 30px; }
  .engine-controls label { gap: 4px; }
  .time-tile { width: 119px; }
  .time-tile strong { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-enabled) .story-sticky { position: relative; top: 0; max-height: none; }
  body.motion-enabled .scroll-story { height: 160vh; min-height: 940px; }
  body.motion-enabled .story-sticky { position: sticky; }
  body.motion-enabled .scroll-track i { animation: scroll 2.4s infinite !important; }
}
@media (max-height: 760px) and (max-width: 760px), (max-height: 600px) and (min-width: 761px) {
  .scroll-story, body.motion-enabled .scroll-story { height: auto; min-height: 0; }
  .story-sticky, body.motion-enabled .story-sticky { position: relative; top: 0; max-height: none; height: auto; padding-block: 45px; }
}