:root {
  --ink: #1c172f;
  --violet: #4d32a8;
  --violet-dark: #2b1b63;
  --paper: #f5f1e9;
  --paper-deep: #e9e2d6;
  --lime: #d4f23c;
  --pink: #f4a8bd;
  --yellow: #ffd34d;
  --line: rgba(28, 23, 47, .22);
  --muted: #716b7c;
  --mono: "Bricolage Grotesque", Arial, sans-serif;
  --display: "Bricolage Grotesque", Arial, sans-serif;
  --shadow: 8px 8px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); }
button, a { font: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.demo-body { min-width: 320px; overflow-x: hidden; }

.demo-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 64px; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgba(245, 241, 233, .9); backdrop-filter: blur(16px); }
.demo-brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 15px; }
.header-center, .header-right { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; }
.header-center { justify-content: center; }
.header-right { justify-content: flex-end; }
.header-slash { color: var(--violet); font-size: 16px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(77, 50, 168, .13); }

.demo-main { width: min(100% - 36px, 1260px); margin: 0 auto; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.demo-note { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 12px; }
.note-pip { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--violet); color: var(--paper); font: 10px var(--mono); }
.mode-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .35); }
.mode-button { border: 0; border-radius: 999px; padding: 8px 13px; background: transparent; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; transition: .2s ease; }
.mode-button.is-active { background: var(--ink); color: var(--lime); }

.demo-hero { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(310px, 40%); min-height: 690px; padding: clamp(58px, 9vw, 120px) 0 90px; }
.hero-side-label { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 12px; }
.vertical-label { color: var(--muted); font-size: 9px; writing-mode: vertical-rl; transform: rotate(180deg); }
.side-line { width: 1px; flex: 1; background: var(--line); }
.hero-copy { align-self: center; padding: 0 clamp(24px, 5vw, 74px) 0 0; }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow { padding: 8px 10px; background: var(--violet); color: var(--paper); font: 10px var(--mono); letter-spacing: .14em; }
.seed-stamp { padding: 7px 9px; border: 1px solid var(--violet); color: var(--violet); font-size: 9px; transform: rotate(-2deg); }
h1, h2, h3, p { margin-top: 0; }
.hero-copy h1 { max-width: 720px; margin-bottom: 28px; font-size: clamp(54px, 8.3vw, 118px); font-weight: 700; letter-spacing: -.085em; line-height: .86; }
.hero-mark { display: inline; background: linear-gradient(transparent 61%, var(--lime) 0); }
.hero-deck { max-width: 490px; margin-bottom: 30px; color: var(--muted); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 58px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.hero-meta b { color: var(--ink); font-size: 14px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font: 11px var(--mono); text-decoration: none; text-transform: uppercase; }
.scroll-cue-icon { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--ink); border-radius: 50%; font-size: 18px; transition: transform .2s ease; }
.scroll-cue:hover .scroll-cue-icon { transform: translateY(4px); }
.hero-art { position: relative; align-self: center; min-height: 440px; border-radius: 48% 52% 45% 55% / 50% 45% 55% 50%; background: var(--violet); overflow: hidden; }
.hero-art::before { position: absolute; inset: 12%; border: 1px solid rgba(245, 241, 233, .38); border-radius: 50%; content: ""; }
.hero-art img { position: absolute; z-index: 2; right: -4%; bottom: 0; width: 105%; height: 95%; object-fit: contain; object-position: bottom center; filter: drop-shadow(18px 18px 0 rgba(28, 23, 47, .2)); }
.art-caption { position: absolute; z-index: 3; top: 26px; left: 28px; color: rgba(245, 241, 233, .7); font-size: 9px; }
.art-tag { position: absolute; z-index: 4; right: -14px; bottom: 60px; padding: 13px 17px; background: var(--lime); color: var(--ink); font: 11px var(--mono); line-height: 1.2; transform: rotate(8deg); box-shadow: 5px 5px 0 var(--ink); }
.art-tag span { color: var(--violet); font-size: 17px; }
.orbit-orb { position: absolute; z-index: 1; border-radius: 50%; border: 1px solid rgba(245, 241, 233, .55); }
.orbit-orb-one { top: 14%; left: -8%; width: 26%; aspect-ratio: 1; background: var(--lime); }
.orbit-orb-two { right: 9%; top: 13%; width: 12%; aspect-ratio: 1; background: var(--pink); }

