/* 01 — Constellation Reading at midnight. Dark, immersive, atmospheric. Palette shifts per Part: Night (deep indigo) → Dawn (plum) → Day (warm dusk) → Twilight (sea blue). */ @import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@400;500&display=swap'); :root{ --bg: #0c1426; --bg-soft: #131b32; --ink: #f3ead0; --ink-soft: #c8c0a4; --muted: #7e8aa6; --rule: rgba(243,234,208,.10); --accent: #e8c97a; --measure: 36rem; /* Per-part atmospherics; --part-a/b set on */ --part-a: #0c1426; --part-b: #1a2240; } html[data-part="night"] { --part-a:#0a1024; --part-b:#1a2240; } html[data-part="dawn"] { --part-a:#1d1230; --part-b:#3a223e; } html[data-part="day"] { --part-a:#231832; --part-b:#4a2e3b; } html[data-part="twilight"] { --part-a:#0e1c30; --part-b:#1b3052; } *{box-sizing:border-box} html,body{margin:0;padding:0;color:var(--ink);min-height:100vh} body{ font-family:"Cormorant","Iowan Old Style",Georgia,serif; font-size:20px; line-height:1.55; background: radial-gradient(1200px 800px at 80% -10%, rgba(232,201,122,.08), transparent 60%), radial-gradient(1000px 700px at 10% 110%, rgba(120,140,200,.10), transparent 60%), linear-gradient(180deg, var(--part-a) 0%, var(--part-b) 100%); background-attachment: fixed; font-feature-settings:"kern","liga","onum"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition: background 1200ms ease; } /* Soft star field — pure CSS */ body::before{ content:""; position:fixed;inset:0; background-image: radial-gradient(1px 1px at 12% 18%, rgba(243,234,208,.55), transparent 60%), radial-gradient(1px 1px at 28% 72%, rgba(243,234,208,.40), transparent 60%), radial-gradient(1.5px 1.5px at 65% 22%, rgba(243,234,208,.50), transparent 60%), radial-gradient(1px 1px at 88% 60%, rgba(243,234,208,.35), transparent 60%), radial-gradient(1px 1px at 50% 90%, rgba(243,234,208,.30), transparent 60%), radial-gradient(1.5px 1.5px at 78% 8%, rgba(243,234,208,.45), transparent 60%), radial-gradient(1px 1px at 38% 40%, rgba(243,234,208,.25), transparent 60%); pointer-events:none; z-index:0; opacity:.85; } @media (prefers-reduced-motion: no-preference){ body::before{ animation: twinkle 9s ease-in-out infinite alternate; } @keyframes twinkle{ from{opacity:.6} to{opacity:.95} } } a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(243,234,208,.18);transition:border-color 220ms,color 220ms} a:hover{border-bottom-color:var(--accent);color:var(--accent)} /* page entry */ body { animation: page-enter 1100ms cubic-bezier(.16,1,.3,1) both } @keyframes page-enter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion: reduce){ body{animation:none} } /* nav */ .nav{ position:relative;z-index:2; font-family:"Inter",system-ui,sans-serif; font-size:11px;letter-spacing:.22em;text-transform:uppercase; padding:1.6rem 2rem; display:flex;justify-content:space-between;align-items:center; color:var(--muted); } .nav-mark{ color:var(--ink-soft);border:none;display:inline-flex;align-items:center;gap:.6rem } .nav-mark .star{ width:8px;height:8px;display:inline-block;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent) } .nav-links{ display:flex;gap:2rem } .nav-links a{ border:none;color:var(--muted) } .nav-links a:hover{ color:var(--accent) } .nav-links .is-current{ color:var(--ink) } /* container */ .page{ position:relative;z-index:1;max-width:var(--measure);margin:0 auto;padding:0 1.5rem } /* COVER */ .cover{ position:relative;z-index:1; min-height:calc(100vh - 4rem); display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;padding:3rem 1.5rem 5rem; } .cover .scroll-cue{ position:absolute;left:0;right:0;bottom:1.75rem;text-align:center; font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted); } @media (prefers-reduced-motion: no-preference){ .cover .scroll-cue{ animation: bob 2.6s ease-in-out infinite } @keyframes bob{ 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(8px);opacity:1} } } .cover .title{ font-family:"Cormorant",serif;font-weight:300;font-style:italic; font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.012em; margin:0 0 1rem;max-width:18ch;color:var(--ink); text-shadow: 0 0 36px rgba(232,201,122,.10); } .cover .byline{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted); margin:0 0 3.5rem; } .cover .ded{ font-style:italic;color:var(--ink-soft);margin:3.5rem 0 .35rem;font-size:1.1rem } .cover .dates{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted) } .cover .actions, .act-final .actions{ margin-top:3.5rem;display:flex;flex-direction:column;gap:.65rem;align-items:center } .cover .actions a, .act-final .actions a{ font-family:"Inter",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);border:none;padding:.4rem .25rem } .cover .actions a:hover, .act-final .actions a:hover{ color:var(--accent) } .cover .primary, .act-final .primary{ display:inline-flex;align-items:center;gap:.6rem; border:1px solid rgba(243,234,208,.35) !important; padding:.85rem 1.5rem !important;border-radius:99px; color:var(--ink) !important; } .cover .primary:hover, .act-final .primary:hover{ border-color:var(--accent) !important;color:var(--accent) !important } /* Landing acts (scroll-driven invitation) */ .act{ padding:3.5rem 0 .5rem } .act .kicker{ margin:0 0 1.25rem } .act-title{ font-family:"Cormorant",serif;font-style:italic;font-weight:300; font-size:clamp(2rem,5vw,3rem);line-height:1.15;letter-spacing:-.012em; margin:0 0 1.5rem;color:var(--ink); } .act .lede{ color:var(--ink-soft);font-size:1.15rem;line-height:1.7;margin:0 0 2rem } .act .lift{ font-family:"Cormorant",serif;font-style:italic;font-weight:300; font-size:1.4rem;line-height:1.45;color:var(--accent); border-left:1px solid rgba(232,201,122,.3); padding:.4rem 0 .4rem 1.5rem; margin:2.5rem 0 0; } .act-welcome{ text-align:center;padding:4rem 0 3rem } .act-daria{ text-align:center } .daria-quote{ font-family:"Cormorant",serif;font-style:italic;font-weight:300; font-size:1.4rem;line-height:1.55;color:var(--ink); max-width:32rem;margin:0 auto;padding:0; } .daria-quote p{ margin:0 } .daria-quote cite{ display:block;font-style:normal;font-family:"Inter",system-ui,sans-serif; font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted); margin-top:1.75rem; } .act-final{ text-align:center;padding:4rem 0 6rem } .welcome{ font-family:"Cormorant",serif;font-style:italic;font-weight:300; font-size:clamp(2.6rem,6vw,4rem);line-height:1.1;letter-spacing:-.014em; margin:0 0 .85rem;color:var(--ink);text-shadow:0 0 36px rgba(232,201,122,.10); } .welcome-sub{ font-style:italic;color:var(--ink-soft);font-size:1.2rem;margin:0 } /* opener / TOC */ .opener{ padding:7rem 0 3rem } .kicker{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem } .opener h1{ font-family:"Cormorant",serif;font-style:italic;font-weight:300;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.15;margin:0 0 1rem } .lede{ color:var(--ink-soft);font-size:1.15rem;line-height:1.55;margin:0 0 2rem } .toc{ margin:5rem 0 8rem;padding-top:3rem;border-top:1px solid var(--rule) } .toc-part{ margin-bottom:3rem } .toc-part-title{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;display:flex;align-items:center;gap:.85rem } .toc-part-title::before{ content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent) } .toc-list{ list-style:none;padding:0;margin:0 } .toc-list li{ margin:.4rem 0;font-family:"Cormorant",serif;font-size:1.25rem;font-weight:400 } .toc-list a{ border:none;color:var(--ink) } .toc-list a:hover{ color:var(--accent);font-style:italic } .toc-list .num{ color:var(--muted);font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.18em;margin-right:.85rem;vertical-align:.18em } /* part divider */ .part-divider{ text-align:center;padding:7rem 0 4rem } .part-divider .num{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 1.5rem } .part-divider h2{ font-family:"Cormorant",serif;font-style:italic;font-weight:300;font-size:clamp(2.4rem,5vw,3.4rem);margin:0;color:var(--accent);text-shadow:0 0 36px rgba(232,201,122,.18) } /* poem */ .poem-header{ margin:3rem 0 2.5rem } .poem-title{ font-family:"Cormorant",serif;font-style:italic;font-weight:300;font-size:clamp(2rem,5vw,2.8rem);line-height:1.15;margin:.4rem 0 0;letter-spacing:-.005em } .poem{ margin:0 auto } .poem p{ margin:0 0 .45rem;line-height:1.45;font-size:1.15rem } .poem p.stanza-break{ margin-bottom:1.5rem } .poem .closing{ font-style:italic;color:var(--ink-soft);margin-top:1rem } .epigraph{ font-style:italic;color:var(--ink-soft);font-size:1.05rem;line-height:1.6; margin:2rem auto 3rem;max-width:30rem;border-left:1px solid var(--rule);padding-left:1rem; } .epigraph cite{ display:block;font-style:normal;font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:1rem } /* opening — Part divider + epigraph fill the first viewport on poems that open with an epigraph. The poem begins below the fold; a deliberate scroll separates the framing inscription from the reading. */ .opening{ min-height: calc(100vh - 90px); min-height: calc(100svh - 90px); display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; padding: 2rem 0 5rem; text-align:center; } .opening .part-divider{ padding: 0 0 3rem; } .opening .epigraph{ text-align:center; border-left:none; padding-left:0; max-width:34rem; margin:0 auto; font-size:1.15rem; line-height:1.75; } .opening .epigraph cite{ display:block; text-align:center; margin-top:1.5rem } .scroll-cue{ position:absolute; bottom:2.25rem; left:50%; transform:translateX(-50%); display:inline-flex; flex-direction:column; align-items:center; gap:.7rem; font-family:"Inter",system-ui,sans-serif; font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); opacity:.65; } .scroll-cue .arrow{ width:1px; height:28px; background:linear-gradient(180deg, transparent, var(--muted)); animation: cue-pulse 2.4s ease-in-out infinite; } @keyframes cue-pulse{ 0%,100%{ opacity:.3; transform: translateY(-4px) } 50% { opacity:.85; transform: translateY(2px) } } @media (prefers-reduced-motion: reduce){ .scroll-cue .arrow{ animation:none; opacity:.6 } } .opening + .poem-header{ margin-top: 6rem } .poem-counter{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);text-align:center;margin:5rem 0 0 } /* Bottom navigator (prev / next) */ .nav-arrows{ display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:5rem;border-top:1px solid var(--rule) } .nav-arrows a{ border:none;padding:3.5rem 1.5rem;text-align:left;color:var(--ink-soft);transition:background 240ms,color 240ms } .nav-arrows a:hover{ background:rgba(243,234,208,.04);color:var(--accent) } .nav-arrows a.next{ text-align:right;border-left:1px solid var(--rule) } .nav-arrows .label{ font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem } .nav-arrows .ttl{ font-family:"Cormorant",serif;font-style:italic;font-weight:300;font-size:1.6rem;margin:0;line-height:1.2 } /* About / prose */ .prose{ margin:5rem 0 } .prose h2{ font-family:"Cormorant",serif;font-style:italic;font-weight:300;font-size:1.8rem;margin:0 0 .65rem } .prose p{ margin:0 0 1.1rem;line-height:1.7 } .prose .lift{ font-size:1.2rem;font-style:italic;color:var(--accent);line-height:1.45;margin:2rem 0;border:none } .prose .signoff{ text-align:right;color:var(--muted);font-style:italic } .ornament{ text-align:center;color:var(--muted);letter-spacing:1rem;margin:5rem 0 } /* footer */ .footer{ position:relative;z-index:1;margin-top:8rem;padding:3rem 1.5rem 4rem; border-top:1px solid var(--rule);text-align:center; font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); } .footer a{ color:var(--muted);border:none;margin:0 .85rem } .footer a:hover{ color:var(--accent) } /* On-tap signup — collapsed trigger that expands inline. Lives between page content (or .nav-arrows) and .footer. Injected by signup.js. */ .signup-tap{ position:relative;z-index:1;max-width:30rem;margin:5rem auto 0;padding:0 1.5rem;text-align:center } .signup-tap + .footer{ margin-top:4rem } .signup-tap .signup-trigger{ background:none;border:none;padding:.55rem .25rem;cursor:pointer; font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--muted); display:inline-flex;align-items:baseline;gap:.55rem; transition:color 240ms ease; } .signup-tap .signup-trigger:hover, .signup-tap .signup-trigger:focus-visible{ color:var(--accent) } .signup-tap .signup-trigger:focus-visible{ outline:1px dotted var(--accent);outline-offset:4px } .signup-tap .signup-trigger .arrow{ transition:transform 240ms ease } .signup-tap .signup-trigger:hover .arrow{ transform:translateX(3px) } .signup-tap .signup-form{ display:none;flex-direction:column;align-items:center;gap:1.25rem; animation:signup-fade 480ms cubic-bezier(.16,1,.3,1) both; } .signup-tap[data-state="open"] .signup-trigger{ display:none } .signup-tap[data-state="open"] .signup-form{ display:flex } @keyframes signup-fade{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion: reduce){ .signup-tap .signup-form, .signup-tap .signup-thanks{ animation:none } .signup-tap .signup-trigger .arrow{ transition:none } } .signup-tap .signup-line{ font-family:"Cormorant",serif;font-style:italic;font-weight:300; font-size:1.15rem;color:var(--ink-soft);margin:0;line-height:1.5; } .signup-tap .signup-row{ display:inline-flex;align-items:center;gap:.75rem; width:100%;max-width:22rem; border-bottom:1px solid rgba(243,234,208,.25); padding:.55rem .15rem; transition:border-color 240ms ease; } .signup-tap .signup-row:focus-within{ border-bottom-color:var(--accent) } .signup-tap input[type="email"]{ flex:1;background:transparent;border:none;outline:none;color:var(--ink); font-family:"Inter",system-ui,sans-serif;font-size:13px;letter-spacing:.04em;padding:.25rem 0; } .signup-tap input[type="email"]::placeholder{ color:var(--muted);font-style:normal } .signup-tap .signup-submit{ background:none;border:none;cursor:pointer;color:var(--ink-soft); font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase; padding:.25rem .15rem; transition:color 240ms ease; } .signup-tap .signup-submit:hover, .signup-tap .signup-submit:focus-visible{ color:var(--accent) } .signup-tap .signup-submit:focus-visible{ outline:1px dotted var(--accent);outline-offset:4px } .signup-tap .signup-dismiss{ background:none;border:none;cursor:pointer;color:var(--muted); font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase; padding:.25rem;opacity:.7; transition:opacity 240ms ease,color 240ms ease; } .signup-tap .signup-dismiss:hover, .signup-tap .signup-dismiss:focus-visible{ opacity:1;color:var(--ink-soft) } .signup-tap[data-state="done"] .signup-trigger, .signup-tap[data-state="done"] .signup-form{ display:none } .signup-tap[data-state="done"] .signup-thanks{ display:block } .signup-tap .signup-thanks{ display:none; font-family:"Cormorant",serif;font-style:italic; font-size:1.1rem;color:var(--ink-soft); animation:signup-fade 480ms cubic-bezier(.16,1,.3,1) both; } /* visually hidden (used for the email field's