/* ===================================================================== APPS BY MO - design system "Night Studio" Dark-first celestial theme. Five apps, five stars, one sky. Fonts are self-hosted in /assets/fonts (no external requests). ===================================================================== */ @font-face{ font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } /* --------------------------------------------------------------------- Tokens. Each app page overrides --accent-h (accent hue) and --sky-h (aurora hue) on to get its own lighting. --------------------------------------------------------------------- */ :root{ --accent-h:243; --accent-s:92%; --accent-l:74%; --sky-h:250; --accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-soft:hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .16); --accent-line:hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .38); --bg:#07080f; --bg-2:#0b0d1a; --text:#e8e9f4; --muted:#a7aac2; --faint:#6d7190; --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.055); --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055); --glass-blur:22px; --shadow:0 24px 70px rgba(0,0,0,.5); --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif; --serif:'Instrument Serif',Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --wrap:1120px; --r-lg:24px; --r-md:18px; --r-sm:12px; } html[data-theme="light"]{ --bg:#f1f2f9; --bg-2:#e9eaf5; --text:#181a2e; --muted:#4d5170; --faint:#8386a3; --panel:rgba(24,26,66,.045); --panel-2:rgba(24,26,66,.07); --line:rgba(24,26,66,.14); --line-soft:rgba(24,26,66,.08); --shadow:0 20px 50px rgba(30,32,80,.14); --accent-l:46%; } *{box-sizing:border-box} [hidden]{display:none!important} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* Aurora wash, hue set per page */ body::before{ content:""; position:fixed; inset:-20% -10%; z-index:-2; pointer-events:none; background: radial-gradient(52% 44% at 18% 6%, hsl(var(--sky-h) 90% 60% / .17), transparent 62%), radial-gradient(46% 40% at 86% 16%, hsl(calc(var(--sky-h) + 46) 85% 62% / .12), transparent 60%), radial-gradient(60% 52% at 50% 108%, hsl(var(--accent-h) 80% 55% / .10), transparent 62%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); animation:aurora 26s ease-in-out infinite alternate; } @keyframes aurora{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(2.5%,1.5%,0) scale(1.06)} } html[data-theme="light"] body::before{ background: radial-gradient(52% 44% at 18% 4%, hsl(var(--sky-h) 95% 78% / .34), transparent 62%), radial-gradient(46% 40% at 86% 14%, hsl(calc(var(--sky-h) + 46) 90% 80% / .28), transparent 60%), radial-gradient(60% 52% at 50% 108%, hsl(var(--accent-h) 85% 74% / .22), transparent 62%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } /* Fine grain so gradients never band */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } html[data-theme="light"] body::after{opacity:.035} /* Star canvas, painted by theme.js. Hidden in light theme. */ #sky{position:fixed; inset:0; z-index:-1; pointer-events:none} html[data-theme="light"] #sky{display:none} ::selection{background:hsl(var(--accent-h) 90% 60% / .32)} a{color:var(--text); text-underline-offset:3px; text-decoration-thickness:1px} a:hover{color:var(--accent)} :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.2rem,4vw,2rem)} .skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#0a0a14; padding:.55rem 1rem; border-radius:0 0 10px 0; z-index:60; text-decoration:none; font-weight:600; font-size:.9rem} .skip:focus{left:0} /* --------------------------------------------------------------------- Navigation: floating glass bar --------------------------------------------------------------------- */ .nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s,border-color .3s,backdrop-filter .3s} .nav.scrolled{background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); border-bottom:1px solid var(--line-soft)} .nav-inner{max-width:var(--wrap); margin:0 auto; padding:.95rem clamp(1.2rem,4vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem} .wordmark{font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:.01em; text-decoration:none; color:var(--text); display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap} .wordmark:hover{color:var(--text)} .wordmark .mark{width:22px; height:22px; flex:none; color:var(--accent); filter:drop-shadow(0 0 8px var(--accent-soft))} .nav-links{display:flex; align-items:center; gap:1.35rem; font-size:.92rem} .nav-links a{color:var(--muted); text-decoration:none; transition:color .2s} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)} .theme-toggle{appearance:none; background:var(--panel); border:1px solid var(--line); color:var(--muted); width:36px; height:36px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:color .2s,border-color .2s,transform .2s} .theme-toggle:hover{color:var(--text); border-color:var(--accent-line); transform:rotate(15deg)} .theme-toggle svg{width:16px; height:16px} .theme-toggle .moon{display:none} html[data-theme="dark"] .theme-toggle .sun{display:none} html[data-theme="dark"] .theme-toggle .moon{display:inline} /* --------------------------------------------------------------------- Buttons and chips --------------------------------------------------------------------- */ .btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-size:.98rem; font-weight:600; letter-spacing:.01em; line-height:1; color:#0b0b16; background:linear-gradient(180deg, hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 6%)), var(--accent)); border:1px solid hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .7); padding:.85rem 1.35rem; border-radius:999px; text-decoration:none; box-shadow:0 6px 26px hsl(var(--accent-h) 90% 55% / .34), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .22s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s} .btn:hover{transform:translateY(-2px); color:#0b0b16; box-shadow:0 12px 36px hsl(var(--accent-h) 90% 55% / .46), inset 0 1px 0 rgba(255,255,255,.35)} .btn:active{transform:translateY(0)} html[data-theme="light"] .btn{color:#fff; border-color:hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%)); box-shadow:0 6px 22px hsl(var(--accent-h) 80% 40% / .3), inset 0 1px 0 rgba(255,255,255,.22)} html[data-theme="light"] .btn:hover{color:#fff} .btn-ghost{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-size:.98rem; font-weight:600; line-height:1; color:var(--text); background:var(--panel); border:1px solid var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:.85rem 1.35rem; border-radius:999px; text-decoration:none; transition:border-color .2s, background .2s, transform .22s} .btn-ghost:hover{border-color:var(--accent-line); background:var(--panel-2); color:var(--text); transform:translateY(-2px)} .chip{font-size:.8rem; font-weight:500; padding:.34rem .8rem; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--muted); display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap} .chip .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; box-shadow:0 0 0 0 var(--accent-soft); animation:pulse 2.6s ease-out infinite} @keyframes pulse{ 0%{box-shadow:0 0 0 0 hsl(var(--accent-h) 90% 60% / .45)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} } .chip-accent{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)} /* --------------------------------------------------------------------- Type --------------------------------------------------------------------- */ h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0} .serif-a{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; color:var(--accent); text-shadow:0 0 26px var(--accent-soft)} .kicker{font-family:var(--display); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--accent); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem} .kicker::after{content:""; height:1px; width:56px; background:linear-gradient(90deg, var(--accent-line), transparent)} /* Reveal on scroll */ .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)} .reveal.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} body::before,.chip .dot,.node,.node img{animation:none!important} *{transition-duration:.01ms!important} } /* --------------------------------------------------------------------- HOME: hero + constellation --------------------------------------------------------------------- */ .hero-home{min-height:92vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(1.5rem,4vw,3rem); padding-top:6.5rem; padding-bottom:3rem} .hero-copy h1{font-size:clamp(2.5rem,5.6vw,4.3rem); margin:0 0 1.4rem} .hero-copy .lede{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted); max-width:34em; margin:0 0 2.1rem; line-height:1.75} .hero-copy .lede strong{color:var(--text); font-weight:600} .cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem} .hero-note{margin:1.6rem 0 0; font-size:.88rem; color:var(--faint)} .hero-note a{color:var(--muted)} /* Constellation panel */ .constellation{position:relative; aspect-ratio:1/1.04; max-width:520px; margin-left:auto; width:100%} .constellation svg.lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible} .constellation svg.lines path{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 7; animation:constel 60s linear infinite} @keyframes constel{to{stroke-dashoffset:-600}} .sky-label{position:absolute; top:-3.4rem; left:0; right:0; margin:0; text-align:center; z-index:1; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.6rem); color:var(--text); display:flex; align-items:center; justify-content:center; gap:.55rem; text-shadow:0 0 24px var(--accent-soft)} .sky-label svg{width:16px; height:16px; color:var(--accent); filter:drop-shadow(0 0 8px var(--accent-soft))} @media (max-width:900px){ .sky-label{top:-2.9rem} } .node{position:absolute; width:76px; transform:translate(-50%,-50%); text-decoration:none; text-align:center; animation:float var(--dur,7s) ease-in-out var(--del,0s) infinite alternate} @keyframes float{from{margin-top:-7px} to{margin-top:7px}} .node img{width:64px; height:64px; border-radius:15px; display:block; margin:0 auto; box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1.5px var(--glow,transparent), 0 0 18px var(--glow,transparent), 0 0 44px var(--glow,transparent); animation:starglow calc(var(--dur,7s)*.85) ease-in-out var(--del,0s) infinite alternate; transition:transform .3s cubic-bezier(.2,.9,.3,1.5)} @keyframes starglow{ from{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1.5px var(--glow,transparent), 0 0 14px var(--glow,transparent), 0 0 36px var(--glow,transparent)} to{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1.5px var(--glow,transparent), 0 0 26px var(--glow,transparent), 0 0 64px var(--glow,transparent)} } .node .tag{display:block; margin-top:.55rem; font-family:var(--display); font-size:.8rem; font-weight:600; color:var(--muted); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s, color .25s} .node:hover img,.node:focus-visible img{transform:scale(1.14) rotate(-2deg)} .node:hover .tag,.node:focus-visible .tag{opacity:1; transform:none; color:var(--text)} .node.big img{width:82px; height:82px; border-radius:19px} /* App index rows */ .apps{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem} .app-row{--glow-h:var(--accent-h); display:flex; align-items:center; gap:1.4rem; padding:1.5rem 1.6rem; text-decoration:none; color:var(--text); background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s} .app-row::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(60% 120% at 12% 50%, hsl(var(--glow-h) 90% 62% / .12), transparent 55%)} .app-row:hover{transform:translateY(-3px); border-color:hsl(var(--glow-h) 80% 65% / .35); color:var(--text)} .app-row:hover::before{opacity:1} .app-icon{width:62px; height:62px; flex:none; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.4); transition:transform .3s cubic-bezier(.2,.9,.3,1.4)} .app-row:hover .app-icon{transform:scale(1.07) rotate(-2deg)} .app-text{min-width:0; flex:1} .app-name{font-family:var(--display); font-size:1.28rem; font-weight:600; letter-spacing:-.01em} .app-meta{color:hsl(var(--glow-h) 75% 70%); font-size:.82rem; font-weight:500; margin-left:.7rem; white-space:nowrap} html[data-theme="light"] .app-meta{color:hsl(var(--glow-h) 70% 40%)} .app-tag{margin:.25rem 0 0; color:var(--muted); font-size:.99rem; line-height:1.5; display:block} .app-arrow{margin-left:auto; color:var(--faint); flex:none; font-size:1.25rem; transition:transform .3s, color .3s} .app-row:hover .app-arrow{transform:translateX(5px); color:hsl(var(--glow-h) 85% 70%)} /* Principles */ .principles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem} .principle{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1.7rem 1.6rem; -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur))} .principle svg{width:26px; height:26px; color:var(--accent); margin-bottom:.9rem; filter:drop-shadow(0 0 10px var(--accent-soft))} .principle h3{font-size:1.06rem; margin:0 0 .45rem} .principle p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.6} section{padding:clamp(3.5rem,7vw,5.5rem) 0 0} section.tight{padding-top:2.2rem} /* --------------------------------------------------------------------- APP PAGE --------------------------------------------------------------------- */ .crumb{font-size:.84rem; color:var(--faint); padding-top:6.2rem} .crumb a{color:var(--faint); text-decoration:none} .crumb a:hover{color:var(--text)} .crumb .sep{opacity:.55; padding:0 .4rem} .hero{display:flex; gap:clamp(1.4rem,3.5vw,2.6rem); align-items:flex-start; padding:2rem 0 .5rem} .hero-icon-wrap{position:relative; flex:none} .hero-icon{width:clamp(96px,12vw,132px); height:auto; aspect-ratio:1; border-radius:24%; box-shadow:0 18px 48px rgba(0,0,0,.5); position:relative; z-index:1} .hero-icon-wrap::before{content:""; position:absolute; inset:-34%; z-index:0; border-radius:50%; background:radial-gradient(closest-side, hsl(var(--accent-h) 90% 60% / .3), transparent 72%); filter:blur(6px)} .hero-body{min-width:0; padding-top:.3rem} .hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem); margin:0 0 .55rem} .hero .tagline{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2vw,1.5rem); color:var(--muted); margin:0 0 1.25rem; line-height:1.4} .meta-row{display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 1.5rem} .req{font-size:.84rem; color:var(--faint)} .req a{color:var(--muted)} /* Prose */ .prose{max-width:46em} .prose p{margin:0 0 1.05rem; font-size:1.06rem; line-height:1.78; color:var(--muted)} .prose p:first-of-type{color:var(--text); font-size:1.12rem} .prose p:last-child{margin-bottom:0} /* Feature bento */ .features{list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem} .features li{grid-column:span 2; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1.6rem 1.5rem; position:relative; overflow:hidden; -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); transition:border-color .3s, transform .3s} .features li:hover{border-color:var(--accent-line); transform:translateY(-3px)} .features li.wide{grid-column:span 3} .features li.wide::after{content:""; position:absolute; right:-18%; top:-40%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, var(--accent-soft), transparent 70%); pointer-events:none} .features svg{width:24px; height:24px; color:var(--accent); margin-bottom:.85rem; filter:drop-shadow(0 0 9px var(--accent-soft))} .features h3{font-size:1.04rem; margin:0 0 .4rem; letter-spacing:-.01em} .features p{margin:0; color:var(--muted); font-size:.93rem; line-height:1.62} /* Screenshot gallery: horizontal scroll-snap */ .gallery{display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem .2rem 1.1rem; margin:1rem -0.2rem 0; scrollbar-width:thin; scrollbar-color:var(--accent-line) transparent} .gallery::-webkit-scrollbar{height:6px} .gallery::-webkit-scrollbar-thumb{background:var(--accent-line); border-radius:99px} .gallery::-webkit-scrollbar-track{background:transparent} .gallery figure{flex:0 0 min(86%,860px); margin:0; scroll-snap-align:center} .gallery img{display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow)} .gallery figcaption{margin-top:.65rem; font-size:.85rem; color:var(--faint); text-align:center} .gallery-hint{margin:.4rem 0 0; font-size:.82rem; color:var(--faint); display:flex; align-items:center; gap:.45rem} /* Single stacked shots (fallback) */ .shots-full{display:flex; flex-direction:column; gap:1.1rem; margin:1rem 0 0} .shots-full figure{margin:0} .shots-full img{display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow)} /* Video block */ .demo{position:relative; margin:1rem 0 0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#000} .demo video{display:block; width:100%; height:auto} /* Roadmap timeline */ .roadmap{list-style:none; margin:1.2rem 0 0; padding:0 0 0 1.7rem; position:relative} .roadmap::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, var(--accent-line), var(--line-soft) 85%, transparent)} .roadmap li{position:relative; padding:0 0 1.5rem 1rem} .roadmap li:last-child{padding-bottom:.2rem} .roadmap li::before{content:""; position:absolute; left:-1.7rem; top:.42em; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 12px var(--accent-soft)} .roadmap h3{font-size:1.02rem; margin:0 0 .3rem} .roadmap p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.6} /* Version history (classes match the content.js renderer) */ .log{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem} .log li{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:1.35rem 1.5rem; display:grid; grid-template-columns:8.5rem 1fr; gap:.3rem 1.6rem; -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur))} .log .ver{font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--accent)} .log .date{display:block; font-size:.8rem; color:var(--faint); margin-top:.25rem; font-family:var(--sans); font-weight:400} .log .notes{margin:0; color:var(--muted); font-size:.95rem; line-height:1.66} /* Privacy callout */ .callout{border:1px solid var(--accent-line); border-radius:var(--r-lg); padding:1.7rem 1.8rem; display:flex; gap:1.2rem; align-items:flex-start; background:linear-gradient(135deg, var(--accent-soft), var(--panel) 55%); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur))} .callout .ico{flex:none; width:32px; height:32px; color:var(--accent); margin-top:.15rem; filter:drop-shadow(0 0 12px var(--accent-soft))} .callout h3{font-size:1.15rem; margin:0 0 .4rem} .callout p{margin:0 0 .7rem; color:var(--muted); font-size:.96rem; line-height:1.66} .callout a{color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent-line)} .callout a:hover{color:var(--accent)} /* --------------------------------------------------------------------- Document pages (about + privacy) --------------------------------------------------------------------- */ .doc-head{padding:7rem 0 1.2rem; max-width:46em} .doc-head h1{font-size:clamp(2rem,4vw,3rem); margin:0 0 .8rem} .updated{font-size:.88rem; color:var(--faint)} .summary{border:1px solid var(--accent-line); border-radius:var(--r-md); padding:1.3rem 1.5rem; margin:1.7rem 0 0; background:linear-gradient(135deg, var(--accent-soft), var(--panel) 60%); max-width:46em} .summary p{margin:0; color:var(--text); font-size:.99rem; line-height:1.65} article{padding-top:.8rem; max-width:46em} article h2{font-family:var(--display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin:2.5rem 0 .7rem} article p{margin:0 0 1rem; font-size:1rem; line-height:1.74; color:var(--muted)} article ul{margin:0 0 1rem; padding-left:1.2rem; color:var(--muted)} article li{margin:0 0 .55rem; line-height:1.64} article strong{color:var(--text)} article a{color:var(--text); text-decoration:underline; text-decoration-color:var(--accent-line)} article a:hover{color:var(--accent)} .lead{color:var(--muted)} .nodata{display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--text)} .nodata .tick{color:var(--accent)} /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ footer{margin-top:clamp(4rem,8vw,6.5rem); border-top:1px solid var(--line-soft); padding:3rem 0 4.5rem; position:relative} footer::before{content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(480px,70%); height:1px; background:linear-gradient(90deg, transparent, var(--accent-line), transparent)} .foot-grid{display:flex; flex-wrap:wrap; gap:2.5rem 4rem; margin-bottom:2.4rem} .foot-col h3{font-family:var(--display); font-size:.76rem; text-transform:uppercase; letter-spacing:.2em; color:var(--faint); margin:0 0 .8rem; font-weight:600} .foot-col ul{list-style:none; margin:0; padding:0} .foot-col li{margin:0 0 .5rem} .foot-col a{color:var(--muted); text-decoration:none; font-size:.94rem; transition:color .2s} .foot-col a:hover{color:var(--accent)} .foot-bottom{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; color:var(--faint); font-size:.85rem; padding-top:1.6rem; border-top:1px solid var(--line-soft)} .foot-bottom a{color:var(--faint); text-decoration:none} .foot-bottom a:hover{color:var(--accent)} .foot-bottom .sep{opacity:.5} /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width:900px){ .hero-home{grid-template-columns:1fr; min-height:auto; padding-top:7rem; gap:3rem} .constellation{margin:0 auto; max-width:420px} .features li.wide{grid-column:span 6} .features li{grid-column:span 3} .principles-grid{grid-template-columns:1fr} } @media (max-width:640px){ body{font-size:16px} .nav-links{gap:1rem} .nav-links a:not([aria-current]){display:none} .nav-links a[href^="mailto"]{display:none} .hero{flex-direction:column} .features li{grid-column:span 6} .log li{grid-template-columns:1fr} .app-row{gap:1rem; padding:1.2rem 1.1rem} .app-icon{width:52px; height:52px} .app-arrow{display:none} .constellation{max-width:340px} .node img{width:52px; height:52px} .node.big img{width:66px; height:66px} .gallery figure{flex-basis:92%} }