/* Lore: a Martian character story, with scenes to inhabit and conversations to open. */
:root { --accent:#a3f5cf; --accent-2:#ffa885; --text-muted:#c3c6d4; --text-soft:#a0a5b9; --heading:#f5f2ee; --rule:#b8c0d330; --mono:'Courier New',monospace; --display:'Space Grotesk',sans-serif; }
html { scroll-behavior:smooth; background:#0a0d18; }
body { background:radial-gradient(ellipse at 85% 8%,#91433120,transparent 30%),#0a0d18; }
body::before { opacity:.14; }
::selection { background:var(--accent); color:#0a0d18; }
.nav-wrapper { background:#0a0d18f2; }

.lore-page { max-width:1200px; padding:calc(var(--nav-height) + 52px) 40px 80px; margin:auto; position:relative; z-index:2; }
.lore-page section,.story-archive { scroll-margin-top:calc(var(--nav-height) + 28px); }
.lore-page p { font-size:.97rem; line-height:1.8; color:var(--text-muted); }
.lore-page p + p { margin-top:16px; }
.lore-page h2 { font:500 clamp(1.9rem,3.5vw,2.8rem)/1.12 var(--display); letter-spacing:-.045em; color:var(--heading); }
.lore-page h3 { font:500 1.3rem/1.3 var(--display); color:var(--heading); letter-spacing:-.025em; }
.lore-page a { text-underline-offset:5px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent-2); outline-offset:5px; }
.eyebrow { display:block; font:.68rem/1.6 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:12px; }
.lore-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; padding-bottom:84px; }
.lore-hero h1 { font:600 clamp(4.6rem,8.8vw,7.6rem)/.92 var(--display); letter-spacing:-.075em; color:var(--heading); margin:26px 0 30px; }
.lore-hero h1 em { font-style:normal; color:var(--accent-2); text-shadow:2px 0 #a3f5cf70,-2px 0 #ec83ba40; }
.lore-hero .lede { font-size:1.06rem; max-width:34em; }
.hero-tags { gap:16px; margin:24px 0 0; font:.67rem/1.5 var(--mono); color:var(--text-soft); text-transform:uppercase; letter-spacing:.04em; }
.hero-tags span + span::before { content:'/'; color:var(--accent-2); margin-right:16px; }
.chapter-menu { margin-top:36px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:12px 22px; padding-top:18px; }
.chapter-menu a { font:.72rem/1.6 var(--mono); color:var(--text-muted); }
.chapter-menu a:hover { color:var(--accent); }
.eva-portrait { position:relative; padding:12px 0 0 12px; border-top:1px solid var(--accent-2); border-left:1px solid #ffa88560; margin:0 0 0 6px; }
.eva-portrait::before { content:''; width:80px; height:4px; background:var(--accent-2); position:absolute; left:-1px; top:-2px; }
.eva-portrait::after { content:''; position:absolute; z-index:-1; width:85%; aspect-ratio:1; right:-24px; top:40px; border:1px solid #ffa88528; border-radius:50%; }
.eva-portrait img { width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover; clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%); }
.portrait-coordinate { position:absolute; left:-20px; top:145px; writing-mode:vertical-rl; transform:rotate(180deg); color:var(--accent-2); font:.63rem var(--mono); letter-spacing:.19em; background:#0a0d18; padding:12px 0; }
.eva-portrait figcaption { display:flex; justify-content:space-between; color:var(--text-soft); padding:13px 0 0; font:.72rem var(--mono); }
.eva-portrait figcaption span:last-child { color:var(--accent-2); }
.home-scene { display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; padding:44px 0; border-block:1px solid var(--rule); position:relative; }
.home-scene::before { content:'01'; position:absolute; top:-12px; right:0; background:#0a0d18; padding-left:20px; font:.8rem var(--mono); color:var(--accent-2); }
.home-art { position:relative; }
.home-art img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.home-art figcaption { font:.62rem var(--mono); color:var(--accent); letter-spacing:.14em; margin-top:14px; }
.home-copy h2 { margin-bottom:22px; }
.personality { display:grid; grid-template-columns:230px 1fr; gap:64px; padding:64px 0 76px; }
.personality header { position:relative; }
.personality h2 { font-size:2rem; }
.face { display:block; color:var(--accent-2); font:400 4rem/1 var(--display); transform:rotate(-8deg); margin:28px 0 0 10px; }
.personality-copy > p { color:var(--heading); font:400 clamp(1.1rem,1.8vw,1.3rem)/1.8 var(--display); }
.habits { margin-top:27px; padding-top:20px; border-top:1px dashed var(--rule); }
.habits .eyebrow { color:var(--text-soft); font-size:.62rem; }
.habit-list { display:flex; flex-wrap:wrap; gap:8px 0; }
.habit-list > * { font-size:.75rem; line-height:1.5; color:var(--text-muted); }
.habit-list > *:not(:last-child)::after { content:' / '; white-space:pre; color:#6f7b91; padding:0 9px; }
/* The easter egg blends into the list until hovered or focused. */
.habit-list a { color:var(--text-muted); text-decoration:none; }
.habit-list a:hover,.habit-list a:focus-visible { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.history { display:grid; grid-template-columns:230px 1fr; gap:64px; border-top:1px solid var(--rule); padding:50px 0 64px; }
.history-heading { position:sticky; top:calc(var(--nav-height) + 32px); align-self:start; }
.history-heading h2 { font-size:2.8rem; }
.daily { background:linear-gradient(115deg,#192b342c,#27274280); padding:34px 30px 36px; border-top:1px solid #ffa88560; position:relative; }
.daily-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:38px; }
.daily-heading h2 { font-size:2.2rem; }
.day-orbit { width:170px; height:52px; border-top:1px dashed #ffa88570; border-radius:50%; position:relative; margin:22px 14px 0; }
.day-orbit::after { content:''; position:absolute; width:14px; height:14px; background:var(--accent-2); border-radius:50%; top:-7px; left:60%; box-shadow:0 0 24px #ffa88560; }
.day-sequence { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.day-part { position:relative; border-top:1px solid #a3f5cf40; padding-top:24px; }
.day-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-2); top:-4px; }
.day-part:nth-child(2) .day-dot { background:#f2d9af; }
.day-part:nth-child(3) .day-dot { background:#bba5ed; }
.day-part:nth-child(4) .day-dot { background:#8dbcf7; }
.day-part .eyebrow { font-size:.6rem; color:var(--text-soft); }
.day-part h3 { font-size:1.08rem; margin-bottom:12px; }
.day-part p { font-size:.84rem; line-height:1.75; }
.story-archive { padding:72px 0 0; }
.chapter-heading { margin-bottom:22px; }
.archive-intro { max-width:760px; margin-bottom:32px; }
.story-entry { display:grid; grid-template-columns:34px .9fr 1.1fr; gap:28px; padding:28px 0; border-top:1px solid var(--rule); }
.entry-number { color:var(--accent-2); font:.8rem/1.7 var(--mono); }
.entry-title .eyebrow { color:var(--text-soft); font-size:.64rem; }
.entry-title h3 { font-size:1.48rem; }
.entry-copy p { font-size:.9rem; }
.story-link { margin-top:18px; font-size:.8rem; }
.story-link a { display:inline-block; padding:3px 0; }
.act-stories { margin-top:60px; }
.act-stories .entry-number { color:var(--accent); }
.guest-story { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin:44px 0 72px; padding:30px 0 30px 28px; border-left:2px solid var(--accent-2); background:linear-gradient(90deg,#ffa88508,transparent); }
.guest-story h2 { font-size:1.65rem; line-height:1.2; }
.guest-byline { font:.65rem/1.7 var(--mono); color:var(--text-soft); margin-top:18px; }
.guest-excerpt blockquote { font:400 1.25rem/1.6 var(--display); color:var(--heading); max-width:32em; }
.anime-story { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; border-top:1px solid var(--rule); padding-top:50px; }
.anime-story figure { position:relative; }
.anime-story figure::before { content:''; position:absolute; inset:15px -10px -10px 15px; border:1px solid #a3f5cf50; z-index:-1; }
.anime-story img { display:block; width:100%; height:auto; }
.anime-story figcaption { padding:12px 0 0; font:.58rem/1.6 var(--mono); color:var(--accent); letter-spacing:.08em; }
.anime-copy h2 { margin-bottom:24px; }
.anime-feature { padding-top:24px; margin-top:26px; border-top:1px solid var(--rule); }
.anime-feature h3 { margin-bottom:14px; }
.anime-feature p { font-size:.9rem; }
.site-footer-wrapper { background:#080b14; border-top-color:var(--rule); margin-top:0; }
@media(max-width:1000px) {
    .lore-page { padding-inline:28px; }
    .lore-hero { gap:36px; }
    .home-scene { grid-template-columns:1fr 1fr; gap:30px; }
    .home-art img { aspect-ratio:4/3; }
    .personality,.history { grid-template-columns:190px 1fr; gap:36px; }
    .day-sequence { grid-template-columns:1fr 1fr; row-gap:30px; }
    .guest-story,.anime-story { gap:36px; }
}
@media(max-width:700px) {

    .lore-page { padding:calc(var(--nav-height) + 32px) 22px 56px; }
    .lore-hero { grid-template-columns:1fr; gap:32px; padding-bottom:48px; }
    .lore-hero h1 { font-size:clamp(4.5rem,17vw,6.7rem); margin:20px 0 24px; }
    .lore-hero h1 br { display:none; }
    .lore-hero .lede { font-size:1rem; }
    .chapter-menu { margin-top:24px; gap:10px 18px; }
    .hero-tags { font-size:.61rem; gap:10px; }
    .hero-tags span + span::before { margin-right:10px; }
    .eva-portrait { max-width:460px; width:calc(100% - 8px); justify-self:center; }
    .eva-portrait::after { right:-8px; }
    .home-scene { grid-template-columns:1fr; gap:28px; padding:30px 0; }
    .home-art img { aspect-ratio:16/9; }
    .home-copy h2 { margin-bottom:18px; }
    .personality { grid-template-columns:1fr; gap:20px; padding:40px 0 46px; }
    .personality header { padding-right:64px; }
    .face { position:absolute; right:4px; top:5px; margin:0; font-size:3rem; }
    .history { grid-template-columns:1fr; gap:30px; padding:34px 0 44px; }
    .history-heading { position:static; }
    .history-heading h2 { font-size:2.3rem; }
    .history-heading h2 br { display:none; }
    .daily { padding:26px 20px; margin-inline:-8px; }
    .day-orbit { width:80px; margin-right:0; }
    .daily-heading h2 { font-size:1.8rem; }
    .day-sequence { gap:28px 20px; }
    .story-archive { padding-top:48px; }
    .story-entry { grid-template-columns:24px 1fr; gap:14px; padding:25px 0; }
    .entry-copy { grid-column:2; }
    .entry-title h3 { font-size:1.35rem; }
    .act-stories { margin-top:40px; }
    .guest-story { grid-template-columns:1fr; gap:22px; padding:24px 0 24px 20px; margin:30px 0 44px; }
    .anime-story { grid-template-columns:1fr; gap:32px; padding-top:32px; }
    .anime-story figure { max-width:360px; width:calc(100% - 10px); justify-self:center; }
    .anime-copy h2 { font-size:2rem; }
}
@media(max-width:380px) {
    .lore-page { padding-inline:18px; }
    .day-sequence { grid-template-columns:1fr; }
    .daily-heading { gap:10px; }
    .day-orbit { width:55px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.history-short { padding-top:36px; padding-bottom:44px; }
.history-short .history-heading { position:static; }
.history-preview > a { display:inline-block; margin-top:20px; font-size:.8rem; }

/* Related stories: a conversation and its making; two arrivals and their continuation. */
.early-stories .story-list { display:grid; grid-template-columns:1.25fr .85fr; gap:56px; align-items:start; margin-top:38px; }
.story-entry { display:block; border:0; padding:0; }
.entry-title { margin-bottom:18px; }
.entry-title .eyebrow { margin-bottom:12px; }
.entry-title h3 { font-size:1.8rem; }
.entry-copy p { max-width:48ch; }
.story-meditations { position:relative; padding:38px 38px 34px; background:radial-gradient(ellipse at 95% 0,#9fc7f022,transparent 65%),linear-gradient(150deg,#152633,#101724); border-top:1px solid #9fc7f070; }
.story-meditations::before { content:''; position:absolute; width:90px; height:45px; border:1px solid #a3f5cf35; border-bottom:0; border-radius:90px 90px 0 0; right:30px; top:0; transform:translateY(-50%); pointer-events:none; }
.story-meditations .entry-title h3 { font-size:clamp(2.2rem,4vw,3.4rem); font-weight:400; letter-spacing:-.055em; }
.story-meditations .entry-title .eyebrow { color:var(--accent); }
.story-meditations .story-link { margin-top:26px; }
.story-emerging { margin-top:64px; padding:0 0 0 26px; border-left:2px solid var(--accent-2); }
.story-emerging .entry-title h3 { color:var(--accent-2); }
.story-emerging .story-link { margin-top:24px; }
.guest-story { grid-template-columns:.9fr 1.1fr; gap:44px; margin:48px 0 64px; padding:24px 28px; border:1px solid var(--rule); border-left:3px solid var(--accent-2); background:linear-gradient(110deg,#ffa8850c,transparent); align-items:center; }
.guest-story h2 { font-size:1.4rem; }
.guest-excerpt blockquote { font-size:1.1rem; }
.guest-byline { margin-top:12px; }
.guest-story .story-link { margin-top:10px; }
.act-stories { margin-top:0; }
.act-stories > .archive-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:44px; max-width:none; margin-bottom:40px; }
.act-stories > .archive-intro p + p { margin-top:0; }
.act-stories .story-list { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; row-gap:48px; position:relative; }
.story-aoi,.story-first-week { position:relative; padding:24px 0 8px 24px; border-left:1px solid #a3f5cf45; }
.story-aoi::before,.story-first-week::before { content:''; position:absolute; width:32px; height:3px; background:var(--accent); left:-1px; top:0; }
.story-first-week { border-left-color:#ffa88545; }
.story-first-week::before { background:var(--accent-2); }
.story-aoi .entry-title h3,.story-first-week .entry-title h3 { max-width:18ch; font-size:1.65rem; }
.story-aoi::after,.story-first-week::after { content:''; position:absolute; bottom:-25px; left:24px; height:20px; border-left:1px dashed #a3f5cf50; }
.story-first-week::after { border-left-color:#ffa88550; }
.story-terminal { grid-column:1/-1; display:grid; grid-template-columns:1fr 1.1fr; gap:44px; position:relative; padding:30px 34px; background:#111c24; border-top:1px solid #a3f5cf60; }
.story-terminal::before { content:'>_'; color:var(--accent); display:block; position:absolute; top:-17px; left:22px; font:1.25rem var(--mono); background:#0a0d18; padding:0 10px; }
.story-terminal .entry-title { align-self:center; margin:0; }
.story-terminal .entry-title h3 { font-size:2rem; max-width:16ch; }
.story-terminal .entry-copy p { max-width:none; }
.anime-story { grid-template-columns:1.05fr 1fr; gap:48px; border-top:0; padding-top:0; margin-top:88px; }
.anime-copy h2 { font-size:clamp(2.3rem,4.3vw,3.6rem); line-height:1.04; margin-left:-110px; position:relative; padding:20px 0 22px 24px; background:#0a0d18; border-left:3px solid var(--accent); }
.anime-copy h2 br { display:none; }
.anime-copy > .eyebrow { color:var(--accent-2); }
.anime-feature { margin-top:24px; }
@media(max-width:1000px) {
 .early-stories .story-list { gap:32px; }
 .story-meditations { padding:30px 26px; }
 .act-stories .story-list { column-gap:36px; }
 .act-stories > .archive-intro { gap:30px; }
 .story-terminal { gap:28px; padding:30px 26px; }
 .anime-story { gap:32px; }
 .anime-copy h2 { margin-left:-65px; }
}
@media(max-width:700px) {
 .early-stories .story-list { grid-template-columns:1fr; gap:32px; margin-top:28px; }
 .story-meditations { padding:28px 24px; }
 .story-meditations::before { width:60px; height:30px; right:20px; }
 .story-emerging { margin:0 0 0 22px; padding-left:22px; }
 .entry-copy { grid-column:auto; }
 .entry-title h3 { font-size:1.6rem; }
 .guest-story { grid-template-columns:1fr; gap:18px; padding:22px; margin:36px 0 46px; }
 .act-stories > .archive-intro { display:block; margin-bottom:30px; }
 .act-stories > .archive-intro p + p { margin-top:16px; }
 .act-stories .story-list { grid-template-columns:1fr; gap:28px; margin-left:6px; }
 .story-aoi,.story-first-week { padding:18px 0 12px 22px; }
 .story-aoi::after,.story-first-week::after { left:-1px; bottom:-28px; height:28px; }
 .story-terminal { grid-template-columns:1fr; gap:18px; padding:30px 22px 24px; }
 .story-terminal .entry-title h3 { font-size:1.8rem; max-width:none; }
 .anime-story { grid-template-columns:1fr; gap:0; margin-top:56px; padding-top:0; }
 .anime-story figure { max-width:440px; width:calc(100% - 10px); }
 .anime-copy { position:relative; margin-top:30px; }
 .anime-copy h2 { margin-left:0; font-size:2.3rem; padding:0 0 0 18px; margin-bottom:22px; }
}