/* Life: warm daylight, a personal journal, and photographs kept as memories. */
:root { color-scheme: light; --ink: #3e4434; --ink-soft: #59604c; --paper: #fffdf5; --cream: #fff5dc; --acid: #f5ce71; --blue: #557764; --orange: #c67d48; --line: #6a765c30; --hand: "Caveat", cursive; }
html, body, html.life-cinematic-ready, .life-cinematic, .life-experience, .life-stage { background: #fff8e9; color: var(--ink); }
.life-header, .life-header--cinematic, .life-header[data-scrolled], .life-header--cinematic[data-tone="dark"] { color: var(--ink); background: #fffbf1ee; border-color: #b5b99e50; }
.life-brand { gap: 12px; }
.life-brand b { width: 38px; height: 38px; background: #f3cc72; color: #5b5137; font-family: var(--hand); font-size: 23px; font-weight: 600; }
.life-brand strong { font: 600 26px/1 var(--hand); }
.life-brand small, .life-header--cinematic[data-tone="dark"] .life-brand small { color: #6d735e; font-size: 11px; letter-spacing: 0; text-transform: none; }
.life-nav a, .world-switch a { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.life-nav a, .life-header--cinematic[data-tone="dark"] .life-nav a, .world-switch a, .life-header--cinematic[data-tone="dark"] .world-switch a { color: #586349; }
.world-switch, .life-header--cinematic[data-tone="dark"] .world-switch { border-color: #a5b29880; }
.world-switch a[aria-current="page"], .life-header--cinematic[data-tone="dark"] .world-switch a[aria-current="page"] { background: #5b765c; color: #fffdf5; }
.life-progress span { background: #d6a14d; }
.life-grain { opacity: .025; }
.life-world[data-webgl="ready"] { opacity: .5; }
.life-scene--intro { background: #fff8e9b8; }
.life-intro__copy { justify-content: center; }
.life-scene__kicker { color: #65724f; font: 500 22px/1.3 var(--hand); text-transform: none; letter-spacing: 0; margin: 0 0 28px; gap: 28px; }
.life-intro__copy h1 { font-family: var(--serif); font-size: clamp(70px,8.5vw,132px); line-height: .95; font-weight: 400; letter-spacing: -.04em; margin: 0 0 28px; }
.life-intro__copy h1 em { color: #68865e; }
.life-intro__lede { margin-left: 0; max-width: 520px; color: #555d4b; font-size: 17px; line-height: 1.8; }
.life-intro__aside { margin-left: 0; max-width: 440px; color: #76795c; font: 500 23px/1.3 var(--hand); letter-spacing: 0; text-transform: none; }
.life-coordinate { align-self: center; height: min(67vh,620px); min-height: 420px; border: 8px solid #fffdf5; border-radius: 48% 48% 8px 8px; background: linear-gradient(165deg,#dce9cf 0%,#f4e7b6 57%,#efc78b 100%); box-shadow: 0 16px 40px #7c733117; }
.life-coordinate::before { background: #fff4b7cc; border: 0; box-shadow: 0 0 80px #ffe6a466; }
.life-coordinate__orbit { border-color: #75916560; }
.life-coordinate__orbit::before { border-color: #75916570; }
.life-coordinate__orbit::after { border-color: #fffdf5b0; }
.life-coordinate__orbit b { font: 500 clamp(32px,4vw,54px)/1 var(--hand); color: #55704d; }
.life-coordinate li { background: #fffdf5ef; border: 1px solid #9d9c7950; border-radius: 4px; box-shadow: 2px 4px 12px #6d714010; }
.life-coordinate li strong { font: 500 24px/1 var(--hand); text-transform: none; }
.life-coordinate li small { font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .8; }
.life-coordinate > p { font-size: 12px; }
.life-scene__heading > span { font: 500 23px/1.3 var(--hand); text-transform: none; letter-spacing: 0; opacity: .85; }
.life-scene__heading h2 { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.life-scene--now { color: var(--ink); background: #edf2e2ef; }
.life-scene--now .life-scene__heading h2 em { color: #587b51; }
.life-now-orbit { gap: 20px; height: min(65vh,630px); }
.life-now-orbit::before { border-color: #8ba57755; }
.life-now-orbit article { color: var(--ink); background: #fffdf2; border: 1px solid #a7b38f40; border-radius: 16px; box-shadow: 0 10px 30px #70845212; }
.life-now-orbit article:nth-child(2) { background: #fff0cb; }
.life-now-orbit article:nth-child(3) { background: #e3eee5; }
.life-now-orbit article:nth-child(4) { background: #f8e6dd; }
.life-now-orbit article::after { background: radial-gradient(circle,#ffd58050,transparent 58%); }
.life-now-orbit article:hover { color: var(--ink); background: #fff7d9; }
.life-now-orbit article span { font: 500 24px/1 var(--hand); text-transform: none; letter-spacing: 0; opacity: .85; }
.life-now-orbit article small { font-size: 12px; text-transform: none; letter-spacing: 0; opacity: .8; }
.life-now-orbit article strong { line-height: 1.15; font-size: clamp(25px,2.3vw,37px); }
.life-scene--stories { background: #fff8ebf0; }
.life-ring__card { background: #fbebca; border: 8px solid #fffdfa; border-radius: 10px; box-shadow: 0 20px 50px #74653822; }
.life-ring__card:nth-child(2) { background: #deeadb; }
.life-ring__card:nth-child(3) { background: #f4ded2; }
.life-ring__card h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; font-size: clamp(36px,3.5vw,55px); }
.life-ring__card > p:first-child, .life-ring__card > b { font-size: 12px; opacity: .8; letter-spacing: 0; text-transform: none; }
.life-ring__card > p:not(:first-child) { color: #535c47; font-size: 16px; }
.life-scene--chapters { color: var(--ink); background: #f6e4b4f5; }
.life-scene--chapters .life-scene__heading h2 em { color: #84723e; }
.life-chapter-grid article::after { border-color: #b48d4d66; }
.life-chapter-grid article:hover { background: #fff7db; color: var(--ink); }
.life-chapter-grid h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.life-chapter-grid span { font: 500 23px/1 var(--hand); text-transform: none; opacity: .85; letter-spacing: 0; }
.life-chapter-grid p { opacity: .86; }
.life-expander { background: #fffaf0; }
.life-scene--photos { color: var(--ink); background: #fff9eff7; }
.life-scene__heading--photos h2 em { color: #65815a; }
.life-scene__heading--photos > p { color: #637052; font-size: 16px; }
.life-scene__heading--photos h2 { font-size: clamp(40px,4.4vw,72px); }
.life-photo-track { top: 58%; }
.life-photo-card img { height: min(34vh,360px); }
.life-photo-card--portrait img { height: min(39vh,420px); }
.life-photo-card { padding: 12px 12px 0; background: #fff; color: #4a5140; border: 1px solid #dedfcc; border-radius: 3px; box-shadow: 0 12px 32px #665c3020; }
.life-photo-card figcaption { grid-template-columns: 1fr; gap: 6px; padding: 14px 5px 20px; }
.life-photo-card figcaption span { font-size: 11px; opacity: .72; }
.life-photo-card figcaption p { font: 500 23px/1.2 var(--hand); }
.life-photo-progress { color: #657454; }
.life-photo-progress > i { background: #88977445; }
.life-photo-progress > i b { background: #8ba568; }
.life-scene--notes { color: var(--ink); background: #f2e6d4f7; }
.life-scene--notes .life-scene__heading h2 em { color: #9c714f; }
.life-note-list li { border-color: #9c987b55; }
.life-note-list p { line-height: 1.25; }
.life-note-list li::after { background: #d6ab6f55; }
.life-work-link { border-color: #8a957c70; }
.life-work-link span { font-size: 12px; opacity: .8; }
.life-footer, .life-footer--cinematic { color: #627055; background: #e8efdd; font-size: 12px; }
.life-scene-meter, .life-scroll-hint { color: #667b55 !important; }
.story-page, .story-hero { background: #fff8e9; }
.story-title { font-family: var(--serif); }
@media (prefers-reduced-motion: reduce) { .life-photo-track { top: auto; } }
html.js body::after { background: #f4e8c8; }
html.js body::before { background: #a8b988; box-shadow: none; }
@media (max-width: 980px) {
  .life-intro__copy h1 { font-size: clamp(62px,8.5vw,100px); }
}
@media (max-width: 780px) {
  .life-header { grid-template-columns: minmax(0,1fr) auto; padding: 12px 16px 0; gap: 10px; }
  .life-brand { grid-column: 1; grid-row: 1; gap: 8px; }
  .life-header .world-switch { grid-column: 2; grid-row: 1; width: max-content; }
  .life-header .world-switch a { padding: 7px 9px; }
  .life-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; padding: 0; }
  .life-intro__copy { min-height: auto; }
  .life-intro__copy h1 { font-size: clamp(64px,19vw,95px); }
  .life-intro__lede { font-size: 16px; }
  .life-coordinate { height: 510px; min-height: 0; }
  .life-brand strong { font-size: 22px; }
  .life-brand small { display: none; }
  .life-now-orbit { height: auto; }
  .life-scene__heading h2 { font-size: clamp(45px,13vw,72px); }
  .life-photo-card { padding: 10px 10px 0; }
  .life-photo-track { top: auto; }
  .life-photo-card img, .life-photo-card--portrait img { height: auto; }
}