/* Emergence Landing ยท the night layer (2026-09-25). Builds on the shared design system (/assets/system/system.css, served from emergencerising.com's source through an nginx alias). Colours come only from its tokens, so everything follows the sky. Pages: . */ /* ---------- Stars: pin-point light over the night sky (decorative) ---------- */ .stars{position:fixed;top:0;left:0;right:0;height:100lvh;z-index:-1;pointer-events:none; background-image: radial-gradient(1px 1px at 7% 12%,rgba(232,237,242,.85) 50%,transparent 52%), radial-gradient(1px 1px at 23% 41%,rgba(232,237,242,.55) 50%,transparent 52%), radial-gradient(1.4px 1.4px at 38% 8%,rgba(232,237,242,.8) 50%,transparent 52%), radial-gradient(1px 1px at 52% 27%,rgba(232,237,242,.5) 50%,transparent 52%), radial-gradient(1px 1px at 66% 63%,rgba(232,237,242,.6) 50%,transparent 52%), radial-gradient(1.2px 1.2px at 79% 19%,rgba(232,237,242,.75) 50%,transparent 52%), radial-gradient(1px 1px at 91% 47%,rgba(232,237,242,.5) 50%,transparent 52%), radial-gradient(1px 1px at 14% 78%,rgba(232,237,242,.45) 50%,transparent 52%), radial-gradient(1px 1px at 44% 88%,rgba(232,237,242,.4) 50%,transparent 52%), radial-gradient(1.2px 1.2px at 86% 84%,rgba(232,237,242,.55) 50%,transparent 52%); background-size:380px 380px;opacity:.9} .stars::before,.stars::after{content:"";position:absolute;inset:0} .stars::before{background-image: radial-gradient(1.8px 1.8px at 18% 22%,rgba(63,214,200,.8) 50%,transparent 55%), radial-gradient(1.6px 1.6px at 61% 12%,rgba(198,244,50,.7) 50%,transparent 55%), radial-gradient(2px 2px at 83% 58%,rgba(242,180,90,.7) 50%,transparent 55%), radial-gradient(1.6px 1.6px at 34% 71%,rgba(110,123,255,.85) 50%,transparent 55%), radial-gradient(1.4px 1.4px at 72% 90%,rgba(232,237,242,.8) 50%,transparent 55%); background-size:720px 620px} .stars::after{background:radial-gradient(90% 60% at 10% 110%,color-mix(in srgb,var(--aurora) 16%,transparent),transparent 70%)} @media (prefers-reduced-motion:no-preference){ .stars::before{animation:twinkle 7s ease-in-out infinite alternate} } @keyframes twinkle{0%{opacity:.35}60%{opacity:1}100%{opacity:.6}} /* ---------- Header on Landing: a slightly quieter bar, labels only on wide screens ---------- */ .site-head{background:color-mix(in srgb,var(--ground) 58%,transparent)} .brand small{margin-left:.6em;font:600 var(--step--2)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-stretch:100%;font-variation-settings:normal} @media (min-width:1080px) and (max-width:1279px){.daynight .lbl{display:none}} @media (max-width:419px){.brand small{display:none}} .menu-panel .group+a{border-top:0} /* ---------- Headings never break inside a word (the old "BROADCAS/TING" bug) ---------- */ h1,h2,h3{overflow-wrap:normal;word-break:normal;hyphens:manual} /* ---------- Fiction label ---------- */ .fiction{display:inline-flex;align-items:center;gap:.55em;padding:5px 11px;border-radius:var(--r-pill); border:1px solid color-mix(in srgb,var(--aurora) 70%,transparent);background:color-mix(in srgb,var(--aurora) 18%,transparent); font:600 var(--step--2)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .fiction::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aurora);box-shadow:0 0 10px var(--aurora);flex:none} .eyebrow .fiction{color:var(--ink)} /* ---------- Night hero ---------- */ .night-hero{position:relative;padding-block:clamp(40px,6vw,96px) 0;isolation:isolate} .night-hero h1{font-size:clamp(2.7rem,1.4rem + 4.8vw,5.8rem);max-width:none} .night-hero .lede{max-width:46ch} .night-hero.compact{padding-bottom:clamp(8px,2vw,24px)} .night-hero.compact h1{font-size:var(--step-4);max-width:16ch} /* The Signal band: full-bleed, feathered at both ends. */ .signal-band{position:relative;height:clamp(200px,24vw,340px);margin-top:clamp(8px,2vw,24px); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)} .signal-band>.signal{position:absolute;inset:0} .signal-band .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9} .js .signal-band .poster{display:none} .tune{display:none;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)} .js .tune{display:flex} .tune .lbl{font:600 var(--step--2)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .tune-note{min-height:3em;font-size:var(--step--1);color:var(--muted)} .tune-note b{color:var(--ink)} /* ---------- The day, in one line (home) ---------- */ .daystrip{position:relative;display:grid;gap:0;margin:0;padding:0;list-style:none} .daystrip::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:3px;border-radius:3px; background:linear-gradient(180deg,#F4DDCB 0%,#F5E7DC 14%,#F7F9F9 30%,#F5F4F1 46%,#F4F2ED 58%,#F1C7A2 72%,#6E7BFF 88%,#1B2250 100%)} .daystrip li{position:relative;max-width:none} .daystrip a,.daystrip .here{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-content:center;min-height:64px;padding:10px 12px 10px 40px; border-radius:var(--r-m);color:var(--ink);text-decoration:none} .daystrip a:hover{background:var(--surface)} .daystrip a::before,.daystrip .here::before{content:"";position:absolute;left:4px;top:50%;width:17px;height:17px;margin-top:-8.5px;border-radius:50%; background:var(--c);border:2px solid var(--ground);box-shadow:0 0 0 1px var(--line)} .daystrip .t{grid-row:span 2;font:600 var(--step--1)/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);padding-top:2px} .daystrip b{font:700 var(--step-0)/1.25 var(--body)} .daystrip span:not(.t){font-size:var(--step--1);color:var(--muted);line-height:1.4} .daystrip .here{background:var(--lift);border:1px solid var(--line)} .daystrip .here::before{box-shadow:0 0 0 1px var(--line),0 0 18px 2px color-mix(in srgb,var(--aurora) 80%,transparent)} .daystrip .here .t,.daystrip .here span:not(.t){color:var(--ink)} @media (min-width:980px){ .daystrip{grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2)} .daystrip::before{left:14px;right:14px;top:21px;bottom:auto;width:auto;height:3px; background:linear-gradient(90deg,#F4DDCB 0%,#F5E7DC 14%,#F7F9F9 30%,#F5F4F1 46%,#F4F2ED 58%,#F1C7A2 72%,#6E7BFF 88%,#1B2250 100%)} .daystrip a,.daystrip .here{grid-template-columns:1fr;align-content:start;min-height:150px;padding:44px 12px 14px} .daystrip a::before,.daystrip .here::before{left:12px;top:14px;margin-top:0} .daystrip .t{grid-row:auto;padding-top:0} } /* ---------- Doors (cards with a picture) ---------- */ .doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--space-4)} .door{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line); background:var(--surface);color:var(--ink);text-decoration:none; transition:transform var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)} .door:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--teal) 55%,transparent);box-shadow:var(--shadow-lift)} .door .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--night-2)} .door .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)} .door:hover .pic img{transform:scale(1.04)} .door .pic .fiction{position:absolute;left:12px;top:12px;background:color-mix(in srgb,var(--night) 72%,transparent);color:var(--starlight)} .door .t{display:grid;gap:6px;align-content:start;padding:18px 20px 22px} .door h3{font-size:var(--step-1)} .door p{font-size:var(--step--1);color:var(--muted);line-height:1.5} .door .go{margin-top:4px;font:600 var(--step--2)/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--signal-ink)} /* ---------- Two columns: fiction and fact ---------- */ .ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--space-4)} .ledger>div{display:grid;gap:var(--space-3);align-content:start;padding:clamp(20px,3vw,30px);border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface)} .ledger ul{display:grid;gap:8px;margin:0;padding-left:1.1em;font-size:var(--step--1)} /* ---------- Chapters (universe) ---------- */ .chapters{display:grid;gap:clamp(56px,8vw,112px)} .chapter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(24px,4vw,56px);align-items:start} .chapter .body{display:grid;gap:1em} .chapter .body h3{margin-top:.6em} .chapter figure{margin:0;display:grid;gap:10px} .chapter figure img{width:100%;border-radius:var(--r-l);border:1px solid var(--line)} .chapter figcaption{font:400 var(--step--2)/1.5 var(--mono);color:var(--muted)} .num{font:600 var(--step--1)/1 var(--mono);letter-spacing:.08em;color:var(--teal-ink)} .pull{margin:0;padding-left:18px;border-left:3px solid;border-image:linear-gradient(180deg,var(--teal),var(--lime),var(--amber)) 1; font:italic 400 var(--step-2)/1.35 var(--body);max-width:30ch;text-wrap:balance} .pull cite{display:block;margin-top:10px;font:600 var(--step--2)/1.3 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* ---------- Steps (numbered, horizontal on wide screens) ---------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:s} .steps>li{display:grid;gap:8px;align-content:start;max-width:none;padding:22px 22px 24px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--lift);counter-increment:s} .steps>li::before{content:"0" counter(s);font:600 var(--step--1)/1 var(--mono);letter-spacing:.08em;color:var(--teal-ink)} .steps h3{font-size:var(--step-1)} .steps p{font-size:var(--step--1);color:var(--muted)} .steps .actions{margin-top:6px} /* ---------- Story: poster frame ---------- */ .film .frame{box-shadow:0 40px 120px -40px color-mix(in srgb,var(--aurora) 45%,transparent)} .film .soon{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--night) 78%,transparent);border:1px solid color-mix(in srgb,var(--starlight) 22%,transparent);color:var(--starlight);font:600 var(--step--2)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase} .film .soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)} .scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-3);margin:0;padding:0;list-style:none} .scenes li{display:grid;gap:6px;align-content:start;max-width:none;padding:18px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface)} .scenes .n{font:600 var(--step--2)/1 var(--mono);letter-spacing:.08em;color:var(--teal-ink)} .scenes b{font:700 var(--step-1)/1.2 var(--display);font-variation-settings:"wdth" var(--wdth-title);font-stretch:112%} .scenes p{font-size:var(--step--1);color:var(--muted)} /* ---------- Letter (Founder's Note) ---------- */ .letter{display:grid;gap:1em;max-width:62ch;font-size:var(--step-1);line-height:1.6} .letter p{max-width:none} .letter .sig{margin-top:.6em;display:grid;gap:2px} .letter .sig b{font:800 var(--step-2)/1.1 var(--display);font-variation-settings:"wdth" var(--wdth-display);font-stretch:118%} .letter .sig span{font:400 var(--step--1)/1.5 var(--mono);color:var(--muted)} /* ---------- Product links back to the day ---------- */ .dayline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-3);margin:0;padding:0;list-style:none} .dayline li{max-width:none} .dayline a{display:grid;gap:4px;min-height:44px;padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none} .dayline a:hover{background:var(--lift);border-color:color-mix(in srgb,var(--amber) 55%,transparent)} .dayline b{font:700 var(--step-0)/1.25 var(--body)} .dayline span{font-size:var(--step--1);color:var(--muted);line-height:1.4} .dayline .t{font:600 var(--step--2)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* ---------- Status pill (models) ---------- */ .status{display:inline-flex;align-items:center;gap:.5em;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--lift); font:600 var(--step--2)/1.2 var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap} .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)} .spec{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:0;margin:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)} .spec dt,.spec dd{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--step--1)} .spec dt{font:600 var(--step--2)/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .spec dt:first-of-type,.spec dt:first-of-type+dd{border-top:0} @media (max-width:560px){.spec{grid-template-columns:1fr}.spec dd{border-top:0;padding-top:0}} /* ---------- Nightfall: the motto closes the site ---------- */ .nightfall{padding-block:clamp(96px,16vw,220px) clamp(72px,10vw,140px)} .nightfall .motto{font-weight:400;color:var(--muted);max-width:34ch} .nightfall .motto-night{margin-top:var(--space-4);font-size:clamp(2.5rem,1.4rem + 5vw,6rem);max-width:13ch;color:var(--lime)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .nightfall .motto-night{background:linear-gradient(95deg,var(--teal) 0%,var(--lime) 52%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} } @media (forced-colors:active){.nightfall .motto-night{background:none;color:CanvasText}} /* ---------- Footer map ---------- */ .site-foot .map{display:flex;flex-wrap:wrap;gap:0 var(--space-2)} .site-foot .map a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:-8px;color:var(--ink);font-weight:400} .site-foot .motto-night{color:var(--ink)} /* ---------- Section rhythm ---------- */ .section.tight{padding-block:clamp(40px,6vw,80px)} .lead-in{display:grid;gap:var(--space-3);margin-bottom:clamp(24px,4vw,40px)} .lead-in p{color:var(--muted);max-width:56ch} .center-note{font-size:var(--step--1);color:var(--muted)} ul.facts{padding:0;list-style:none} .facts>li{max-width:none} /* Narrow phones: the day clock gives way so the menu button always fits. */ @media (max-width:419px){.site-head .clock{display:none}} .facts.rows{grid-template-columns:1fr} .steps.rows{grid-template-columns:1fr}.steps.rows>li{padding:16px 20px 18px} .models{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none} .models li{max-width:none} .model{display:grid;gap:8px;padding:20px 22px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none} .model:hover{background:var(--lift);border-color:color-mix(in srgb,var(--teal) 55%,transparent)} .model .top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .model b{font:780 var(--step-2)/1.1 var(--display);font-variation-settings:"wdth" var(--wdth-title);font-stretch:112%} .model .go{font:600 var(--step--2)/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--signal-ink)} .site-foot .map{gap:0 18px} .site-foot .map a+a::before{content:none} /* Tap targets: the shared day/night switch is 38px tall; on Landing it meets 44px. */ .daynight a{min-height:44px} .toc a{display:inline-flex;align-items:center;min-height:44px;padding:0} .note p{max-width:none}