@font-face { font-family: 'Newsreader'; src: url('../fonts/Newsreader-VariableFont_opsz,wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; } /* Theme via data-theme on — set before paint */ :root, [data-theme="light"] { --content-width: min(42rem, calc(100vw - 56px)); --page-bg: #f6f0e2; --ink: #2f2b25; --icon-fill: #1f1f1f; --icon-fill-hover: #4a4741; --card-bg: rgba(255, 252, 244, 0.72); --card-border: rgba(89, 74, 45, 0.1); --card-shadow: 0 18px 50px rgba(82, 66, 37, 0.08); } [data-theme="dark"] { --page-bg: #1f1a17; --ink: #f2e6d5; --icon-fill: #f2e6d5; --icon-fill-hover: #fff4e6; --card-bg: rgba(43, 35, 30, 0.68); --card-border: rgba(207, 181, 148, 0.18); --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-bg: #1f1a17; --ink: #f2e6d5; --icon-fill: #f2e6d5; --icon-fill-hover: #fff4e6; --card-bg: rgba(43, 35, 30, 0.68); --card-border: rgba(207, 181, 148, 0.18); --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { font-family: 'Newsreader', serif; font-weight: 500; background: var(--page-bg); color: var(--ink); margin: 0; padding: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.3s ease, color 0.3s ease; } .hero { min-height: clamp(30rem, 82vh, 44rem); min-height: clamp(30rem, 82svh, 44rem); position: relative; display: grid; place-items: center; gap: 0.1rem; padding: 24px 20px 8vh; box-sizing: border-box; } .hero-seed-link { width: 68px; height: 68px; padding: 0; margin-top: 14px; border: none; outline: none; appearance: none; -webkit-appearance: none; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; background-color: transparent; border-radius: 999px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } .hero-seed { display: block; width: 60px; height: 60px; min-width: 60px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; color: var(--icon-fill); fill: currentColor; transform: rotate(-21.3deg); transform-origin: center; transform-box: fill-box; transition: transform 0.24s ease, color 0.24s ease; } .hero-intro { width: var(--content-width); max-width: 100%; font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.01em; text-align: left; margin: 0; } .drop-cap { float: left; font-size: clamp(3.3rem, 7.5vw, 5rem); line-height: 0.84; margin: 0.1em 0.16em 0 0; font-weight: 620; } .story-container { position: relative; box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 0 20px 10vh; text-align: center; } /* Default: visible (no-JS fallback) */ .fade-in { opacity: 1; transform: translateY(0); transition: opacity 1s ease-out, transform 1s ease-out; will-change: opacity, transform; width: min(42rem, calc(100vw - 56px)); max-width: 100%; font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.01em; text-align: left; margin: 0 auto clamp(2.75rem, 7vh, 5rem); padding: 0; } .story-container > p.fade-in + p.fade-in { padding-top: clamp(4.5rem, 12vh, 8rem); } .story-container > p.fade-in:last-of-type { margin-bottom: clamp(7rem, 16vh, 12rem); } /* JS-enhanced: hidden until scrolled into view */ .js .fade-in { opacity: 0; transform: translateY(50px); } .js .fade-in.visible { opacity: 1; transform: translateY(0); } /* Story ending never slides */ .story-ending.fade-in, .js .story-ending.fade-in { opacity: 1; transform: none; margin-bottom: 0; } .js .story-ending.fade-in.visible { opacity: 1; transform: none; } .story-ending { margin-bottom: 0; padding: 0.85rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .story-trees-link { display: block; width: fit-content; padding: 0; margin: 0 auto; border: none; outline: none; appearance: none; -webkit-appearance: none; min-width: 48px; min-height: 48px; cursor: pointer; touch-action: manipulation; background-color: transparent; border-radius: 999px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } .hero-seed-link:focus-visible, .story-trees-link:focus-visible { outline: 2px solid var(--icon-fill-hover); outline-offset: 3px; } .story-trees-icon { display: block; width: 96px; min-width: 96px; height: 96px; margin: 0 auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; color: var(--icon-fill); fill: currentColor; transition: transform 0.24s ease, color 0.24s ease; } .site-footer { text-align: center; color: var(--ink); opacity: 0.7; font-size: 0.75rem; padding: 0.15rem 0 calc(1.75rem + env(safe-area-inset-bottom, 0px)); } /* Theme toggle */ .theme-toggle { position: absolute; top: calc(max(14px, calc(env(safe-area-inset-top, 0px) + 8px)) + 2mm); right: calc(50% - (var(--content-width) / 2) + env(safe-area-inset-right, 0px)); z-index: 2; width: 44px; height: 44px; border: none; border-radius: 999px; background: transparent; color: var(--icon-fill); display: grid; place-items: center; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; appearance: none; touch-action: manipulation; transition: background 0.25s ease, color 0.25s ease, transform 0.24s ease; } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle:focus-visible { outline: 2px solid var(--icon-fill-hover); outline-offset: 3px; } /* Icon visibility controlled by data-theme on */ .sun-icon, .moon-icon { display: none; } [data-theme="light"] .moon-icon, [data-theme="dark"] .sun-icon { display: inline; } @media (hover: hover) and (pointer: fine) { .theme-toggle:hover, .story-trees-icon:hover { transform: translateY(-2px); color: var(--icon-fill-hover); } .hero-seed:hover { transform: rotate(-21.3deg) translateY(-2px); color: var(--icon-fill-hover); } } .theme-toggle:active { transform: scale(0.96); } .hero-seed-link:active .hero-seed { transform: rotate(-21.3deg) scale(0.96); color: var(--icon-fill-hover); } .story-trees-link:active .story-trees-icon { transform: scale(0.98); color: var(--icon-fill-hover); } @media (min-width: 1024px) { .hero { min-height: clamp(35rem, 88svh, 50rem); padding: 28px 20px 10vh; } .story-container { padding: 0 20px 8vh; } .fade-in { margin-bottom: clamp(3.75rem, 9vh, 6.75rem); } } @media (max-width: 767px) { :root { --content-width: min(26rem, calc(100vw - 40px)); } .hero { min-height: 100vh; min-height: 100svh; gap: 0; padding: 16px 20px 10vh; } .hero-seed { width: min(16vw, 48px); height: min(16vw, 48px); min-width: 32px; } .hero-intro { width: var(--content-width); max-width: 100%; } .theme-toggle { top: calc(max(10px, calc(env(safe-area-inset-top, 0px) + 6px)) + 2mm); } .story-container { padding: 0 20px 6vh; } .fade-in { width: min(26rem, calc(100vw - 40px)); max-width: 100%; line-height: 1.48; margin-bottom: clamp(2.25rem, 9vh, 4.25rem); padding: 0; } .story-trees-icon { width: 80px; height: 80px; min-width: 80px; } } @media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 520px) { :root { --content-width: min(56rem, calc(100vw - 28px)); } .hero { min-height: clamp(21rem, 100svh, 28rem); padding: 12px 14px 6vh; } .theme-toggle { top: calc(max(8px, calc(env(safe-area-inset-top, 0px) + 4px)) + 2mm); } .hero-intro { width: var(--content-width); } .story-container { max-width: none; padding: 0 14px 7vh; } .fade-in { width: var(--content-width); margin-bottom: clamp(2rem, 8vh, 3.5rem); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in { transition: none; } }