.reading-view { padding-bottom: 110px; }
.reading-view[hidden] { display: none; }
.reading-intro, .full-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 26px 0 42px; border-top: 2px solid var(--ink); }
.section-kicker, .mini-label { margin-bottom: 11px; color: var(--violet); font-size: 10px; font-weight: 600; }
.reading-intro h2, .full-intro h2 { margin-bottom: 0; font-size: clamp(46px, 6.7vw, 91px); letter-spacing: -.08em; line-height: .84; }
.reading-intro h2 em, .full-intro h2 em { color: var(--violet); font-style: normal; }
.intro-aside { max-width: 310px; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.reading-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(24px, 6vw, 90px); }
.progress-rail { position: sticky; top: 100px; align-self: start; min-height: 390px; padding-top: 5px; }
.rail-caption, .rail-foot { color: var(--muted); font-size: 9px; }
.rail-track { position: absolute; top: 48px; left: 8px; width: 2px; height: 265px; background: var(--paper-deep); }
.rail-fill { display: block; width: 100%; height: 33%; background: var(--violet); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.rail-steps { position: relative; display: grid; gap: 40px; margin: 28px 0 0; padding: 0; list-style: none; }
.rail-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 13px; align-items: center; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.rail-steps li::before { z-index: 1; display: block; width: 16px; height: 16px; border: 2px solid var(--paper); border-radius: 50%; background: var(--paper-deep); box-shadow: 0 0 0 1px var(--line); content: ""; }
.rail-steps li.is-current { color: var(--ink); font-weight: 600; }
.rail-steps li.is-current::before { background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }
.rail-steps button { display: contents; border: 0; color: inherit; font: inherit; text-align: left; text-transform: inherit; }
.rail-foot { margin-top: 68px; transform: rotate(-4deg); }
.reading-stack, .full-reading-stack { min-width: 0; }

.reveal-block { position: relative; margin-bottom: 76px; border: 1px solid var(--ink); box-shadow: var(--shadow); opacity: .28; transform: translateY(60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-block.is-revealed, .full-reading-stack .desk-file.is-revealed { opacity: 1; transform: translateY(0); }
.file-tab { position: absolute; z-index: 2; top: -13px; left: 22px; padding: 7px 10px; background: var(--violet); color: var(--paper); font-size: 9px; box-shadow: 3px 3px 0 var(--ink); }
.file-tab-dark { background: var(--ink); }
.file-tab-acid { background: var(--lime); color: var(--ink); }
.reveal-block-lime { background: var(--lime); }
.reveal-block-paper { background: var(--paper); }
.reveal-block-ink { background: var(--ink); color: var(--paper); }
.signal-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); min-height: 470px; }
.signal-visual { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--ink); background: var(--violet); color: var(--paper); }
.signal-number { position: absolute; top: 24px; left: 22px; font: 11px var(--mono); }
.signal-word { position: absolute; right: 21px; bottom: 22px; color: var(--lime); font-size: 9px; line-height: 1.2; text-align: right; }
.signal-pulse { position: relative; display: grid; place-items: center; width: 210px; aspect-ratio: 1; }
.signal-pulse span { position: absolute; display: block; border: 1px solid var(--lime); border-radius: 50%; animation: pulse 4s ease-out infinite; }
.signal-pulse span:nth-child(1) { width: 28%; height: 28%; background: var(--lime); }
.signal-pulse span:nth-child(2) { width: 58%; height: 58%; animation-delay: .8s; }
.signal-pulse span:nth-child(3) { width: 92%; height: 92%; animation-delay: 1.6s; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.88); } 50% { opacity: 1; transform: scale(1); } }
.signal-copy, .pattern-copy, .next-heading { padding: clamp(27px, 5vw, 70px); }
.signal-copy h3, .pattern-copy h3, .next-heading h3, .partial-unlock h3, .full-close h3 { margin-bottom: 20px; max-width: 540px; font-size: clamp(32px, 4.6vw, 63px); letter-spacing: -.07em; line-height: .94; }
.reading-copy { max-width: 490px; margin-bottom: 25px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.reveal-block-ink .reading-copy { color: rgba(245, 241, 233, .68); }
.receipt { display: flex; align-items: start; gap: 12px; max-width: 400px; padding-top: 18px; border-top: 1px solid rgba(28, 23, 47, .35); }
.receipt-mark { color: var(--violet); font-size: 22px; }
.receipt p { margin: 0; color: var(--ink); font: 11px var(--mono); line-height: 1.55; text-transform: uppercase; }
.receipt b { color: var(--violet); }
.pattern-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr); min-height: 480px; }
.pattern-copy { border-right: 1px solid var(--line); }
.pattern-note { display: flex; flex-direction: column; justify-content: center; margin: 48px 42px; padding: 38px 30px; background: var(--pink); box-shadow: 8px 8px 0 var(--violet); transform: rotate(3deg); }
.note-pin { align-self: start; margin-bottom: 34px; color: var(--violet); font: 10px var(--mono); }
.pattern-note p { margin-bottom: 35px; color: var(--ink); font-size: clamp(21px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.note-sign { color: var(--violet); font-size: 9px; }
.pattern-lines { display: grid; gap: 8px; max-width: 290px; margin-top: 45px; }
.pattern-lines span { display: block; height: 2px; background: var(--violet); }
.pattern-lines span:nth-child(2) { width: 72%; }.pattern-lines span:nth-child(3) { width: 90%; }.pattern-lines span:nth-child(4) { width: 54%; }.pattern-lines span:nth-child(5) { width: 80%; }
.next-grid { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 420px; }
.next-heading { border-right: 1px solid rgba(245, 241, 233, .28); }
.next-heading .mini-label { color: var(--lime); }
.move-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.move-list li { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 15px; padding: 24px 30px; border-bottom: 1px solid rgba(245, 241, 233, .22); }
.move-list li:last-child { border-bottom: 0; }
.move-list li > span { color: var(--lime); font: 12px var(--mono); }
.move-list p { margin: 0; color: rgba(245, 241, 233, .72); font-size: 15px; line-height: 1.4; }
.move-list b { color: var(--paper); font-size: 18px; }
.partial-unlock { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 6px 0 30px; padding: 29px 30px; border: 1px solid var(--ink); background: var(--violet); color: var(--paper); box-shadow: var(--shadow); }
.unlock-asterisk { color: var(--lime); font-size: 42px; }
.partial-unlock .section-kicker { margin-bottom: 8px; color: var(--lime); }
.partial-unlock h3 { margin-bottom: 12px; font-size: clamp(25px, 3.1vw, 41px); }
.partial-unlock p:last-child { max-width: 460px; margin-bottom: 0; color: rgba(245, 241, 233, .72); font-size: 14px; line-height: 1.4; }
.acid-button, .outline-button { border: 1px solid var(--ink); padding: 14px 16px; background: var(--lime); color: var(--ink); font: 11px var(--mono); text-transform: uppercase; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.acid-button:hover, .outline-button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.acid-button span, .outline-button span { margin-left: 15px; font-size: 16px; }

.full-intro-right { display: flex; align-items: center; gap: 17px; color: var(--muted); font: 10px var(--mono); line-height: 1.45; text-transform: uppercase; }
.full-intro-right p { margin: 0; }
.edition-count { color: var(--violet); font-size: 57px; letter-spacing: -.1em; line-height: .8; }
.edition-count span { color: var(--muted); font-size: 16px; letter-spacing: 0; }
.desk-index { position: sticky; z-index: 10; top: 64px; display: grid; grid-template-columns: 140px 1fr; gap: 17px; align-items: start; margin: 0 0 72px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(245, 241, 233, .9); backdrop-filter: blur(16px); }
.index-title { padding-top: 10px; color: var(--muted); font-size: 9px; }
.desk-index-list { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-index-list button { border: 1px solid var(--line); padding: 8px 10px; background: transparent; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; transition: .2s ease; }
.desk-index-list button:hover, .desk-index-list button.is-active { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.desk-file { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); min-height: 430px; margin-bottom: 74px; border: 1px solid var(--ink); box-shadow: var(--shadow); opacity: .28; transform: translateY(60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.desk-visual { position: relative; display: flex; align-items: end; min-height: 310px; overflow: hidden; border-right: 1px solid var(--ink); }
.desk-visual img { display: block; width: 100%; height: 100%; min-height: 310px; object-fit: cover; }
.desk-visual-label { position: absolute; top: 17px; left: 17px; padding: 7px 9px; background: var(--paper); color: var(--ink); font-size: 9px; }
.desk-copy { position: relative; padding: clamp(26px, 5vw, 67px); }
.desk-number { position: absolute; top: 21px; right: 23px; color: var(--ink); font: 13px var(--mono); }
.desk-copy .mini-label { color: var(--ink); }
.desk-copy h3 { max-width: 580px; margin-bottom: 20px; font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -.08em; line-height: .9; }
.desk-foot { display: inline-block; padding-top: 15px; border-top: 1px solid var(--line); color: var(--ink); font-size: 9px; }
.desk-file-lime { background: var(--lime); }.desk-file-pink { background: var(--pink); }.desk-file-yellow { background: var(--yellow); }.desk-file-paper { background: var(--paper); }.desk-file-ink { background: var(--ink); color: var(--paper); }
.desk-file-ink .desk-copy .mini-label, .desk-file-ink .desk-number, .desk-file-ink .desk-foot { color: var(--lime); }.desk-file-ink .reading-copy { color: rgba(245, 241, 233, .72); }.desk-file-ink .desk-foot { border-color: rgba(245, 241, 233, .28); }
.full-close { display: grid; justify-items: center; padding: 74px 20px 48px; border-top: 2px solid var(--ink); text-align: center; }
.close-star { margin-bottom: 15px; color: var(--violet); font-size: 33px; }
.full-close .section-kicker { margin-bottom: 12px; }.full-close h3 { margin-bottom: 17px; }.full-close > p:not(.section-kicker) { max-width: 410px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.outline-button { margin-top: 17px; border-color: var(--ink); background: transparent; }

.demo-footer { display: flex; justify-content: space-between; gap: 18px; width: min(100% - 36px, 1260px); margin: 0 auto; padding: 23px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

@media (min-width: 860px) {
  .hero-art { margin-right: 7%; }
  .desk-file:nth-child(even) .desk-visual { order: 2; border-right: 0; border-left: 1px solid var(--ink); }
}
@media (max-width: 800px) {
  .header-center { display: none; }.demo-header { grid-template-columns: 1fr auto; }.demo-main { width: min(100% - 28px, 620px); }
  .demo-hero { grid-template-columns: 28px 1fr; min-height: 0; padding: 70px 0 85px; }.hero-art { grid-column: 2; grid-row: 1; width: min(100%, 350px); min-height: 390px; margin: 0 auto 48px; }.hero-copy { grid-column: 2; grid-row: 2; padding: 0; }.hero-side-label { grid-row: 1 / span 2; }.hero-copy h1 { font-size: clamp(52px, 14vw, 90px); }.hero-meta { gap: 10px 16px; margin-bottom: 42px; }
  .reading-intro, .full-intro { display: block; }.intro-aside { margin-top: 26px; }.full-intro-right { margin-top: 30px; }.reading-layout { display: block; }.progress-rail { position: sticky; z-index: 5; top: 64px; display: flex; align-items: center; gap: 14px; min-height: 0; padding: 10px 0; border-bottom: 1px solid var(--line); background: rgba(245, 241, 233, .92); backdrop-filter: blur(14px); }.rail-caption { white-space: nowrap; }.rail-track { position: relative; top: auto; left: auto; width: 70px; height: 2px; }.rail-fill { width: 33%; height: 100%; }.rail-steps { display: flex; justify-content: space-between; flex: 1; gap: 8px; margin: 0; }.rail-steps li { display: block; }.rail-steps li::before { display: none; }.rail-steps span { display: none; }.rail-foot { display: none; }.reading-stack { padding-top: 54px; }
  .signal-grid, .pattern-grid, .next-grid { grid-template-columns: 1fr; }.signal-visual { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--ink); }.signal-copy, .pattern-copy, .next-heading { padding: 38px 28px; }.pattern-copy { border-right: 0; border-bottom: 1px solid var(--line); }.pattern-note { margin: 35px 28px 45px; }.next-heading { border-right: 0; border-bottom: 1px solid rgba(245, 241, 233, .28); }.partial-unlock { grid-template-columns: 40px 1fr; }.partial-unlock .acid-button { grid-column: 2; justify-self: start; }.desk-index { grid-template-columns: 1fr; gap: 10px; }.index-title { padding-top: 0; }.desk-file { grid-template-columns: 1fr; }.desk-visual { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--ink); }.desk-visual img { min-height: 250px; max-height: 330px; }.desk-file:nth-child(even) .desk-visual { order: 0; border-left: 0; border-bottom: 1px solid var(--ink); }.desk-copy { padding: 42px 28px 35px; }.desk-file { margin-bottom: 58px; }.demo-footer { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .demo-toolbar { align-items: flex-start; flex-direction: column; }.mode-switch { align-self: stretch; }.mode-button { flex: 1; }.demo-hero { padding-top: 48px; }.hero-art { min-height: 300px; }.art-tag { right: -8px; bottom: 38px; }.hero-copy h1 { font-size: 55px; }.eyebrow-row { align-items: start; flex-direction: column; }.reading-intro h2, .full-intro h2 { font-size: 56px; }.reveal-block { margin-bottom: 57px; }.partial-unlock { padding: 24px 18px; }.unlock-asterisk { font-size: 29px; }.move-list li { grid-template-columns: 40px 1fr; padding: 21px 18px; }.move-list b { font-size: 16px; }.pattern-note { margin: 25px 18px 35px; padding: 28px 22px; }.desk-index-list { display: grid; grid-template-columns: repeat(2, 1fr); }.desk-index-list button { text-align: left; }.desk-copy h3 { font-size: 40px; }.demo-footer { display: grid; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.signal-pulse span { animation: none; }.reveal-block, .desk-file { transition: opacity .2s ease; transform: none; }
}

/* Private correspondence: paper, fine rules, plum ink and generous margins. */
:root { --ink: #302632; --violet: #624263; --violet-dark: #392b41; --paper: #f8f4ed; --paper-deep: #e8dfd2; --lime: #e2e7b6; --pink: #eededc; --yellow: #efe3c4; --muted: #6b616a; --line: #30263226; --display: 'Bricolage Grotesque', Arial, sans-serif; --serif: 'Bricolage Grotesque', Arial, sans-serif; --shadow: 0 18px 60px #30263207; }
body { background-image: radial-gradient(ellipse at 90% 3%, #e7ded755, transparent 40%); }
::selection { background: #ded5b6; color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
.demo-header { background: #f8f4edf2; }
.header-center { letter-spacing: .13em; }
.gift-link { padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--violet); font-size: 12px; }
.demo-main { max-width: 1200px; }
.demo-hero { padding-top: 85px; padding-bottom: 115px; }
.hero-copy h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 7.8vw, 108px); letter-spacing: -.035em; line-height: .99; }
.hero-mark { background: none; font-style: italic; color: var(--violet); }
.eyebrow { background: transparent; padding-left: 0; color: var(--violet); }
.seed-stamp { border: 0; padding-left: 0; transform: none; font-size: 8px; }
.hero-deck { max-width: 405px; font-size: 17px; line-height: 1.8; }
.hero-meta { font-size: 8px; gap: 18px; }
.hero-art { border-radius: 48% 48% 3px 3px; background: radial-gradient(ellipse at 50% 35%, #8b7487, #4a354e 75%); min-height: 490px; box-shadow: 0 30px 70px #30263218; }
.hero-art::before { inset: 18px; border-radius: 48% 48% 0 0; border-color: #f8f4ed33; }
.hero-art img { filter: drop-shadow(0 14px 12px #30263222); width: 104%; right: -2%; height: 85%; }
.art-caption { top: 55px; left: 0; width: 100%; text-align: center; font-size: 8px; }
.art-tag { right: 15px; bottom: 23px; box-shadow: none; background: #f0e3c8; transform: rotate(-6deg); font-size: 9px; }
.orbit-orb-one { background: transparent; width: 80%; left: 10%; top: 17%; opacity: .2; }
.orbit-orb-two { width: 9%; top: 23%; right: 16%; background: #e9d9b2; border: 0; }
.reading-intro, .full-intro { border-top-width: 1px; padding-top: 40px; }
.reading-intro h2, .full-intro h2, .full-close h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.03; }
.reading-intro h2 em, .full-intro h2 em { font-style: italic; }
.intro-aside { font-size: 15px; line-height: 1.8; }
.tota-sign, .gift-sign { display: block; margin-top: 15px; font-family: var(--serif); font-size: 23px; font-style: italic; color: var(--violet); }
.life-three { margin: 12px 0 90px; padding: 45px 0 0; border-top: 1px solid var(--line); }
.three-intro { display: flex; align-items: center; gap: 30px; margin-bottom: 35px; }
.three-intro img { width: 150px; height: 160px; object-fit: contain; }
.three-intro h2 { margin-bottom: 15px; font: 400 48px/1.05 var(--serif); letter-spacing: -.025em; }
.three-intro h2 br { display: none; }
.three-intro p:not(.section-kicker) { color: var(--muted); margin-bottom: 0; line-height: 1.6; }
.three-list { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.three-list li { padding: 30px 32px; border-right: 1px solid var(--line); }
.three-list li:first-child { padding-left: 0; }.three-list li:last-child { border: 0; padding-right: 0; }
.three-list span { color: var(--violet); font: 9px var(--mono); letter-spacing: .13em; }
.three-list h3 { margin: 20px 0 15px; font: 400 32px/1.1 var(--serif); }
.three-list p { font-size: 14px; color: var(--muted); line-height: 1.85; margin: 0; }
.reveal-block { border-color: var(--line); box-shadow: none; }
.file-tab { box-shadow: none; font-size: 8px; letter-spacing: .12em; }
.signal-copy h3, .pattern-copy h3, .next-heading h3, .partial-unlock h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
.reading-copy { font-size: 16px; line-height: 1.9; color: #5d535c; }
.pattern-note { box-shadow: 0 12px 30px #3026320c; transform: rotate(1deg); }.pattern-note p { font-family: var(--serif); font-size: 33px; font-weight: 400; line-height: 1.2; }
.receipt p { font-family: var(--display); text-transform: none; letter-spacing: 0; }
.partial-unlock { border: 0; padding: 35px 25px; }.partial-unlock .acid-button { white-space: normal; line-height: 1.6; }
.acid-button, .outline-button { border-color: #30263233; padding: 17px 20px; font-size: 10px; letter-spacing: .04em; }
.acid-button:hover, .outline-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #30263212; }
.desk-index { background: #f8f4edf5; grid-template-columns: 105px 1fr; margin-bottom: 60px; }
.desk-index::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--read-progress, 10%); background: var(--violet); transition: width .5s ease; }
.desk-index-list button { font-size: 9px; padding: 9px 8px; border-color: transparent; }
.desk-file { grid-template-columns: minmax(230px, .68fr) minmax(0, 1.32fr); align-items: start; border: 0; border-top: 1px solid var(--line); background: transparent; box-shadow: none; margin-bottom: 110px; padding-top: 45px; transform: translateY(30px); transition-duration: 1s; }
.desk-file:nth-child(even) .desk-visual { order: 0; border: 0; }
.desk-visual { position: sticky; top: 170px; display: block; min-height: 0; overflow: visible; border: 0; padding: 0 40px 0 0; }
.desk-visual > img { width: 100%; height: auto; min-height: 0; max-height: 330px; object-fit: contain; border-radius: 3px; mix-blend-mode: multiply; }
.desk-visual-label { position: static; display: block; padding: 18px 0; background: transparent; border-bottom: 1px solid var(--line); color: var(--muted); }
.desk-copy { padding: 12px 30px 0 35px; }
.desk-copy h3 { font: 400 clamp(42px, 4.6vw, 63px)/1.04 var(--serif); letter-spacing: -.025em; margin-bottom: 23px; }
.desk-copy .mini-label { color: var(--violet); font-size: 9px; padding-right: 30px; }
.desk-number { top: 8px; right: 30px; color: #9b8797; }
.desk-copy .reading-copy { max-width: 590px; margin-bottom: 24px; }
.desk-copy .narrator-byline + .reading-copy::first-letter { float: left; margin: 7px 9px 0 0; font: 58px/.8 var(--serif); color: var(--violet); }
.narrator-byline { margin-bottom: 32px; color: var(--violet); font-size: 11px; letter-spacing: .025em; }
.tota-margin { padding: 22px 15px 0; }
.tota-margin img { width: 78px; height: 78px; min-height: 0; object-fit: contain; float: left; margin: 0 12px 5px -15px; }
.tota-margin blockquote { margin: 5px 0 0; font: italic 28px/1.2 var(--serif); color: var(--violet); }
.tota-margin .tota-sign { clear: both; padding-top: 8px; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.reflection { display: block; max-width: 590px; margin-top: 35px; padding: 22px 0; font-size: 14px; line-height: 1.8; color: var(--violet); border-bottom: 1px solid var(--line); }
.desk-file-ink { background: var(--violet-dark); color: var(--paper); padding: 45px 30px; border-radius: 3px; }
.desk-file-ink .desk-visual > img { mix-blend-mode: normal; border-radius: 3px; }
.desk-file-ink .desk-visual-label, .desk-file-ink .tota-margin blockquote, .desk-file-ink .tota-sign, .desk-file-ink .narrator-byline, .desk-file-ink .desk-copy .narrator-byline + .reading-copy::first-letter { color: #e9daba; }
.desk-file-ink .reading-copy { color: #eee5ed; }.desk-file-ink .desk-visual-label { border-color: #ffffff30; }
.full-close { padding-top: 60px; border-top-width: 1px; }.reading-view { padding-bottom: 60px; }
.gift-chapter { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; padding: 75px 65px; margin: 0 0 90px; background: #eee7dc; border: 1px solid #d8cbbb; }
.gift-chapter > img { width: 100%; max-height: 370px; object-fit: contain; }
.gift-chapter h2 { font: 400 clamp(40px, 4.8vw, 64px)/1.03 var(--serif); letter-spacing: -.025em; margin-bottom: 24px; }
.gift-chapter h2 em { color: var(--violet); }.gift-chapter p:not(.section-kicker) { max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.gift-chapter .acid-button { background: var(--violet-dark); color: var(--paper); white-space: normal; line-height: 1.6; }
[id^='desk-'] { scroll-margin-top: 165px; }[id^='partial-'] { scroll-margin-top: 120px; }
.drawer-open { overflow: hidden; }
.report-drawer { position: fixed; inset: 0 0 0 auto; width: min(520px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 45px; background: var(--paper); color: var(--ink); border: 0; box-shadow: -20px 0 80px #17121f20; overflow-y: auto; }
.report-drawer[open] { animation: drawer-arrive .4s ease both; }.report-drawer::backdrop { background: #25192c88; backdrop-filter: blur(5px); }
@keyframes drawer-arrive { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 27px; }
.drawer-tota { width: 125px; height: 125px; object-fit: contain; margin-bottom: 20px; }
.report-drawer h2 { font: 400 60px/1 var(--serif); margin-bottom: 22px; }.report-drawer h2 em { color: var(--violet); }
.report-drawer > p:not(.section-kicker) { font-size: 14px; line-height: 1.8; color: var(--muted); }
#report-form { display: grid; gap: 10px; margin: 28px 0; }#report-form label { font-size: 12px; margin-top: 8px; }
#report-form input, #report-form select { width: 100%; padding: 14px; border: 1px solid #30263240; border-radius: 0; background: #ffffff55; color: var(--ink); font: 16px var(--display); }#report-form button { margin-top: 15px; }
.envelope-preview { padding: 28px; background: #eee5d8; border: 1px solid #cbbba3; text-align: center; overflow-wrap: anywhere; }.envelope-preview .mono { font-size: 8px; }.envelope-preview h3 { font: 42px var(--serif); margin-bottom: 12px; }.envelope-preview p:not(.mono) { font-size: 13px; line-height: 1.7; }.envelope-preview[hidden] { display: none; }
.report-drawer .drawer-disclaimer { font-size: 11px; margin: 22px 0 0; }
@media (max-width: 1000px) and (min-width: 801px) { .header-center { display: none; }.demo-header { grid-template-columns: 1fr 1fr; }.desk-index { grid-template-columns: 1fr; gap: 8px; }.desk-copy { padding-right: 0; }.partial-unlock { grid-template-columns: 40px 1fr; }.partial-unlock .acid-button { grid-column: 2; justify-self: start; } }
@media (max-width: 800px) {
  .demo-hero { padding-top: 50px; grid-template-columns: 20px 1fr; }.hero-art { min-height: 380px; max-width: 320px; }.hero-copy h1 { font-size: clamp(60px, 11vw, 84px); }.hero-copy { padding-right: 15px; }
  .three-intro { gap: 14px; }.three-intro img { width: 100px; height: 125px; }.three-intro h2 { font-size: 38px; }.three-intro h2 br { display: block; }
  .three-list { grid-template-columns: 1fr; }.three-list li, .three-list li:first-child, .three-list li:last-child { padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }.three-list li:last-child { border-bottom: 0; }.three-list h3 { margin: 12px 0; }.life-three { margin-bottom: 55px; }
  .desk-index { display: block; padding: 12px 0; }.index-title { display: block; margin-bottom: 10px; }.desk-index-list { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }.desk-index-list button { flex-shrink: 0; padding: 9px 12px; min-height: 36px; }
  .desk-file { grid-template-columns: 1fr; padding-top: 25px; margin-bottom: 65px; }.desk-visual { position: static; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 10px; }.desk-visual > img { max-height: 220px; min-height: 0; }.desk-visual-label { grid-row: 2; grid-column: 1 / -1; }.tota-margin { padding: 10px; }.tota-margin img { float: none; width: 60px; height: 60px; margin: 0; }.tota-margin blockquote { font-size: 26px; }.desk-copy { padding: 30px 10px 0; }.desk-copy h3 { font-size: 46px; }.desk-number { top: 30px; right: 15px; }.desk-file-ink { padding: 25px 18px; }.desk-file:nth-child(even) .desk-visual { border: 0; }
  .gift-chapter { grid-template-columns: 1fr; gap: 20px; padding: 35px 28px; margin-bottom: 55px; }.gift-chapter > img { max-height: 220px; }.gift-chapter h2 { font-size: 48px; }.gift-chapter .acid-button { text-align: left; }
  .rail-steps button { display: block; min-width: 30px; min-height: 36px; }.rail-fill { transition: width .4s ease; }
}
@media (max-width: 480px) { .gift-link { font-size: 10px; max-width: 140px; line-height: 1.5; text-align: right; }.hero-art { min-height: 340px; }.hero-copy h1 { font-size: 59px; }.hero-meta { gap: 12px; }.report-drawer { padding: 65px 24px 30px; }.three-intro img { width: 75px; }.three-intro h2 { font-size: 34px; }.three-intro .section-kicker { font-size: 8px; }.tota-margin blockquote { font-size: 23px; }.desk-copy h3 { font-size: 41px; }.reading-copy { font-size: 15px; }.partial-unlock { grid-template-columns: 1fr; }.partial-unlock .acid-button { grid-column: 1; }.unlock-asterisk { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.desk-file, .reveal-block { transform: none; } }

/* Life Edition: quiet paper, ink and a continuous reading rhythm. */
:root { --paper: #f5f2eb; --paper-deep: #e7e2d8; --ink: #292e29; --muted: #757970; --violet: #656c51; --violet-dark: #303a31; --lime: #e1dfce; --pink: #ebe5dc; --yellow: #eae5d5; --line: #303a3126; --ease: cubic-bezier(.22,1,.36,1); }
html { scrollbar-gutter: stable; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #d8ddc7; color: #292e29; }
:focus-visible { outline: 2px solid #8a7955; outline-offset: 5px; }
.demo-main { width: min(100% - 96px, 1280px); }
.demo-header { min-height: 76px; background: #f5f2ebe8; border-color: #303a3114; backdrop-filter: blur(22px); }
.demo-header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #777c60; transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
.brand-mark { background: transparent; color: var(--violet); font-size: 23px; }
.demo-brand { font-weight: 500; letter-spacing: -.05em; }
.header-center { font-size: 8px; letter-spacing: .18em; }
.demo-toolbar { border: 0; padding-top: 26px; }
.note-pip { display: none; }.demo-note { font-size: 11px; letter-spacing: .06em; }
.mode-switch { background: transparent; padding: 3px; border-color: var(--line); }
.mode-button { padding: 11px 19px; font: 11px var(--display); text-transform: none; transition: background .45s var(--ease), color .45s; }
.mode-button.is-active { background: var(--ink); color: var(--paper); }
.demo-hero { grid-template-columns: 38px minmax(0, 1.2fr) minmax(300px, .8fr); min-height: 780px; padding: 90px 0 140px; align-items: center; }
.hero-side-label { opacity: .55; align-self: stretch; }.vertical-label { letter-spacing: .2em; font-size: 8px; }
.hero-copy { padding-right: 32px; }.eyebrow-row { margin-bottom: 35px; }.eyebrow { padding: 0; background: none; color: var(--violet); font-size: 9px; letter-spacing: .22em; }
.seed-stamp { display: none; }.hero-copy h1 { font: 400 clamp(68px, 7.7vw, 112px)/.98 var(--serif); letter-spacing: -.045em; margin-bottom: 32px; }.hero-mark { background: none; }
.hero-deck { max-width: 380px; font-size: 16px; line-height: 1.85; }.hero-meta { gap: 24px; margin: 34px 0 45px; font: 9px/1.8 var(--display); text-transform: none; }.hero-meta b { display: block; font: 26px var(--serif); font-weight: 400; }
.hero-art { margin: 0; min-height: 510px; border-radius: 50% 50% 3px 3px; background: radial-gradient(ellipse at 50% 35%, #e9eadc, #d5dbc9 65%, #c4ccb9); transform: translate3d(0,var(--drift,0px),0) scale(var(--art-scale,1)); }
.hero-art::before { inset: 14px; border-color: #ffffff70; border-radius: inherit; }.hero-art img { width: 105%; right: -2.5%; height: 82%; bottom: 38px; filter: drop-shadow(0 20px 22px #29352718); }.art-caption { color: #59644f; top: 70px; letter-spacing: .15em; }.art-tag { left: 0; right: 0; bottom: 25px; padding: 0; background: none; transform: none; text-align: center; color: #59644f; font: italic 19px var(--serif); }.orbit-orb { display: none; }
.scroll-cue { font: 10px var(--display); letter-spacing: .06em; text-transform: none; }.scroll-cue-icon { width: 42px; height: 42px; border-color: var(--line); transition: transform .6s var(--ease); }
.reading-view { transition: opacity .24s ease; }.mode-changing .reading-view, .mode-changing .hero-meta { opacity: 0; }
.reading-intro, .full-intro { padding: 60px 0 80px; }.reading-intro h2, .full-intro h2 { font-size: clamp(55px,6vw,86px); }.intro-aside { max-width: 300px; }
.life-three { margin-bottom: 130px; padding-top: 60px; }.three-intro { gap: 45px; margin-bottom: 50px; }.three-intro img { width: 170px; height: 180px; }.three-list li { padding: 40px; }.three-list h3 { font-size: 35px; line-height: 1.15; }.three-list p { line-height: 1.9; }
.reveal-block, .desk-file { opacity: 1; transform: none; box-shadow: none; }.reveal-block { border: 0; border-top: 1px solid var(--line); margin-bottom: 115px; padding-top: 30px; background: transparent; }
.file-tab { position: static; display: block; padding: 0 0 24px; background: transparent; color: var(--violet); box-shadow: none; }
.signal-grid, .pattern-grid { gap: 20px; }.signal-visual { background: #e1e5d8; color: var(--violet); border: 0; border-radius: 48% 48% 0 0; }.signal-word { color: var(--violet); }.signal-pulse span { border-color: #9ca88d; animation: none; }.signal-pulse span:first-child { background: #9ca88d; }
.signal-copy, .pattern-copy, .next-heading { padding: 40px 30px; }.pattern-copy { border: 0; }.pattern-note { margin: 30px 0 30px 20px; padding: 35px; background: #ebe9de; transform: none; box-shadow: none; }.pattern-lines { display: none; }.note-pin { color: var(--muted); letter-spacing: .13em; font-size: 8px; }
.reveal-block-ink { background: var(--violet-dark); color: var(--paper); padding: 30px; }.reveal-block-ink .file-tab { color: #d6dbc5; }.next-grid { grid-template-columns: 1fr; min-height: 0; }.next-heading { border: 0; padding: 20px 10px; }.move-list li { padding: 30px 10px; }.move-list b { font-weight: 500; }.move-list p { line-height: 1.8; }
.partial-unlock { background: #e8e8dd; color: var(--ink); box-shadow: none; padding: 40px; grid-template-columns: 1fr; }.partial-unlock .section-kicker { color: var(--violet); }.partial-unlock p:last-child { color: var(--muted); }.unlock-asterisk { display: none; }.partial-unlock .acid-button { justify-self: start; }
.acid-button, .outline-button { border-radius: 2px; transition: background .35s, color .35s, transform .5s var(--ease), box-shadow .5s; }.acid-button { background: var(--violet-dark); color: var(--paper); border-color: var(--violet-dark); }.acid-button:hover, .outline-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px #28352a12; }.acid-button span { display: inline-block; transition: transform .5s var(--ease); }.acid-button:hover span { transform: translate(3px,-3px); }
.desk-index { top: 76px; background: #f5f2ebed; backdrop-filter: blur(22px); margin-bottom: 90px; grid-template-columns: 100px 1fr; }.desk-index-list { gap: 1px; }.desk-index-list button { border-radius: 2px; padding: 12px 8px; font: 10px var(--display); text-transform: none; }.desk-index-list button.is-active { background: #e4e7da; color: var(--ink); border-color: transparent; }.desk-index::after { height: 1px; transition: none; }
.desk-file { grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); column-gap: 65px; padding-top: 65px; margin-bottom: 160px; }.desk-visual { top: 180px; padding: 0 20px 0 0; }.desk-visual > img { max-height: 270px; filter: saturate(.65); }.desk-visual-label { font-size: 8px; letter-spacing: .15em; padding: 24px 0; }.desk-copy { padding: 0 20px 0 0; }.desk-copy h3 { font-size: clamp(45px,4.5vw,65px); line-height: 1.08; margin: 25px 0; }.desk-number { color: #929981; right: 0; top: 0; }.desk-copy .reading-copy { font-size: 17px; line-height: 1.95; color: #62685e; margin-bottom: 30px; }.narrator-byline { color: #929581; font-size: 10px; margin-bottom: 40px; }.tota-margin { padding: 30px 5px; }.tota-margin img { width: 100px; height: 100px; }.tota-margin blockquote { font-size: 32px; line-height: 1.25; }.reflection { margin-top: 45px; padding: 28px 0; }
.desk-file-ink { padding: 60px 40px; border-radius: 0; }.desk-file-ink .reading-copy { color: #dce0d5; }.desk-file-ink .desk-number { color: #dce0d5; }
.gift-chapter { background: #e6e9df; border: 0; padding: 90px 70px; gap: 90px; }.gift-chapter > img { filter: drop-shadow(0 20px 25px #37463412); }.gift-chapter h2 { font-size: clamp(48px,5vw,70px); }
.rail-foot { transform: none; }.rail-fill { transition: none; }.rail-steps li.is-current::before { background: var(--violet); }
.report-drawer { width: min(580px,100%); padding: 65px; overscroll-behavior: contain; }.report-drawer[open] { animation: drawer-in .65s var(--ease) both; }.report-drawer[open].is-closing { animation: drawer-out .42s cubic-bezier(.4,0,.7,.2) both; }.report-drawer::backdrop { background: #1c281f66; backdrop-filter: blur(9px); animation: veil-in .5s both; }.report-drawer.is-closing::backdrop { animation: veil-out .42s both; }.drawer-close { border-color: transparent; transition: background .3s, transform .4s var(--ease); }.drawer-close:hover { background: #e3e6da; transform: rotate(90deg); }.envelope-preview { background: #e9e9dd; border-color: var(--line); animation: page-in .6s var(--ease) both; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.motion-enabled .hero-copy > * { animation: page-in 1.1s var(--ease) both; }.hero-copy > :nth-child(2) { animation-delay: .08s; }.hero-copy > :nth-child(3) { animation-delay: .16s; }.hero-copy > :nth-child(4) { animation-delay: .24s; }.hero-copy > :nth-child(5) { animation-delay: .32s; }
.motion-ready:not(.desk-file) { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }.motion-ready.is-revealed:not(.desk-file) { opacity: 1; transform: none; }.three-list li:nth-child(2) { transition-delay: .1s; }.three-list li:nth-child(3) { transition-delay: .2s; }
@media (max-width: 1000px) { .demo-main { width: calc(100% - 48px); }.demo-hero { grid-template-columns: 1.15fr .85fr; min-height: 660px; }.hero-side-label { display: none; }.hero-copy h1 { font-size: 76px; }.hero-art { min-height: 440px; }.desk-file { column-gap: 30px; }.desk-index { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 800px) {
 .demo-header { min-height: 68px; }.demo-main { width: calc(100% - 40px); }.demo-toolbar { gap: 10px; }.demo-note { font-size: 10px; }.mode-button { padding: 10px 13px; }
 .demo-hero { display: flex; flex-direction: column; align-items: stretch; padding: 65px 0 90px; gap: 55px; }.hero-copy { padding: 0; }.hero-copy h1 { font-size: clamp(62px,12vw,86px); }.hero-deck { max-width: 420px; }.hero-art { width: 82%; max-width: 380px; min-height: 410px; align-self: center; }.hero-meta { margin-bottom: 28px; }
 .reading-intro, .full-intro { padding: 40px 0 55px; }.life-three { padding-top: 30px; margin-bottom: 80px; }.three-intro { gap: 18px; }.three-intro img { width: 95px; height: 125px; }.three-list li, .three-list li:first-child, .three-list li:last-child { padding: 30px 0; }.three-list h3 { font-size: 34px; }
 .reveal-block { margin-bottom: 75px; }.signal-grid, .pattern-grid { gap: 0; }.signal-visual { min-height: 250px; }.signal-copy, .pattern-copy { padding: 35px 5px; }.pattern-note { margin: 0; padding: 30px; }.reveal-block-ink { padding: 25px; }.partial-unlock { padding: 30px; }.partial-unlock .acid-button { grid-column: 1; }.progress-rail { top: 68px; }
 .desk-index { top: 68px; margin-bottom: 55px; }.desk-index-list { scrollbar-width: thin; }.desk-index-list button { min-height: 44px; padding: 10px 14px; }.desk-file { grid-template-columns: 1fr; padding-top: 30px; margin-bottom: 90px; }.desk-visual { position: static; padding: 0; }.desk-visual > img { max-height: 190px; }.tota-margin { padding: 10px; }.tota-margin img { width: 65px; height: 65px; }.tota-margin blockquote { font-size: 26px; }.desk-copy { padding: 35px 0 0; }.desk-copy h3 { font-size: 45px; }.desk-number { top: 34px; }.desk-copy .reading-copy { font-size: 16px; line-height: 1.9; }.desk-file-ink { padding: 30px 22px; }
 .gift-chapter { padding: 45px 28px; gap: 30px; }.gift-chapter h2 { font-size: 47px; }.report-drawer { padding: 55px 28px 35px; }.report-drawer h2 { font-size: 54px; }.motion-ready:not(.desk-file) { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; }.motion-ready:not(.desk-file), .hero-art, .gift-chapter > img { opacity: 1 !important; transform: none !important; } }

/* Astro app theme bridge: palette + typography only. Layout and behavior stay above. */
:root {
  --paper: #FBF3E0;
  --paper-deep: #E8DCC2;
  --ink: #1E3A2A;
  --body-ink: #2C3E30;
  --muted: #5E6E5E;
  --faint: #8A968A;
  --green: #178A4C;
  --green-bright: #1FA45B;
  --marigold: #FFD24A;
  --pink: #F8D3E0;
  --pink-ink: #C2588A;
  --mint: #DFF2E4;
  --card: #FFFFFF;
  --violet: #178A4C;
  --violet-dark: #1E3A2A;
  --lime: #FFD24A;
  --yellow: #DFF2E4;
  --line: rgba(30, 58, 42, .22);
  --mono: "Bricolage Grotesque", Arial, sans-serif;
  --display: "Bricolage Grotesque", Arial, sans-serif;
  --serif: "Bricolage Grotesque", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

body { background-color: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 500; }
.demo-header { background: rgba(251, 243, 224, .92); border-color: rgba(30, 58, 42, .14); }
.demo-header::after { background: var(--green); }
.demo-brand, .hero-copy h1, .reading-intro h2, .full-intro h2, .desk-copy h3, .full-close h3, .gift-chapter h2, .report-drawer h2, .three-intro h2, .three-list h3 { font-family: var(--display); font-weight: 800; }
.demo-brand { color: var(--ink); }
.brand-mark { color: var(--green); }
.header-center, .header-right, .demo-note, .hero-deck, .intro-aside, .reading-copy, .three-list p, .gift-chapter p:not(.section-kicker), .report-drawer > p:not(.section-kicker) { color: var(--body-ink); }
.gift-link, .section-kicker, .mini-label, .tota-sign, .gift-sign, .narrator-byline, .tota-margin blockquote, .reflection { color: var(--green); }
.mode-button.is-active { background: var(--ink); color: var(--paper); }
.eyebrow { color: var(--green); }
.hero-mark { background: linear-gradient(transparent 61%, var(--marigold) 0); color: var(--ink); font-style: normal; }
.hero-art { background: radial-gradient(ellipse at 50% 35%, var(--green-bright), var(--green) 75%); }
.hero-art::before { border-color: rgba(251, 243, 224, .45); }
.hero-art img { filter: drop-shadow(0 20px 22px rgba(30, 58, 42, .18)); }
.art-caption { color: rgba(251, 243, 224, .78); }
.art-tag { background: var(--marigold); color: var(--ink); }
.reading-intro, .full-intro { border-color: var(--ink); }
.reading-intro h2 em, .full-intro h2 em, .gift-chapter h2 em, .report-drawer h2 em { color: var(--green); }
.rail-track { background: var(--paper-deep); }
.rail-fill { background: var(--green); }
.rail-steps li.is-current::before { background: var(--green); }
.file-tab { color: var(--green); }
.signal-visual { background: var(--green); color: var(--paper); }
.signal-pulse span { border-color: var(--green-bright); }
.signal-pulse span:first-child { background: var(--green-bright); }
.signal-word, .signal-copy h3, .pattern-copy h3, .next-heading h3, .partial-unlock h3, .full-close h3, .three-list h3 { color: var(--ink); }
.receipt-mark, .receipt b { color: var(--green); }
.pattern-note { background: var(--pink); box-shadow: 0 12px 30px rgba(30, 58, 42, .08); }
.pattern-note p { color: var(--ink); }
.note-pin, .note-sign { color: var(--pink-ink); }
.reveal-block-ink, .desk-file-ink { background: var(--ink); color: var(--paper); }
.reveal-block-ink .file-tab, .next-heading .mini-label { color: var(--marigold); }
.move-list li { border-color: rgba(251, 243, 224, .28); }
.move-list li > span { color: var(--marigold); }
.move-list p, .reveal-block-ink .reading-copy, .desk-file-ink .reading-copy { color: rgba(251, 243, 224, .78); }
.partial-unlock, .gift-chapter { background: var(--mint); color: var(--ink); }
.partial-unlock .section-kicker { color: var(--green); }
.partial-unlock p:last-child { color: var(--body-ink); }
.acid-button { background: var(--green); color: var(--paper); border-color: var(--green); }
.acid-button:hover, .outline-button:hover { box-shadow: 0 8px 25px rgba(30, 58, 42, .14); }
.desk-index { background: rgba(251, 243, 224, .94); border-color: rgba(30, 58, 42, .22); }
.desk-index::after { background: var(--green); }
.desk-index-list button { color: var(--muted); }
.desk-index-list button.is-active { background: var(--mint); color: var(--ink); }
.desk-file { border-color: var(--line); }
.desk-file-lime { background: var(--mint); }
.desk-file-pink { background: var(--pink); }
.desk-file-yellow { background: var(--marigold); }
.desk-file-paper { background: var(--card); }
.desk-file-ink .desk-copy h3 { color: var(--paper); }
.desk-file-ink .desk-copy .mini-label, .desk-file-ink .desk-number, .desk-file-ink .desk-foot { color: var(--marigold); }
.desk-file-ink .desk-visual-label { color: var(--ink); }
.desk-foot, .desk-number { color: var(--green); }
.desk-visual-label { color: var(--ink); background: var(--paper); }
.full-close { border-color: var(--ink); }
.close-star { color: var(--green); }
.outline-button { border-color: var(--ink); color: var(--ink); }
.gift-chapter > img { filter: drop-shadow(0 20px 25px rgba(30, 58, 42, .12)); }
.drawer-close { color: var(--ink); }
.drawer-close:hover { background: var(--mint); }
.report-drawer { background: var(--paper); color: var(--ink); }
.report-drawer::backdrop { background: rgba(30, 58, 42, .52); }
.report-drawer h2 { color: var(--ink); }
#report-form input, #report-form select { border-color: rgba(30, 58, 42, .25); background: rgba(255, 255, 255, .58); color: var(--ink); }
.envelope-preview { background: var(--card); border-color: rgba(30, 58, 42, .22); }
.envelope-preview .mono { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .hero-art { transform: none !important; }
}

/* Full edition chapters: each desk becomes a complete, centered page. */
.full-reading-stack {
  width: var(--viewport-width, 100vw);
  margin-left: calc(50% - var(--viewport-width, 100vw) / 2);
  overflow: clip;
}

.full-reading-stack .desk-file {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: clamp(24px, 4vh, 48px);
  width: 100%;
  min-height: min(100svh, 980px);
  margin: 0;
  padding: clamp(88px, 12vh, 145px) clamp(24px, 9vw, 150px) clamp(92px, 11vh, 135px);
  border: 0;
  border-top: 1px solid rgba(30, 58, 42, .14);
  border-bottom: 1px solid rgba(30, 58, 42, .14);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}

.full-reading-stack .desk-file + .desk-file { margin-top: 0; }
.full-reading-stack .desk-file.is-revealed { opacity: 1; transform: none; }

.full-reading-stack .desk-file::before {
  position: absolute;
  top: clamp(25px, 4vh, 46px);
  left: clamp(24px, 8vw, 130px);
  color: currentColor;
  content: 'TOTA / LIFE EDITION';
  font: 9px var(--mono);
  letter-spacing: .18em;
  opacity: .5;
}

.full-reading-stack .desk-file::after {
  position: absolute;
  bottom: clamp(26px, 4vh, 44px);
  left: 0;
  width: 100%;
  color: currentColor;
  content: 'SCROLL FOR THE NEXT PAGE  ↓';
  font: 8px var(--mono);
  letter-spacing: .17em;
  text-align: center;
  opacity: .48;
}

.full-reading-stack .desk-visual {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 1060px);
  min-height: clamp(310px, 55vh, 620px);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
}

.full-reading-stack .desk-visual > img {
  display: block;
  width: min(100%, 880px);
  height: auto;
  max-height: min(55vh, 610px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  filter: saturate(.82) contrast(.98);
}

.full-reading-stack .desk-visual-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 0 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .19em;
  text-align: center;
}

.full-reading-stack .desk-copy {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.full-reading-stack .desk-number {
  top: 0;
  right: 0;
  color: var(--green);
}

.full-reading-stack .desk-copy .mini-label { padding-right: 0; }
.full-reading-stack .desk-copy h3 {
  max-width: 820px;
  margin: 24px auto 28px;
  font-size: clamp(48px, 6.4vw, 94px);
  line-height: 1;
}

.full-reading-stack .narrator-byline { margin-bottom: 30px; }
.full-reading-stack .desk-copy .reading-copy {
  max-width: 660px;
  margin: 0 auto 26px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.9;
}

.full-reading-stack .reflection {
  max-width: 650px;
  margin: 42px auto 0;
  padding: 25px 0;
  border-top: 1px solid rgba(30, 58, 42, .2);
  border-bottom: 0;
  text-align: center;
}

.full-reading-stack .tota-margin {
  max-width: 620px;
  margin: 18px auto 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(30, 58, 42, .16);
}

.full-reading-stack .tota-margin img {
  float: none;
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto 10px;
}

.full-reading-stack .tota-margin blockquote {
  max-width: 600px;
  margin: 0 auto;
  font-size: clamp(25px, 2.5vw, 36px);
}

.full-reading-stack .tota-margin .tota-sign { clear: none; }
.full-reading-stack .desk-file-ink .desk-visual-label { color: var(--paper); }
.full-reading-stack .desk-file-ink .desk-number { color: var(--marigold); }

.full-reading-stack .desk-file-lime { background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.48), transparent 42%), var(--mint); }
.full-reading-stack .desk-file-pink { background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.42), transparent 45%), var(--pink); }
.full-reading-stack .desk-file-yellow { background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 42%), var(--marigold); }
.full-reading-stack .desk-file-paper { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 48%), var(--card); }
.full-reading-stack .desk-file-ink { background: radial-gradient(circle at 50% 5%, rgba(31,164,91,.25), transparent 50%), var(--ink); }

@media (max-width: 800px) {
  .full-reading-stack .desk-file {
    min-height: auto;
    gap: 30px;
    padding: 88px 20px 94px;
  }

  .full-reading-stack .desk-file::before { left: 20px; font-size: 8px; }
  .full-reading-stack .desk-visual { min-height: 315px; }
  .full-reading-stack .desk-visual > img { width: min(100%, 520px); max-height: 315px; }
  .full-reading-stack .desk-copy { width: min(100%, 620px); }
  .full-reading-stack .desk-copy h3 { margin-top: 20px; font-size: clamp(45px, 12vw, 72px); }
  .full-reading-stack .desk-copy .reading-copy { font-size: 16px; line-height: 1.82; }
  .full-reading-stack .reflection { margin-top: 32px; }
  .full-reading-stack .tota-margin { margin-top: 8px; }
  .full-reading-stack .desk-file-ink { padding: 88px 20px 94px; }
}

/* Continuous paper chapters and a single coordinated navigation offset. */
:root { --header-height: 76px; --nav-shift: 0px; --desk-nav-height: 70px; }
.demo-body { overflow-x: clip; }
.demo-body.nav-hidden { --nav-shift: calc(-1 * var(--header-height)); }
.demo-header {
  transform: translateY(var(--nav-shift));
  transition: transform .38s var(--ease);
}
.desk-index {
  top: var(--header-height);
  transform: translateY(var(--nav-shift));
  transition: transform .38s var(--ease), box-shadow .38s ease;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 0;
  background: rgba(251, 243, 224, .97);
  box-shadow: 0 10px 24px rgba(30, 58, 42, .04);
  isolation: isolate;
}
.index-title { margin: 0; padding: 0; white-space: nowrap; }
.desk-index-list {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-deep) transparent;
  padding: 4px 2px;
}
.desk-index-list button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 13px;
  white-space: nowrap;
  border-radius: 999px;
}
.desk-index-list button:hover { color: var(--ink); background: var(--mint); border-color: transparent; }
.desk-index-list button:focus-visible { outline-offset: -3px; }
.progress-rail { top: calc(var(--header-height) + 16px); transform: translateY(var(--nav-shift)); transition: transform .38s var(--ease); }
[id^='desk-'] { scroll-margin-top: calc(var(--header-height) + var(--desk-nav-height) + 20px); }
.full-reading-stack .desk-file {
  --chapter-tint: var(--mint);
  border: 0;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--chapter-tint) 28%, var(--paper)) 22%, color-mix(in srgb, var(--chapter-tint) 28%, var(--paper)) 72%, var(--paper));
  padding-top: clamp(110px, 15vh, 170px);
  padding-bottom: clamp(130px, 18vh, 200px);
}
.full-reading-stack .desk-file-pink { --chapter-tint: var(--pink); }
.full-reading-stack .desk-file-yellow { --chapter-tint: var(--marigold); }
.full-reading-stack .desk-file-paper { --chapter-tint: var(--card); }
.full-reading-stack .desk-file-ink { --chapter-tint: var(--mint); }
.full-reading-stack .desk-file::before { top: 38px; }
.full-reading-stack .desk-file::after { bottom: 42px; color: var(--muted); }
.full-reading-stack .desk-file:last-child::after { content: 'YOUR NEXT CHAPTER IS YOURS TO WRITE'; }
.full-reading-stack .desk-visual {
  order: 0;
  border: 0;
  min-height: 0;
  padding: 42px 0 0;
}
.full-reading-stack .desk-file:nth-child(even) .desk-visual { order: 0; border: 0; }
.full-reading-stack .desk-visual > img {
  width: min(100%, 780px);
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
  /* Feather the baked-in paper at the edges without tinting the illustration. */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 68%, transparent 100%);
}
.full-reading-stack .desk-file .desk-visual-label { color: var(--muted); }
.full-reading-stack .desk-file .desk-copy .reading-copy { color: var(--body-ink); }
.full-reading-stack .desk-file .desk-number,
.full-reading-stack .desk-file .desk-copy .mini-label,
.full-reading-stack .desk-file .desk-foot { color: var(--green); }
.full-reading-stack .desk-file .reflection { border-color: var(--line); }
.full-reading-stack .desk-file .narrator-byline { color: var(--muted); }
.full-reading-stack .desk-file .tota-margin blockquote,
.full-reading-stack .desk-file .tota-sign,
.full-reading-stack .desk-file .desk-copy .narrator-byline + .reading-copy::first-letter { color: var(--green); }
.full-reading-stack .desk-visual { transition: opacity 1s var(--ease), transform 1.3s var(--ease); }
.motion-enabled .full-reading-stack .desk-file:not(.is-revealed) .desk-visual { opacity: 0; transform: translateY(28px); }
@media (max-width: 800px) {
  :root { --header-height: 68px; }
  .desk-index { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 8px 6px; }
  .index-title { padding-left: 12px; font-size: 8px; }
  .full-reading-stack .desk-visual > img { max-height: none; }
  .full-reading-stack .desk-file { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .full-reading-stack .desk-file:not(.is-revealed) .desk-visual { opacity: 1; transform: none; }
}

/* Each desk gets a visible but still light paper tint, with Money Beat as the warm-gold reference. */
.full-reading-stack .desk-file {
  --chapter-strength: 52%;
  background: linear-gradient(
    to bottom,
    var(--paper) 0%,
    color-mix(in srgb, var(--chapter-tint) var(--chapter-strength), var(--paper)) 17%,
    color-mix(in srgb, var(--chapter-tint) var(--chapter-strength), var(--paper)) 83%,
    var(--paper) 100%
  );
}
.full-reading-stack .desk-file-career { --chapter-tint: #9fd5ae; }
.full-reading-stack .desk-file-love { --chapter-tint: #efb3c7; }
.full-reading-stack .desk-file-money { --chapter-tint: #ffd24a; }
.full-reading-stack .desk-file-health { --chapter-tint: #cfdcc9; }
.full-reading-stack .desk-file-home { --chapter-tint: #f0b4ca; }
.full-reading-stack .desk-file-mind { --chapter-tint: #add8b8; }
.full-reading-stack .desk-file-timing { --chapter-tint: #f2cf72; }
.full-reading-stack .desk-file-power { --chapter-tint: #b8d790; }
.full-reading-stack .desk-file-patterns { --chapter-tint: #eab0c5; }
.full-reading-stack .desk-file-moves {
  --chapter-tint: #d7e5d1;
  color: var(--ink);
}
.full-reading-stack .desk-file-moves .desk-visual-label { color: var(--muted); }
.full-reading-stack .desk-file-moves .reading-copy { color: var(--body-ink); }
.full-reading-stack .desk-file-moves .desk-number,
.full-reading-stack .desk-file-moves .mini-label,
.full-reading-stack .desk-file-moves .desk-foot { color: var(--green); }

/* Make the desk identity read before the editorial headline. */
.full-reading-stack .desk-visual-label {
  color: var(--green);
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  padding-bottom: 26px;
}

/* Receipts are evidence blocks, not a second headline. */
.full-reading-stack .reflection {
  display: block;
  width: min(100%, 720px);
  max-width: none;
  margin: 34px auto 0;
  padding: 20px 24px 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  background: color-mix(in srgb, var(--chapter-tint) 38%, var(--paper));
  color: var(--body-ink);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
.full-reading-stack .desk-file .reflection { color: var(--body-ink); }
.full-reading-stack .reflection-label {
  display: block;
  margin-bottom: 12px;
  color: var(--green);
  font: 700 9px/1.35 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.full-reading-stack .reflection-copy { display: block; max-width: 62ch; }
@media (max-width: 700px) {
  .full-reading-stack .reflection {
    padding: 17px 16px 18px;
  }
}

/* Give desktop letters a wider measure and keep the opening letter inline. */
@media (min-width: 801px) {
  .full-reading-stack .desk-copy {
    width: min(100%, 920px);
  }
  .full-reading-stack .desk-copy .reading-copy {
    max-width: 860px;
    text-align: left;
  }
  .full-reading-stack .desk-copy .reading-copy::first-letter {
    float: none;
    margin: 0;
    font: inherit;
    color: inherit;
  }
}

/* The partial edition uses the same desk pages, then closes with an issue-style unlock card. */
.partial-desk-stack .desk-file {
  min-height: min(88svh, 860px);
}
.partial-desk-stack .desk-visual {
  min-height: clamp(270px, 44vh, 500px);
}
.partial-desk-stack .desk-file::after { content: 'NEXT DESK  ↓'; }
.partial-desk-stack .desk-file:last-of-type::after { content: 'OPEN THE FULL ISSUE BELOW  ↓'; }
.partial-desk-stack .partial-unlock {
  display: block;
  width: min(100%, 1100px);
  margin: 62px auto 96px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  overflow: hidden;
}
.unlock-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 22px clamp(20px, 3.5vw, 36px) 24px;
  border-bottom: 1px solid var(--ink);
  background: var(--marigold);
}
.unlock-lock {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 22px;
  line-height: 1;
}
.unlock-banner .section-kicker { margin: 0 0 8px; color: var(--muted); }
.unlock-banner h3 {
  margin: 0 0 5px;
  font: 800 clamp(26px, 2.8vw, 42px)/1 var(--display);
  letter-spacing: -.07em;
}
.unlock-banner > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}
.unlock-contents { padding: 22px clamp(20px, 3.5vw, 36px) 28px; }
.unlock-contents-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font-size: 10px;
}
.unlock-contents-head > :first-child { color: var(--ink); font-weight: 800; }
.unlock-contents h4 {
  margin: 23px 0 7px;
  font: 800 clamp(26px, 2.6vw, 38px)/1.02 var(--display);
  letter-spacing: -.06em;
}
.unlock-lede { margin: 0 0 21px; color: var(--muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.5; }
.unlock-desk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.unlock-desk-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.unlock-desk-list li:nth-child(3n) { border-right: 0; }
.unlock-desk-list li > span { color: var(--muted); font: 600 10px var(--mono); }
.unlock-desk-list li > b { font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; }
.partial-desk-stack .partial-unlock .acid-button {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--paper);
  box-shadow: 0 5px 0 var(--ink);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 800;
  text-transform: none;
}
.partial-desk-stack .partial-unlock .acid-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
@media (max-width: 560px) {
  .partial-desk-stack .desk-file { min-height: auto; }
  .partial-desk-stack .partial-unlock { margin: 42px 20px 70px; border-radius: 18px; }
  .unlock-banner { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px 20px; }
  .unlock-banner h3 { font-size: clamp(23px, 7vw, 32px); }
  .unlock-contents { padding: 22px 20px 26px; }
  .unlock-desk-list { grid-template-columns: 1fr; }
  .unlock-desk-list li:nth-child(3n),
  .unlock-desk-list li:nth-child(2n) { border-right: 0; }
}

/* Opening folio: one ruled sheet shared by the partial and complete editions. */
.life-three {
  position: relative;
  margin: clamp(28px, 4vw, 56px) 0 clamp(110px, 14vw, 210px);
  padding: 0 0 clamp(20px, 3vw, 42px);
  border: 0;
  isolation: isolate;
}
.life-three::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--ink);
  content: '';
}
.life-three .three-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: clamp(40px, 5vw, 72px) 0;
}
.life-three .three-intro > div.three-intro-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-left: clamp(20px, 3vw, 48px);
  border-left: 1px solid var(--line);
}
.life-three .three-intro > div.three-portrait {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 320px;
  isolation: isolate;
}
.life-three .three-portrait::before {
  position: absolute;
  inset: 10% 4% 4% 13%;
  z-index: -1;
  border: 1px solid rgba(30, 58, 42, .13);
  background: var(--mint);
  box-shadow: none;
  clip-path: polygon(7% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 9%);
  content: '';
}
.life-three .three-intro img {
  position: relative;
  z-index: 2;
  width: min(94%, 350px);
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: rotate(-2deg) translateY(3px);
  filter: none;
}
.three-portrait-label,
.three-portrait-caption {
  position: absolute;
  z-index: 3;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.three-portrait-label { top: 5%; left: 16%; }
.three-portrait-caption { right: 3%; bottom: 1%; display: flex; align-items: baseline; gap: 8px; }
.three-portrait-caption b { color: var(--green); font-size: 14px; font-weight: 600; letter-spacing: -.04em; }
.three-portrait-caption span { color: var(--muted); letter-spacing: .08em; }
.life-three .three-intro .section-kicker { margin: 0 0 27px; color: var(--green); font-size: 10px; letter-spacing: .17em; }
.life-three .three-intro h2 {
  max-width: none;
  margin: 0 0 30px;
  font: 800 clamp(44px, 5.6vw, 80px)/1.02 var(--display);
  letter-spacing: -.03em;
}
.life-three .three-intro h2 br { display: block; }
.life-three .three-intro h2 em { display: block; color: var(--green); font-weight: 500; }
.life-three .three-intro p:not(.section-kicker) { max-width: 400px; margin: 0; color: var(--body-ink); font-size: 17px; line-height: 1.72; }
.life-three .three-intro .tota-sign { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; color: var(--green); font-size: 18px; }
.life-three .three-intro .tota-sign i { font-style: normal; font-size: 22px; transition: transform .35s var(--ease); }
.life-three .three-intro .tota-sign:hover i { transform: translate(3px, -3px); }
.three-list-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
  padding: 19px 0 16px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .13em;
}
.three-list-head > :first-child { color: var(--green); }
.life-three .three-list {
  display: block;
  margin: 20px 8px 0 0;
  padding: 0 clamp(24px, 3vw, 44px);
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
.life-three .three-list li:nth-child(n) {
  --note-accent: var(--green);
  --note-tint: var(--mint);
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: 12px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(28px, 3.4vw, 48px) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.life-three .three-list li:last-child { border-bottom: 0; }
.life-three .three-list li:nth-child(2) {
  --note-accent: var(--pink-ink);
  --note-tint: var(--pink);
}
.life-three .three-list li:nth-child(3) {
  --note-accent: var(--marigold);
  --note-tint: #FFF0BB;
}
.life-three .three-folio {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 70px;
  margin: 0;
  border-top: 4px solid var(--note-accent);
  background: var(--note-tint);
  color: var(--ink);
  font: 600 38px/1 var(--display);
  letter-spacing: -.07em;
}
.life-three .three-list li > span {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1.5;
}
.life-three .three-list h3 {
  grid-column: 2;
  grid-row: 2;
  max-width: 19ch;
  margin: 0;
  color: var(--ink);
  font: 700 clamp(26px, 2.6vw, 38px)/1.12 var(--display);
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.life-three .three-list p {
  grid-column: 3;
  grid-row: 2;
  max-width: 40ch;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--body-ink);
  font-size: 16px;
  line-height: 1.75;
}
/* Keep the rules of the sheet aligned while the text enters. */
.life-three .three-list li.motion-ready { transform: none; transition: opacity .7s var(--ease); }
@media (max-width: 960px) {
  .life-three .three-list li:nth-child(n) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; }
  .life-three .three-folio { width: 52px; height: 60px; font-size: 32px; }
  .life-three .three-list h3 { max-width: 26ch; font-size: 30px; }
  .life-three .three-list p { grid-column: 2; grid-row: 3; max-width: 60ch; }
}
@media (max-width: 700px) {
  .three-list-head { font-size: 8px; }
  .three-list-head > :last-child { text-align: right; }
  .life-three .three-intro { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 40px 0; }
  .life-three .three-intro > div.three-intro-copy { grid-column: 1; grid-row: 1; padding-left: 16px; }
  .life-three .three-intro > div.three-portrait { grid-column: 1; grid-row: 2; min-height: 260px; width: min(100%, 300px); justify-self: center; }
  .life-three .three-intro img { width: min(94%, 280px); }
  .three-portrait-label { top: 5%; left: 12%; }
  .three-portrait-caption { right: 0; bottom: 0; }
  .life-three .three-intro h2 { font-size: clamp(40px, 10vw, 64px); letter-spacing: -.03em; }
  .life-three .three-intro p:not(.section-kicker) { max-width: 35ch; font-size: 15px; }
  .life-three .three-list { margin-right: 5px; padding: 0 20px; box-shadow: 5px 5px 0 var(--ink); }
  .life-three .three-list li:nth-child(n) { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 16px; padding: 26px 0 30px; }
  .life-three .three-folio { grid-row: 1; width: 40px; height: 42px; font-size: 25px; border-top-width: 3px; }
  .life-three .three-list li > span { align-self: center; font-size: 9px; }
  .life-three .three-list h3 { grid-column: 1 / -1; max-width: 24ch; font-size: clamp(26px, 6.5vw, 32px); }
  .life-three .three-list p { grid-column: 1 / -1; font-size: 15px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  .life-three .motion-ready { opacity: 1; transform: none; transition: none; }
  .life-three .three-intro .tota-sign:hover i { transform: none; }
}

/* The opening cover: a personal edition on the app's cream paper. */
.edition-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 5vw, 80px);
  row-gap: 0;
  min-height: 0;
  padding: 28px 0 0;
  align-items: center;
}
.cover-masthead {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-bottom: clamp(42px, 5vw, 76px);
  font-size: 10px;
  letter-spacing: .13em;
}
.cover-masthead > :first-child { font-weight: 800; }
.cover-masthead > :nth-child(2) { color: var(--muted); letter-spacing: .02em; }
.cover-masthead i { margin-left: 12px; color: var(--green); font-size: 18px; font-style: normal; }
.edition-cover .hero-copy { padding: 0; min-width: 0; }
.cover-dedication { margin: 0 0 26px; color: var(--green); font-size: 15px; }
.edition-cover .hero-copy h1 { margin: 0 0 30px; font: 800 clamp(52px, 6.15vw, 88px)/1.01 var(--display); letter-spacing: -.065em; }
.edition-cover h1 span { color: var(--green); }
.edition-cover .hero-deck { max-width: 350px; margin: 0 0 30px; font-size: 17px; line-height: 1.7; }
.edition-cover .scroll-cue { display: inline-flex; gap: 26px; padding: 13px 19px 13px 23px; border: 1px solid var(--green); border-radius: 3px; background: var(--green); color: var(--paper); font-size: 14px; letter-spacing: 0; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.edition-cover .scroll-cue:hover { background: var(--ink); transform: translateY(-2px); }
.edition-cover .scroll-cue:focus-visible { outline: 3px solid var(--marigold); outline-offset: 5px; }
.edition-cover .scroll-cue-icon { width: auto; height: auto; border: 0; color: inherit; font-size: 23px; }
.cover-invitation { margin: 15px 0 0; color: var(--muted); font-size: 11px; }
.edition-cover .hero-art { position: relative; grid-column: 2; grid-row: 2; align-self: center; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 10px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: translate3d(0,calc(var(--drift, 0px) * .35),0); }
.edition-cover .hero-art::before { display: none; }
.cover-art-index { display: block; text-align: center; color: var(--muted); font-size: 9px; letter-spacing: .19em; }
.edition-cover .hero-art img { display: block; position: static; width: 100%; height: auto; margin: 14px auto 0; object-fit: contain; filter: none; }
.edition-cover figcaption { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: -8px; color: var(--muted); font-size: 10px; }
.cover-signature { color: var(--green); font-size: 24px; font-style: italic; letter-spacing: -.04em; }
.cover-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 62px; padding-top: 21px; border-top: 1px solid var(--line); }
.cover-footer > p { margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.cover-footer > p > span { margin-right: 9px; color: var(--green); }
.edition-cover .hero-meta { margin: 0; gap: 25px; font-size: 10px; }
.edition-cover .hero-meta b { display: inline; margin-right: 5px; font-size: 13px; font-weight: 600; }
@media (max-width: 800px) {
  .edition-cover { display: grid; grid-template-columns: 1fr; padding: 22px 0 0; gap: 0; }
  .cover-masthead { margin-bottom: 35px; padding: 12px 0; font-size: 9px; }
  .cover-masthead > :nth-child(2) { display: none; }
  .edition-cover .hero-copy { grid-column: 1; grid-row: 2; text-align: center; }
  .cover-dedication { margin-bottom: 20px; font-size: 13px; }
  .edition-cover .hero-copy h1 { font-size: clamp(48px, 9.5vw, 76px); margin-bottom: 23px; }
  .edition-cover .hero-deck { max-width: 350px; margin: 0 auto 25px; font-size: 15px; }
  .edition-cover .hero-art { grid-column: 1; grid-row: 3; width: min(100%, 410px); justify-self: center; margin: 35px 0 0; transform: none; }
  .cover-art-index { display: none; }
  .edition-cover .hero-art img { margin-top: 0; }
  .cover-footer {
    flex-direction: column;
    margin-top: 35px;
    gap: 17px;
    padding-top: 0;
    padding-bottom: 17px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    text-align: center;
  }
  .reading-intro,
  .full-intro {
    border-top: 0;
    text-align: center;
  }
  .intro-aside {
    margin-right: auto;
    margin-left: auto;
  }
  .full-intro-right {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .edition-cover .hero-meta { justify-content: center; gap: 12px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .edition-cover .hero-art, .edition-cover .scroll-cue:hover { transform: none; }
}

.partial-story-copy > .reading-copy + .reading-copy {
  margin-top: 26px;
}

/* Rebuilt unlock ticket: one narrow price rail, one calm editorial index. */
.partial-desk-stack .unlock-ticket,
.newspaper-page-preview .unlock-ticket {
  display: grid;
  grid-template-columns: minmax(155px, .28fr) minmax(0, 1fr);
  width: min(100%, 1120px);
  margin: 62px auto 96px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--flow-surface);
  box-shadow: 7px 7px 0 var(--ink);
  color: var(--ink);
}

.unlock-ticket-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 350px;
  padding: 25px 23px 23px;
  border-right: 1px solid var(--ink);
  background: var(--marigold);
}

.unlock-side-kicker,
.unlock-topline {
  color: var(--ink-muted, var(--muted));
  font: 800 9px/1.35 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.unlock-lock {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 20px;
  line-height: 1;
}

.unlock-price {
  margin: auto 0 10px;
  color: var(--ink);
  font: 800 clamp(43px, 5vw, 64px)/.9 var(--display);
  letter-spacing: -.09em;
}

.unlock-price sup {
  margin-right: 3px;
  font-size: .42em;
  letter-spacing: -.03em;
  vertical-align: top;
}

.unlock-side-meta {
  margin: 0;
  color: var(--ink-muted, var(--muted));
  font-size: 11px;
  line-height: 1.45;
}

.unlock-ticket-main {
  min-width: 0;
  padding: 25px clamp(22px, 3.2vw, 42px) 28px;
}

.unlock-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--ink);
}

.unlock-topline span:first-child {
  color: var(--green, var(--parrot));
}

.unlock-ticket-main h3 {
  margin: 25px 0 8px;
  color: var(--ink);
  font: 800 clamp(26px, 2.6vw, 42px)/.98 var(--display);
  letter-spacing: -.075em;
}

.unlock-ticket-main h3 em {
  color: var(--green, var(--parrot));
  font-style: normal;
}

.unlock-ticket-main .unlock-lede {
  max-width: 42ch;
  margin: 0 0 20px;
  color: var(--muted, var(--ink-muted));
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.5;
}

.unlock-ticket .unlock-desk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line, var(--flow-rule));
  list-style: none;
}

.unlock-ticket .unlock-desk-list li {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
  min-height: 45px;
  padding: 12px 8px 10px 0;
  border-bottom: 1px solid var(--line, var(--flow-rule));
  color: var(--ink);
  font-size: clamp(11px, 1vw, 13px);
}

.unlock-ticket .unlock-desk-list li:not(:nth-child(3n + 1)) {
  padding-left: 14px;
  border-left: 1px solid var(--line, var(--flow-rule));
}

.unlock-ticket .unlock-desk-list li span {
  flex: 0 0 auto;
  color: var(--muted, var(--ink-muted));
  font: 700 9px/1 var(--mono);
}

.unlock-ticket .unlock-desk-list li b {
  min-width: 0;
  font-weight: 700;
}

.unlock-ticket-button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 19px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--green, var(--parrot));
  color: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.unlock-ticket-button:hover,
.unlock-ticket-button:focus-visible {
  background: var(--ink);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .partial-desk-stack .unlock-ticket,
  .newspaper-page-preview .unlock-ticket {
    grid-template-columns: minmax(132px, .32fr) minmax(0, 1fr);
    margin: 48px auto 70px;
  }

  .unlock-ticket-side {
    min-height: 310px;
    padding: 20px 17px;
  }

  .unlock-lock { margin-top: 27px; }
  .unlock-ticket-main { padding: 21px 18px 22px; }
  .unlock-topline span:last-child { display: none; }
  .unlock-ticket-main h3 { margin-top: 21px; }
  .unlock-ticket .unlock-desk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unlock-ticket .unlock-desk-list li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .unlock-ticket .unlock-desk-list li:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line, var(--flow-rule)); }
}

@media (max-width: 520px) {
  .partial-desk-stack .unlock-ticket,
  .newspaper-page-preview .unlock-ticket {
    grid-template-columns: 1fr;
    margin: 40px 12px 56px;
    border-radius: 15px;
  }

  .unlock-ticket-side {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    gap: 10px 14px;
    align-items: center;
    padding: 17px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .unlock-side-kicker { grid-column: 1 / -1; }
  .unlock-lock { grid-column: 1; grid-row: 2; width: 40px; height: 40px; margin: 0; font-size: 18px; }
  .unlock-price { grid-column: 2; grid-row: 2; margin: 0; font-size: 45px; }
  .unlock-side-meta { grid-column: 3; grid-row: 2; }
  .unlock-ticket-main { padding: 20px 17px 19px; }
  .unlock-ticket-main h3 { font-size: clamp(25px, 8vw, 34px); }
  .unlock-ticket .unlock-desk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unlock-ticket .unlock-desk-list li:nth-child(even) { padding-left: 10px; }
}

/* Beat the legacy CTA selectors while the older stylesheet remains shared by the demo. */
.partial-desk-stack .unlock-ticket .unlock-ticket-button {
  display: flex;
  width: 100%;
  min-height: 44px;
  margin-top: 19px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--green, var(--parrot));
  box-shadow: 0 4px 0 var(--ink);
  font-size: 14px;
  text-transform: none;
}

.partial-desk-stack .unlock-ticket .unlock-ticket-button:hover,
.partial-desk-stack .unlock-ticket .unlock-ticket-button:focus-visible {
  background: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  transform: translateY(-2px);
}
/* Shared opening folio: the demo uses the same premium short-list treatment as the live reader. */
.demo-body .life-three {
  margin: clamp(70px, 9vw, 130px) 0 clamp(90px, 12vw, 170px);
  padding-bottom: clamp(18px, 3vw, 40px);
  border-top: 1px solid var(--ink);
}

.demo-body .life-three::before { display: none; }

.demo-body .life-three .three-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 0 14px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.demo-body .life-three .three-list-head > :first-child { color: var(--green); font-weight: 800; }

.demo-body .life-three .three-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  margin: 0;
  padding: clamp(32px, 4vw, 60px) 0;
}

.demo-body .life-three .three-intro-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 330px;
  margin: 0;
  padding: clamp(30px, 4vw, 58px);
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.demo-body .life-three .three-intro-copy::after {
  position: absolute;
  right: -86px;
  bottom: -112px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(245, 242, 235, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(245, 242, 235, .04), 0 0 0 44px rgba(245, 242, 235, .035);
  content: '';
}

.demo-body .life-three .three-intro .section-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--marigold);
  font-size: 10px;
  letter-spacing: .17em;
}

.demo-body .life-three .three-intro h2 {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 22px 0 28px;
  color: var(--paper);
  font: 800 clamp(44px, 5.5vw, 78px)/.88 var(--display);
  letter-spacing: -.03em;
}

.demo-body .life-three .three-intro h2 em { color: var(--marigold); font-style: normal; font-weight: 800; }
.demo-body .life-three .three-intro p:not(.section-kicker) { position: relative; z-index: 1; max-width: 39ch; margin: 0; color: rgba(245, 242, 235, .76); font-size: 16px; line-height: 1.65; }

.demo-body .life-three .three-intro-note {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--mint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.demo-body .life-three .three-intro-note b { color: var(--marigold); font-size: 18px; font-weight: 400; }

.demo-body .life-three .three-portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f2ead7;
  isolation: isolate;
}

.demo-body .life-three .three-portrait::before {
  position: absolute;
  inset: 10% 7% 7% 15%;
  z-index: -1;
  border: 1px solid rgba(41, 46, 41, .13);
  background: var(--mint);
  clip-path: polygon(7% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 9%);
  content: '';
}

.demo-body .life-three .three-portrait img { display: block; width: min(94%, 390px); height: auto; filter: saturate(.9) contrast(1.02); transform: rotate(-2deg) translateY(4px); }
.demo-body .life-three .three-portrait-label,
.demo-body .life-three .three-portrait-caption { position: absolute; color: var(--muted); font-size: 8px; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; }
.demo-body .life-three .three-portrait-label { top: 7%; left: 10%; }
.demo-body .life-three .three-portrait-caption { right: 3%; bottom: 1%; display: flex; align-items: baseline; gap: 8px; }
.demo-body .life-three .three-portrait-caption b { color: var(--green); font-size: 15px; letter-spacing: -.04em; }

.demo-body .life-three .three-list-head { margin-top: 2px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }

.demo-body .life-three .three-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: none;
  list-style: none;
}

.demo-body .life-three .three-list li:nth-child(n) {
  --note-accent: var(--green);
  --note-tint: var(--mint);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 3px solid var(--note-accent);
  background: var(--paper);
}

.demo-body .life-three .three-list li:nth-child(2) { --note-accent: var(--pink-ink); --note-tint: var(--pink); background: #fff9fb; }
.demo-body .life-three .three-list li:nth-child(3) { --note-accent: #9b6e00; --note-tint: #fff0bb; background: #fffdf5; }

.demo-body .life-three .three-note-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  padding: clamp(24px, 2.7vw, 38px);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s ease, transform .25s ease;
}

.demo-body .life-three .three-note-card:hover { background: var(--note-tint); transform: translateY(-4px); }
.demo-body .life-three .three-note-card:focus-visible { position: relative; z-index: 1; outline-color: var(--note-accent); }
.demo-body .life-three .three-note-head { display: flex; align-items: center; gap: 12px; }
.demo-body .life-three .three-folio { display: block; width: auto; height: auto; color: var(--note-accent); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.demo-body .life-three .three-note-topic,
.demo-body .life-three .three-note-count { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.demo-body .life-three .three-note-topic { flex: 1; }
.demo-body .life-three .three-note-count { color: var(--line); }
.demo-body .life-three .three-list h3 { max-width: 14ch; margin: 48px 0 18px; color: var(--ink); font: 800 clamp(27px, 3vw, 46px)/.98 var(--display); letter-spacing: -.055em; }
.demo-body .life-three .three-list p { max-width: 32ch; margin: 0; padding: 0; border: 0; color: var(--body-ink); font-size: 15px; line-height: 1.65; }
.demo-body .life-three .three-note-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); color: var(--note-accent); font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.demo-body .life-three .three-note-action > span { font-size: 17px; font-weight: 400; line-height: 1; }

@media (max-width: 800px) {
  .demo-body .life-three .three-intro { grid-template-columns: 1fr; gap: 18px; padding-block: 30px; }
  .demo-body .life-three .three-intro-copy { min-height: 300px; padding: 30px 24px; }
  .demo-body .life-three .three-intro h2 { font-size: clamp(45px, 12vw, 70px); }
  .demo-body .life-three .three-portrait { min-height: 270px; width: min(100%, 330px); justify-self: center; }
  .demo-body .life-three .three-list { grid-template-columns: 1fr; margin-right: 5px; }
  .demo-body .life-three .three-note-card { min-height: 0; padding: 26px 20px 24px; }
  .demo-body .life-three .three-list h3 { max-width: 20ch; margin: 34px 0 14px; font-size: clamp(27px, 7vw, 36px); }
  .demo-body .life-three .three-list p { max-width: 42ch; font-size: 15px; line-height: 1.7; }
  .demo-body .life-three .three-note-action { margin-top: 26px; padding-top: 20px; }
}

/* Desk navigation: a quiet vertical rail in the left gutter keeps the reading surface full-width. */
@media (min-width: 801px) {
  .reading-view[data-reading-view="full"]:not([hidden]),
  #full-reading[data-screen="reading"]:not([hidden]) {
    display: block;
    position: relative;
  }

  .desk-index {
    position: fixed;
    top: 50%;
    left: max(14px, calc(50% - 640px - 210px));
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 190px;
    height: auto;
    max-height: min(620px, calc(100svh - 120px));
    margin: 0;
    padding: 18px 20px 16px;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 58, 42, .24) transparent;
    transform: translateY(calc(-50% + var(--nav-shift, 0px)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .35s;
    isolation: isolate;
  }

  .desk-index.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(calc(-50% + var(--nav-shift, 0px)));
    transition-delay: 0s;
  }

  .desk-index::before,
  .desk-index::after {
    position: absolute;
    top: 60px;
    bottom: 16px;
    left: 12px;
    width: 2px;
    border: 0;
    content: '';
    pointer-events: none;
  }

  .desk-index::before { background: rgba(30, 58, 42, .14); }

  .desk-index::after {
    background: var(--green);
    transform: scaleY(var(--read-progress-scale, 0));
    transform-origin: top;
    transition: transform .45s var(--ease);
  }

  .index-title {
    align-self: stretch;
    padding: 0 0 0 14px;
    color: var(--green);
    font-size: 9px;
    letter-spacing: .12em;
    line-height: 1.2;
    text-align: left;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .desk-index-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .desk-index-list button {
    width: 100%;
    min-height: 0;
    padding: 10px 0 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(30, 58, 42, .16);
    border-radius: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.18;
    text-align: left;
    white-space: normal;
    text-decoration: none;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  }

  .desk-index-list button:hover,
  .desk-index-list button:focus-visible,
  .desk-index-list button.is-active {
    border-color: rgba(30, 58, 42, .12);
    background: rgba(225, 230, 211, .24);
    color: var(--ink);
  }

  .desk-index-list button.is-active {
    font-weight: 700;
    background: rgba(225, 230, 211, .44);
    color: var(--ink);
    box-shadow: none;
  }
}

/* On small screens the desk index becomes a quiet, fixed reading control. */
@media (max-width: 800px) {
  .desk-index {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 40;
    display: block;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 7px 10px 6px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid rgba(30, 58, 42, .12);
    border-radius: 0;
    background: rgba(251, 243, 224, .62);
    box-shadow: 0 8px 26px rgba(30, 58, 42, .06);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }

  .desk-index.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .desk-index .index-title { display: none; }

  .desk-index::after {
    right: auto;
    bottom: 0;
    left: 0;
    width: var(--read-progress, 10%);
    height: 2px;
    background: rgba(23, 138, 76, .58);
    transition: width .35s var(--ease);
  }

  .desk-index-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .desk-index-list::-webkit-scrollbar { display: none; }

  .desk-index-list button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(30, 58, 42, .68);
    font: 500 11px/1.2 var(--display);
    text-align: left;
    text-transform: none;
    white-space: nowrap;
  }

  .desk-index-list button:hover,
  .desk-index-list button:focus-visible,
  .desk-index-list button.is-active {
    border-color: transparent;
    background: rgba(223, 242, 228, .72);
    color: var(--ink);
    box-shadow: none;
  }

  .desk-index-list button.is-active { font-weight: 700; }
}