/* Original, locally served Adobe fonts; no third-party font requests. */
@font-face { font-family:"Source Serif 4"; src:url("/brand/fonts/web/SourceSerif4-Regular.otf.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("/brand/fonts/web/SourceSerif4-It.otf.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("/brand/fonts/web/SourceSans3-Regular.otf.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("/brand/fonts/web/SourceSans3-Semibold.otf.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* The public identity: warm paper, evergreen ink, generous editorial rhythm. */
:root {
  --paper:#F8F6F1; --paper-deep:#EEECE5; --surface:#FFFDF9;
  --ink:#465C70; --muted:#65717A;
  --rule:#DDDCD4; --rule-strong:#7E8C98;
  --action:#465C70; --action-hover:#263747; --wash:#ECEFF0;
  --warm-ink:#78613E; --wheat:#C7B17B; --lamp:#F2ECE0;
  --voice:#465C70; --error:#943f30;
  --shadow:0 20px 64px -24px #26374726;
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --type-label:1rem; --type-small:.9375rem; --type-prose:1.25rem;
  --type-story:clamp(1.25rem,1.15rem + .4vw,1.375rem);
  --type-voice:clamp(1.375rem,1.25rem + .5vw,1.625rem);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;
  --gutter:max(clamp(20px,4.4vw,64px),env(safe-area-inset-left),env(safe-area-inset-right)); --page-width:1380px;
  --radius:8px; --radius-large:12px; --control-height:48px;
  --field-padding:16px 18px; --reading-leading:1.65;
  color-scheme:light; font-family:var(--sans); color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-padding-block:24px; }
body { margin:0; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button,a,input,textarea,select,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--action); outline-offset:4px; }
button:disabled { cursor:default; opacity:.45; }
input:not([type=checkbox]):not([type=radio]),textarea,select { max-width:100%; min-height:52px; padding:var(--field-padding); border:1px solid var(--rule-strong); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-size:16px; line-height:1.5; transition:border-color .18s ease,box-shadow .18s ease; }
textarea { display:block; width:100%; min-height:120px; resize:vertical; font:var(--type-prose)/var(--reading-leading) var(--serif); }
:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus-visible { border-color:var(--action); box-shadow:0 0 0 4px var(--wash); outline-offset:3px; }
:is(input,textarea)[readonly] { color:var(--muted); background:var(--paper); }
:is(input,textarea,select):user-invalid { border-color:var(--error); }
textarea::placeholder,input::placeholder { color:var(--muted); opacity:1; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
p,h1,h2,h3,blockquote { margin:0; }
button svg { pointer-events:none; }
::selection { background:var(--wash); color:var(--action-hover); }
h1,h2,h3,blockquote { text-wrap:balance; }
.site-header { max-width:var(--page-width); min-height:100px; margin:auto; padding:var(--space-4) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); border-bottom:1px solid var(--rule); }
.wordmark { min-height:var(--control-height); border:0; background:none; display:inline-flex; align-items:center; gap:var(--space-3); padding:4px 0; color:var(--ink); text-decoration:none; }
.brand-signature { display:block; flex:none; width:235px; height:48px; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:var(--space-8); }
.text-button { min-height:var(--control-height); border:0; background:none; padding:12px 2px; font-size:var(--type-label); line-height:1.5; text-decoration:none; text-underline-offset:5px; transition:color .18s ease; }
.text-button:hover { color:var(--action); text-decoration:underline; }
.site-header .text-button { position:relative; color:var(--muted); }
.site-header .text-button:hover,.site-header .text-button[aria-current=page] { color:var(--ink); }
.site-header .text-button[aria-current=page] { text-decoration:none; }
.site-header .text-button[aria-current=page]::after { content:""; position:absolute; bottom:4px; inset-inline:2px; height:2px; background:var(--action); }
.count { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; min-width:22px; margin-left:6px; border-radius:999px; background:var(--wash); color:var(--action); padding:2px 7px; font-size:12px; line-height:18px; font-variant-numeric:tabular-nums; }
.skip { position:absolute; top:-80px; left:16px; background:var(--surface); border:1px solid var(--rule); z-index:20; padding:14px; border-radius:var(--radius); color:var(--action); }
.skip:focus { top:12px; }
main { max-width:var(--page-width); margin:auto; padding:0 var(--gutter); min-height:calc(100svh - 188px); }
.eyebrow { font-size:11px; font-weight:600; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:var(--warm-ink); margin-bottom:var(--space-5); }
h1 { font:400 clamp(40px,5vw,64px)/1.12 var(--serif); letter-spacing:-.035em; }
.period { color:var(--wheat); }
.button { min-height:var(--control-height); padding:13px 22px; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-6); border:1px solid var(--rule-strong); border-radius:var(--radius); background:transparent; color:var(--ink); font-size:var(--type-label); font-weight:500; line-height:1.5; text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.button:hover { background:var(--surface); border-color:var(--action); }
.button.primary { background:var(--action); border-color:var(--action); color:var(--surface); }
.button.primary:hover { background:var(--action-hover); border-color:var(--action-hover); }
.button .arrow { font:19px/1 var(--sans); }
.site-footer { width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--page-width) - 2 * var(--gutter)); min-height:88px; margin:auto; padding-block:var(--space-4); border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3) var(--space-6); color:var(--muted); font-size:var(--type-small); line-height:1.6; }
.site-footer span:first-child { font:20px/1.4 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-underline-offset:4px; padding-block:10px; }
.site-footer a:hover { color:var(--action); }
.occasion-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:80px; }
.occasion-bar p { font:22px/1.4 var(--serif); }
.occasion-bar p #occasion-title { color:var(--ink); }
.occasion-bar #scene-context { font:var(--type-small)/1.5 var(--sans); color:var(--muted); margin-left:var(--space-5); }
.stage { overflow:hidden; border-radius:var(--radius-large); }
.encounter-body { max-width:1080px; margin:auto; padding:var(--space-12) 0 56px; }
.reading { display:block; }
.lived-passage + .lived-passage { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--rule); }
.lived-passage + .previous-voice { margin-top:var(--space-5); }
.passage p { font:var(--type-story)/var(--reading-leading) var(--serif); margin-bottom:var(--space-3); }
.inner { padding:4px 0 4px var(--space-6); border-left:2px solid var(--wheat); color:var(--voice); font:italic var(--type-voice)/1.55 var(--serif); margin:var(--space-6) 0 var(--space-2); }
.inner p+p { margin-top:var(--space-3); }
.notice-detail { color:var(--action-hover); }
.previous-voice { color:var(--muted); font:17px/1.6 var(--serif); margin:0 0 var(--space-3); }
.previous-voice p { margin:var(--space-2) 0; }
.seeing-note { color:var(--muted); font:var(--type-small)/1.6 var(--sans); margin:0 0 var(--space-5); }
.seeing-note span { font:italic 17px var(--serif); margin-left:6px; }
.reading-animate { animation:appear .35s ease; }
.story-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule); }
.progress { display:flex; gap:7px; align-items:center; }
.progress i { display:block; width:18px; height:2px; background:var(--rule-strong); }
.progress i.active { background:var(--action); }
.story-nav .text-button { min-width:70px; text-align:left; }
.story-nav .nav-right { min-width:110px; text-align:right; }
.choices { display:grid; gap:var(--space-3); margin-top:var(--space-5); }
.choice { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:52px; text-align:left; padding:14px 18px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); font:19px/1.45 var(--serif); transition:background .18s ease,border-color .18s ease; }
.choice:hover { background:var(--wash); border-color:var(--action); }
.choice .arrow { flex:none; font:19px var(--sans); color:var(--action); }
.choice > span:first-child { min-width:0; overflow-wrap:anywhere; }
.choice .choice-tag { font:var(--type-small)/1.4 var(--sans); color:var(--muted); margin-left:auto; }
.action-prompt { font:600 .875rem/1.5 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--warm-ink); margin:var(--space-6) 0 var(--space-3); }
.own { margin-top:var(--space-5); }
.own summary { display:inline-flex; align-items:center; min-height:var(--control-height); font:var(--type-label)/1.5 var(--sans); cursor:pointer; color:var(--action); list-style:none; }
.own summary::-webkit-details-marker { display:none; }
.own summary::before { content:"+"; font:19px var(--sans); margin-right:10px; }
.own[open] summary::before { content:"−"; }
.own form { padding-top:var(--space-3); }
.field-label { display:block; font-size:var(--type-label); line-height:1.5; color:var(--muted); margin-bottom:var(--space-3); }
.textarea { display:block; width:100%; min-height:112px; font:var(--type-prose)/var(--reading-leading) var(--serif); overflow-wrap:anywhere; }
.form-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-4); }
.form-note { font:var(--type-small)/1.7 var(--sans); color:var(--muted); max-width:65ch; }
.error { color:var(--error); }
.busy { display:flex; align-items:center; gap:var(--space-3); font:italic 18px var(--serif); margin-top:var(--space-6); }
.busy-dot { flex:none; width:6px; height:6px; background:var(--action); border-radius:50%; animation:breathe 1.5s infinite; }
.source { font:var(--type-small)/1.7 var(--sans); color:var(--muted); margin-top:var(--space-4); }
.source a { color:inherit; text-underline-offset:4px; }
.source a:hover { color:var(--action); }
.local-note { font:var(--type-small)/1.7 var(--sans); color:var(--muted); margin-top:var(--space-8); }
.notice { background:var(--paper-deep); max-width:calc(var(--page-width) - 2 * var(--gutter)); margin:var(--space-4) var(--gutter); padding:var(--space-4) var(--space-5); border-radius:var(--radius); font-size:var(--type-label); line-height:1.6; }
.toast { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:10; background:var(--action-hover); color:var(--surface); padding:var(--space-4) var(--space-6); border-radius:var(--radius); font:var(--type-label)/1.6 var(--sans); box-shadow:var(--shadow); max-width:calc(100% - 32px); }
.toast button { color:inherit; border:0; background:transparent; text-decoration:underline; text-underline-offset:4px; margin-left:var(--space-4); min-height:44px; }
.replay-note { background:var(--wash); padding:var(--space-3) var(--space-4); border-radius:var(--radius); margin-bottom:var(--space-6); font:var(--type-small)/1.6 var(--sans); display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
.replay-note > div { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
@keyframes appear { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes breathe { 50% { opacity:.3; } }
@media(max-width:700px) {
  .site-header { min-height:112px; padding-block:max(16px,env(safe-area-inset-top)) var(--space-2); flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .wordmark { align-self:flex-start; }
  .brand-signature { width:220px; height:45px; }
  .site-header nav { justify-content:space-between; gap:var(--space-3); }
  .site-header .text-button { white-space:nowrap; }
  main { min-height:calc(100svh - 200px); }
  .site-footer { min-height:80px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .occasion-bar { min-height:72px; gap:var(--space-3); }
  .occasion-bar p { font-size:19px; }
  .occasion-bar #scene-context { display:none; }
  .encounter-body { padding:var(--space-8) 0 var(--space-10); }
  .inner { padding-left:var(--space-5); margin-top:var(--space-5); }
  .previous-voice { font-size:16px; }
  .textarea { font-size:19px; }
  .form-row { flex-wrap:wrap; gap:var(--space-3); }
  .choice { font-size:18px; padding:12px 16px; }
  .choice:has(.choice-tag) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
  .choice:has(.choice-tag) > span:first-child { grid-column:1; }
  .choice .choice-tag { grid-column:1; grid-row:2; margin:0; }
  .choice:has(.choice-tag) .arrow { grid-column:2; grid-row:1 / 3; }
  .replay-note { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}