
/* Obsidian / a monochrome editorial layer */
:root { --glass-bg:#0c0c0cd9; --glass-border:#ffffff15; --text-muted:#999; --accent-color:#dedede; --status-online:#c8c8c8; --warm-white:#f5f5f3; --accent-glow:#ffffff12; }
body { background:radial-gradient(ellipse at 75% 5%,#24242435,transparent 36%),linear-gradient(180deg,#060606,#080808 55%,#040404); }
body::before { background:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:80px 80px; opacity:.5; }
.ambient-light { background:radial-gradient(circle,#ffffff07,transparent 65%); }
.glass-nav { background:#0c0c0ccf; border-color:#ffffff1a; box-shadow:0 15px 50px #0008,inset 0 1px #ffffff0a; }
.container { max-width:1360px; padding-inline:36px; gap:88px; }
.architecture-hero { padding-top:30px; grid-template-columns:1.05fr 1fr; min-height:700px; gap:36px; }
.architecture-hero h1 { font-size:clamp(82px,8.6vw,122px); font-weight:600; letter-spacing:-7px; }.name-second { color:#9c9c9c; -webkit-text-fill-color:#9c9c9c; }.name-period { color:#f0f0f0; -webkit-text-fill-color:#f0f0f0; }
.hero-statement { font-size:24px; max-width:450px; line-height:1.4; }.hero-eyebrow { color:#a2a2a2; }.eyebrow-line { background:#777; }.architecture-hero .subtitle { font-size:14px; color:#9a9a9a; }
.hero-cta { background:linear-gradient(145deg,#fbfbfb,#c6c6c6); color:#090909; border:1px solid #ffffff47; border-radius:7px; box-shadow:0 3px 20px #ffffff0a,inset 0 1px #fff; }.hero-cta:hover { box-shadow:0 8px 34px #ffffff1c; }.hero-social-row a:hover { color:#fff; }
.architecture-scene { aspect-ratio:600/560; }.architecture-scene::before { background:radial-gradient(ellipse,#ffffff09,transparent 67%); }
.scene-core { width:37%; background:radial-gradient(circle at 25% 0%,#ffffff16,transparent 70%),linear-gradient(145deg,#212121,#070707 80%); border-color:#ffffff40; box-shadow:0 28px 60px #0009,0 0 50px #ffffff05,inset 0 1px #fff4; color:#e5e5e5; border-radius:23px; }
.scene-core::after { content:''; position:absolute; inset:3px; border:1px solid #ffffff09; border-radius:20px; pointer-events:none; }.scene-core:hover { border-color:#fff8; box-shadow:0 30px 70px #000b,0 0 50px #ffffff12; }.scene-core small { color:#999; }.scene-core svg { filter:drop-shadow(0 0 10px #ffffff30); }.core-ring { border-color:#ffffff1b; border-radius:33px; }
.scene-orbit { border-color:#ffffff14; }.orbit-one { border-color:#ffffff2a; }.orbit-three { border-color:#ffffff0d; }.scene-connections g { stroke:#bfbfbf30; }.scene-connections .connection-packets { stroke:#eee; opacity:.55; }
.scene-node { background:linear-gradient(140deg,#242424af,#090909da); border-color:#ffffff24; border-radius:10px; box-shadow:0 12px 30px #0008,inset 0 1px #fff1; }.scene-node:hover { background:#262626; border-color:#ffffff60; }.scene-node small { color:#898989; }.node-icon { background:#ffffff05; border-color:#ffffff12; color:#bcbcbc; border-radius:6px; }.scene-bottom { color:#a0a0a0; border-color:#ffffff18; background:#0a0a0ad9; }.scene-status-dot { background:#bdbdbd; box-shadow:0 0 12px #ffffff40; }.scene-caption { color:#727272; }
.hero-system-bar { border-color:#ffffff1c; padding-block:30px; }.uptime-display { color:#c0c0c0; }.system-label { color:#757575; }.hero-stack { color:#6e6e6e; }.scroll-cue { color:#888; }
.showcase-heading h2 { font-size:clamp(36px,4.6vw,58px); line-height:1.07; max-width:650px; letter-spacing:-2.4px; }.showcase-heading>p { font-size:13px; }.showcase-section { position:relative; }.showcase-section::before { content:'SELECTED / 01—03'; display:block; font:8px 'JetBrains Mono',monospace; color:#626262; letter-spacing:1.4px; margin:0 8px 25px; }
.visual-project { background:linear-gradient(155deg,#ffffff04,#ffffff00),#0a0a0a; border-color:#ffffff19; border-radius:12px; }.aetherion-project { background:#0b0b0b; border-color:#ffffff23; grid-template-columns:1.35fr 1fr; }.aetherion-project .project-cover { border-right-color:#ffffff15; }.aetherion-project h3 { color:#efefef; font-size:53px; }.project-title-dot { color:#777; }.aetherion-project .visual-project-copy { padding:42px; }.project-cover::after { background:linear-gradient(#0006,transparent 35%,#000b); }.capture-badge { border-color:#fff3; background:#111b; }.cover-action>span:last-child { border-radius:8px; }.project-view-strip button { border-color:#ffffff16; border-radius:5px; }.project-view-strip button:hover { background:#ffffff0b; color:#fff; }.project-live-link { border-color:#ffffff40; color:#ddd; }
.project-number { color:#9d9d9d; }.catalog-tags span { color:#a1a1a1; border-color:#ffffff15; background:#ffffff03; border-radius:4px; }.homarr-detail { border-color:#ffffff15; }.homarr-detail>span:first-child { color:#aaa; }
.glass-card { background:linear-gradient(135deg,#ffffff04,#ffffff00),#0b0b0bd9; border-color:#ffffff15; box-shadow:0 20px 55px #0004,inset 0 1px #ffffff07; border-radius:14px; }.glass-card:hover { border-color:#ffffff30; }#homelab .status-panel { background:linear-gradient(135deg,#080808,#151515); border-color:#ffffff24; box-shadow:inset 0 1px #ffffff18,0 20px 70px #0005; }.status-item { background:#ffffff03; border-color:#ffffff12; }.status-dot.online { background:#c7c7c7; box-shadow:0 0 10px #ffffff20; }.status-badge.online { color:#c5c5c5; background:#ffffff05; border-color:#ffffff22; }
.ai-stage,.tech-box,.project-item,.catalog-card { background:linear-gradient(135deg,#ffffff04,#ffffff00),#0c0c0c; border-color:#ffffff18; border-radius:12px; }.ai-stage:hover,.catalog-card:hover { background:#121212; border-color:#ffffff40; }.ai-core { border-color:#ffffff30; background:#151515; box-shadow:0 0 28px #ffffff0d; }.stage-icon { background:#ffffff03; border-color:#ffffff1c; }.featured-project { background:radial-gradient(ellipse at 100% 0%,#ffffff06,transparent 60%),#0b0b0b; border-color:#ffffff30; }.friday-section { background:radial-gradient(ellipse at 100% 100%,#ffffff05,transparent 65%),#090909; }.detail-item { background:#ffffff02; border-color:#ffffff15; border-radius:10px; }
.project-lightbox { background:#0c0c0c; border-color:#ffffff30; }.project-lightbox::backdrop { background:#000d; }.gallery-close:hover,.gallery-next:hover,.gallery-prev:hover { background:#ffffff12; }.gallery-close,.gallery-next,.gallery-prev { border-radius:6px; }
@media(min-width:1100px) { #about .section-title { font-size:40px; letter-spacing:-1.5px; }#about .content { grid-template-columns:.8fr 1.2fr; gap:22px 90px; } }
@media(max-width:900px) { .architecture-hero { gap:20px; }.architecture-hero h1 { font-size:87px; }.container { padding-inline:24px; gap:65px; }.aetherion-project .visual-project-copy { padding:30px; }.js-ready .nav-links { background:#101010f5; } }
@media(max-width:800px) { .architecture-hero { grid-template-columns:1fr; min-height:0; }.architecture-hero h1 { font-size:clamp(80px,16vw,112px); }.hero-statement { font-size:24px; }.architecture-scene { max-width:570px; }.aetherion-project { grid-template-columns:1fr; } }
@media(max-width:500px) { .container { padding-inline:16px; gap:50px; }.architecture-hero { padding-inline:0; padding-top:6px; }.architecture-hero h1 { font-size:83px; letter-spacing:-5px; }.hero-statement { font-size:20px; }.architecture-hero .subtitle { font-size:12px; }.scene-core { border-radius:18px; }.scene-core::after { border-radius:16px; }.core-ring { border-radius:25px; }.scene-node { border-radius:8px; }.showcase-heading h2 { font-size:36px; }.aetherion-project h3 { font-size:42px; }.aetherion-project .visual-project-copy { padding:24px; } }

/* Aetherion Studio: native client case study within the existing project. */
.studio-case { grid-column:1 / -1; min-width:0; padding:36px 42px 32px; border-top:1px solid #ffffff16; }
.studio-case-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.studio-eyebrow,.studio-release { font:9px 'JetBrains Mono',monospace; letter-spacing:1px; color:#999; }
.studio-case h4 { margin:12px 0 0; color:#eee; font-size:clamp(23px,3vw,32px); line-height:1.25; font-weight:600; letter-spacing:-1px; }
.studio-release { flex-shrink:0; padding-top:3px; }
.studio-intro { max-width:760px; margin:18px 0 26px; color:#aaa; font-size:13px; line-height:1.8; }
.studio-capture-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:14px; }
.studio-capture { display:flex; flex-direction:column; min-width:0; padding:0; text-align:left; overflow:hidden; color:#ddd; background:#101010; border:1px solid #ffffff15; border-radius:9px; cursor:zoom-in; transition:border-color .2s,background .2s; }
.studio-capture:hover { border-color:#ffffff40; background:#151515; }
.studio-capture:focus-visible,.studio-views button:focus-visible { outline:2px solid #8ba8ff; outline-offset:4px; }
.studio-capture-main { grid-row:span 2; }
.studio-capture img { display:block; width:100%; height:auto; }
.studio-capture-main img { margin-block:auto; }
.studio-capture>span { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-top:1px solid #ffffff0c; }
.studio-capture strong { font-size:11px; font-weight:600; }
.studio-capture small { color:#999; font-size:10px; }
.studio-views { margin-top:24px; padding-top:0; border-top:0; }
.studio-views button { min-height:40px; font-size:11px; padding:9px 12px; }
.studio-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:28px 0 18px; padding-top:24px; border-top:1px solid #ffffff12; }
.studio-proof dt { color:#888; font:9px 'JetBrains Mono',monospace; letter-spacing:.6px; }
.studio-proof dd { margin:9px 0 0; color:#ddd; font-size:12px; line-height:1.6; }
.studio-note { max-width:900px; margin:0; color:#888; font-size:11px; line-height:1.8; }
@media(max-width:900px) { .studio-case { padding:30px; }.studio-case-heading { flex-direction:column; gap:14px; }.studio-release { padding:0; }.studio-proof { gap:16px; } }
@media(max-width:650px) { .studio-case { padding:25px; }.studio-capture-grid { grid-template-columns:1fr 1fr; }.studio-capture-main { grid-column:1 / -1; grid-row:auto; }.studio-proof { grid-template-columns:1fr; gap:18px; }.studio-capture>span { padding:10px; }.studio-capture strong { font-size:10px; }.studio-capture small { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .studio-capture { transition:none; } }

/* Small portfolio polish: legibility, controlled captures, keyboard and touch. */
:root { --text-muted:#a8a8a8; }
html { scroll-padding-top:110px; }
::selection { background:#ddd; color:#080808; }
body { scrollbar-color:#555 #080808; scrollbar-width:thin; }
body::before { background:none; }
.architecture-hero h1 { letter-spacing:-.04em; }
.showcase-section::before { display:none; }
.showcase-heading>p,.visual-project-copy>p { font-size:14px; line-height:1.8; color:#aaa; }
.aetherion-project .project-cover { display:flex; align-items:center; justify-content:center; background:#080a0f; min-height:440px; }
.aetherion-project .project-cover img { width:100%; height:auto; object-fit:contain; filter:none; }
.aetherion-project .project-cover::after { background:linear-gradient(#0007,transparent 18%,transparent 82%,#0009); }
.project-view-strip button { min-height:44px; padding:10px 13px; font-size:12px; }
.project-count,.project-number { font-size:11px; }
.catalog-tags span { font-size:11px; }
.web-refinement-summary { margin-top:22px; padding-top:18px; border-top:1px solid #ffffff15; }
.web-refinement-summary p { margin:0; color:#aaa; font-size:13px; line-height:1.8; }
.web-refinement-summary>span { display:block; margin-top:12px; color:#bbb; font:11px 'JetBrains Mono',monospace; letter-spacing:.4px; }
.studio-eyebrow,.studio-release,.studio-proof dt { font-size:11px; }
.studio-intro { font-size:14px; }
.studio-note { color:#aaa; font-size:12px; }
.studio-proof dd { font-size:13px; }
.studio-capture-main img { margin-block:0; }
.studio-capture-main { justify-content:space-between; background:#080a0f; }
.studio-capture strong { font-size:12px; }
.studio-capture small { font-size:11px; color:#aaa; }
.project-lightbox { scrollbar-width:thin; scrollbar-color:#555 #0c0c0c; }
.lightbox-header span { font-size:11px; line-height:1.6; }
.lightbox-footer p { font-size:13px; line-height:1.6; }
.gallery-close,.gallery-next,.gallery-prev { min-width:44px; min-height:44px; }
.lightbox-image-wrap { position:relative; min-height:160px; }
.lightbox-image-wrap[aria-busy=true] img { opacity:.4; }
.gallery-status { position:absolute; left:16px; right:16px; bottom:12px; margin:0; padding:8px 12px; background:#111e; color:#ddd; border-radius:6px; font-size:13px; line-height:1.6; text-align:center; }
.gallery-status:empty { display:none; }
a:focus-visible,button:focus-visible { outline:2px solid #c4d2f9; outline-offset:4px; }
@media(hover:hover) and (pointer:fine) { .studio-capture:hover img { filter:brightness(1.05); }.project-view-strip button:active { transform:scale(.97); } }
@media(max-width:800px) { .aetherion-project .project-cover { min-height:0; height:auto; aspect-ratio:1440/1000; } }
@media(max-width:500px) { .architecture-hero h1 { letter-spacing:-.04em; }.studio-capture-grid { grid-template-columns:1fr; }.studio-capture-main { grid-column:auto; }.studio-capture strong { font-size:12px; }.studio-capture small { font-size:11px; }.studio-case { padding:24px; }.lightbox-footer p { font-size:12px; }.lightbox-header span { font-size:10px; }.project-lightbox { border-radius:12px; } }
@media(prefers-reduced-motion:reduce) { .project-view-strip button:active { transform:none; } }

.license-case { border-top:1px solid #303030; }
.license-case .license-description { max-width:72ch; color:#c8c8c8; line-height:1.7; font-size:14px; }
.license-case .license-proof dd { line-height:1.6; }
.license-capture-grid img { aspect-ratio:1240/780; object-fit:contain; background:#080a0f; }
@media(max-width:500px) { .license-case .studio-case-heading { align-items:flex-start; flex-direction:column; gap:12px; } }
