/* Reading edition — the interface shares the journal's restrained ink and brass. */
:root{--ink:#111d18;--gold:#d8b781;--paper:#f0e8d8;--muted:#adb4a3;--rule:#d4b57b36;--gutter:clamp(22px,3.4vw,56px)}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f0cb8d;outline-offset:5px}
button{transition:color .2s,background-color .2s,border-color .2s,opacity .2s}
button:disabled{cursor:wait}
header{padding:23px var(--gutter);gap:26px;align-items:center}
.brand{font-size:19px;letter-spacing:.17em;line-height:1.3}
.brand i{font:italic 20px Georgia;color:var(--gold);margin:0 5px}
.notes-button{font-size:11px;letter-spacing:.16em;min-height:44px;padding:0 13px;border:1px solid transparent;border-radius:3px}
.notes-button:hover{border-color:var(--rule);background:#b69a5910}
.notes-button span{font-size:10px;color:#e2c28b;border-color:#c9b27b42}
#sound{font-size:11px;letter-spacing:.14em;gap:10px;min-width:125px}
#sound .sound-bars{width:17px;justify-content:space-between}
#sound .sound-bars i{width:2px}
.intro{left:8%;top:25%;width:420px}
h1{font-size:clamp(48px,5.15vw,76px);line-height:1.045;margin:22px 0 25px;letter-spacing:-.045em}
h1 em{color:#e0bd86}
.intro .eyebrow{font-size:10px;letter-spacing:.23em;display:flex;align-items:center;gap:14px}
.intro .eyebrow:before{content:'';height:1px;width:28px;background:#caaa6b96}
.intro p{font-size:18px;line-height:1.55;color:#ddd3bd}
.intro-meta{font-size:10px;letter-spacing:.1em;margin-top:14px;color:#adb29e}
.begin{min-height:56px;bottom:23%;border-color:#bb9a626b;background:#132219eb;border-radius:3px;box-shadow:0 12px 28px #0003;gap:42px;padding:10px 13px 10px 22px;font-size:10px;letter-spacing:.15em}
.button-mark{border:0;border-left:1px solid #c6a46c47;width:40px;height:30px;padding-left:10px;transition:padding .2s}
.begin:hover{border-color:#ddbd86;background:#213025}
.begin:hover .button-mark{padding-left:15px}
.loading{bottom:17%;font-size:11px;color:#cfbd9e;letter-spacing:.05em}
.chapter-folio{left:var(--gutter);top:112px;gap:9px;padding-left:15px;border-left:1px solid #c1a36b55}
.chapter-folio span:first-child{font:italic 16px Georgia;color:#cdb07c}
.chapter-folio span:last-child{font:10px/1.45 Arial;letter-spacing:.18em;color:#c1c7b5}
.started .chapter-folio{opacity:.85}
/* A compact deck leaves the picture in charge. Hit areas remain comfortably sized. */
footer{width:calc(100% - 64px);max-width:1060px;bottom:22px;padding:13px 20px 10px;gap:22px;border:1px solid #cbb07c2e;border-top-color:#d3b47b56;border-radius:5px;background:linear-gradient(120deg,#16231ee8,#0d1915f5);box-shadow:0 12px 34px #0004;align-items:center;transition:opacity .6s,background .3s}
.transport{min-width:114px;gap:9px;align-items:center}
.play{width:44px;height:44px;min-height:44px;border-color:#ccb17e85;background:#c8a9680b;flex:none}
.play:hover{background:#c8a96820;border-color:#e9cc95}
#play-icon{display:grid;place-items:center}
#reset{display:flex;align-items:center;justify-content:center;gap:7px;min-width:58px;padding:0 4px;color:#abb5a3}
#reset span{font-size:9px;letter-spacing:.1em}
#reset svg{display:none}
#reset:hover{color:#eed4a4}
.timeline{min-width:0;max-width:none}
input[type=range]{height:26px;margin:0;outline-offset:2px}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#d3b27c var(--progress,0%),#9da58c35 var(--progress,0%));border-radius:1px}
input[type=range]::-webkit-slider-thumb{height:11px;width:11px;margin-top:-4.5px;background:#e5c58d;box-shadow:0 0 0 4px #d6b87d10;transition:box-shadow .2s}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px #d6b87d20}
input[type=range]::-moz-range-track{height:2px;background:#9da58c55}
input[type=range]::-moz-range-progress{height:2px;background:#d3b27c}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#e5c58d}
nav{gap:10px;justify-content:space-between;overflow:visible}
nav button{position:relative;display:flex;align-items:center;gap:4px;min-height:32px;padding:0 0 3px;color:#b1bca5;font-size:11px;letter-spacing:.055em;white-space:nowrap}
nav button span{font-size:8px;margin:0;color:#8c967f}
nav button:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#dfbd80;transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav button.active{color:#f1d5a0}
nav button.active:after{transform:scaleX(1)}
nav button:hover{color:#f3dfb9}
.guidance{min-width:99px;font:12px Arial;letter-spacing:.045em;color:#cccbbb;text-align:right}
#percent{font-variant-numeric:tabular-nums;white-space:nowrap}
.total-time{color:#8d9b88}
.guidance small{font-size:9px;letter-spacing:.025em;line-height:1.4;margin-top:10px;color:#9ba990}
.quiet-controls footer{opacity:.48}
.quiet-controls header{opacity:.65}
.quiet-controls footer:hover,.quiet-controls footer:focus-within,.quiet-controls header:hover,.quiet-controls header:focus-within{opacity:1}
.narrative,.immersed .narrative{bottom:15%;width:min(80%,600px)}
.narrative p{font-size:21px;line-height:1.45;padding:12px 26px;color:#eee4cd;background:radial-gradient(ellipse,#09161291,transparent 74%)}
/* Field notes are a paper reading surface, with quiet rules and clear actions. */
#notebook{width:min(620px,calc(100vw - 32px));max-height:min(830px,calc(100dvh - 48px));border:1px solid #b9a078;border-radius:4px;background:linear-gradient(110deg,#e4d8bd,#f1e7d0 58%,#e8ddc3);color:#273229;box-shadow:0 24px 100px #000a;scrollbar-color:#a7997b #e7dcc2}
#notebook::backdrop{background:#020a08bd;backdrop-filter:blur(5px)}
.notebook-inner{padding:34px 38px 23px}
.notebook-top{margin:-34px -38px 0;padding:11px 23px 11px 38px;background:#e9ddc4;border-bottom:1px solid #68563535}
.notebook-top .eyebrow{color:#6e654d;font-size:10px;letter-spacing:.17em}
#close-notes{color:#5c5b47;min-height:44px;border-radius:50%;font-size:26px}
#close-notes:hover{background:#82704716;color:#243027}
#notebook h2{font:normal 38px/1.08 Georgia;letter-spacing:-.035em;margin:27px 0 17px;max-width:420px}
.notebook-intro{color:#686956;font-size:16px;line-height:1.65;margin-bottom:30px}
.note-entry{grid-template-columns:28px 1fr;gap:15px;padding:25px 0;border-color:#79705235}
.entry-number{font-size:17px;color:#928064}
.note-entry h3{font:normal 23px/1.2 Georgia;color:#303d30;margin:0 0 12px;letter-spacing:-.02em}
.note-entry p{font-size:16px;line-height:1.7;color:#5d624f}
.note-entry blockquote{font:italic 20px/1.5 Georgia;color:#715136;border-left:2px solid #bca372;padding-left:15px;margin:20px 0 8px}
.note-entry.selected h3{color:#61452d}
.entry-action{color:#625133;font-size:10px;letter-spacing:.1em;text-decoration:none;border-bottom:1px solid #a18a6260;padding:12px 0 4px;min-height:40px}
.entry-action:hover{color:#232e24;border-color:#655738}
.continue-journey{background:#26382d;color:#f0e2c7;border-color:#26382d;border-radius:2px;font-size:10px;letter-spacing:.15em;min-height:50px}
.continue-journey:hover{background:#3c4b37;border-color:#3c4b37}
.notebook-foot{font-size:11px;color:#7c7964;line-height:1.6;margin:17px 0 0}
#notebook button:focus-visible{outline-color:#765b32}
.mark-ring{width:30px;height:30px;box-shadow:0 0 0 5px #081b1545,0 0 25px #dfa95c17;background:#13291fbf;border-color:#e1c089a1}
.mark-label{font-size:12px;background:#0a1712e6;border:1px solid #c4aa7429;border-radius:3px;padding:6px 10px}
#ending h2{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.035em}
#awaken-end{border-radius:2px;border-color:#c9a5698a;min-height:48px;font-size:10px;letter-spacing:.15em;background:#15271de6;padding:12px 22px}
#awaken-end:hover{background:#283b27;border-color:#e2bb78}
#replay{font-size:9px;letter-spacing:.15em;min-height:40px;color:#baa581;border-color:#b79e6455}
#ending{bottom:15%}
@media(min-width:1500px){.intro{width:470px}.begin{bottom:25%}}
@media(min-width:701px) and (max-width:1100px){
 .intro{left:10%;top:11%;width:80%;text-align:center}.intro .eyebrow{justify-content:center}
 h1{font-size:42px;line-height:1.05;margin:14px 0}.intro-meta{margin-top:8px}.intro p{font-size:17px}
 .begin{left:50%;transform:translateX(-50%);bottom:21%}
 footer{width:calc(100% - 32px);padding:12px 16px;gap:16px}.transport{min-width:44px}#reset{display:none}.guidance{display:none}nav{gap:9px}nav button{font-size:10px}
}
@media(max-width:700px){
 :root{--gutter:22px}header{padding:17px var(--gutter) 10px;gap:7px}.brand{font-size:15px;letter-spacing:.12em}.brand i{font-size:17px;margin:0 3px}
 #sound{min-width:0;font-size:10px;gap:8px}.notes-button{min-height:36px;font-size:10px;border:0;padding:0;letter-spacing:.14em}.notes-button span{font-size:9px}
 .intro{top:18%;left:5%;width:90%;text-align:center}.intro .eyebrow{justify-content:center;font-size:9px;gap:10px;letter-spacing:.2em}.intro .eyebrow:before{width:19px}
 h1{font-size:37px;line-height:1.06;margin:17px 0 15px}.intro p{font-size:16px}.intro-meta{font-size:9px;letter-spacing:.055em;margin-top:9px}
 .begin{left:50%;transform:translateX(-50%);bottom:21%;font-size:9px;gap:29px;min-height:51px;padding:8px 10px 8px 20px}
 .chapter-folio{top:117px;left:22px;padding-left:11px;gap:7px}.chapter-folio span:first-child{font-size:14px}.chapter-folio span:last-child{font-size:9px;letter-spacing:.1em}.started .chapter-folio{opacity:.8}
 footer{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:40px minmax(0,1fr) 35px;gap:12px;padding:10px 13px 9px;border-radius:5px}
 .transport{min-width:0}.play{width:39px;height:39px;min-height:39px}#reset{display:none}.timeline{width:100%}nav{display:none}
 .guidance{display:block;min-width:0;align-self:start;padding-top:8px;font-size:10px}.guidance small,.total-time{display:none}
 #chapter-select{display:block;border:0;border-top:1px solid #b4a27524;background:#122119;color:#e1cba4;font:16px/1.2 Georgia;padding:8px 16px 6px 0;min-height:42px;letter-spacing:0}
 .quiet-controls footer{opacity:.7}.quiet-controls header{opacity:.75}
 .narrative,.immersed .narrative{bottom:15%;width:91%}.narrative p{font-size:17px;line-height:1.4;padding:12px 15px}
 #notebook{width:calc(100vw - 24px);max-height:calc(100dvh - 28px)}.notebook-inner{padding:24px 24px 18px}.notebook-top{margin:-24px -24px 0;padding:8px 12px 8px 24px}.notebook-top .eyebrow{font-size:9px}
 #notebook h2{font-size:33px;margin-top:23px}.notebook-intro{font-size:15px;margin-bottom:22px}.note-entry{grid-template-columns:19px 1fr;gap:10px;padding:21px 0}.note-entry h3{font-size:22px}.note-entry p{font-size:15px}.note-entry blockquote{font-size:18px;margin:16px 0 6px;padding-left:12px}.entry-action{font-size:9px;min-height:44px}
 .mark-ring{width:28px;height:28px}.mark-label{font-size:11px}
 #ending{bottom:15%}#ending h2{font-size:28px}.awakened #ending{bottom:17%}
}
@media(max-height:740px) and (min-width:1101px){.intro{top:21%}h1{font-size:44px;margin:14px 0}.intro p{font-size:16px}.intro-meta{margin-top:9px}.begin{bottom:22%;min-height:46px}.chapter-folio{top:91px}.narrative,.immersed .narrative{bottom:19%}}
@media(max-width:700px) and (max-height:720px){.intro{top:17%}h1{font-size:31px;margin:10px 0}.intro-meta{display:none}.begin{bottom:20%}.chapter-folio{top:110px}.narrative,.immersed .narrative{bottom:17%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.play,.mark-ring{box-shadow:none}}

button:active{translate:0 1px}
@media(min-width:701px) and (max-width:1100px) and (max-height:650px){.intro{left:5%;top:22%;width:280px;text-align:left}.intro .eyebrow{justify-content:flex-start;font-size:9px}h1{font-size:38px}.intro p{font-size:15px}.intro-meta{font-size:9px}.begin{left:5%;transform:none;bottom:22%;min-height:44px;gap:25px}.chapter-folio{top:86px}}
@media(min-width:701px) and (max-height:450px){header{padding:12px 24px}.intro{top:21%}h1{font-size:30px;margin:10px 0}.intro-meta{display:none}.intro p{font-size:14px}.begin{bottom:26%;min-height:40px;padding-top:5px;padding-bottom:5px}footer{bottom:10px;padding:8px 14px}.chapter-folio{top:68px}.narrative,.immersed .narrative{bottom:25%}}

/* Cover crop is resolved on resize; travel updates only compositor transforms. */
.passage img{position:absolute;left:0;top:0;max-width:none;object-fit:fill;transform-origin:0 0}