/* ═══════════════════════════════════════════
Isaac Gallegos — Unified Stylesheet
═══════════════════════════════════════════ */
/* ── Theme Definitions ───────────────────── */
[data-scheme="current"] {
--bg:#ffffff;--bg-off:#f7f7f7;--border:#e8e8e8;--text:#111111;--text-2:#444444;--muted:#777777;
--accent:#4a6741;--accent-bg:#f2f5ec;--accent-border:#c5d4b8;
--nav-bg:rgba(255,255,255,0.92);--status-green:#22c55e;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
[data-scheme="dark-lab"] {
--bg:#0e1117;--bg-off:#161b22;--border:#2d333b;--text:#e6edf3;--text-2:#b1bac4;--muted:#7d8590;
--accent:#3fb950;--accent-bg:rgba(63,185,80,0.08);--accent-border:rgba(63,185,80,0.3);
--nav-bg:rgba(14,17,23,0.92);--status-green:#3fb950;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
[data-scheme="slate-copper"] {
--bg:#ffffff;--bg-off:#f5f5f7;--border:#e0e0e5;--text:#1a1a2e;--text-2:#3d3d5c;--muted:#8888a0;
--accent:#b45309;--accent-bg:#fef3e2;--accent-border:#e8c18e;
--nav-bg:rgba(255,255,255,0.92);--status-green:#16a34a;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
[data-scheme="deep-navy"] {
--bg:#0f172a;--bg-off:#1e293b;--border:#334155;--text:#f1f5f9;--text-2:#94a3b8;--muted:#64748b;
--accent:#38bdf8;--accent-bg:rgba(56,189,248,0.08);--accent-border:rgba(56,189,248,0.25);
--nav-bg:rgba(15,23,42,0.92);--status-green:#4ade80;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
[data-scheme="warm-minimal"] {
--bg:#faf8f5;--bg-off:#f0ede8;--border:#ddd8d0;--text:#2c2c2c;--text-2:#555555;--muted:#8a8578;
--accent:#a0522d;--accent-bg:#f7efe9;--accent-border:#d4a88c;
--nav-bg:rgba(250,248,245,0.92);--status-green:#5da34a;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
[data-scheme="monochrome"] {
--bg:#ffffff;--bg-off:#f5f5f5;--border:#e0e0e0;--text:#111111;--text-2:#444444;--muted:#888888;
--accent:#333333;--accent-bg:#f0f0f0;--accent-border:#cccccc;
--nav-bg:rgba(255,255,255,0.92);--status-green:#22c55e;
--sans:'IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:960px;
}
/* ── Reset ───────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 60px; }
body {
background: var(--bg); color: var(--text);
font-family: var(--sans); line-height: 1.7;
-webkit-font-smoothing: antialiased;
transition: background .3s, color .3s;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
/* ── Nav ─────────────────────────────────── */
nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: 0 32px; transition: background .3s, border-color .3s; }
.nav-inner { max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 52px; }
.nav-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 13px; color: var(--muted); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-resume { font-size: 13px; font-weight: 500; color: var(--muted); transition: color .15s; }
.nav-resume:hover { color: var(--text); }
/* ── Hamburger Menu ──────────────────────── */
.nav-hamburger { display: none; background: none; border: none; padding: 4px; color: var(--text); }
.nav-hamburger svg { display: block; }
.nav-overlay { display: none; position: fixed; inset: 0; top: 52px; background: var(--nav-bg); backdrop-filter: blur(12px); z-index: 99; padding: 32px; }
.nav-overlay.open { display: block; }
.nav-overlay ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nav-overlay a { display: block; font-size: 18px; font-weight: 500; color: var(--text); padding: 14px 0; border-bottom: 1px solid var(--border); transition: color .15s; }
.nav-overlay a:hover, .nav-overlay a.active { color: var(--accent); }
.nav-overlay .nav-resume-mobile { display: inline-block; margin-top: 24px; font-size: 14px; font-weight: 500; color: var(--muted); }
/* ── Page Layout ─────────────────────────── */
.page { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }
/* ── Shared Components ───────────────────── */
.section { padding: 64px 0; border-bottom: 1px solid var(--border); transition: border-color .3s; }
/* Section header with coordinate + terminal prefix */
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.section-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; }
.terminal-prefix { color: var(--accent); font-weight: 500; margin-right: 8px; font-size: 13px; opacity: .8; letter-spacing: 0; text-transform: none; transition: color .3s; }
.terminal-prefix::after { content: ">_"; }
.section-coord { font-family: var(--mono); font-size: 10px; color: var(--border); letter-spacing: .04em; transition: color .3s; }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-bottom: 12px; }
h2 { font-family: var(--sans); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -.02em; margin-bottom: 20px; }
.page-header { padding: 64px 0 48px; border-bottom: 1px solid var(--border); }
.page-desc { font-size: 16px; color: var(--muted); max-width: 540px; line-height: 1.7; }
/* ── Footer ──────────────────────────────── */
footer { padding: 28px 0; display: flex; align-items: center; justify-content: space-between; }
.foot { font-size: 13px; color: var(--muted); }
/* ── Status animation ────────────────────── */
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
/* ═══════════════════════════════════════════
HOME PAGE
═══════════════════════════════════════════ */
/* ── Hero — System Status ─────────────────── */
#hero { padding: 80px 0 72px; border-bottom: 1px solid var(--border); transition: border-color .3s; }
.hero-status-bar {
display: flex; align-items: center; gap: 24px;
margin-bottom: 32px; padding-bottom: 20px;
border-bottom: 1px solid var(--border);
font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .02em;
transition: border-color .3s;
}
.hero-status-item { display: flex; align-items: center; gap: 7px; }
.status-dot-green { width: 6px; height: 6px; border-radius: 50%; background: var(--status-green); animation: pulse 2.5s infinite; }
.status-label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.status-value { color: var(--text-2); }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; }
.hero-name { font-family: var(--sans); font-size: clamp(32px, 5vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); margin-bottom: 4px; }
.hero-role { font-family: var(--mono); font-size: 14px; color: var(--muted); letter-spacing: .02em; margin-bottom: 24px; }
.hero-body { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 560px; border-left: 2px solid var(--accent); padding-left: 16px; transition: border-color .3s; }
.hero-body p { margin-bottom: 16px; }
.hero-body p:last-child { margin-bottom: 0; }
.hero-body em { font-style: italic; color: var(--text-2); }
.hero-links { margin-top: 28px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.hero-links a { font-size: 14px; color: var(--accent); font-weight: 500; transition: opacity .15s, color .3s; }
.hero-links a:hover { opacity: .75; color: var(--accent); }
.hero-links .sep { color: var(--border); font-size: 14px; }
.hero-photo { overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); position: relative; transition: border-color .3s; flex-shrink: 0; }
.hero-photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); pointer-events: none; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.02); transition: filter .4s ease; }
.hero-photo:hover img { filter: saturate(1) contrast(1); }
/* Photo variants — circles */
.hero-photo.circle-sm { width: 180px; height: 180px; border-radius: 50%; margin-top: 8px; }
.hero-photo.circle-sm::after { border-radius: 50%; }
.hero-photo.circle-sm img { object-position: center top; }
.hero-photo.circle-md { width: 240px; height: 240px; border-radius: 50%; }
.hero-photo.circle-md::after { border-radius: 50%; }
.hero-photo.circle-md img { object-position: center top; }
.hero-photo.circle-lg { width: 280px; height: 280px; border-radius: 50%; }
.hero-photo.circle-lg::after { border-radius: 50%; }
.hero-photo.circle-lg img { object-position: center top; }
/* Photo variants — rectangles */
.hero-photo.rect-tall { width: 220px; height: 300px; border-radius: 8px; }
.hero-photo.rect-tall::after { border-radius: 8px; }
.hero-photo.rect-tall img { object-position: center 20%; }
.hero-photo.rect-wide { width: 280px; height: 340px; border-radius: 8px; }
.hero-photo.rect-wide::after { border-radius: 8px; }
.hero-photo.rect-wide img { object-position: center 20%; }
/* ── About — Spec Table ──────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: start; }
.prose p { font-size: 15.5px; color: var(--text-2); margin-bottom: 18px; line-height: 1.78; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 500; }
.spec-table { border-top: 1px solid var(--border); width: 100%; transition: border-color .3s; }
.spec-row { display: flex; border-bottom: 1px solid var(--border); font-size: 13px; transition: background .15s, border-color .3s; }
.spec-row:hover { background: var(--accent-bg); }
.spec-key { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 100px; flex-shrink: 0; padding: 11px 0; }
.spec-val { color: var(--text-2); padding: 11px 0; line-height: 1.5; }
.spec-val.accent { color: var(--accent); transition: color .3s; }
/* ── At a Glance ──────────────────────────── */
.glance-intro { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 600px; margin-bottom: 36px; }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.glance-card { display: flex; flex-direction: column; padding: 24px 26px 22px; border: 1px solid var(--border); background: var(--bg); transition: border-color .2s, background .2s, box-shadow .2s; text-decoration: none; color: inherit; }
.glance-card:hover { border-color: var(--accent-border); background: var(--accent-bg); box-shadow: 0 2px 16px rgba(0,0,0,0.05); color: inherit; }
.glance-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.glance-card-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.glance-card-role { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--accent); background: var(--accent-bg); padding: 2px 8px; border: 1px solid var(--accent-border); transition: color .3s, background .3s, border-color .3s; }
.glance-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 6px; }
.glance-card:hover .glance-card-title { color: var(--accent); }
.glance-card-institution { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 12px; }
.glance-card-impact { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.glance-card-impact strong { color: var(--text); font-weight: 500; }
.glance-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.glance-tag { font-family: var(--mono); font-size: 9.5px; color: var(--muted); background: var(--bg-off); padding: 2px 7px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.glance-tag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.glance-card-links { display: flex; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
.glance-link { font-size: 12px; font-weight: 500; color: var(--accent); transition: opacity .15s, color .3s; display: inline-flex; align-items: center; gap: 5px; }
.glance-link:hover { opacity: .7; color: var(--accent); }
.glance-link-sep { width: 1px; height: 12px; background: var(--border); }
.glance-github-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.glance-github-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glance-github-link { font-size: 13px; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.glance-github-link:hover { opacity: .7; color: var(--accent); }
.gh-icon { display: inline-flex; align-items: center; }
/* ── Expertise / Skills ──────────────────── */
.skills-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
.skill-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.skill-item:nth-child(odd) { padding-right: 40px; }
.skill-item:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--border); }
.skill-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.skill-desc { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.skill-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg-off); padding: 2px 7px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.tag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.section-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 14px; color: var(--accent); font-weight: 500; transition: opacity .15s, color .3s; }
.section-link:hover { opacity: .75; color: var(--accent); }
/* ── Vision ───────────────────────────────── */
.vision-quote { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.55; color: var(--text-2); border-left: 2px solid var(--border); padding-left: 20px; margin-bottom: 32px; max-width: 640px; transition: border-color .3s; }
.vision-body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.vision-body p { font-size: 15px; color: var(--muted); line-height: 1.78; }
.vision-body strong { color: var(--text-2); font-weight: 500; }
.domain-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border); }
.domain { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); padding: 5px 12px; border: 1px solid var(--border); background: var(--bg-off); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.domain:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
/* ── Contact ──────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-intro { font-size: 18px; font-weight: 400; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.contact-intro strong { color: var(--text); font-weight: 600; }
.contact-email { font-size: 15px; color: var(--accent); font-weight: 500; transition: color .3s; }
.contact-email:hover { opacity: .75; color: var(--accent); }
.contact-links { display: flex; flex-direction: column; gap: 0; }
.contact-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-2); transition: color .15s, background .15s, border-color .3s; }
.contact-row:first-child { border-top: 1px solid var(--border); }
.contact-row:hover { color: var(--accent); background: var(--accent-bg); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.contact-row .label { color: var(--muted); font-size: 12px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.contact-row .arrow { color: var(--muted); font-size: 12px; }
/* ═══════════════════════════════════════════
PROJECTS PAGE
═══════════════════════════════════════════ */
.dashboard { padding: 40px 0; border-bottom: 1px solid var(--border); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-card { display: block; padding: 20px 24px; border: 1px solid var(--border); background: var(--bg-off); transition: border-color .15s, background .15s; text-decoration: none; color: inherit; }
.dash-card:hover { border-color: var(--accent-border); background: var(--accent-bg); color: inherit; }
.dash-card-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.dash-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
.dash-card:hover .dash-card-title { color: var(--accent); }
.dash-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-tag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg); padding: 2px 8px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.dash-card:hover .dash-tag.hi { color: var(--accent); border-color: var(--accent-border); }
.dash-tag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.project { padding: 40px 0; border-bottom: 1px solid var(--border); }
.project:last-child { border-bottom: none; }
.project-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.project-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.project-tags { display: flex; gap: 6px; }
.ptag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg-off); padding: 2px 8px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ptag.hi { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
.ptag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.project-title { font-size: clamp(18px, 2.5vw, 24px); font-weight: 600; color: var(--text); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px; }
.project-venue { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 28px; }
.project-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.col-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.col-text { font-size: 14.5px; color: var(--text-2); line-height: 1.78; }
.col-text strong { color: var(--text); font-weight: 500; }
.col-text em { font-style: italic; }
.col-text p + p { margin-top: 12px; }
.outcomes { display: flex; flex-direction: column; gap: 14px; }
.outcome { display: flex; gap: 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.7; }
.outcome::before { content: '\2014'; color: var(--muted); flex-shrink: 0; margin-top: 1px; }
.outcome span { flex: 1; min-width: 0; }
.outcome strong { color: var(--text); font-weight: 500; }
.project-impact { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.impact-text { font-size: 14.5px; color: var(--text-2); line-height: 1.78; }
.impact-text strong { color: var(--text); font-weight: 500; }
.impact-text p + p { margin-top: 12px; }
.project-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.project-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.stag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg-off); padding: 2px 7px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.stag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.project-link { font-size: 13px; color: var(--accent); font-weight: 500; transition: opacity .15s, color .3s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.project-link:hover { opacity: .75; color: var(--accent); }
.project-links { display: flex; align-items: center; gap: 12px; }
.project-link-divider { width: 1px; height: 14px; background: var(--border); }
.ctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
/* ── Project Layout Variants ─────────────── */
/* Default / current — thin bottom border */
[data-project-style="current"] .project { padding: 40px 0; border-bottom: 1px solid var(--border); }
[data-project-style="current"] .project:last-of-type { border-bottom: none; }
[data-project-style="current"] .project-divider { display: none; }
/* Bordered Cards */
[data-project-style="cards"] .project { padding: 36px 40px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-off); transition: border-color .2s, background .2s, box-shadow .2s; }
[data-project-style="cards"] .project:hover { border-color: var(--accent-border); background: var(--accent-bg); box-shadow: 0 2px 16px rgba(0,0,0,0.05); }
[data-project-style="cards"] .project-divider { display: none; }
/* Accent Left Border */
[data-project-style="accent-border"] .project { padding: 36px 0 36px 32px; margin-bottom: 32px; border-left: 3px solid var(--accent); border-bottom: none; }
[data-project-style="accent-border"] .project-divider { display: none; }
/* Large Numbered */
[data-project-style="numbered"] .project { padding: 48px 0; border-bottom: none; position: relative; }
[data-project-style="numbered"] .project::before { content: attr(data-num); position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 72px; font-weight: 600; color: var(--border); line-height: 1; opacity: 0.4; letter-spacing: -.04em; pointer-events: none; }
[data-project-style="numbered"] .project .project-meta { margin-top: 48px; }
[data-project-style="numbered"] .project-divider { height: 1px; background: linear-gradient(to right, var(--accent), var(--border) 40%, transparent); margin: 8px 0; }
/* Alternating Background */
[data-project-style="alternating"] .project { padding: 48px 40px; margin-bottom: 0; border-bottom: none; }
[data-project-style="alternating"] .project:nth-of-type(odd) { background: var(--bg); }
[data-project-style="alternating"] .project:nth-of-type(even) { background: var(--bg-off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-project-style="alternating"] .project-divider { display: none; }
.ctx { padding: 28px 0; border-bottom: 1px solid var(--border); }
.ctx:nth-child(odd) { padding-right: 40px; }
.ctx:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--border); }
.ctx-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ctx-text { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.ctx-text strong { color: var(--text-2); font-weight: 500; }
.fd-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.fd-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.fd-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.fd-text { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
/* ═══════════════════════════════════════════
WRITING PAGE
═══════════════════════════════════════════ */
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-green); animation: pulse 2s infinite; }
.intro-grid { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
.intro-body { font-size: 15.5px; color: var(--text-2); line-height: 1.8; }
.intro-body p + p { margin-top: 16px; }
.intro-body strong { color: var(--text); font-weight: 500; }
.intro-aside { padding: 20px; border-left: 2px solid var(--border); font-size: 14px; }
.aside-quote { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.aside-attr { font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: .04em; }
.essays { border-top: 1px solid var(--border); }
a.essay-row { text-decoration: none; color: inherit; }
.essay-row { display: grid; grid-template-columns: 32px 1fr 200px 72px; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); align-items: start; transition: background .12s; }
.essay-row:hover { background: var(--bg-off); margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
.essay-num { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.essay-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 5px; line-height: 1.35; }
a.essay-row:hover .essay-title { color: var(--accent); }
.essay-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.essay-tags { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.etag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg-off); padding: 2px 7px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.etag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.essay-status { padding-top: 3px; }
.estatus { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.estatus.live { color: var(--accent); }
.notify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.notify-heading { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -.02em; margin-bottom: 12px; }
.notify-body { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 24px; }
.notify-link { font-size: 14px; color: var(--accent); font-weight: 500; }
.notify-link:hover { opacity: .75; color: var(--accent); }
.info-list { border-top: 1px solid var(--border); }
.info-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; transition: background .15s; }
.info-row:hover { background:var(--accent-bg); margin:0 -8px; padding-left:8px; padding-right:8px; }
.info-key { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.info-val { color: var(--text-2); text-align: right; }
/* ═══════════════════════════════════════════
ARTICLE PAGE
═══════════════════════════════════════════ */
.article-header { padding: 64px 0 40px; border-bottom: 1px solid var(--border); max-width: 680px; }
.article-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; transition: color .15s; }
.article-back:hover { color: var(--accent); }
.article-title { font-family: var(--sans); font-size: clamp(26px, 4vw, 36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin-bottom: 16px; }
.article-desc { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.article-meta { display: flex; gap: 20px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.article-tags { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.atag { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg-off); padding: 2px 7px; border: 1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.atag:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.article-body { max-width: 680px; padding: 48px 0 64px; }
.article-body p { font-family: var(--serif); font-size: 17px; line-height: 1.85; color: var(--text-2); margin-bottom: 24px; }
.article-body h2 { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin-top: 48px; margin-bottom: 16px; line-height: 1.3; }
.article-body h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--text); margin-top: 36px; margin-bottom: 12px; line-height: 1.35; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body em { font-style: italic; }
.article-body ul, .article-body ol { font-family: var(--serif); font-size: 17px; line-height: 1.85; color: var(--text-2); margin-bottom: 24px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid var(--accent); padding: 12px 0 12px 24px; margin: 32px 0; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--text-2); line-height: 1.7; }
.article-body code { font-family: var(--mono); font-size: 14px; background: var(--bg-off); padding: 2px 6px; border: 1px solid var(--border); border-radius: 3px; }
.article-body pre { background: var(--bg-off); border: 1px solid var(--border); padding: 20px 24px; margin: 28px 0; overflow-x: auto; border-radius: 4px; }
.article-body pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.6; }
.article-body img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; margin: 28px 0; }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { opacity: .75; }
.article-footer { border-top: 1px solid var(--border); padding: 32px 0; display: flex; justify-content: space-between; align-items: center; }
/* ═══════════════════════════════════════════
RESPONSIVE — Tablet
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.hero-grid { gap: 32px; }
.about-grid { gap: 32px; }
.skills-list { gap: 0; }
.contact-grid { gap: 32px; }
}
/* ═══════════════════════════════════════════
RESPONSIVE — Mobile
═══════════════════════════════════════════ */
@media (max-width: 720px) {
.page, nav { padding-left: 20px; padding-right: 20px; }
.nav-links { display: none; }
.nav-resume { display: none; }
.nav-hamburger { display: block; }
#hero { padding: 48px 0 40px; }
.hero-status-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
.hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
.hero-right-col { order: -1; }
.hero-photo { margin: 0 auto; }
.hero-photo.circle-sm { width: 120px; height: 120px; }
.hero-photo.circle-md { width: 160px; height: 160px; }
.hero-photo.circle-lg { width: 180px; height: 180px; }
.hero-photo.rect-tall { width: 160px; height: 220px; }
.hero-photo.rect-wide { width: 200px; height: 250px; }
.hero-role { font-size: 16px; }
.hero-body { max-width: 100%; }
.hero-links { justify-content: center; }
.about-grid { grid-template-columns: 1fr; gap: 32px; }
.spec-row { flex-direction: column; }
.spec-key { width: auto; padding-bottom: 0; }
.glance-grid { grid-template-columns: 1fr; }
.skills-list { grid-template-columns: 1fr; }
.skill-item { padding: 20px 0; }
.skill-item:nth-child(even) { border-left: none; padding-left: 0; }
.skill-tags .tag { padding: 4px 10px; font-size: 11px; }
.vision-body { grid-template-columns: 1fr; gap: 20px; }
.contact-grid { grid-template-columns: 1fr; gap: 32px; }
.dash-grid { grid-template-columns: 1fr; }
.project-cols { grid-template-columns: 1fr; gap: 24px; }
[data-project-style="cards"] .project { padding: 24px 20px; }
[data-project-style="alternating"] .project { padding: 32px 20px; }
[data-project-style="numbered"] .project::before { font-size: 48px; }
[data-project-style="accent-border"] .project { padding-left: 20px; }
.ctx-grid { grid-template-columns: 1fr; }
.ctx:nth-child(even) { border-left: none; padding-left: 0; }
.fd-grid { grid-template-columns: 1fr; gap: 20px; }
.project { padding: 32px 0; }
.intro-grid { grid-template-columns: 1fr; gap: 28px; }
a.essay-row { text-decoration: none; color: inherit; }
.essay-row { grid-template-columns: 1fr; gap: 6px; }
.essay-num, .essay-tags, .essay-status { display: none; }
.notify-grid { grid-template-columns: 1fr; gap: 32px; }
.article-header { padding: 40px 0 32px; }
.article-title { font-size: clamp(22px, 5vw, 32px); }
.article-body { padding: 32px 0 48px; }
.article-body p { font-size: 16px; }
.article-body h2 { font-size: 20px; margin-top: 36px; }
.article-body h3 { font-size: 17px; margin-top: 28px; }
.article-body blockquote { font-size: 16px; padding-left: 16px; }
.article-footer { flex-direction: column; gap: 8px; text-align: center; }
.page-header { padding: 48px 0 36px; }
h1 { font-size: clamp(24px, 6vw, 36px); }
footer { flex-direction: column; gap: 8px; text-align: center; }
}
/* ═══════════════════════════════════════════
RESPONSIVE — Small phones
═══════════════════════════════════════════ */
@media (max-width: 400px) {
.hero-name { font-size: 28px; }
.section { padding: 40px 0; }
.domain { padding: 6px 12px; font-size: 10px; }
.ptag, .stag, .dash-tag, .etag, .atag { font-size: 9px; padding: 3px 8px; }
}
/* ═══════════════════════════════════════════
LOADING SCREENS
═══════════════════════════════════════════ */
.loader-overlay {
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
background:var(--bg);
transition:opacity .5s ease, visibility .5s ease;
}
.loader-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
/* Monogram Draw */
.loader-monogram svg { width:80px; height:80px; }
.loader-monogram .letter { stroke:var(--accent); stroke-width:2; fill:none; stroke-dasharray:200; stroke-dashoffset:200; animation:loaderDraw 1.5s ease forwards; }
.loader-monogram .dot { fill:var(--accent); opacity:0; animation:loaderFadeIn .4s ease 1.2s forwards; }
@keyframes loaderDraw { to { stroke-dashoffset:0; } }
@keyframes loaderFadeIn { to { opacity:1; } }
/* Terminal Boot */
.loader-terminal { font-family:var(--mono); font-size:13px; color:var(--accent); text-align:left; max-width:360px; letter-spacing:.02em; }
.loader-terminal .line { opacity:0; animation:loaderTypeLine .3s ease forwards; }
.loader-terminal .line:nth-child(1) { animation-delay:.2s; }
.loader-terminal .line:nth-child(2) { animation-delay:.5s; }
.loader-terminal .line:nth-child(3) { animation-delay:.9s; }
.loader-terminal .line:nth-child(4) { animation-delay:1.3s; color:var(--text); }
@keyframes loaderTypeLine { to { opacity:1; } }
.loader-terminal .cursor { display:inline-block; width:7px; height:14px; background:var(--accent); animation:loaderBlink 1s step-end infinite; vertical-align:text-bottom; margin-left:2px; }
@keyframes loaderBlink { 50% { opacity:0; } }
/* Pulse Ring */
.loader-pulse { text-align:center; }
.loader-pulse .ring { width:60px; height:60px; border-radius:50%; border:2px solid var(--accent); animation:loaderPulseRing 1.5s ease-in-out infinite; margin:0 auto 16px; }
.loader-pulse .name { font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; animation:loaderFadeIn .6s ease .3s forwards; opacity:0; }
@keyframes loaderPulseRing { 0%{transform:scale(.8);opacity:.3;} 50%{transform:scale(1);opacity:1;} 100%{transform:scale(.8);opacity:.3;} }
/* Name Reveal */
.loader-name { text-align:center; }
.loader-name .big { font-size:clamp(28px,5vw,48px); font-weight:600; letter-spacing:-.03em; color:var(--text); opacity:0; animation:loaderSlideUp .6s ease .2s forwards; }
.loader-name .sub { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em; opacity:0; animation:loaderSlideUp .5s ease .5s forwards; }
@keyframes loaderSlideUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
/* ═══════════════════════════════════════════
SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-stagger > * { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay:.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay:.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay:.15s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay:.2s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay:.25s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay:.3s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay:.35s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay:.4s; }
.reveal-stagger.visible > * { opacity:1; transform:translateY(0); }
/* Ensure hover lift works on interactive elements inside reveal-stagger */
.reveal-stagger.visible > .domain:hover,
.reveal-stagger.visible > .tag:hover,
.reveal-stagger.visible > .filter-btn:hover,
.reveal-stagger.visible > .tag-btn:hover { transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08); }
body.no-reveal .reveal, body.no-reveal .reveal-stagger > *, body.no-reveal .sr { opacity:1; transform:none; transition:none; }
/* ═══════════════════════════════════════════
AT A GLANCE — OVERVIEW GRID VARIANT
═══════════════════════════════════════════ */
.overview-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.overview-block { padding:20px 22px; border:1px solid var(--border); background:var(--bg-off); transition: border-color .2s, background .2s; }
.overview-block:hover { border-color:var(--accent-border); background:var(--accent-bg); }
.overview-block-label { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.overview-item { padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-2); line-height:1.5; transition: background .15s; }
.overview-item:last-child { border-bottom:none; }
.overview-item:hover { background:var(--accent-bg); margin:0 -8px; padding-left:8px; padding-right:8px; }
.ov-title { font-weight:600; color:var(--text); font-size:13px; }
.ov-sub { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:2px; }
.ov-accent { color:var(--accent); }
.overview-link { display:inline-block; margin-top:8px; font-size:12px; font-weight:500; color:var(--accent); font-family:var(--mono); }
.overview-domain { font-family:var(--mono); font-size:9px; color:var(--muted); background:var(--bg); padding:2px 6px; border:1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.overview-domain:hover { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08); }
/* ═══════════════════════════════════════════
AT A GLANCE — TIMELINE + PROJECTS SPLIT
═══════════════════════════════════════════ */
.glance-split { display:grid; grid-template-columns:280px 1fr; gap:40px; }
.glance-timeline { border-right:1px solid var(--border); padding-right:32px; }
.tl-label { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.tl-item { position:relative; padding-left:20px; padding-bottom:20px; }
.tl-item::before { content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; border:2px solid var(--accent); background:var(--bg); }
.tl-item.now::before { background:var(--accent); }
.tl-item::after { content:''; position:absolute; left:3px; top:18px; bottom:0; width:1px; background:var(--border); }
.tl-item:last-child::after { display:none; }
.tl-item:last-child { padding-bottom:0; }
.tl-date { font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:2px; }
.tl-title { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; }
.tl-detail { font-size:12px; color:var(--muted); line-height:1.5; }
.glance-projects-col .glance-card { margin-bottom:16px; }
.glance-projects-col .glance-card:last-child { margin-bottom:0; }
/* ═══════════════════════════════════════════
AT A GLANCE — FULL SNAPSHOT VARIANT
═══════════════════════════════════════════ */
.snapshot { border:1px solid var(--border); }
.snapshot-header { display:grid; grid-template-columns:1fr 1fr 1fr; border-bottom:1px solid var(--border); }
.snapshot-stat { padding:20px 24px; text-align:center; border-right:1px solid var(--border); transition: background .2s; }
.snapshot-stat:hover { background:var(--accent-bg); }
.snapshot-stat:last-child { border-right:none; }
.snapshot-stat-value { font-family:var(--mono); font-size:28px; font-weight:500; color:var(--text); letter-spacing:-.02em; line-height:1.2; }
.snapshot-stat-label { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.snapshot-body { display:grid; grid-template-columns:1fr 1fr; }
.snapshot-col { padding:24px 28px; }
.snapshot-col:first-child { border-right:1px solid var(--border); }
.snapshot-col-label { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.snapshot-item { padding:10px 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; gap:12px; transition: background .15s; }
.snapshot-item:last-child { border-bottom:none; }
.snapshot-item:hover { background:var(--accent-bg); margin:0 -12px; padding-left:12px; padding-right:12px; }
.snapshot-item-title { font-size:13px; font-weight:500; color:var(--text); }
.snapshot-item-meta { font-family:var(--mono); font-size:10px; color:var(--muted); }
.snapshot-item-accent { color:var(--accent); font-size:12px; font-weight:500; white-space:nowrap; }
/* ═══════════════════════════════════════════
RESPONSIVE — Glance variants
═══════════════════════════════════════════ */
@media (max-width: 720px) {
.overview-grid { grid-template-columns: 1fr; }
.glance-split { grid-template-columns: 1fr; }
.glance-timeline { border-right:none; padding-right:0; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.snapshot-header { grid-template-columns:1fr; }
.snapshot-stat { border-right:none; border-bottom:1px solid var(--border); }
.snapshot-stat:last-child { border-bottom:none; }
.snapshot-body { grid-template-columns:1fr; }
.snapshot-col:first-child { border-right:none; border-bottom:1px solid var(--border); }
}
/* ═══════════════════════════════════════════
WRITING PAGE — CARDS VARIANT
═══════════════════════════════════════════ */
.compact-header { padding:48px 0 32px; border-bottom:1px solid var(--border); display:flex; align-items:baseline; justify-content:space-between; }
.compact-header h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; }
.compact-header-meta { font-family:var(--mono); font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.compact-dot { width:6px; height:6px; border-radius:50%; background:var(--status-green); animation:pulse 2.5s infinite; }
.tag-filter { display:flex; gap:6px; flex-wrap:wrap; padding:24px 0; border-bottom:1px solid var(--border); }
.tag-btn { font-family:var(--mono); font-size:10px; color:var(--muted); background:var(--bg-off); padding:4px 10px; border:1px solid var(--border); transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.tag-btn:hover, .tag-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08); }
.post-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:32px; }
.post-card { padding:24px; border:1px solid var(--border); background:var(--bg-off); transition:border-color .2s, background .2s; display:block; color:inherit; text-decoration:none; }
.post-card:hover { border-color:var(--accent-border); background:var(--accent-bg); color:inherit; }
.post-card-tags { display:flex; gap:4px; margin-bottom:10px; }
.post-card-tag { font-family:var(--mono); font-size:9px; color:var(--accent); background:var(--accent-bg); padding:2px 6px; border:1px solid var(--accent-border); }
.post-card-title { font-size:16px; font-weight:600; color:var(--text); line-height:1.3; margin-bottom:8px; }
.post-card:hover .post-card-title { color:var(--accent); }
.post-card-desc { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.post-card-meta { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; color:var(--muted); padding-top:12px; border-top:1px solid var(--border); }
.post-card-status { color:var(--accent); font-weight:500; }
.post-card.upcoming { opacity:.65; }
.post-card.upcoming .post-card-status { color:var(--muted); }
/* ═══════════════════════════════════════════
WRITING PAGE — FEATURED + LIST VARIANT
═══════════════════════════════════════════ */
.featured-header { padding:48px 0 0; }
.featured-header h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.featured-header-desc { font-size:15px; color:var(--muted); max-width:520px; margin-bottom:32px; }
.featured-post { padding:36px 40px; border:1px solid var(--accent-border); background:var(--accent-bg); margin-bottom:32px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:start; }
.featured-badge { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.featured-title { font-size:22px; font-weight:600; color:var(--text); line-height:1.25; margin-bottom:8px; }
.featured-desc { font-size:14px; color:var(--text-2); line-height:1.7; margin-bottom:12px; }
.featured-tags { display:flex; gap:4px; margin-bottom:12px; }
.featured-tag { font-family:var(--mono); font-size:9px; color:var(--accent); background:rgba(245,158,11,0.12); padding:2px 6px; border:1px solid var(--accent-border); }
.featured-link { font-size:13px; font-weight:500; color:var(--accent); }
.featured-meta-col { text-align:right; font-family:var(--mono); font-size:10px; color:var(--muted); white-space:nowrap; }
.featured-meta-col div { margin-bottom:4px; }
.post-list { border-top:1px solid var(--border); }
.post-list-item { display:grid; grid-template-columns:80px 1fr auto; gap:20px; padding:18px 0; border-bottom:1px solid var(--border); align-items:baseline; transition:background .12s; color:inherit; text-decoration:none; }
.post-list-item:hover { background:var(--bg-off); margin:0 -32px; padding-left:32px; padding-right:32px; }
.post-list-date { font-family:var(--mono); font-size:11px; color:var(--muted); }
.post-list-title { font-size:15px; font-weight:500; color:var(--text); line-height:1.35; }
.post-list-item:hover .post-list-title { color:var(--accent); }
.post-list-tags { display:flex; gap:4px; }
.post-list-tag { font-family:var(--mono); font-size:9px; color:var(--muted); background:var(--bg-off); padding:2px 6px; border:1px solid var(--border); transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.post-list-tag:hover { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08); }
/* ═══════════════════════════════════════════
WRITING PAGE — MINIMAL INDEX VARIANT
═══════════════════════════════════════════ */
.minimal-header { padding:48px 0 32px; border-bottom:1px solid var(--border); }
.minimal-header h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; margin-bottom:6px; }
.minimal-desc { font-size:14px; color:var(--muted); }
.minimal-list { padding-top:8px; }
.minimal-year { font-family:var(--mono); font-size:12px; color:var(--muted); padding:20px 0 8px; border-bottom:1px solid var(--border); }
.minimal-item { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--border); transition:background .1s; color:inherit; text-decoration:none; }
.minimal-item:hover { background:var(--bg-off); margin:0 -20px; padding-left:20px; padding-right:20px; }
.minimal-title { font-size:15px; font-weight:500; color:var(--text); line-height:1.35; }
.minimal-item:hover .minimal-title { color:var(--accent); }
.minimal-date { font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.minimal-upcoming { opacity:.5; }
.minimal-upcoming .minimal-title { color:var(--muted); }
.minimal-upcoming .minimal-date { color:var(--border); }
/* ═══════════════════════════════════════════
RESPONSIVE — Writing variants
═══════════════════════════════════════════ */
@media (max-width: 720px) {
.compact-header { flex-direction:column; gap:8px; }
.post-cards { grid-template-columns:1fr; }
.featured-post { grid-template-columns:1fr; gap:16px; }
.featured-meta-col { text-align:left; }
.post-list-item { grid-template-columns:1fr; gap:4px; }
.post-list-date { display:none; }
.post-list-tags { display:none; }
}
/* ═══════════════════════════════════════════
VISUAL MOTIFS
═══════════════════════════════════════════ */
/* ── Base: hide motif-only elements ───────── */
.motif-divider { display:none; }
.journal-label { display:none; }
.journal-keywords { display:none; }
/* When any motif is active, show dividers and hide section border-bottom */
[data-motif]:not([data-motif="none"]) .motif-divider { display:block; }
[data-motif]:not([data-motif="none"]) .section { border-bottom:none; }
[data-motif]:not([data-motif="none"]) #hero { border-bottom:none; }
/* ═══════════════════════════════════════════
MOTIF: JOURNAL PAPER
Serif typography, abstract label, numbered
sections, keywords line
═══════════════════════════════════════════ */
[data-motif="journal"] .hero-name { font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }
[data-motif="journal"] .hero-role { letter-spacing:.04em; text-transform:uppercase; font-size:13px; }
[data-motif="journal"] .journal-label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
[data-motif="journal"] .hero-body { font-family:var(--serif); font-size:17px; line-height:1.75; }
[data-motif="journal"] .journal-keywords { display:block; margin-top:16px; font-family:var(--mono); font-size:10px; color:var(--muted); }
[data-motif="journal"] .journal-keywords span { color:var(--text-2); }
[data-motif="journal"] .prose p { font-family:var(--serif); font-size:16px; }
[data-motif="journal"] .vision-quote { font-style:italic; }
[data-motif="journal"] .motif-divider { height:1px; background:var(--border); margin:0; }
/* ═══════════════════════════════════════════
MOTIF: SPECTRAL ACCENTS (Emission Lines)
Spectral border on hero body/quotes,
emission line dividers, colored tag edges
═══════════════════════════════════════════ */
[data-motif="spectral"] .hero-body {
border-left:3px solid; padding-left:16px;
border-image:linear-gradient(to bottom,
#ff6b6b 0%,#ff6b6b 8%, transparent 8%,transparent 15%,
#ffa94d 15%,#ffa94d 22%, transparent 22%,transparent 35%,
#51cf66 35%,#51cf66 40%, transparent 40%,transparent 55%,
#339af0 55%,#339af0 62%, transparent 62%,transparent 78%,
#845ef7 78%,#845ef7 84%, transparent 84%
) 1;
}
[data-motif="spectral"] .vision-quote {
border-left:3px solid;
border-image:linear-gradient(to bottom,
#339af0 0%,#339af0 30%, transparent 30%,transparent 50%,
#845ef7 50%,#845ef7 70%, transparent 70%
) 1;
}
[data-motif="spectral"] .tag, [data-motif="spectral"] .domain,
[data-motif="spectral"] .glance-tag, [data-motif="spectral"] .etag {
border-left:2px solid var(--accent);
}
[data-motif="spectral"] .motif-divider {
height:3px; display:flex; gap:1px; opacity:0.4;
background:linear-gradient(to right,
transparent 0%,transparent 5%,
#ff6b6b 5%,#ff6b6b 6%, transparent 6%,transparent 18%,
#ffa94d 18%,#ffa94d 19%, transparent 19%,transparent 20%,
#ffa94d 20%,#ffa94d 20.5%, transparent 20.5%,transparent 38%,
#51cf66 38%,#51cf66 39.5%, transparent 39.5%,transparent 55%,
#339af0 55%,#339af0 57%, transparent 57%,transparent 58%,
#339af0 58%,#339af0 58.5%, transparent 58.5%,transparent 78%,
#845ef7 78%,#845ef7 79%, transparent 79%,transparent 92%,
#845ef7 92%,#845ef7 92.5%, transparent 92.5%
);
}
/* ═══════════════════════════════════════════
MOTIF: BLUEPRINT
Blue-tinted accents, diamond dividers,
dimension annotations, construction feel
═══════════════════════════════════════════ */
[data-motif="blueprint"] { --accent:#60a5fa; --accent-bg:rgba(96,165,250,0.07); --accent-border:rgba(96,165,250,0.25); }
[data-motif="blueprint"] .motif-divider {
height:24px; position:relative;
}
[data-motif="blueprint"] .motif-divider::before {
content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border);
}
[data-motif="blueprint"] .motif-divider::after {
content:''; position:absolute; top:50%; left:50%; width:10px; height:10px;
border:1px solid var(--border); transform:translate(-50%,-50%) rotate(45deg); background:var(--bg);
}
/* ═══════════════════════════════════════════
MOTIF: BAND DIAGRAM
Band gap dividers, band edge lines on cards,
conduction/valence visual language
═══════════════════════════════════════════ */
[data-motif="band"] .motif-divider {
height:32px; position:relative;
}
[data-motif="band"] .motif-divider::before {
content:''; position:absolute; top:6px; left:0; right:0; height:1px; background:var(--border);
}
[data-motif="band"] .motif-divider::after {
content:'Eg'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--accent);
background:var(--bg); padding:0 8px; opacity:0.4;
}
/* Extra bottom line via box-shadow on a child - use outline trick */
[data-motif="band"] .motif-divider { border-bottom:1px solid var(--border); box-sizing:content-box; padding-bottom:6px; }
/* Band edge lines on cards */
[data-motif="band"] .motif-card { position:relative; }
[data-motif="band"] .motif-card::before, [data-motif="band"] .motif-card::after {
content:''; position:absolute; left:20px; right:20px; height:1px;
background:var(--accent); opacity:0.12; transition:opacity .2s;
}
[data-motif="band"] .motif-card::before { top:5px; }
[data-motif="band"] .motif-card::after { bottom:5px; }
[data-motif="band"] .motif-card:hover::before, [data-motif="band"] .motif-card:hover::after { opacity:0.4; }
/* ═══════════════════════════════════════════
MOTIF: THIN FILM STACKS
Layered dividers, stratified card top edges,
colored left borders on items
═══════════════════════════════════════════ */
[data-motif="film"] .motif-divider {
height:10px; display:flex; flex-direction:column; opacity:0.35;
background:linear-gradient(to bottom,
var(--accent) 0, var(--accent) 3px,
transparent 3px, transparent 4px,
#3b82f6 4px, #3b82f6 5px,
transparent 5px, transparent 7px,
#10b981 7px, #10b981 9px,
transparent 9px
);
}
/* Stratified top edge on cards */
[data-motif="film"] .motif-card { position:relative; border-top:none; }
[data-motif="film"] .motif-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(to right,
var(--accent) 0%,var(--accent) 40%,
transparent 40%,transparent 45%,
var(--muted) 45%,var(--muted) 70%,
transparent 70%,transparent 75%,
var(--accent) 75%
);
opacity:0.4; transition:opacity .2s;
}
[data-motif="film"] .motif-card:hover::before { opacity:0.9; }
/* Colored left edge on domain tags */
[data-motif="film"] .domain { border-left:3px solid var(--accent); }
[data-motif="film"] .domain:nth-child(2n) { border-left-color:#3b82f6; }
[data-motif="film"] .domain:nth-child(3n) { border-left-color:#10b981; }
[data-motif="film"] .domain:nth-child(5n) { border-left-color:#8b5cf6; }
/* ═══════════════════════════════════════════
MOTIF: CRYSTAL GEOMETRY
Clipped corners on cards/tags, faceted shapes
═══════════════════════════════════════════ */
[data-motif="crystal"] .motif-divider { height:8px; }
[data-motif="crystal"] .motif-card,
[data-motif="crystal"] .glance-card,
[data-motif="crystal"] .overview-block,
[data-motif="crystal"] .post-card,
[data-motif="crystal"] .dash-card {
clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
[data-motif="crystal"] .tag,
[data-motif="crystal"] .domain,
[data-motif="crystal"] .glance-tag,
[data-motif="crystal"] .etag,
[data-motif="crystal"] .ptag,
[data-motif="crystal"] .stag,
[data-motif="crystal"] .dash-tag {
clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);
}
/* ═══════════════════════════════════════════
RESPONSIVE — Motifs
═══════════════════════════════════════════ */
@media (max-width: 720px) {
[data-motif="band"] .motif-card::before, [data-motif="band"] .motif-card::after { left:12px; right:12px; }
}
/* ═══════════════════════════════════════════
APPLE-INSPIRED THEMES
═══════════════════════════════════════════ */
/* ── Theme Definitions ───────────────────── */
[data-scheme="pure-black"] {
--bg:#000000;--bg-off:#0a0a0a;--border:rgba(255,255,255,0.08);--text:#f5f5f7;--text-2:#a1a1a6;--muted:#6e6e73;
--accent:#f59e0b;--accent-bg:rgba(245,158,11,0.06);--accent-border:rgba(245,158,11,0.2);
--nav-bg:rgba(0,0,0,0.85);--status-green:#30d158;
--sans:'Inter','IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:980px;
}
[data-scheme="frosted-glass"] {
--bg:#0a0a0f;--bg-off:rgba(255,255,255,0.03);--border:rgba(255,255,255,0.06);--text:#f0f0f5;--text-2:#9d9da8;--muted:#5c5c6e;
--accent:#f59e0b;--accent-bg:rgba(245,158,11,0.05);--accent-border:rgba(245,158,11,0.2);
--nav-bg:rgba(10,10,15,0.7);--status-green:#30d158;
--sans:'Inter','IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:980px;
}
[data-scheme="gradient-glow"] {
--bg:#050507;--bg-off:rgba(255,255,255,0.02);--border:rgba(255,255,255,0.06);--text:#fafafa;--text-2:#a0a0ab;--muted:#55555e;
--accent:#f59e0b;--accent-bg:rgba(245,158,11,0.06);--accent-border:rgba(245,158,11,0.2);
--nav-bg:rgba(5,5,7,0.8);--status-green:#30d158;
--sans:'Inter','IBM Plex Sans',system-ui,sans-serif;--serif:'IBM Plex Serif',Georgia,serif;
--mono:'IBM Plex Mono',monospace;--max:720px;--wide:980px;
}
/* ═══ SHARED: Apple nav blur ═══ */
[data-scheme="pure-black"] nav,
[data-scheme="frosted-glass"] nav,
[data-scheme="gradient-glow"] nav { backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
/* ═══ SHARED: Rounded cards + pills ═══ */
[data-scheme="pure-black"] .glance-card,
[data-scheme="pure-black"] .overview-block,
[data-scheme="pure-black"] .post-card,
[data-scheme="pure-black"] .dash-card,
[data-scheme="frosted-glass"] .glance-card,
[data-scheme="frosted-glass"] .overview-block,
[data-scheme="frosted-glass"] .post-card,
[data-scheme="frosted-glass"] .dash-card,
[data-scheme="gradient-glow"] .glance-card,
[data-scheme="gradient-glow"] .overview-block,
[data-scheme="gradient-glow"] .post-card,
[data-scheme="gradient-glow"] .dash-card {
border-radius:16px;
}
[data-scheme="pure-black"] .tag,
[data-scheme="pure-black"] .domain,
[data-scheme="pure-black"] .glance-tag,
[data-scheme="pure-black"] .etag,
[data-scheme="pure-black"] .ptag,
[data-scheme="pure-black"] .stag,
[data-scheme="pure-black"] .dash-tag,
[data-scheme="pure-black"] .overview-domain,
[data-scheme="pure-black"] .post-card-tag,
[data-scheme="pure-black"] .post-list-tag,
[data-scheme="frosted-glass"] .tag,
[data-scheme="frosted-glass"] .domain,
[data-scheme="frosted-glass"] .glance-tag,
[data-scheme="frosted-glass"] .etag,
[data-scheme="frosted-glass"] .ptag,
[data-scheme="frosted-glass"] .stag,
[data-scheme="frosted-glass"] .dash-tag,
[data-scheme="frosted-glass"] .overview-domain,
[data-scheme="frosted-glass"] .post-card-tag,
[data-scheme="frosted-glass"] .post-list-tag,
[data-scheme="gradient-glow"] .tag,
[data-scheme="gradient-glow"] .domain,
[data-scheme="gradient-glow"] .glance-tag,
[data-scheme="gradient-glow"] .etag,
[data-scheme="gradient-glow"] .ptag,
[data-scheme="gradient-glow"] .stag,
[data-scheme="gradient-glow"] .dash-tag,
[data-scheme="gradient-glow"] .overview-domain,
[data-scheme="gradient-glow"] .post-card-tag,
[data-scheme="gradient-glow"] .post-list-tag {
border-radius:100px;
}
[data-scheme="pure-black"] .glance-card-role,
[data-scheme="frosted-glass"] .glance-card-role,
[data-scheme="gradient-glow"] .glance-card-role { border-radius:100px; }
[data-scheme="pure-black"] .featured-post,
[data-scheme="frosted-glass"] .featured-post,
[data-scheme="gradient-glow"] .featured-post { border-radius:16px; }
[data-scheme="pure-black"] .snapshot,
[data-scheme="frosted-glass"] .snapshot,
[data-scheme="gradient-glow"] .snapshot { border-radius:16px; overflow:hidden; }
/* ═══ PURE BLACK: Cinematic specifics ═══ */
[data-scheme="pure-black"] .hero-name {
background:linear-gradient(to right,#f5f5f7 0%,#a1a1a6 50%,#f5f5f7 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-scheme="pure-black"] #hero { padding:120px 0 100px; }
[data-scheme="pure-black"] .hero-role { font-size:20px; font-weight:300; letter-spacing:.02em; }
[data-scheme="pure-black"] .hero-body { font-size:19px; font-weight:300; border-left:none; padding-left:0; }
[data-scheme="pure-black"] .hero-body p { font-weight:300; }
[data-scheme="pure-black"] .section { border-bottom:none; padding:100px 0; }
[data-scheme="pure-black"] #hero { border-bottom:none; }
/* Seamless tile grid */
[data-scheme="pure-black"] .skills-list { gap:2px; border-top:none; }
[data-scheme="pure-black"] .skill-item { background:var(--bg-off); padding:32px 28px; border:none; transition:background .3s; }
[data-scheme="pure-black"] .skill-item:nth-child(even) { border-left:none; padding-left:28px; }
[data-scheme="pure-black"] .skill-item:nth-child(odd) { padding-right:28px; }
[data-scheme="pure-black"] .skill-item:hover { background:rgba(255,255,255,0.04); }
/* Domain pills */
[data-scheme="pure-black"] .domain-list { border-top:none; justify-content:center; padding-top:0; }
[data-scheme="pure-black"] .domain { border-radius:100px; padding:8px 20px; }
/* Glance cards borderless */
[data-scheme="pure-black"] .glance-card { background:var(--bg-off); border-color:rgba(255,255,255,0.04); }
/* ═══ FROSTED GLASS: Depth specifics ═══ */
[data-scheme="frosted-glass"] .glance-card,
[data-scheme="frosted-glass"] .overview-block,
[data-scheme="frosted-glass"] .post-card,
[data-scheme="frosted-glass"] .dash-card {
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
[data-scheme="frosted-glass"] .glance-card:hover,
[data-scheme="frosted-glass"] .post-card:hover,
[data-scheme="frosted-glass"] .dash-card:hover {
box-shadow:0 0 40px rgba(245,158,11,0.03);
}
[data-scheme="frosted-glass"] .hero-photo { border-radius:24px; box-shadow:0 0 80px rgba(245,158,11,0.04),0 0 0 1px rgba(255,255,255,0.04); }
[data-scheme="frosted-glass"] .skill-item { border-color:rgba(255,255,255,0.04); }
/* Featured post glow */
[data-scheme="frosted-glass"] .featured-post { backdrop-filter:blur(8px); box-shadow:0 0 40px rgba(245,158,11,0.03); }
/* ═══ GRADIENT GLOW: Vivid specifics ═══ */
/* Ambient glow behind page */
[data-scheme="gradient-glow"]::before {
content:''; position:fixed; top:-200px; left:50%; width:800px; height:800px;
transform:translateX(-50%);
background:radial-gradient(circle,rgba(245,158,11,0.04) 0%,transparent 70%);
pointer-events:none; z-index:0;
}
[data-scheme="gradient-glow"] .page { position:relative; z-index:1; }
[data-scheme="gradient-glow"] nav { position:relative; z-index:2; }
/* Gradient hero name */
[data-scheme="gradient-glow"] .hero-name {
background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 30%,#f5f5f7 60%,#a1a1a6 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* Gradient emphasis in hero body */
[data-scheme="gradient-glow"] .hero-body em {
font-style:normal; font-weight:500;
background:linear-gradient(to right,var(--accent),#fbbf24);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-scheme="gradient-glow"] .section { border-bottom:none; padding:100px 0; }
[data-scheme="gradient-glow"] #hero { border-bottom:none; padding:120px 0 100px; }
[data-scheme="gradient-glow"] .hero-role { font-size:20px; font-weight:300; }
[data-scheme="gradient-glow"] .hero-body { font-size:18px; font-weight:300; border-left:none; padding-left:0; }
[data-scheme="gradient-glow"] .hero-body p { font-weight:300; }
/* Seamless rounded tile grid */
[data-scheme="gradient-glow"] .skills-list { gap:1px; border-top:none; background:rgba(255,255,255,0.04); border-radius:16px; overflow:hidden; }
[data-scheme="gradient-glow"] .skill-item { background:var(--bg); padding:32px 24px; border:none; transition:background .3s; }
[data-scheme="gradient-glow"] .skill-item:nth-child(even) { border-left:none; padding-left:24px; }
[data-scheme="gradient-glow"] .skill-item:nth-child(odd) { padding-right:24px; }
[data-scheme="gradient-glow"] .skill-item:hover { background:rgba(245,158,11,0.03); }
/* Domain gradient chips */
[data-scheme="gradient-glow"] .domain { border-radius:100px; padding:8px 20px;
background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(251,191,36,0.04));
}
[data-scheme="gradient-glow"] .domain-list { border-top:none; justify-content:center; padding-top:0; }
/* ═══ RESPONSIVE — Apple themes ═══ */
@media (max-width: 720px) {
[data-scheme="pure-black"] .hero-body,
[data-scheme="gradient-glow"] .hero-body { font-size:16px; }
[data-scheme="pure-black"] .skills-list,
[data-scheme="gradient-glow"] .skills-list { grid-template-columns:1fr; }
[data-scheme="pure-black"] .skill-item:nth-child(even),
[data-scheme="gradient-glow"] .skill-item:nth-child(even) { padding-left:28px; }
[data-scheme="frosted-glass"] .hero-photo { border-radius:50%; }
}
/* ═══════════════════════════════════════════
WRITING PAGE — FILTER BAR & CATEGORIES
═══════════════════════════════════════════ */
.writing-header { padding:48px 0 24px; }
.writing-header h1 { font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.writing-header .page-desc { margin-bottom:0; }
.writing-filters {
padding:20px 0; border-bottom:1px solid var(--border); margin-bottom:32px;
display:flex; flex-direction:column; gap:12px;
}
.filter-row { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; padding-left:72px; position:relative; }
.filter-label {
font-family:var(--mono); font-size:9px; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted); width:66px; flex-shrink:0;
position:absolute; left:0; top:5px;
}
.filter-btn {
font-family:var(--mono); font-size:10px; color:var(--muted);
background:var(--bg-off); padding:4px 10px; border:1px solid var(--border);
transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.filter-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08); }
.filter-btn.active { color:var(--accent); border-color:var(--accent-border); background:var(--accent-bg); }
.filter-status {
font-family:var(--mono); font-size:10px; color:var(--muted);
min-height:16px; padding-left:64px;
}
/* Apple themes: round the filter buttons */
[data-scheme="pure-black"] .filter-btn,
[data-scheme="frosted-glass"] .filter-btn,
[data-scheme="gradient-glow"] .filter-btn { border-radius:100px; }
/* Category badges inline */
.category-badge {
display:inline-block;
font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase;
padding:2px 7px; border:1px solid var(--border); color:var(--muted);
transition:all .3s;
}
.category-badge.cat-technical { color:var(--accent); border-color:var(--accent-border); background:var(--accent-bg); }
.category-badge.cat-take { color:#3b82f6; border-color:rgba(59,130,246,0.25); background:rgba(59,130,246,0.07); }
.category-badge.cat-build-log { color:#10b981; border-color:rgba(16,185,129,0.25); background:rgba(16,185,129,0.07); }
[data-scheme="pure-black"] .category-badge,
[data-scheme="frosted-glass"] .category-badge,
[data-scheme="gradient-glow"] .category-badge { border-radius:100px; }
/* Meta line for row layout */
.essay-meta-line { display:flex; align-items:center; gap:8px; margin:4px 0 6px; }
.essay-date { font-family:var(--mono); font-size:10px; color:var(--muted); }
/* Upcoming items dimmed */
.upcoming-item { opacity:.6; }
@media (max-width: 720px) {
.filter-label { position:static; width:auto; }
.filter-row { padding-left:0; gap:4px; }
.writing-filters { gap:8px; }
}
/* ═══════════════════════════════════════════
PROJECTS — QUICK NAV VARIANTS
═══════════════════════════════════════════ */
/* Minimal list */
.qn-minimal { border-top:1px solid var(--border); }
.qn-minimal-item { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); transition:background .15s; color:inherit; text-decoration:none; }
.qn-minimal-item:hover { background:var(--accent-bg); margin:0 -12px; padding-left:12px; padding-right:12px; }
.qn-minimal-num { font-family:var(--mono); font-size:11px; color:var(--muted); width:28px; flex-shrink:0; }
.qn-minimal-title { font-size:14px; font-weight:500; color:var(--text); flex:1; }
.qn-minimal-item:hover .qn-minimal-title { color:var(--accent); }
.qn-minimal-year { font-family:var(--mono); font-size:10px; color:var(--muted); flex-shrink:0; }
.qn-minimal-tag { font-family:var(--mono); font-size:9px; color:var(--accent); background:var(--accent-bg); padding:2px 6px; border:1px solid var(--accent-border); flex-shrink:0; }
/* Year-grouped */
.qn-year-label { font-family:var(--mono); font-size:12px; color:var(--muted); padding:16px 0 8px; border-bottom:1px solid var(--border); }
.qn-year-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); transition:background .15s; color:inherit; text-decoration:none; }
.qn-year-item:hover { background:var(--accent-bg); margin:0 -12px; padding-left:12px; padding-right:12px; }
.qn-year-num { font-family:var(--mono); font-size:10px; color:var(--border); width:24px; }
.qn-year-title { font-size:14px; font-weight:500; color:var(--text); flex:1; }
.qn-year-item:hover .qn-year-title { color:var(--accent); }
.qn-year-inst { font-family:var(--mono); font-size:10px; color:var(--muted); flex-shrink:0; }
/* Horizontal pills */
.qn-pills { display:flex; gap:10px; overflow-x:auto; padding:8px 0 16px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.qn-pill { flex-shrink:0; padding:14px 20px; border:1px solid var(--border); background:var(--bg-off); transition:all .2s; min-width:200px; max-width:280px; color:inherit; text-decoration:none; display:block; }
.qn-pill:hover { border-color:var(--accent-border); background:var(--accent-bg); }
.qn-pill-num { font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:4px; }
.qn-pill-title { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; margin-bottom:6px; }
.qn-pill:hover .qn-pill-title { color:var(--accent); }
.qn-pill-inst { font-family:var(--mono); font-size:9px; color:var(--muted); }
/* ═══════════════════════════════════════════
PROJECTS — COLLAPSIBLE ACCORDION
═══════════════════════════════════════════ */
.project-accordion { border-top:1px solid var(--border); }
.pa-header { display:flex; align-items:start; justify-content:space-between; gap:20px; padding:28px 0; border-bottom:1px solid var(--border); transition:background .15s; }
.pa-header:hover { background:var(--accent-bg); margin:0 -16px; padding-left:16px; padding-right:16px; }
.pa-left { flex:1; }
.pa-meta { display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.pa-num { font-family:var(--mono); font-size:11px; color:var(--muted); }
.pa-title { font-size:18px; font-weight:600; color:var(--text); line-height:1.25; margin-bottom:4px; }
.pa-header:hover .pa-title { color:var(--accent); }
.pa-venue { font-family:var(--mono); font-size:10px; color:var(--muted); }
.pa-toggle { font-family:var(--mono); font-size:10px; color:var(--accent); border:1px solid var(--accent-border); background:var(--accent-bg); padding:5px 12px; flex-shrink:0; transition:all .3s cubic-bezier(.25,.46,.45,.94); margin-top:4px; display:flex; align-items:center; gap:6px; }
.pa-toggle:hover { background:var(--accent); color:var(--bg); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,.08); }
.pa-toggle .arrow { transition:transform .3s; font-size:8px; }
.pa-toggle.open .arrow { transform:rotate(180deg); }
.pa-body { max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; opacity:0; }
.pa-body.open { max-height:3000px; opacity:1; padding:28px 0; }
.pa-body-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.pa-impact { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); grid-column:1/-1; }
.pa-footer { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pa-stack { display:flex; gap:6px; flex-wrap:wrap; }
/* ═══════════════════════════════════════════
PROJECTS — VENTURE SHOWCASE
═══════════════════════════════════════════ */
/* Featured card */
.venture-card { padding:40px; border:1px solid var(--accent-border); background:var(--accent-bg); margin-bottom:16px; position:relative; overflow:hidden; transition:border-color .2s; }
.venture-card:hover { border-color:var(--accent); }
.venture-badge { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.venture-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2.5s infinite; }
.venture-name { font-size:clamp(24px,3.5vw,36px); font-weight:700; color:var(--text); letter-spacing:-.02em; line-height:1.15; margin-bottom:8px; }
.venture-tagline { font-size:16px; color:var(--text-2); margin-bottom:20px; max-width:560px; line-height:1.6; }
.venture-meta { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.venture-meta-item { font-family:var(--mono); font-size:11px; color:var(--muted); }
.venture-meta-item span { color:var(--text-2); }
.venture-desc { font-size:14.5px; color:var(--text-2); line-height:1.75; max-width:600px; margin-bottom:24px; }
.venture-desc strong { color:var(--text); font-weight:500; }
.venture-links { display:flex; gap:16px; align-items:center; }
.venture-link-primary { font-size:14px; font-weight:500; color:var(--bg); background:var(--accent); padding:8px 20px; transition:opacity .2s; }
.venture-link-primary:hover { opacity:.85; color:var(--bg); }
.venture-link-secondary { font-size:14px; color:var(--accent); font-weight:500; }
/* Inline row */
.venture-row { display:grid; grid-template-columns:auto 1fr auto; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); align-items:start; }
.venture-row-icon { width:48px; height:48px; border:1px solid var(--accent-border); background:var(--accent-bg); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:18px; font-weight:700; color:var(--accent); }
.venture-row-name { font-size:18px; font-weight:600; color:var(--text); margin-bottom:4px; }
.venture-row-tagline { font-size:13px; color:var(--muted); margin-bottom:8px; }
.venture-row-meta { font-family:var(--mono); font-size:10px; color:var(--muted); display:flex; gap:16px; }
.venture-row-meta span { color:var(--text-2); }
.venture-row-links { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.venture-row-link { font-size:12px; color:var(--accent); font-weight:500; font-family:var(--mono); }
/* Ventures grid */
.ventures-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.vg-card { padding:28px; border:1px solid var(--border); background:var(--bg-off); transition:all .2s; }
.vg-card:hover { border-color:var(--accent-border); background:var(--accent-bg); }
.vg-card-badge { font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.vg-card-badge-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.vg-card-name { font-size:18px; font-weight:600; color:var(--text); margin-bottom:6px; }
.vg-card:hover .vg-card-name { color:var(--accent); }
.vg-card-tagline { font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.vg-card-meta { font-family:var(--mono); font-size:10px; color:var(--muted); display:flex; gap:12px; margin-bottom:14px; }
.vg-card-links { display:flex; gap:12px; padding-top:14px; border-top:1px solid var(--border); }
.vg-card-link { font-size:12px; color:var(--accent); font-weight:500; font-family:var(--mono); }
/* Apple themes: round venture elements */
[data-scheme="pure-black"] .venture-card,
[data-scheme="frosted-glass"] .venture-card,
[data-scheme="gradient-glow"] .venture-card { border-radius:16px; }
[data-scheme="pure-black"] .venture-link-primary,
[data-scheme="frosted-glass"] .venture-link-primary,
[data-scheme="gradient-glow"] .venture-link-primary { border-radius:100px; }
[data-scheme="pure-black"] .vg-card,
[data-scheme="frosted-glass"] .vg-card,
[data-scheme="gradient-glow"] .vg-card { border-radius:16px; }
[data-scheme="pure-black"] .qn-pill,
[data-scheme="frosted-glass"] .qn-pill,
[data-scheme="gradient-glow"] .qn-pill { border-radius:16px; }
[data-scheme="pure-black"] .pa-toggle,
[data-scheme="frosted-glass"] .pa-toggle,
[data-scheme="gradient-glow"] .pa-toggle { border-radius:100px; }
/* ═══════════════════════════════════════════
RESPONSIVE — Projects upgrades
═══════════════════════════════════════════ */
@media (max-width: 720px) {
.qn-minimal-tag { display:none; }
.qn-year-inst { display:none; }
.pa-body-inner { grid-template-columns:1fr; }
.venture-card { padding:24px; }
.venture-row { grid-template-columns:1fr; gap:12px; }
.venture-row-icon { display:none; }
.venture-row-links { align-items:flex-start; flex-direction:row; }
.ventures-grid { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════
INTERACTIVES GALLERY PAGE
═══════════════════════════════════════════ */
.interactive-gallery { display:flex; flex-direction:column; gap:32px; }
.ig-card { border:1px solid var(--border); background:var(--bg-off); overflow:hidden; transition:border-color .2s; }
.ig-card:hover { border-color:var(--accent-border); }
.ig-preview { position:relative; overflow:hidden; background:#0a0e1a; }
.ig-preview iframe { display:block; width:100%; border:none; }
.ig-overlay {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,0.4); opacity:0; transition:opacity .3s; text-decoration:none;
}
.ig-card:hover .ig-overlay { opacity:1; }
.ig-overlay-label {
font-family:var(--mono); font-size:12px; font-weight:500; color:#fff;
background:var(--accent); padding:8px 20px; letter-spacing:.04em;
transition:transform .2s;
}
.ig-card:hover .ig-overlay-label { transform:scale(1.05); }
.ig-info { padding:24px 28px; }
.ig-meta { display:flex; gap:8px; margin-bottom:10px; }
.ig-type {
font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
color:var(--accent); background:var(--accent-bg); padding:2px 8px; border:1px solid var(--accent-border);
}
.ig-tools { font-family:var(--mono); font-size:9px; color:var(--muted); padding:2px 8px; border:1px solid var(--border); }
.ig-title { font-size:18px; font-weight:600; color:var(--text); margin-bottom:8px; line-height:1.3; }
.ig-desc { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.ig-actions { display:flex; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.ig-link {
font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:500;
transition:opacity .2s;
}
.ig-link:hover { opacity:.7; color:var(--accent); }
.ig-empty { padding:48px; text-align:center; color:var(--muted); font-size:14px; border:1px dashed var(--border); }
/* Apple themes: round interactive cards */
[data-scheme="pure-black"] .ig-card,
[data-scheme="frosted-glass"] .ig-card,
[data-scheme="gradient-glow"] .ig-card { border-radius:16px; }
[data-scheme="pure-black"] .ig-overlay-label,
[data-scheme="frosted-glass"] .ig-overlay-label,
[data-scheme="gradient-glow"] .ig-overlay-label { border-radius:100px; }
@media (max-width:720px) {
.ig-info { padding:16px 20px; }
.ig-actions { flex-wrap:wrap; }
}
/* ═══════════════════════════════════════════
PROJECT MEDIA SYSTEM
═══════════════════════════════════════════ */
/* Media labels */
.proj-media-label {
font-family:var(--mono); font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--accent); margin-bottom:10px;
display:flex; align-items:center; gap:6px;
}
.proj-media-label::before { content:'▶'; font-size:8px; }
.proj-media-caption {
font-family:var(--mono); font-size:11px; color:var(--muted);
text-align:center; margin-top:8px; line-height:1.5;
}
/* Hero image */
.proj-media-hero { margin-bottom:28px; }
.proj-media-hero img {
width:100%; height:auto; display:block;
border:1px solid var(--border); border-radius:4px;
}
/* Video embed */
.proj-media-video { margin-bottom:28px; }
.video-responsive {
position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
border:1px solid var(--border); border-radius:4px;
}
.video-responsive iframe {
position:absolute; top:0; left:0; width:100%; height:100%; border:none;
}
/* Interactive embed */
.proj-media-interactive { margin-bottom:28px; }
.proj-media-interactive iframe {
width:100%; border:1px solid var(--border); border-radius:4px;
background:#0a0e1a; display:block;
}
/* Gallery grid */
.proj-gallery { margin-bottom:28px; }
.proj-gallery-grid {
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.proj-gallery-item img {
width:100%; height:auto; display:block;
border:1px solid var(--border); border-radius:4px;
transition:border-color .2s;
}
.proj-gallery-item:hover img { border-color:var(--accent-border); }
/* Freeform content */
.proj-freeform { grid-column:1/-1; }
.proj-freeform p { font-size:14.5px; color:var(--text-2); line-height:1.78; margin-bottom:18px; }
.proj-freeform strong { color:var(--text); font-weight:500; }
.proj-freeform em { font-style:italic; }
.proj-freeform h2 { font-size:18px; font-weight:600; color:var(--text); margin:32px 0 12px; }
.proj-freeform h3 { font-size:15px; font-weight:600; color:var(--text); margin:24px 0 10px; }
.proj-freeform img { max-width:100%; height:auto; border:1px solid var(--border); border-radius:4px; margin:20px 0; }
.proj-freeform iframe { width:100%; border:1px solid var(--border); border-radius:4px; margin:20px 0; }
.proj-freeform ul, .proj-freeform ol { font-size:14.5px; color:var(--text-2); line-height:1.78; margin-bottom:18px; padding-left:24px; }
.proj-freeform blockquote { border-left:3px solid var(--accent); padding:12px 0 12px 20px; margin:24px 0; font-style:italic; color:var(--text-2); }
.proj-freeform code { font-family:var(--mono); font-size:13px; background:var(--bg-off); padding:2px 6px; border:1px solid var(--border); border-radius:3px; }
/* Media in accordion — full width */
.pa-media-section { grid-column:1/-1; margin-bottom:8px; }
/* Project footer bar — unified for both modes */
.project-footer-bar {
margin-top:20px; padding-top:20px; border-top:1px solid var(--border);
grid-column:1/-1; display:flex; align-items:center;
justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.project-footer-bar .project-stack { display:flex; gap:6px; flex-wrap:wrap; }
/* Preview media thumbnail in collapsed accordion state */
.pa-preview-media {
margin-top:12px; max-width:280px;
}
.pa-preview-media img {
width:100%; height:auto; display:block;
border:1px solid var(--border); border-radius:4px; opacity:0.7;
transition:opacity .2s;
}
.pa-header:hover .pa-preview-media img { opacity:1; }
/* Project-level impact (for expanded view) */
.project-impact {
margin-top:24px; padding-top:24px; border-top:1px solid var(--border);
}
/* Apple themes: round media elements */
[data-scheme="pure-black"] .proj-media-hero img,
[data-scheme="frosted-glass"] .proj-media-hero img,
[data-scheme="gradient-glow"] .proj-media-hero img,
[data-scheme="pure-black"] .video-responsive,
[data-scheme="frosted-glass"] .video-responsive,
[data-scheme="gradient-glow"] .video-responsive,
[data-scheme="pure-black"] .proj-gallery-item img,
[data-scheme="frosted-glass"] .proj-gallery-item img,
[data-scheme="gradient-glow"] .proj-gallery-item img { border-radius:12px; }
@media (max-width:720px) {
.proj-gallery-grid { grid-template-columns:1fr; }
.pa-preview-media { max-width:100%; }
.project-cols { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════
PROJECTS — MEDIA ELEMENTS
═══════════════════════════════════════════ */
/* Media labels */
.project-media-label {
font-family:var(--mono); font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--accent); margin-bottom:8px;
display:flex; align-items:center; gap:6px;
}
.project-media-label::before { content:'▶'; font-size:8px; }
/* Hero image */
.project-media-hero { grid-column:1/-1; margin-bottom:24px; }
.project-media-hero img { width:100%; height:auto; border:1px solid var(--border); border-radius:4px; display:block; }
.project-media-caption { font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center; margin-top:8px; }
/* Video embed */
.project-media-video { grid-column:1/-1; margin-bottom:24px; }
.video-responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:4px; border:1px solid var(--border); }
.video-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
/* Interactive embed */
.project-media-interactive { grid-column:1/-1; margin-bottom:24px; }
.project-media-interactive iframe { width:100%; border:1px solid var(--border); border-radius:4px; display:block; background:#0a0e1a; }
.project-media-actions { display:flex; justify-content:center; margin-top:8px; }
.project-media-actions a { font-family:var(--mono); font-size:10px; color:var(--accent); padding:4px 10px; border:1px solid var(--accent-border); transition:all .3s cubic-bezier(.25,.46,.45,.94); }
.project-media-actions a:hover { background:var(--accent-bg); transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,.08); }
/* Gallery */
.project-media-gallery { grid-column:1/-1; margin-bottom:24px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.gallery-item { margin:0; }
.gallery-item img { width:100%; height:auto; border:1px solid var(--border); border-radius:4px; display:block; transition:border-color .2s; }
.gallery-item:hover img { border-color:var(--accent-border); }
.gallery-item figcaption { font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center; margin-top:6px; }
/* Preview thumbnail in accordion header */
.pa-preview-thumb { width:80px; height:56px; overflow:hidden; border:1px solid var(--border); border-radius:3px; flex-shrink:0; }
.pa-preview-thumb img { width:100%; height:100%; object-fit:cover; }
/* Preview thumbnail in quick nav card */
.dash-card-thumb { margin:-16px -20px 12px; overflow:hidden; border-bottom:1px solid var(--border); }
.dash-card-thumb img { width:100%; height:120px; object-fit:cover; display:block; }
/* Freeform content */
.pa-freeform, .project-freeform { font-size:14.5px; color:var(--text-2); line-height:1.78; }
.pa-freeform p, .project-freeform p { margin-bottom:18px; }
.pa-freeform strong, .project-freeform strong { color:var(--text); font-weight:500; }
.pa-freeform em, .project-freeform em { font-style:italic; }
.pa-freeform img, .project-freeform img { max-width:100%; height:auto; border:1px solid var(--border); border-radius:4px; margin:24px 0; }
.pa-freeform iframe, .project-freeform iframe { width:100%; border:1px solid var(--border); border-radius:4px; margin:24px 0; }
.pa-freeform h2, .project-freeform h2 { font-size:20px; font-weight:600; color:var(--text); margin:32px 0 12px; }
.pa-freeform h3, .project-freeform h3 { font-size:16px; font-weight:600; color:var(--text); margin:24px 0 8px; }
.pa-freeform ul, .pa-freeform ol, .project-freeform ul, .project-freeform ol { margin-bottom:18px; padding-left:24px; }
.pa-freeform li, .project-freeform li { margin-bottom:6px; }
.pa-freeform blockquote, .project-freeform blockquote { border-left:3px solid var(--accent); padding:12px 0 12px 20px; margin:24px 0; font-style:italic; color:var(--text-2); }
/* Project links row */
.project-links-row { display:flex; gap:16px; align-items:center; }
/* Apple themes rounding */
[data-scheme="pure-black"] .project-media-hero img,
[data-scheme="frosted-glass"] .project-media-hero img,
[data-scheme="gradient-glow"] .project-media-hero img { border-radius:12px; }
[data-scheme="pure-black"] .video-responsive,
[data-scheme="frosted-glass"] .video-responsive,
[data-scheme="gradient-glow"] .video-responsive { border-radius:12px; }
[data-scheme="pure-black"] .pa-preview-thumb,
[data-scheme="frosted-glass"] .pa-preview-thumb,
[data-scheme="gradient-glow"] .pa-preview-thumb { border-radius:8px; }
[data-scheme="pure-black"] .project-media-actions a,
[data-scheme="frosted-glass"] .project-media-actions a,
[data-scheme="gradient-glow"] .project-media-actions a { border-radius:100px; }
@media (max-width:720px) {
.gallery-grid { grid-template-columns:1fr 1fr; }
.pa-preview-thumb { display:none; }
.dash-card-thumb img { height:80px; }
}
/* ═══════════════════════════════════════════
LAYOUT MODES
═══════════════════════════════════════════ */
/* ── VISIONARY LAYOUT ─────────────────────── */
[data-layout="visionary"] { --sans:'Inter','IBM Plex Sans',system-ui,sans-serif; }
[data-layout="visionary"] .hero-visionary { text-align:center; padding:100px 0 80px; }
[data-layout="visionary"] .hero-visionary .hero-photo { margin:0 auto 32px; }
[data-layout="visionary"] .hero-name { font-size:clamp(40px,6vw,64px); font-weight:800; letter-spacing:-.04em; }
[data-layout="visionary"] .hero-role { font-size:18px; font-weight:300; color:var(--muted); margin-bottom:40px; }
[data-layout="visionary"] .hero-statement-lead { font-family:var(--serif); font-size:clamp(18px,2.5vw,22px); color:var(--text-2); line-height:1.7; max-width:680px; margin:0 auto 24px; }
[data-layout="visionary"] .hero-body-secondary { font-size:15px; color:var(--muted); line-height:1.7; max-width:600px; margin:0 auto 32px; }
[data-layout="visionary"] .hero-links { justify-content:center; }
/* Visionary: larger section spacing */
[data-layout="visionary"] .section { padding:80px 0; }
[data-layout="visionary"] #hero { border-bottom:none; padding:100px 0 80px; }
[data-layout="visionary"] .prose p { font-family:var(--serif); font-size:17px; line-height:1.8; }
[data-layout="visionary"] .vision-quote { font-family:var(--serif); font-size:clamp(18px,2.5vw,24px); line-height:1.6; }
[data-layout="visionary"] .vision-body p { font-family:var(--serif); font-size:16px; line-height:1.8; }
/* Visionary: hide terminal prefix and section coords */
[data-layout="visionary"] .terminal-prefix { display:none; }
[data-layout="visionary"] .section-coord { display:none; }
[data-layout="visionary"] .section-label { font-size:12px; letter-spacing:.08em; }
/* ── ACADEMIC LAYOUT ──────────────────────── */
[data-layout="academic"] .hero-name { font-size:clamp(28px,4vw,40px); }
[data-layout="academic"] .hero-role { font-size:14px; letter-spacing:.04em; }
[data-layout="academic"] .hero-body { font-size:15.5px; border-left:none; padding-left:0; }
[data-layout="academic"] .section { padding:56px 0; }
/* Academic: clean, structured feel */
[data-layout="academic"] .terminal-prefix { display:none; }
[data-layout="academic"] .section-label { font-size:11px; font-weight:500; }
/* ── Impact mode for projects ─────────────── */
.impact-mode-content { max-width:680px; }
.impact-mode-text { font-family:var(--serif); font-size:16px; color:var(--text-2); line-height:1.8; }
.impact-mode-text p { margin-bottom:16px; }
.impact-mode-text strong { color:var(--text); font-weight:500; }
/* ── About page ───────────────────────────── */
.about-page-header { display:flex; align-items:center; gap:32px; padding:64px 0 48px; border-bottom:1px solid var(--border); }
.about-page-header h1 { font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.about-page-header .about-photo { flex-shrink:0; }
.about-role { font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:6px; }
.about-narrative { max-width:680px; padding:48px 0; }
.about-narrative p { font-family:var(--serif); font-size:17px; color:var(--text-2); line-height:1.85; margin-bottom:24px; }
.about-narrative strong { color:var(--text); font-weight:500; }
.about-belief { font-family:var(--serif); font-size:18px; color:var(--text-2); font-style:italic; border-left:3px solid var(--accent); padding:16px 0 16px 24px; margin:32px 0; line-height:1.7; }
.about-details { padding-bottom:32px; border-bottom:1px solid var(--border); max-width:400px; }
.about-section { padding:32px 0; border-bottom:1px solid var(--border); }
.about-section h2 { font-size:16px; font-weight:600; margin-bottom:16px; }
.about-exp-item { padding:12px 0; }
.about-exp-title { font-size:14px; font-weight:500; color:var(--text); }
.about-exp-org { font-size:13px; color:var(--muted); }
.about-exp-date { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
@media (max-width:720px) {
.about-page-header { flex-direction:column; text-align:center; }
[data-layout="visionary"] .hero-visionary { padding:60px 0 40px; }
}
/* ═══════════════════════════════════════════
LIGHT BACKGROUND OVERRIDE
Auto-applied when --bg luminance > 0.55
Flips all text/border colors to dark
═══════════════════════════════════════════ */
[data-bg-mode="light"] {
--text:#1c1917;--text-2:#44403c;--muted:#78716c;
--bg-off:rgba(0,0,0,0.035);--border:rgba(0,0,0,0.08);
--nav-bg:rgba(255,255,255,0.85);
}
[data-bg-mode="light"] nav { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .nav-links a { color:#78716c; }
[data-bg-mode="light"] .nav-links a.active,
[data-bg-mode="light"] .nav-links a:hover { color:#1c1917; }
[data-bg-mode="light"] .nav-name { color:#1c1917; }
[data-bg-mode="light"] .nav-resume { color:#78716c; }
/* Hero */
[data-bg-mode="light"] .hero-name { color:#1c1917; }
[data-bg-mode="light"] .hero-role { color:#78716c; }
[data-bg-mode="light"] .hero-body { color:#44403c; }
[data-bg-mode="light"] .hero-body em { color:#1c1917; }
[data-bg-mode="light"] .hero-status-bar { color:#78716c; }
[data-bg-mode="light"] .status-value { color:#44403c; }
/* Section elements */
[data-bg-mode="light"] .section { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] #hero { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .section-label { color:#78716c; }
[data-bg-mode="light"] .section-coord { color:rgba(0,0,0,0.07); }
/* Prose and body text */
[data-bg-mode="light"] .prose p { color:#44403c; }
[data-bg-mode="light"] .prose strong { color:#1c1917; }
[data-bg-mode="light"] .vision-quote { color:#44403c; }
[data-bg-mode="light"] .vision-body p { color:#44403c; }
/* Cards and interactive elements */
[data-bg-mode="light"] .glance-card,
[data-bg-mode="light"] .overview-block,
[data-bg-mode="light"] .skill-item,
[data-bg-mode="light"] .dash-card,
[data-bg-mode="light"] .post-card { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .glance-card-title,
[data-bg-mode="light"] .skill-name,
[data-bg-mode="light"] .dash-card-title { color:#1c1917; }
[data-bg-mode="light"] .glance-card-institution,
[data-bg-mode="light"] .glance-card-impact,
[data-bg-mode="light"] .skill-desc { color:#44403c; }
/* Spec table */
[data-bg-mode="light"] .spec-row { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .spec-key { color:#78716c; }
[data-bg-mode="light"] .spec-val { color:#44403c; }
/* Tags and domains */
[data-bg-mode="light"] .tag,
[data-bg-mode="light"] .domain,
[data-bg-mode="light"] .glance-tag,
[data-bg-mode="light"] .etag,
[data-bg-mode="light"] .ptag,
[data-bg-mode="light"] .stag,
[data-bg-mode="light"] .dash-tag,
[data-bg-mode="light"] .filter-btn,
[data-bg-mode="light"] .tag-btn { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.07); color:#78716c; }
/* Contact */
[data-bg-mode="light"] .contact-row { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .contact-row .label { color:#78716c; }
[data-bg-mode="light"] .contact-intro { color:#44403c; }
/* Footer */
[data-bg-mode="light"] .foot { color:#78716c; }
/* Photo border */
[data-bg-mode="light"] .hero-photo { border-color:rgba(0,0,0,0.09); }
/* Loader — must stay opaque to cover page during load */
[data-bg-mode="light"] .loader-overlay { background:var(--bg); }
/* Mobile nav */
[data-bg-mode="light"] .nav-overlay { background:rgba(255,255,255,0.98); }
[data-bg-mode="light"] .nav-overlay a { color:#44403c; }
[data-bg-mode="light"] .nav-overlay a.active { color:#1c1917; }
/* Writing page */
[data-bg-mode="light"] .writing-header h1 { color:#1c1917; }
[data-bg-mode="light"] .page-desc { color:#78716c; }
[data-bg-mode="light"] .essay-title { color:#1c1917; }
[data-bg-mode="light"] .essay-desc { color:#44403c; }
[data-bg-mode="light"] .post-card-title { color:#1c1917; }
[data-bg-mode="light"] .post-card-desc { color:#44403c; }
[data-bg-mode="light"] .filter-label { color:#78716c; }
[data-bg-mode="light"] .category-badge { border-color:rgba(0,0,0,0.07); color:#78716c; }
[data-bg-mode="light"] .writing-filters { border-bottom-color:rgba(0,0,0,0.09); }
/* Projects page */
[data-bg-mode="light"] .pa-header { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .pa-title { color:#1c1917; }
[data-bg-mode="light"] .project-title { color:#1c1917; }
[data-bg-mode="light"] .project-accordion { border-top-color:rgba(0,0,0,0.09); }
/* Ventures */
[data-bg-mode="light"] .venture-card { background:rgba(250,192,17,0.04); border-color:rgba(250,192,17,0.2); }
[data-bg-mode="light"] .venture-name { color:#1c1917; }
[data-bg-mode="light"] .venture-tagline { color:#44403c; }
[data-bg-mode="light"] .venture-desc { color:#44403c; }
/* Article body */
[data-bg-mode="light"] .article-title { color:#1c1917; }
[data-bg-mode="light"] .article-body p { color:#44403c; }
[data-bg-mode="light"] .article-body h2,
[data-bg-mode="light"] .article-body h3 { color:#1c1917; }
[data-bg-mode="light"] .article-body strong { color:#1c1917; }
[data-bg-mode="light"] .article-body code { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .article-body pre { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
/* Override gradient text for light mode */
[data-bg-mode="light"][data-scheme="pure-black"] .hero-name,
[data-bg-mode="light"][data-scheme="gradient-glow"] .hero-name {
background:none; -webkit-background-clip:unset; -webkit-text-fill-color:#1c1917; background-clip:unset;
color:#1c1917;
}
/* Light mode hover states — ensure accent colors show on hover */
[data-bg-mode="light"] .tag:hover,
[data-bg-mode="light"] .domain:hover,
[data-bg-mode="light"] .glance-tag:hover,
[data-bg-mode="light"] .etag:hover,
[data-bg-mode="light"] .ptag:hover,
[data-bg-mode="light"] .stag:hover,
[data-bg-mode="light"] .dash-tag:hover,
[data-bg-mode="light"] .atag:hover,
[data-bg-mode="light"] .filter-btn:hover,
[data-bg-mode="light"] .tag-btn:hover,
[data-bg-mode="light"] .overview-domain:hover,
[data-bg-mode="light"] .post-list-tag:hover,
[data-bg-mode="light"] .post-card-tag:hover,
[data-bg-mode="light"] .category-badge:hover {
color:var(--accent); background:var(--accent-bg); border-color:var(--accent);
transform:translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,0.08);
}
[data-bg-mode="light"] .filter-btn.active,
[data-bg-mode="light"] .tag-btn.active {
color:var(--accent); border-color:var(--accent); background:var(--accent-bg);
}
/* Cards hover */
[data-bg-mode="light"] .glance-card:hover,
[data-bg-mode="light"] .overview-block:hover,
[data-bg-mode="light"] .skill-item:hover,
[data-bg-mode="light"] .dash-card:hover,
[data-bg-mode="light"] .post-card:hover,
[data-bg-mode="light"] .vg-card:hover,
[data-bg-mode="light"] .ig-card:hover {
border-color:var(--accent); background:var(--accent-bg);
}
[data-bg-mode="light"] .glance-card:hover .glance-card-title,
[data-bg-mode="light"] .skill-item:hover .skill-name,
[data-bg-mode="light"] .dash-card:hover .dash-card-title,
[data-bg-mode="light"] .post-card:hover .post-card-title,
[data-bg-mode="light"] .vg-card:hover .vg-card-name {
color:var(--accent);
}
/* Row hovers */
[data-bg-mode="light"] .spec-row:hover,
[data-bg-mode="light"] .contact-row:hover,
[data-bg-mode="light"] .essay-row:hover,
[data-bg-mode="light"] .pa-header:hover,
[data-bg-mode="light"] .qn-minimal-item:hover,
[data-bg-mode="light"] .qn-year-item:hover,
[data-bg-mode="light"] .post-list-item:hover,
[data-bg-mode="light"] .minimal-item:hover,
[data-bg-mode="light"] .info-row:hover {
background:var(--accent-bg);
}
[data-bg-mode="light"] .pa-header:hover .pa-title,
[data-bg-mode="light"] .essay-row:hover .essay-title,
[data-bg-mode="light"] .qn-minimal-item:hover .qn-minimal-title,
[data-bg-mode="light"] .qn-year-item:hover .qn-year-title,
[data-bg-mode="light"] .post-list-item:hover .post-list-title,
[data-bg-mode="light"] .minimal-item:hover .minimal-title {
color:var(--accent);
}
/* Nav hover */
[data-bg-mode="light"] .nav-links a:hover { color:var(--accent); }
/* Link hovers */
[data-bg-mode="light"] .hero-links a:hover,
[data-bg-mode="light"] .glance-link:hover,
[data-bg-mode="light"] .project-link:hover,
[data-bg-mode="light"] .section-link:hover { color:var(--accent); }
/* Pill hover */
[data-bg-mode="light"] .qn-pill:hover { border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .qn-pill:hover .qn-pill-title { color:var(--accent); }
/* Venture card hover */
[data-bg-mode="light"] .venture-card:hover { border-color:var(--accent); }
/* ═══════════════════════════════════════════
NOW — INTEGRATED IN HERO
═══════════════════════════════════════════ */
.hero-right-col { display:flex; flex-direction:column; align-items:center; gap:20px; }
.hero-now {
font-size:13px; color:var(--muted); line-height:1.65; max-width:260px;
}
.hero-now p { margin:0; font-style:italic; }
.hero-now-label {
font-family:var(--mono); font-size:9px; letter-spacing:.08em;
text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;
}
.hero-now-centered { text-align:center; max-width:500px; margin:24px auto 0; }
[data-layout="visionary"] .hero-now p { font-family:var(--serif); font-size:14px; }
[data-bg-mode="light"] .hero-now p { color:#78716c; }
@media (max-width:720px) {
.hero-right-col { align-items:center; }
.hero-now { max-width:100%; text-align:center; }
}
/* ═══════════════════════════════════════════
VISUAL FLOW MODES
═══════════════════════════════════════════ */
/* ── Shared flow elements ─────────────── */
[data-flow="polished"] .reveal,
[data-flow="editorial"] .reveal,
[data-flow="dashboard"] .reveal { transition:opacity .6s ease,transform .6s ease; }
.accent{color:var(--accent)}
.flow-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:32px}
.flow-tab-btn{font-family:var(--mono);font-size:12px;color:var(--muted);padding:12px 24px;background:none;border:none;border-bottom:2px solid transparent;transition:all .2s}
.flow-tab-btn:hover{color:var(--text-2)}
.flow-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.flow-tab-panel{display:none;animation:flowFadeIn .3s ease}
.flow-tab-panel.active{display:block}
@keyframes flowFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.flow-pills{display:flex;gap:10px;flex-wrap:wrap}
.flow-pill{font-size:13px;color:var(--text-2);padding:8px 18px;border:1px solid var(--border);border-radius:100px;transition:all .3s;background:rgba(255,255,255,0.02)}
.flow-pill:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);transform:translateY(-2px)}
.flow-exp-item{display:flex;align-items:start;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--border);transition:all .15s}
.flow-exp-item:hover{background:var(--accent-bg);margin:0 -16px;padding-left:16px;padding-right:16px;border-radius:8px}
.flow-exp-title{font-size:15px;font-weight:600}.flow-exp-item:hover .flow-exp-title{color:var(--accent)}
.flow-exp-org{font-size:13px;color:var(--muted);margin-top:2px}
.flow-exp-date{font-family:var(--mono);font-size:11px;color:var(--muted);flex-shrink:0;margin-top:4px}
.flow-proj-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flow-proj-card{padding:24px;background:var(--bg-off);border:1px solid var(--border);border-radius:12px;transition:all .25s}
.flow-proj-card:hover{border-color:var(--accent-border);background:var(--accent-bg);transform:translateY(-2px)}
.flow-proj-num{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:8px}
.flow-proj-title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:8px}
.flow-proj-card:hover .flow-proj-title{color:var(--accent)}
.flow-proj-desc{font-size:13px;color:var(--muted);line-height:1.55}
/* ── POLISHED FLOW ────────────────────── */
.flow-about{padding:64px 0}
.flow-about-text{font-size:17px;color:var(--text-2);line-height:1.8;max-width:640px}
.flow-about-text strong{color:var(--text)}
.flow-about-meta{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.flow-about-meta span{color:var(--text-2)}
.flow-about-meta .accent{color:var(--accent)}
.flow-glance{padding:80px 0}
.flow-vision-break{background:linear-gradient(180deg,var(--bg-off) 0%,rgba(245,158,11,0.03) 50%,var(--bg-off) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:100px 0;position:relative}
.flow-vision-break::before{content:'';position:absolute;top:-100px;left:50%;width:600px;height:600px;transform:translateX(-50%);background:radial-gradient(circle,rgba(245,158,11,0.04) 0%,transparent 70%);pointer-events:none}
.flow-vision-inner{max-width:740px;margin:0 auto;padding:0 48px;text-align:center;position:relative;z-index:1}
.flow-vision-quote{font-family:var(--serif);font-size:clamp(20px,3vw,28px);font-weight:400;font-style:italic;color:var(--text);line-height:1.55;margin-bottom:28px}
.flow-vision-body{font-size:15px;color:var(--text-2);line-height:1.75;margin-bottom:36px}
.flow-skills{padding:80px 0}
.flow-skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.flow-skill-cell{padding:32px;border-bottom:1px solid var(--border);transition:background .2s}
.flow-skill-cell:nth-child(odd){border-right:1px solid var(--border)}
.flow-skill-cell:nth-last-child(-n+2){border-bottom:none}
.flow-skill-cell:hover{background:var(--accent-bg)}
.flow-skill-name{font-size:14px;font-weight:600;margin-bottom:6px}
.flow-skill-cell:hover .flow-skill-name{color:var(--accent)}
.flow-skill-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.flow-skill-tags{display:flex;gap:4px;flex-wrap:wrap}
.flow-writing-break{background:var(--bg-off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 0}
.flow-writing-inner{max-width:1100px;margin:0 auto;padding:0 48px}
.flow-writing-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px}
.flow-writing-title{font-size:20px;font-weight:700}
.flow-writing-link{font-size:13px;color:var(--accent);font-weight:500}
.flow-writing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.flow-w-card{padding:24px;background:var(--bg);border:1px solid var(--border);border-radius:12px;transition:all .25s}
.flow-w-card:hover{border-color:var(--accent-border);transform:translateY(-2px)}
.flow-w-cat{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.flow-w-title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:8px}
.flow-w-card:hover .flow-w-title{color:var(--accent)}
.flow-w-desc{font-size:12.5px;color:var(--muted);line-height:1.55}
.flow-contact{padding:80px 0 48px;display:flex;align-items:start;justify-content:space-between;gap:48px}
.flow-contact-text{font-size:15px;color:var(--text-2);line-height:1.7;max-width:440px}
.flow-contact-text strong{color:var(--text)}
.flow-contact-links{display:flex;flex-direction:column;gap:12px}
.flow-c-link{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:12px 20px;border:1px solid var(--border);border-radius:10px;min-width:260px;transition:all .2s}
.flow-c-link:hover{border-color:var(--accent-border);background:var(--accent-bg)}
.flow-c-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.flow-c-value{font-size:13px;color:var(--text-2)}
.flow-c-link:hover .flow-c-value{color:var(--accent)}
/* ── EDITORIAL SCROLL ─────────────────── */
.flow-narrative{max-width:640px;margin:0 auto;padding:0 48px}
.flow-n-section{padding:64px 0}
.flow-n-text{font-family:var(--serif);font-size:19px;color:var(--text-2);line-height:1.85;margin-bottom:24px}
.flow-n-text strong{color:var(--text);font-weight:500}
.flow-n-now{margin-top:24px;padding:16px 20px;border-left:2px solid var(--accent);font-family:var(--serif);font-size:14px;color:var(--muted);font-style:italic;line-height:1.6}
.flow-n-now-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-style:normal;margin-bottom:4px;display:block}
.flow-n-contact{padding:80px 0 48px;text-align:center}
.flow-pullquote-break{padding:80px 0;text-align:center;position:relative}
.flow-pullquote-break::before,.flow-pullquote-break::after{content:'';display:block;width:48px;height:1px;background:var(--accent);margin:0 auto;opacity:.4}
.flow-pullquote-break::before{margin-bottom:48px}
.flow-pullquote-break::after{margin-top:48px}
.flow-pullquote{font-family:var(--serif);font-size:clamp(22px,3.5vw,32px);color:var(--text);font-style:italic;line-height:1.5;max-width:720px;margin:0 auto;padding:0 48px}
.flow-skills-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.flow-writing-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.flow-w-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);transition:all .15s}
.flow-w-row:hover{background:var(--accent-bg);margin:0 -16px;padding-left:16px;padding-right:16px}
.flow-w-row-title{font-size:15px;font-weight:500;flex:1;color:var(--text)}
.flow-w-row:hover .flow-w-row-title{color:var(--accent)}
.flow-w-row-cat{font-family:var(--mono);font-size:9px;color:var(--accent);flex-shrink:0}
/* ── DASHBOARD HYBRID ─────────────────── */
[data-flow="dashboard"] #hero{display:none}
.flow-dash-hero{padding:80px 0 48px}
.flow-dash-top{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.flow-dash-mission{font-size:clamp(22px,3vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.25;margin-bottom:20px;max-width:700px}
.flow-dash-mission strong,.flow-dash-mission em{color:var(--accent);font-style:normal;font-weight:700}
.flow-dash-metrics{display:flex;gap:32px;margin-bottom:24px}
.flow-metric-value{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.flow-metric-label{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px}
.flow-dash-now{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--bg-off);border:1px solid var(--border);border-radius:10px;max-width:600px}
.flow-dash-now-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex-shrink:0}
.flow-dash-now-text{font-size:12.5px;color:var(--muted);line-height:1.5;font-style:italic}
.flow-triptych-break{background:var(--bg-off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:64px 0}
.flow-triptych-inner{max-width:1100px;margin:0 auto;padding:0 48px}
.flow-triptych{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border-radius:12px;overflow:hidden}
.flow-tri-cell{padding:32px;background:var(--bg);transition:background .2s}
.flow-tri-cell:hover{background:var(--accent-bg)}
.flow-tri-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.flow-tri-text{font-size:14px;color:var(--text-2);line-height:1.7}
.flow-tri-text strong{color:var(--text)}
.flow-tri-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.flow-dense-section{padding:64px 0}
.flow-dense-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.flow-dense-card{padding:20px;background:var(--bg-off);border:1px solid var(--border);border-radius:10px;transition:all .2s}
.flow-dense-card:hover{border-color:var(--accent-border);background:var(--accent-bg)}
.flow-dense-name{font-size:13px;font-weight:600;margin-bottom:4px}
.flow-dense-card:hover .flow-dense-name{color:var(--accent)}
.flow-dense-desc{font-size:11.5px;color:var(--muted);line-height:1.5}
.flow-dash-contact{padding:48px 0 32px;display:flex;gap:16px;flex-wrap:wrap}
.flow-dash-btn{font-family:var(--mono);font-size:11px;color:var(--text-2);padding:10px 20px;border:1px solid var(--border);border-radius:8px;transition:all .2s}
.flow-dash-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
/* ── Responsive — flows ───────────────── */
@media(max-width:768px){
.flow-vision-inner,.flow-writing-inner,.flow-triptych-inner{padding:0 20px}
.flow-narrative{padding:0 20px}
.flow-pullquote{padding:0 20px}
.flow-proj-cards{grid-template-columns:1fr}
.flow-skills-grid{grid-template-columns:1fr}
.flow-skill-cell:nth-child(odd){border-right:none}
.flow-writing-grid{grid-template-columns:1fr}
.flow-contact{flex-direction:column}
.flow-triptych{grid-template-columns:1fr}
.flow-dense-grid{grid-template-columns:1fr 1fr}
.flow-dash-metrics{flex-wrap:wrap;gap:20px}
.flow-tab-bar{overflow-x:auto;scrollbar-width:none}
}
/* ═══════════════════════════════════════════
CROSS-PAGE FLOW OVERRIDES
Applies visual flow consistency to ALL pages
═══════════════════════════════════════════ */
/* Polished: remove uniform borders, add variety */
[data-flow="polished"] .section { border-bottom:none; }
[data-flow="polished"] #hero { border-bottom:none; }
[data-flow="polished"] .motif-divider { display:none; }
[data-flow="polished"] .section-coord { display:none; }
[data-flow="polished"] .project-divider { border-color:var(--border); }
/* Editorial: narrower content on all pages */
[data-flow="editorial"] .section { border-bottom:none; }
[data-flow="editorial"] #hero { border-bottom:none; }
[data-flow="editorial"] .motif-divider { display:none; }
[data-flow="editorial"] .section-coord { display:none; }
[data-flow="editorial"] .prose p { font-family:var(--serif); font-size:17px; line-height:1.85; }
/* Dashboard: tighter spacing everywhere */
[data-flow="dashboard"] .section { padding:48px 0; border-bottom:1px solid var(--border); }
[data-flow="dashboard"] .section-header { margin-bottom:20px; }
[data-flow="dashboard"] .motif-divider { display:none; }
/* ═══════════════════════════════════════════
COMPLETE LIGHT MODE — FLOW ELEMENTS
Ensures every flow element is readable
on light backgrounds for any theme
═══════════════════════════════════════════ */
/* Shared flow elements */
[data-bg-mode="light"] .flow-tab-bar { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-tab-btn { color:#78716c; }
[data-bg-mode="light"] .flow-tab-btn:hover { color:#44403c; }
[data-bg-mode="light"] .flow-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
[data-bg-mode="light"] .flow-pill { color:#44403c; border-color:rgba(0,0,0,0.07); background:rgba(0,0,0,0.02); }
[data-bg-mode="light"] .flow-pill:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .flow-exp-item { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-exp-item:hover { background:var(--accent-bg); }
[data-bg-mode="light"] .flow-exp-title { color:#1c1917; }
[data-bg-mode="light"] .flow-exp-org { color:#78716c; }
[data-bg-mode="light"] .flow-exp-date { color:#78716c; }
[data-bg-mode="light"] .flow-proj-card { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-proj-card:hover { border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .flow-proj-title { color:#1c1917; }
[data-bg-mode="light"] .flow-proj-desc { color:#78716c; }
[data-bg-mode="light"] .flow-proj-num { color:#78716c; }
/* Polished flow */
[data-bg-mode="light"] .flow-about-text { color:#44403c; }
[data-bg-mode="light"] .flow-about-text strong { color:#1c1917; }
[data-bg-mode="light"] .flow-about-meta { color:#78716c; }
[data-bg-mode="light"] .flow-about-meta span { color:#44403c; }
[data-bg-mode="light"] .flow-vision-break { background:linear-gradient(180deg,rgba(0,0,0,0.035) 0%,rgba(245,158,11,0.04) 50%,rgba(0,0,0,0.035) 100%); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-vision-break::before { background:radial-gradient(circle,rgba(245,158,11,0.06) 0%,transparent 70%); }
[data-bg-mode="light"] .flow-vision-quote { color:#1c1917; }
[data-bg-mode="light"] .flow-vision-body { color:#44403c; }
[data-bg-mode="light"] .flow-skills-grid { border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-skill-cell { border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-skill-cell:hover { background:var(--accent-bg); }
[data-bg-mode="light"] .flow-skill-name { color:#1c1917; }
[data-bg-mode="light"] .flow-skill-desc { color:#78716c; }
[data-bg-mode="light"] .flow-writing-break { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-w-card { background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-w-card:hover { border-color:var(--accent); }
[data-bg-mode="light"] .flow-w-title { color:#1c1917; }
[data-bg-mode="light"] .flow-w-desc { color:#78716c; }
[data-bg-mode="light"] .flow-contact-text { color:#44403c; }
[data-bg-mode="light"] .flow-contact-text strong { color:#1c1917; }
[data-bg-mode="light"] .flow-c-link { border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-c-link:hover { border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .flow-c-label { color:#78716c; }
[data-bg-mode="light"] .flow-c-value { color:#44403c; }
/* Editorial flow */
[data-bg-mode="light"] .flow-n-text { color:#44403c; }
[data-bg-mode="light"] .flow-n-text strong { color:#1c1917; }
[data-bg-mode="light"] .flow-n-now { border-left-color:var(--accent); color:#78716c; }
[data-bg-mode="light"] .flow-pullquote { color:#1c1917; }
[data-bg-mode="light"] .flow-pullquote-break::before,
[data-bg-mode="light"] .flow-pullquote-break::after { background:var(--accent); }
[data-bg-mode="light"] .flow-w-row { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-w-row:hover { background:var(--accent-bg); }
[data-bg-mode="light"] .flow-w-row-title { color:#1c1917; }
[data-bg-mode="light"] .flow-n-contact .flow-n-text { color:#44403c; }
/* Dashboard flow */
[data-bg-mode="light"] .flow-dash-mission { color:#1c1917; }
[data-bg-mode="light"] .flow-dash-now { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-dash-now-text { color:#78716c; }
[data-bg-mode="light"] .flow-metric-value { color:var(--accent); }
[data-bg-mode="light"] .flow-metric-label { color:#78716c; }
[data-bg-mode="light"] .flow-triptych-break { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-triptych { background:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-tri-cell { background:rgba(0,0,0,0.02); }
[data-bg-mode="light"] .flow-tri-cell:hover { background:var(--accent-bg); }
[data-bg-mode="light"] .flow-tri-text { color:#44403c; }
[data-bg-mode="light"] .flow-tri-text strong { color:#1c1917; }
[data-bg-mode="light"] .flow-dense-card { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-dense-card:hover { border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .flow-dense-name { color:#1c1917; }
[data-bg-mode="light"] .flow-dense-desc { color:#78716c; }
[data-bg-mode="light"] .flow-dash-btn { color:#44403c; border-color:rgba(0,0,0,0.07); }
[data-bg-mode="light"] .flow-dash-btn:hover { color:var(--accent); border-color:var(--accent); }
/* Flow hover states — light mode */
[data-bg-mode="light"] .flow-exp-item:hover .flow-exp-title { color:var(--accent); }
[data-bg-mode="light"] .flow-proj-card:hover .flow-proj-title { color:var(--accent); }
[data-bg-mode="light"] .flow-skill-cell:hover .flow-skill-name { color:var(--accent); }
[data-bg-mode="light"] .flow-w-card:hover .flow-w-title { color:var(--accent); }
[data-bg-mode="light"] .flow-w-row:hover .flow-w-row-title { color:var(--accent); }
[data-bg-mode="light"] .flow-c-link:hover .flow-c-value { color:var(--accent); }
[data-bg-mode="light"] .flow-dense-card:hover .flow-dense-name { color:var(--accent); }
[data-bg-mode="light"] .flow-tri-cell:hover .flow-tri-label { color:var(--accent); }
/* ═══════════════════════════════════════════
FLOW MODES — OTHER PAGES
Projects, Writing, Interactives, About
═══════════════════════════════════════════ */
/* Polished: softer borders, rounded elements */
[data-flow="polished"] .project-accordion { border-top:none; }
[data-flow="polished"] .pa-header { border-radius:8px; margin-bottom:2px; }
[data-flow="polished"] .pa-header:hover { background:var(--accent-bg); }
[data-flow="polished"] .ctx { border-radius:12px; }
[data-flow="polished"] .fd-grid > div { border-radius:8px; }
[data-flow="polished"] .post-card { border-radius:12px; }
[data-flow="polished"] .ig-card { border-radius:12px; }
/* Editorial: narrower content on other pages */
[data-flow="editorial"] .page { max-width:800px; }
[data-flow="editorial"] .page .section { padding:48px 0; }
[data-flow="editorial"] .prose p { font-family:var(--serif); font-size:17px; }
/* Dashboard: tighter spacing */
[data-flow="dashboard"] .section { padding:48px 0; }
[data-flow="dashboard"] .page { max-width:1100px; }
/* ═══════════════════════════════════════════
COMPREHENSIVE LIGHT MODE — ALL FLOWS
═══════════════════════════════════════════ */
/* Flow: editorial — text */
[data-bg-mode="light"] .flow-n-text { color:#44403c; }
[data-bg-mode="light"] .flow-n-text strong { color:#1c1917; }
[data-bg-mode="light"] .flow-n-now { color:#78716c; border-left-color:var(--accent); }
[data-bg-mode="light"] .flow-pullquote { color:#1c1917; }
[data-bg-mode="light"] .flow-skills-label { color:var(--accent); }
/* Flow: editorial — writing rows */
[data-bg-mode="light"] .flow-writing-list { border-top-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-w-row { border-bottom-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-w-row:hover { background:var(--accent-bg); }
[data-bg-mode="light"] .flow-w-row-title { color:#1c1917; }
/* Flow: dashboard — hero */
[data-bg-mode="light"] .flow-dash-mission { color:#1c1917; }
[data-bg-mode="light"] .flow-dash-now { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-dash-now-text { color:#78716c; }
/* Flow: dashboard — dense cards */
/* Flow: dashboard — dense cards */
[data-bg-mode="light"] .flow-dense-card { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .flow-dense-card:hover { border-color:var(--accent); background:var(--accent-bg); }
[data-bg-mode="light"] .flow-dense-name { color:#1c1917; }
[data-bg-mode="light"] .flow-dense-desc { color:#78716c; }
/* Flow: dashboard — buttons */
[data-bg-mode="light"] .flow-dash-btn { color:#44403c; border-color:rgba(0,0,0,0.07); }
[data-bg-mode="light"] .flow-dash-btn:hover { color:var(--accent); border-color:var(--accent); }
/* Now box — all flows */
[data-bg-mode="light"] .now-box { background:rgba(0,0,0,0.035); border-color:rgba(0,0,0,0.09); }
[data-bg-mode="light"] .now-text { color:#78716c; }
[data-bg-mode="light"] .hero-now p { color:#78716c; }
/* ═══════════════════════════════════════════
INDIVIDUAL EFFECTS
Each driven by body.fx-* class.
All site-wide, all theme-compatible.
═══════════════════════════════════════════ */
/* ── Ambient color tokens (shared by effects that need bio colors) ── */
body.fx-breathe, body.fx-glow, body.fx-shimmer,
body.fx-particles, body.fx-helix, body.fx-codon {
--fx-bio: 52,211,153;
--fx-quantum: 129,140,248;
}
/* ── 1. BREATHING PHOTO ──────────────────
Pulsing ring around profile photo.
Works on all pages that show .hero-photo.
───────────────────────────────────────── */
body.fx-breathe .hero-photo { position:relative; }
body.fx-breathe .hero-photo::after {
content:''; position:absolute; inset:-5px; border-radius:inherit;
border:1.5px solid rgba(var(--fx-bio),0.3);
animation:fxBreathe 4s ease-in-out infinite; pointer-events:none;
}
@keyframes fxBreathe {
0%,100%{ transform:scale(1); opacity:.35; }
50%{ transform:scale(1.025); opacity:.7; }
}
/* Light bg: softer */
body.fx-breathe[data-bg-mode="light"] .hero-photo::after {
border-color:rgba(var(--fx-bio),0.2);
}
/* ── 2. BIOLUMINESCENT GLOW ──────────────
Radial glow from center on card hover.
Applied to ALL card types, all pages.
───────────────────────────────────────── */
body.fx-glow .glance-card,
body.fx-glow .skill-item,
body.fx-glow .dash-card,
body.fx-glow .post-card,
body.fx-glow .flow-proj-card,
body.fx-glow .flow-skill-cell,
body.fx-glow .flow-dense-card,
body.fx-glow .flow-w-card,
body.fx-glow .flow-c-link,
body.fx-glow .flow-tri-cell,
body.fx-glow .ctx,
body.fx-glow .pa-header,
body.fx-glow .ig-card,
body.fx-glow .vg-card { position:relative; overflow:hidden; }
body.fx-glow .glance-card::before,
body.fx-glow .skill-item::before,
body.fx-glow .dash-card::before,
body.fx-glow .post-card::before,
body.fx-glow .flow-proj-card::before,
body.fx-glow .flow-skill-cell::before,
body.fx-glow .flow-dense-card::before,
body.fx-glow .flow-w-card::before,
body.fx-glow .flow-c-link::before,
body.fx-glow .flow-tri-cell::before,
body.fx-glow .ctx::before,
body.fx-glow .pa-header::before,
body.fx-glow .ig-card::before,
body.fx-glow .vg-card::before {
content:''; position:absolute; top:50%; left:50%;
width:250%; height:250%; transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(var(--fx-bio),0.07) 0%,transparent 55%);
opacity:0; transition:opacity .4s; pointer-events:none; z-index:0;
}
body.fx-glow .glance-card:hover::before,
body.fx-glow .skill-item:hover::before,
body.fx-glow .dash-card:hover::before,
body.fx-glow .post-card:hover::before,
body.fx-glow .flow-proj-card:hover::before,
body.fx-glow .flow-skill-cell:hover::before,
body.fx-glow .flow-dense-card:hover::before,
body.fx-glow .flow-w-card:hover::before,
body.fx-glow .flow-c-link:hover::before,
body.fx-glow .flow-tri-cell:hover::before,
body.fx-glow .ctx:hover::before,
body.fx-glow .pa-header:hover::before,
body.fx-glow .ig-card:hover::before,
body.fx-glow .vg-card:hover::before { opacity:1; }
/* Ensure card children stay above glow */
body.fx-glow .glance-card > *,
body.fx-glow .skill-item > *,
body.fx-glow .flow-proj-card > *,
body.fx-glow .flow-w-card > *,
body.fx-glow .ctx > * { position:relative; z-index:1; }
/* ── 3. SHIMMER TAGS ─────────────────────
Probability wave sweep on pills/tags.
All pages, all tag types.
───────────────────────────────────────── */
body.fx-shimmer .domain,
body.fx-shimmer .flow-pill,
body.fx-shimmer .tag,
body.fx-shimmer .glance-tag,
body.fx-shimmer .ptag,
body.fx-shimmer .stag,
body.fx-shimmer .dash-tag,
body.fx-shimmer .etag { position:relative; overflow:hidden; }
body.fx-shimmer .domain::after,
body.fx-shimmer .flow-pill::after,
body.fx-shimmer .tag::after,
body.fx-shimmer .glance-tag::after,
body.fx-shimmer .ptag::after,
body.fx-shimmer .stag::after,
body.fx-shimmer .dash-tag::after,
body.fx-shimmer .etag::after {
content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
background:linear-gradient(90deg,transparent,rgba(var(--fx-bio),0.1),transparent);
animation:fxShimmer 5s ease-in-out infinite; pointer-events:none;
}
@keyframes fxShimmer {
0%,100%{ left:-100%; }
50%{ left:120%; }
}
/* ── 4. LIVING PARTICLES ─────────────────
Canvas handled in JS. CSS just for
z-index layering.
───────────────────────────────────────── */
body.fx-particles .page,
body.fx-particles nav,
body.fx-particles footer { position:relative; z-index:1; }
body.fx-particles .loader-overlay { z-index:9999; }
/* Light bg: reduce particle opacity */
body.fx-particles[data-bg-mode="light"] #fxParticlesCanvas { opacity:0.2 !important; }
@media (max-width:720px) {
body.fx-particles #fxParticlesCanvas { opacity:0.3 !important; }
}
/* ── 5. HELIX DIVIDERS ───────────────────
Replaces motif-divider with double helix.
Only when no other motif is active.
───────────────────────────────────────── */
body.fx-helix[data-motif="none"] .motif-divider {
height:48px; border:none; background:none;
display:flex; align-items:center; justify-content:center;
}
body.fx-helix[data-motif="none"] .motif-divider::before {
content:''; display:block; width:240px; height:24px;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12Q25 0 50 12Q75 24 100 12Q125 0 150 12Q175 24 200 12' stroke='rgba(52,211,153,0.35)' stroke-width='1'/%3E%3Cpath d='M0 12Q25 24 50 12Q75 0 100 12Q125 24 150 12Q175 0 200 12' stroke='rgba(129,140,248,0.25)' stroke-width='1'/%3E%3Ccircle cx='50' cy='12' r='1.5' fill='rgba(52,211,153,0.3)'/%3E%3Ccircle cx='100' cy='12' r='1.5' fill='rgba(129,140,248,0.25)'/%3E%3Ccircle cx='150' cy='12' r='1.5' fill='rgba(52,211,153,0.3)'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-size:contain;
}
/* Hide helix when visual flow hides motif-dividers */
body.fx-helix[data-flow="polished"] .motif-divider,
body.fx-helix[data-flow="editorial"] .motif-divider { display:none; }
/* ── 6. CODON FOOTER ─────────────────────
DNA→protein easter egg in footer.
All pages.
───────────────────────────────────────── */
body.fx-codon footer .foot:first-child::after {
content:'ATG AAA ACC TTT CTG GCG → M K T F L A';
display:block; font-family:var(--mono); font-size:8px;
color:rgba(var(--fx-bio),0.25); letter-spacing:3px; margin-top:6px;
}
body.fx-codon[data-bg-mode="light"] footer .foot:first-child::after {
color:rgba(var(--fx-bio),0.18);
}
/* ═══════════════════════════════════════════
FONT SYSTEM — HEADING OVERRIDES
--sans, --serif, --mono are remapped in
to --font-body, --font-accent, --font-label.
Headings use --font-heading separately.
═══════════════════════════════════════════ */
.hero-name,
h1, h2, h3,
.nav-name,
.article-title,
.glance-card-title,
.skill-name,
.dash-card-title,
.project-title,
.pa-title,
.post-card-title,
.writing-header h1,
.flow-proj-title,
.flow-skill-name,
.flow-w-title,
.flow-dense-name,
.flow-writing-title,
.skills-title,
.section-title,
.overview-block-label,
.fd-title,
.ctx-title,
.venture-name,
.about-page-header h1 {
font-family: var(--font-heading);
}
/* ═══════════════════════════════════════════
CLICKABLE CARDS
═══════════════════════════════════════════ */
/* Classic glance cards: entire card clickable via inner link */
.glance-card { position:relative; }
.glance-link::after { content:''; position:absolute; inset:0; z-index:1; }
/* Flow project cards: now tags */
a.flow-proj-card { text-decoration:none; color:inherit; display:block; }
a.flow-proj-card:hover { color:inherit; }
a.flow-proj-card:hover .flow-proj-title { color:var(--accent); }
/* Flow writing cards: now tags */
a.flow-w-card { text-decoration:none; color:inherit; display:block; }
a.flow-w-card:hover { color:inherit; }
a.flow-w-card:hover .flow-w-title { color:var(--accent); }
/* Flow writing rows: now tags */
a.flow-w-row { text-decoration:none; color:inherit; display:flex; }
a.flow-w-row:hover { color:inherit; }
/* Snapshot project items: clickable */
.snapshot-item { position:relative; }
.snapshot-item-accent { position:relative; z-index:1; }
/* Overview items: clickable */
.overview-link { position:relative; z-index:1; }
.overview-item { position:relative; }
/* ═══════════════════════════════════════════
AFFILIATIONS LOGO BAR
All logos must be either:
- SVG with currentColor fills (monochrome, CSS-controlled)
- PNG/SVG with transparent backgrounds
CSS filter makes them monochrome on any background.
═══════════════════════════════════════════ */
.affiliations-bar {
padding:32px 0 40px;
border-top:1px solid var(--border);
}
.affiliations-inner {
max-width:960px; margin:0 auto; padding:0 48px;
display:flex; align-items:center; justify-content:center;
gap:40px; flex-wrap:wrap;
}
.affiliation-logo {
display:block; flex-shrink:0;
transition:opacity .3s;
opacity:0.5;
color:var(--text);
}
.affiliation-logo:hover { opacity:0.85; }
.affiliation-logo img {
height:32px; width:auto; display:block;
/* Dark bg default: make all content white */
filter:brightness(0) invert(1);
}
/* Light background: make all content dark */
[data-bg-mode="light"] .affiliation-logo img {
filter:brightness(0);
}
/* Native light themes: same treatment */
[data-scheme="current"] .affiliation-logo img,
[data-scheme="slate-copper"] .affiliation-logo img,
[data-scheme="warm-minimal"] .affiliation-logo img,
[data-scheme="monochrome"] .affiliation-logo img {
filter:brightness(0);
}
@media (max-width:720px) {
.affiliations-inner { gap:28px; padding:0 20px; }
.affiliation-logo img { height:24px; }
}
/* ── Copyright Bar ── */
.copyright-bar {
text-align:center; font-family:var(--mono); font-size:10px;
color:var(--muted); padding:16px 48px 24px;
letter-spacing:.02em;
}
@media (max-width:720px) {
.copyright-bar { padding:12px 20px 20px; font-size:9px; }
}