@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%; } 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: 100vh; min-height: 100svh; position: relative; display: grid; place-items: center; gap: 0.1rem; padding: 24px 20px 12vh; box-sizing: border-box; } .hero-seed-link { width: 48px; height: 48px; margin-top: 14px; display: grid; place-items: center; touch-action: manipulation; } .hero-seed { display: block; width: 40px; height: 40px; min-width: 40px; 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; } .story-container { position: relative; box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 0 20px 14vh; 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 24vh; padding: 0; } /* 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 { 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; margin: 0 auto; min-width: 48px; min-height: 48px; touch-action: manipulation; } .story-trees-icon { display: block; width: 80px; min-width: 80px; height: 80px; margin: 0 auto; 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 0.8rem; } /* Theme toggle */ .theme-toggle { position: absolute; top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)); 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: 24px; height: 24px; } .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 (max-width: 767px) { :root { --content-width: min(26rem, calc(100vw - 40px)); } .hero { gap: 0; padding: 16px 20px 10vh; } .hero-seed { width: min(12vw, 34px); min-width: 24px; } .hero-intro { width: var(--content-width); max-width: 100%; } .theme-toggle { top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px)); } .story-container { padding: 0 20px 6vh; } .fade-in { width: min(26rem, calc(100vw - 40px)); max-width: 100%; line-height: 1.48; margin-bottom: 18vh; padding: 0; } .story-trees-icon { width: min(24vw, 88px); min-width: 48px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in { transition: none; } }