:root {
color-scheme: dark;
--bg: #0e0d0a;
--bg-2: #16140f;
--bg-3: #1f1c15;
--text: #f0e9d8;
--text-2: #d8d0bf;
--muted: #a39d8e;
--dim: #8a8373;
--border: #2a261d;
--border-2: #3a362b;
--accent: #d4a373;
--accent-2: #e8c8a0;
--accent-bg: rgba(212,163,115,0.12);
--jade: #88a99c;
--rust: #c1655a;
--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; padding: 0;
background: var(--bg); color: var(--text);
font-family: var(--sans);
font-size: 15.5px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(ellipse at top, rgba(212,163,115,0.06), transparent 50%);
}
body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: overlay;
animation: grainDrift 90s linear infinite;
}
@keyframes grainDrift {
0% { transform: translate(0,0); }
100% { transform: translate(-160px,-160px); }
}
#cursor-glow {
position: fixed; pointer-events: none; z-index: 0;
width: 600px; height: 600px; left: 0; top: 0;
background: radial-gradient(circle at center, rgba(212,163,115,0.10), transparent 60%);
opacity: 0; transition: opacity 0.3s;
}
a { color: var(--text); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--accent-2); }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
a:focus-visible, button:focus-visible,
.project-card:focus-visible, .cred-card:focus-visible,
.speaking-card:focus-visible, .connect-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.frame { max-width: 740px; margin: 0 auto; padding: 48px 28px 120px; position: relative; z-index: 2; }
@media (max-width: 600px) { .frame { padding: 32px 22px 80px; } }
/* ──────── PAGE INTRO (cinematic banner at very top) ──────── */
.page-intro {
position: relative;
width: 100%;
aspect-ratio: 2 / 1; /* taller — face actually visible */
max-height: 78vh; /* cap on tall viewports so hero peeks */
overflow: hidden;
isolation: isolate;
background: var(--bg);
margin: 0;
}
/* Wrapper handles parallax (JS sets transform); img inside handles Ken Burns */
.page-intro-img-wrap {
position: absolute; inset: 0;
display: block;
will-change: transform;
}
.page-intro img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 38%; /* favour upper-mid → face stays in frame */
display: block;
filter: contrast(1.07) saturate(1.12);
/* Subtle Ken Burns — continuous slow drift + zoom */
animation: kenBurns 28s ease-in-out infinite alternate;
transform-origin: 50% 45%;
}
.page-intro:hover img {
animation-play-state: paused;
filter: contrast(1.12) saturate(1.22);
}
@keyframes kenBurns {
0% { transform: scale(1.02) translate(0, 0); }
100% { transform: scale(1.10) translate(-1.5%, -1%); }
}
/* Layered vignette + smooth fade-into-page bg + tonal warm/cool wash */
.page-intro::before {
content: '';
position: absolute; inset: 0;
background:
/* subtle accent color wash for cohesion */
radial-gradient(ellipse at 18% 30%, rgba(212,163,115,0.13), transparent 55%),
radial-gradient(ellipse at 82% 70%, rgba(95,140,124,0.10), transparent 60%),
/* center spotlight vignette */
radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(0,0,0,0.5) 100%),
/* top + bottom letterbox darkening */
linear-gradient(180deg,
rgba(14,13,10,0.5) 0%,
transparent 14%,
transparent 60%,
rgba(14,13,10,0.92) 92%,
var(--bg) 100%);
pointer-events: none;
z-index: 1;
}
/* Cinematic top accent letterbox line */
.page-intro::after {
content: '';
position: absolute; left: 12%; right: 12%; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,163,115,0.6), transparent);
z-index: 2;
}
/* Decorative side rule running down the caption block */
.page-intro-cap {
position: absolute;
bottom: 42px;
left: 50%;
transform: translateX(-50%);
max-width: 740px;
width: calc(100% - 56px);
z-index: 3;
display: flex; flex-direction: column; gap: 12px;
pointer-events: none;
padding-left: 18px;
border-left: 1px solid rgba(212,163,115,0.55);
}
.page-intro-eyebrow {
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--accent);
display: flex; align-items: center; gap: 14px;
}
.page-intro-eyebrow::before {
content: ''; width: 32px; height: 1px;
background: var(--accent); opacity: 0.7;
flex-shrink: 0;
}
.page-intro-title {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(26px, 3.6vw, 40px);
color: var(--text);
letter-spacing: -0.02em; line-height: 1.1;
text-shadow: 0 2px 18px rgba(0,0,0,0.82);
max-width: 620px;
}
/* Optional micro-detail: tiny chapter marker beneath caption */
.page-intro-meta {
font-family: var(--mono); font-size: 9.5px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(245,238,222,0.55);
margin-top: 4px;
}
@media (max-width: 720px) {
.page-intro { aspect-ratio: 4 / 3; max-height: 70vh; }
.page-intro-cap { bottom: 24px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.page-intro img { animation: none; transform: scale(1.02); }
}
.eyebrow {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent); margin: 0 0 32px 0;
display: flex; align-items: center; gap: 14px;
}
.eyebrow::before {
content: ''; width: 28px; height: 1px; background: var(--accent);
flex-shrink: 0;
}
.eyebrow .sub-aside {
color: var(--dim); font-style: italic; text-transform: none; letter-spacing: 0;
margin-left: auto; font-size: 11px;
}
/* ──────── Top sticky nav ──────── */
.top-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(14, 13, 10, 0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--border);
}
.top-nav .nav-inner {
position: relative;
max-width: 740px; margin: 0 auto;
padding: 14px 150px 14px 28px; /* right padding reserves space for absolute lang-toggle */
display: flex; align-items: center; justify-content: space-between;
gap: 22px;
}
.top-nav .nav-brand {
font-family: var(--serif); font-size: 14px; font-weight: 500;
letter-spacing: -0.01em; color: var(--text);
white-space: nowrap;
}
.top-nav .nav-brand:hover { color: var(--accent); }
.top-nav .nav-links {
display: flex; gap: 22px;
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
}
.top-nav .nav-links a {
color: var(--muted); position: relative; padding-bottom: 3px;
transition: color 0.18s;
}
.top-nav .nav-links a:hover { color: var(--text); }
.top-nav .nav-links a.active { color: var(--accent); }
.top-nav .nav-links a.active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px; background: var(--accent);
}
#shipped, #work, #now, #about, #credentials, #beyond, #connect { scroll-margin-top: 72px; }
/* Mobile: nav-links 太擠了直接藏，留 brand + lang-toggle；section 跳轉用 depth-frame on banner + 滾動 */
@media (max-width: 680px) {
.top-nav .nav-inner {
padding: 12px 134px 12px 18px;
gap: 14px;
justify-content: flex-start;
}
.top-nav .nav-links { display: none; }
.top-nav .nav-brand { font-size: 14px; display: block; }
.top-nav .lang-toggle { right: 10px; }
}
@media (max-width: 360px) {
.top-nav .nav-brand { font-size: 12px; }
.top-nav .nav-inner { padding: 12px 124px 12px 14px; }
}
/* ──────── Language toggle (Original / EN / 中 / BM) ──────── */
.top-nav .lang-toggle {
position: absolute;
top: 50%; right: 14px;
transform: translateY(-50%);
display: inline-flex; gap: 0; flex-shrink: 0;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
background: rgba(22, 20, 15, 0.55);
}
.top-nav .lang-chip {
appearance: none;
background: transparent; border: 0;
color: var(--muted);
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 7px;
border-radius: 4px;
cursor: pointer; line-height: 1;
transition: color 0.15s, background 0.15s;
}
.top-nav .lang-chip:hover { color: var(--text); }
.top-nav .lang-chip.active {
color: var(--accent);
background: var(--accent-bg);
}
.top-nav .lang-chip[data-lang="zh"],
.top-nav .lang-chip[data-lang="ms"] {
font-family: var(--sans);
letter-spacing: 0.02em;
font-size: 11px;
}
@media (max-width: 600px) {
.top-nav .nav-inner { gap: 10px; }
.top-nav .lang-chip { padding: 4px 6px; font-size: 9px; }
.top-nav .lang-chip[data-lang="zh"],
.top-nav .lang-chip[data-lang="ms"] { font-size: 10px; }
}
/* ──────── Depth viewfinder (top-right of cinematic banner) ──────── */
/* Stack of two frames: indicator (non-clickable) + CTA (clickable button) */
.page-intro .depth-stack {
position: absolute;
top: 22px; right: 22px;
z-index: 5; /* above ::before vignette (z:1) + ::after accent (z:2) + cap (z:3) */
display: flex; flex-direction: column;
align-items: flex-end;
gap: 6px;
width: 156px;
}
.page-intro .depth-frame {
position: relative;
padding: 14px 16px;
background: rgba(14, 13, 10, 0.55);
-webkit-backdrop-filter: blur(8px) saturate(135%);
backdrop-filter: blur(8px) saturate(135%);
border: 1px solid rgba(212, 163, 115, 0.22);
text-decoration: none;
}
/* Variant 1: indicator (state display only — NO frame, just floating text) */
.page-intro .depth-frame-state {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
padding: 0 4px;
display: flex; flex-direction: column;
align-items: flex-end;
gap: 3px;
text-align: right;
cursor: default;
}
.page-intro .depth-frame-state .corner { display: none; }
/* Variant 2: CTA (clickable button-like frame) */
.page-intro .depth-frame-cta {
display: flex; align-items: center; justify-content: center;
padding: 12px 14px;
cursor: pointer;
transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.page-intro .depth-frame-cta:hover {
background: rgba(212, 163, 115, 0.16);
border-color: rgba(212, 163, 115, 0.55);
transform: translateY(-1px);
}
/* Viewfinder L-corners — shared between both variants */
.page-intro .depth-frame .corner {
position: absolute;
width: 11px; height: 11px;
pointer-events: none;
opacity: 0.8;
transition: opacity 0.25s, width 0.25s, height 0.25s;
}
.page-intro .depth-frame .corner::before,
.page-intro .depth-frame .corner::after {
content: ''; position: absolute;
background: var(--accent);
}
.page-intro .depth-frame .corner::before { width: 100%; height: 1.5px; }
.page-intro .depth-frame .corner::after { width: 1.5px; height: 100%; }
.page-intro .depth-frame .corner.tl { top: -1px; left: -1px; }
.page-intro .depth-frame .corner.tl::before { top: 0; left: 0; }
.page-intro .depth-frame .corner.tl::after { top: 0; left: 0; }
.page-intro .depth-frame .corner.tr { top: -1px; right: -1px; }
.page-intro .depth-frame .corner.tr::before { top: 0; right: 0; }
.page-intro .depth-frame .corner.tr::after { top: 0; right: 0; }
.page-intro .depth-frame .corner.bl { bottom: -1px; left: -1px; }
.page-intro .depth-frame .corner.bl::before { bottom: 0; left: 0; }
.page-intro .depth-frame .corner.bl::after { bottom: 0; left: 0; }
.page-intro .depth-frame .corner.br { bottom: -1px; right: -1px; }
.page-intro .depth-frame .corner.br::before { bottom: 0; right: 0; }
.page-intro .depth-frame .corner.br::after { bottom: 0; right: 0; }
/* Hover enlargement ONLY on the clickable variant */
.page-intro .depth-frame-state .corner { opacity: 0.6; }
.page-intro .depth-frame-cta:hover .corner { opacity: 1; width: 15px; height: 15px; }
/* Indicator inner content (floats on banner — needs text-shadow for legibility) */
.page-intro .depth-eyebrow {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.85;
line-height: 1;
text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
}
.page-intro .depth-state {
font-family: var(--serif);
font-size: 18px;
line-height: 1.1;
color: var(--text);
letter-spacing: -0.005em;
font-weight: 400;
text-shadow: 0 1px 6px rgba(0,0,0,0.75), 0 2px 14px rgba(0,0,0,0.45);
}
/* CTA inner content */
.page-intro .depth-cta-text {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
font-weight: 500;
line-height: 1.2;
transition: color 0.2s;
}
.page-intro .depth-frame-cta:hover .depth-cta-text { color: var(--accent); }
/* CJK readability */
html[lang="zh-Hant"] .depth-eyebrow,
html[lang="ms"] .depth-eyebrow { letter-spacing: 0.1em; font-size: 9px; }
html[lang="zh-Hant"] .depth-cta-text,
html[lang="ms"] .depth-cta-text { letter-spacing: 0.06em; }
@media (max-width: 760px) {
.page-intro .depth-stack {
top: 14px; right: 14px;
width: 124px;
gap: 5px;
}
.page-intro .depth-frame-state { padding: 0 2px; gap: 2px; }
.page-intro .depth-frame-cta { padding: 10px 12px; }
.page-intro .depth-state { font-size: 15px; }
.page-intro .depth-eyebrow { font-size: 8px; }
.page-intro .depth-cta-text { font-size: 9.5px; }
}
/* Narrow mobile: shrink further but keep visible — mobile has no nav-links so
the depth-frame becomes the primary version-switch on small screens. */
@media (max-width: 420px) {
.page-intro .depth-stack {
top: 12px; right: 12px;
width: 108px;
gap: 4px;
}
.page-intro .depth-frame-cta { padding: 8px 10px; }
.page-intro .depth-state { font-size: 13px; }
.page-intro .depth-eyebrow { font-size: 7.5px; letter-spacing: 0.15em; }
.page-intro .depth-cta-text { font-size: 8.5px; letter-spacing: 0.12em; }
}
/* ──────── HERO (magazine 2-col layout) ──────── */
.hero {
padding: 30px 0 8px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 248px;
gap: 36px;
align-items: start;
}
.hero-text { min-width: 0; }
/* Halo wrapper so the glow can sit OUTSIDE the cropped portrait box */
a.hero-portrait-wrap {
position: relative;
margin-top: 6px;
transform-style: preserve-3d;
perspective: 1100px;
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
/* NOTE 2026-05-25: Andrew 砍掉 hero portrait 後面的脈動光暈 + 環。
原本是 ::before halo (heroHaloPulse 6s) + ::after ring (heroRingPulse 4s)。
若要還原見 git history 同位置。CLAUDE.md 設計語彙也跟著更新。 */
.hero-portrait {
position: relative;
aspect-ratio: 5 / 7;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border-2);
background: linear-gradient(135deg, rgba(212,163,115,0.18), rgba(212,163,115,0.04));
box-shadow: 0 32px 60px -38px rgba(0,0,0,0.75),
0 0 0 1px rgba(212,163,115,0.08);
isolation: isolate;
z-index: 1;
transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s;
will-change: transform;
}
.hero-portrait:hover {
box-shadow: 0 40px 70px -32px rgba(0,0,0,0.85),
0 0 0 1px rgba(212,163,115,0.22);
}
.hero-portrait .placeholder-mark {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 96px;
color: var(--accent); font-weight: 400;
z-index: 0;
}
.hero-portrait img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 28%;
display: block;
z-index: 1;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.6s;
filter: contrast(1.04) saturate(1.05);
}
.hero-portrait:hover img {
transform: scale(1.03);
filter: contrast(1.08) saturate(1.12);
}
/* Inner vignette + bottom-caption gradient */
.hero-portrait::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.32)),
linear-gradient(180deg, transparent 56%, rgba(14,13,10,0.62));
pointer-events: none;
z-index: 2;
}
/* Viewfinder corner markers */
.hero-portrait .corner {
position: absolute;
width: 14px; height: 14px;
pointer-events: none;
z-index: 4;
opacity: 0.78;
transition: opacity 0.3s, width 0.3s, height 0.3s;
}
.hero-portrait .corner::before,
.hero-portrait .corner::after {
content: ''; position: absolute;
background: var(--accent);
}
.hero-portrait .corner::before { width: 100%; height: 1.5px; }
.hero-portrait .corner::after { width: 1.5px; height: 100%; }
.hero-portrait .corner.tl { top: 8px; left: 8px; }
.hero-portrait .corner.tl::before { top: 0; left: 0; }
.hero-portrait .corner.tl::after { top: 0; left: 0; }
.hero-portrait .corner.tr { top: 8px; right: 8px; }
.hero-portrait .corner.tr::before { top: 0; right: 0; }
.hero-portrait .corner.tr::after { top: 0; right: 0; }
.hero-portrait .corner.bl { bottom: 8px; left: 8px; }
.hero-portrait .corner.bl::before { bottom: 0; left: 0; }
.hero-portrait .corner.bl::after { bottom: 0; left: 0; }
.hero-portrait .corner.br { bottom: 8px; right: 8px; }
.hero-portrait .corner.br::before { bottom: 0; right: 0; }
.hero-portrait .corner.br::after { bottom: 0; right: 0; }
.hero-portrait:hover .corner { opacity: 1; width: 18px; height: 18px; }
/* Scan-line shimmer that runs on hover */
.hero-portrait .scan {
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
transparent, rgba(212,163,115,0.85), transparent);
box-shadow: 0 0 14px rgba(212,163,115,0.5);
z-index: 5;
pointer-events: none;
opacity: 0;
}
.hero-portrait:hover .scan { animation: heroScan 1.8s ease-in-out infinite; }
@keyframes heroScan {
0% { opacity: 0; transform: translateY(0); }
18% { opacity: 0.9; }
82% { opacity: 0.9; }
100% { opacity: 0; transform: translateY(100cqh); }
}
/* Subtle moving grain texture for that "developed photo" feel */
.hero-portrait .grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.18;
z-index: 3;
pointer-events: none;
animation: grainShift 2.4s steps(6) infinite;
}
@keyframes grainShift {
0% { transform: translate(0, 0); }
20% { transform: translate(-6px, 4px); }
40% { transform: translate(4px, -6px); }
60% { transform: translate(-3px, 5px); }
80% { transform: translate(5px, -2px); }
100% { transform: translate(0, 0); }
}
.hero-caption {
position: absolute;
bottom: 12px; left: 14px; right: 14px;
font-family: var(--mono); font-size: 9.5px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245,238,222,0.85);
z-index: 6;
display: flex; justify-content: space-between; align-items: baseline;
gap: 8px;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero-caption .role { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
/* .hero-portrait-wrap::before { animation: none; } — removed with halo */
.hero-portrait .scan { display: none; }
.hero-portrait .grain { animation: none; }
}
@media (max-width: 820px) {
.hero {
grid-template-columns: 1fr;
gap: 22px;
}
.hero-portrait {
max-width: 220px;
aspect-ratio: 4 / 5;
margin: 0 0 6px 0;
}
}
.hero h1 {
font-family: var(--serif); font-weight: 700;
font-size: clamp(38px, 5.4vw, 56px);
line-height: 1; letter-spacing: -0.028em;
margin: 0 0 6px 0; color: var(--text);
white-space: nowrap;
}
.hero h1 .ch {
display: inline-block; opacity: 0; transform: translateY(8px);
animation: chReveal 0.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes chReveal { to { opacity: 1; transform: translateY(0); } }
.hero .zh {
font-family: var(--serif); font-size: 22px;
color: var(--text-2); margin: 0 0 22px 0; font-weight: 600;
letter-spacing: 0.03em;
}
.hero .status {
display: inline-flex; align-items: center; gap: 9px;
background: var(--bg-2); border: 1px solid var(--border-2);
padding: 6px 14px; border-radius: 999px;
font-family: var(--mono); font-size: 11.5px;
color: var(--text-2); margin-bottom: 32px;
}
.hero .status .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(212,163,115,0.6);
animation: dotPulse 2.4s infinite ease-out;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(212,163,115,0.5); }
50% { box-shadow: 0 0 0 6px rgba(212,163,115,0); }
}
.hero .tagline {
font-family: var(--serif); font-weight: 300;
font-size: clamp(22px, 3.4vw, 30px);
line-height: 1.32; color: var(--text-2);
letter-spacing: -0.012em;
margin: 0 0 22px 0;
max-width: 660px;
}
.hero .tagline em {
font-style: italic; color: var(--accent-2); font-weight: 400;
}
.hero .tagline strong {
font-weight: 600; color: var(--text); font-style: normal;
}
.hero .sub-lede {
font-family: var(--sans); font-size: 14.5px;
color: var(--muted); line-height: 1.7; max-width: 580px;
margin: 0 0 32px 0;
}
.hero .sub-lede strong { color: var(--text-2); font-weight: 500; }
.hero .sub-lede a {
color: var(--accent); border-bottom: 1px solid rgba(212,163,115,0.25);
padding-bottom: 1px;
}
.hero .contact {
display: flex; gap: 28px; flex-wrap: wrap;
font-family: var(--mono); font-size: 12px;
color: var(--muted); margin-top: 8px;
}
.hero .contact a {
color: var(--muted); border-bottom: 1px solid var(--border);
padding-bottom: 2px; transition: color 0.2s, border-color 0.2s;
display: inline-block;
}
.hero .contact a:hover { color: var(--accent); border-color: var(--accent); }
/* ──────── PITCH section (Harvey elevator pitch) ──────── */
section { padding: 60px 0 24px 0; }
@media (max-width: 600px) { section { padding: 48px 0 16px 0; } }
.pitch-body {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 18px; line-height: 1.7; color: var(--text-2);
max-width: 640px;
margin: 0 0 32px 0; letter-spacing: -0.005em;
}
.pitch-body em {
font-style: normal; color: var(--accent-2); font-weight: 500;
}
.pitch-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 28px; padding: 24px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
@media (max-width: 540px) {
.pitch-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
.pitch-stats .stat:last-child { grid-column: 1 / -1; }
}
.pitch-stats .stat-num {
font-family: var(--serif); font-size: 38px; font-weight: 500;
color: var(--accent); letter-spacing: -0.02em; line-height: 1;
}
.pitch-stats .stat-num .stat-sub {
font-family: var(--mono); font-size: 11px; color: var(--muted);
font-weight: 400; letter-spacing: 0.08em; display: inline-block;
margin-left: 6px;
}
.pitch-stats .stat-label {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted); margin-top: 8px;
}
/* ──────── ARC horizontal fishbone timeline ──────── */
.arc-list {
position: relative;
height: 320px;
margin: 28px auto;
max-width: 640px;
}
/* horizontal spine */
.arc-list::before {
content: ''; position: absolute;
top: 50%; left: 0; right: 0;
height: 1px; background: var(--border-2);
z-index: 1;
}
.arc-stop {
position: absolute;
width: 24%;
padding: 0 8px;
text-align: center;
}
/* Odd stops → above spine */
.arc-stop:nth-child(odd) { bottom: 50%; padding-bottom: 20px; }
/* Even stops → below spine */
.arc-stop:nth-child(even) { top: 50%; padding-top: 20px; }
/* Staggered horizontal positions (interleave top + bottom for density) */
.arc-stop:nth-child(1) { left: 0%; }
.arc-stop:nth-child(2) { left: 14.5%; }
.arc-stop:nth-child(3) { left: 29%; }
.arc-stop:nth-child(4) { left: 43.5%; }
.arc-stop:nth-child(5) { left: 58%; }
.arc-stop:nth-child(6) { left: 72.5%; }
/* dot on spine */
.arc-stop::before {
content: ''; position: absolute;
left: 50%; transform: translateX(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--border-2);
z-index: 3;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.arc-stop:nth-child(odd)::before { bottom: -5px; }
.arc-stop:nth-child(even)::before { top: -5px; }
/* vertical branch line from content to spine */
.arc-stop::after {
content: ''; position: absolute;
left: 50%; transform: translateX(-50%);
width: 1px; background: var(--border-2);
z-index: 1;
}
.arc-stop:nth-child(odd)::after { bottom: 0; height: 18px; }
.arc-stop:nth-child(even)::after { top: 0; height: 18px; }
.arc-stop.current::before {
border-color: var(--accent); background: var(--accent);
box-shadow: 0 0 0 4px rgba(212,163,115,0.18);
}
.arc-stop.next::before { border-color: var(--accent); background: var(--bg); }
.arc-stop .arc-year {
font-family: var(--mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); margin-bottom: 2px;
}
.arc-stop .arc-title {
font-family: var(--serif); font-size: 14px; font-weight: 500;
color: var(--text); letter-spacing: -0.008em;
margin-bottom: 4px; line-height: 1.2;
}
.arc-stop .arc-title .arc-flag {
font-size: 13px; margin-right: 4px; vertical-align: middle;
}
.arc-stop .arc-body {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 11.5px; color: var(--text-2); line-height: 1.45;
margin: 0;
}
.arc-stop .arc-body em {
font-style: normal; color: var(--accent-2); font-weight: 400;
}
/* Mobile / narrow viewports: fall back to vertical list */
@media (max-width: 900px) {
.arc-list {
position: relative;
height: auto;
margin: 30px 0;
display: flex; flex-direction: column;
}
.arc-list::before {
top: 0; bottom: 0; left: 8px; right: auto;
width: 1px; height: 100%;
}
.arc-stop,
.arc-stop:nth-child(1),
.arc-stop:nth-child(2),
.arc-stop:nth-child(3),
.arc-stop:nth-child(4),
.arc-stop:nth-child(5),
.arc-stop:nth-child(6) {
position: relative;
width: auto;
left: auto; top: auto; bottom: auto;
padding: 14px 0 14px 32px;
text-align: left;
}
.arc-stop::before {
left: 3px !important; right: auto !important;
top: 22px !important; bottom: auto !important;
transform: none !important;
}
.arc-stop::after {
left: 13px !important; right: auto !important;
top: 26px !important; bottom: auto !important;
width: 19px !important; height: 1px !important;
transform: none !important;
}
.arc-stop .arc-year { font-size: 11px; }
.arc-stop .arc-title { font-size: 18px; }
.arc-stop .arc-body { font-size: 14.5px; }
}
/* ──────── SHIPPED (放大 ASUS case study) ──────── */
.shipped-card {
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--border-2);
border-radius: 14px;
padding: 36px 32px;
position: relative;
overflow: hidden;
transition: border-color 0.3s;
}
.shipped-card:hover { border-color: var(--accent); }
.shipped-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
rgba(212,163,115,0.06), transparent 200px);
pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.shipped-card:hover::before { opacity: 1; }
.shipped-card .live {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(136,169,156,0.12); color: var(--jade);
border: 1px solid rgba(136,169,156,0.25);
padding: 5px 12px; border-radius: 999px;
font-family: var(--mono); font-size: 11px;
margin-bottom: 22px;
}
.shipped-card .live .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--jade);
animation: dotPulse 2s infinite;
}
.shipped-card h3 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 6px 0; color: var(--text);
}
.shipped-card .zh-name {
font-family: var(--serif); font-weight: 300;
font-size: 17px; color: var(--muted);
display: block; margin-top: 4px; letter-spacing: 0.04em;
}
.shipped-card .subtitle {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 16.5px; line-height: 1.65; color: var(--text-2);
margin: 18px 0 28px 0;
letter-spacing: -0.003em;
}
.shipped-blocks {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 22px; margin: 26px 0;
}
@media (max-width: 640px) { .shipped-blocks { grid-template-columns: 1fr; gap: 18px; } }
.shipped-blocks .blk {
background: rgba(14,13,10,0.4);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 18px;
}
.shipped-blocks .blk .blk-label {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); margin-bottom: 10px;
}
.shipped-blocks .blk p {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 14px; line-height: 1.65; color: var(--text-2);
margin: 0; letter-spacing: -0.003em;
}
.shipped-card .tags { margin: 24px 0 16px 0; }
.shipped-card .tags .tag {
display: inline-block;
background: var(--bg-3); border: 1px solid var(--border-2);
padding: 5px 11px; border-radius: 5px;
font-family: var(--mono); font-size: 11px;
color: var(--muted); margin: 0 7px 7px 0;
}
.shipped-card .tags .tag.accent {
color: var(--accent); border-color: rgba(212,163,115,0.35);
background: rgba(212,163,115,0.06);
}
.shipped-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px; padding: 22px 0 8px 0;
border-top: 1px solid var(--border);
margin-top: 22px;
}
@media (max-width: 540px) {
.shipped-stats { grid-template-columns: 1fr 1fr; }
}
.shipped-stats .stat-num {
font-family: var(--serif); font-size: 26px; font-weight: 500;
color: var(--text); letter-spacing: -0.015em; line-height: 1;
}
.shipped-stats .stat-num .stat-sub {
font-family: var(--mono); font-size: 10px; color: var(--muted);
font-weight: 400; letter-spacing: 0.08em; display: inline-block;
margin-left: 4px;
}
.shipped-stats .stat-label {
font-family: var(--mono); font-size: 9.5px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--muted); margin-top: 6px;
}
.shipped-card .hook {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 14.5px; color: var(--text-2); line-height: 1.7;
margin: 22px 0 0 0;
padding: 14px 18px;
border-left: 2px solid var(--accent);
background: rgba(212,163,115,0.05);
border-radius: 0 4px 4px 0;
}
.shipped-card .hook em {
font-style: normal; color: var(--accent-2); font-weight: 400;
}
.shipped-card .meta-row {
margin-top: 22px;
font-family: var(--mono); font-size: 11.5px;
color: var(--muted); line-height: 1.7;
}
.shipped-card .meta-row strong { color: var(--text-2); font-weight: 500; }
/* ──────── Project list (v5 magazine spread) ──────── */
.project-arc {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 15px; color: var(--text-2); line-height: 1.7;
margin: -8px 0 56px 0; max-width: 600px;
letter-spacing: -0.003em;
}
.project-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.project-list > li {
position: relative;
border: 1px solid var(--border-2);
border-radius: 14px;
padding: 26px 28px 24px;
background: linear-gradient(135deg, rgba(22,20,15,0.55), rgba(31,28,21,0.35));
transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
overflow: hidden;
}
.project-list > li:hover {
border-color: rgba(212,163,115,0.32);
background: linear-gradient(135deg, rgba(31,28,21,0.7), rgba(31,28,21,0.45));
box-shadow: 0 18px 40px -28px rgba(0,0,0,0.55);
}
/* Big decorative serif index number sitting INSIDE the framed card */
.project-list > li::before {
content: attr(data-num);
position: absolute;
top: -6px; left: 14px;
font-family: var(--serif); font-weight: 500;
font-size: 132px; line-height: 1;
color: var(--accent);
opacity: 0.07;
pointer-events: none;
letter-spacing: -0.04em;
z-index: 0;
user-select: none;
}
.project-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
padding: 14px 0 18px;
text-decoration: none; color: inherit;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
position: relative;
transform-style: preserve-3d;
perspective: 900px;
will-change: transform;
z-index: 1;
}
/* Small mono "PROJECT 01" label inside card body */
.project-card .pc-meta {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--accent); margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.project-card .pc-meta::before {
content: ''; display: inline-block;
width: 24px; height: 1px; background: var(--accent);
opacity: 0.6;
}
.project-card .visual {
aspect-ratio: 5/4;
border-radius: 10px;
position: relative; overflow: hidden;
border: 1px solid var(--border-2); background: var(--bg-2);
transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
}
.project-card .visual img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.project-card:hover .visual { border-color: var(--accent); }
.project-card:hover .visual img { transform: scale(1.05); }
.project-card .body { display: flex; flex-direction: column; min-width: 0; }
.project-card h3 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(26px, 3.6vw, 34px);
margin: 0 0 8px 0; line-height: 1.1; letter-spacing: -0.022em;
color: var(--text);
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.project-card h3 .arrow {
color: var(--accent); font-size: 20px; font-family: var(--mono);
transition: transform 0.2s, color 0.2s;
display: inline-block;
}
.project-card:hover h3 .arrow { transform: translate(6px, -3px); color: var(--accent-2); }
.project-card .when {
font-family: var(--mono); font-size: 11px; color: var(--dim);
margin: 0 0 18px 0; text-transform: uppercase; letter-spacing: 0.12em;
}
.project-card p.desc {
font-family: var(--serif); font-weight: 300;
font-size: 15.5px; color: var(--text-2); margin: 0 0 18px 0; line-height: 1.65;
letter-spacing: -0.003em;
}
.project-card .tags { margin-bottom: 16px; }
.project-card .tags .tag {
display: inline-block;
background: var(--bg-3); border: 1px solid var(--border-2);
padding: 4px 10px; border-radius: 4px;
font-family: var(--mono); font-size: 10.5px;
color: var(--muted); margin: 0 6px 6px 0;
}
.project-card .tags .tag.accent {
color: var(--accent); border-color: rgba(212,163,115,0.35);
background: rgba(212,163,115,0.06);
}
.project-card .links {
display: flex; gap: 22px; font-family: var(--mono); font-size: 12px;
color: var(--muted); flex-wrap: wrap;
}
.project-card .links .pill {
color: var(--accent); border-bottom: 1px solid rgba(212,163,115,0.35);
padding-bottom: 1px;
}
/* Shiba (data-num=03) has TWO action links — upgrade them to distinct boxed chips */
.project-list > li[data-num="03"] .links {
gap: 10px;
align-items: center;
}
.project-list > li[data-num="03"] .links .pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border-2); /* override existing border-bottom only */
border-radius: 7px;
background: var(--bg-3);
color: var(--muted);
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.06em;
text-transform: none;
transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
position: relative;
}
/* Primary action: View on OpenSea — filled accent style */
.project-list > li[data-num="03"] .links .pill:first-child {
background: rgba(212,163,115,0.12);
border-color: rgba(212,163,115,0.45);
color: var(--accent);
}
.project-list > li[data-num="03"] .links .pill:first-child::before {
/* Small primary-action dot indicator */
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(212,163,115,0.6);
flex-shrink: 0;
}
.project-list > li[data-num="03"] .links .pill:first-child:hover {
background: rgba(212,163,115,0.22);
border-color: var(--accent);
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 8px 22px -10px rgba(212,163,115,0.55);
}
/* Secondary action: Project site — outline muted style */
.project-list > li[data-num="03"] .links .pill:nth-child(2):hover {
border-color: rgba(212,163,115,0.55);
color: var(--accent);
background: rgba(212,163,115,0.06);
transform: translateY(-2px);
box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
}
/* Small visual divider between the two — vertical hairline */
.project-list > li[data-num="03"] .links::before {
content: '';
position: absolute;
transform: translateX(-50%);
display: none;
}
/* Alternating layout — even-indexed cards flip image to the right */
.project-list > li:nth-child(even) .project-card .visual { order: 2; }
.project-list > li:nth-child(even) .project-card .body { order: 1; }
.project-list > li:nth-child(even)::before {
left: auto; right: 18px; text-align: right;
}
@media (max-width: 720px) {
.project-list > li { padding: 20px 20px 20px; border-radius: 12px; }
.project-list > li::before { font-size: 96px; top: -4px; }
.project-card { grid-template-columns: 1fr; gap: 20px; padding: 10px 0 14px; }
.project-card .visual { aspect-ratio: 16/10; max-width: 100%; order: 1 !important; }
.project-card .body { order: 2 !important; }
.project-card h3 { font-size: 26px; }
}
@media (max-width: 480px) {
.project-list > li { padding: 18px 16px; }
.project-list > li::before { font-size: 76px; top: -2px; opacity: 0.05; }
}
/* ──────── Project-group wrapper (frames 01–03 as one set) ──────── */
.project-group {
position: relative;
border-top: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-2);
padding: 56px 0 56px 0;
margin: 16px 0 64px 0;
}
.project-group::before {
content: '01 → 04 · project arcs';
position: absolute;
top: 0;
left: 24px;
transform: translateY(-50%);
background: var(--bg);
padding: 0 12px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--accent);
text-transform: uppercase;
white-space: nowrap;
}
.project-group::after {
content: '— end of projects —';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
background: var(--bg);
padding: 0 14px;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.18em;
color: var(--dim);
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 600px) {
.project-group { padding: 44px 0; }
.project-group::before { left: 14px; font-size: 9.5px; }
.project-group::after { font-size: 8.5px; }
}
/* ──────── Talk feature (NTNU 演講, separate from numbered projects) ──────── */
.talk-feature {
margin: 0 0 24px 0;
}
.talk-eyebrow {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--accent); margin: 0 0 20px 0;
display: flex; align-items: center; gap: 14px;
font-weight: 400;
}
.talk-eyebrow::before {
content: ''; width: 28px; height: 1px; background: var(--accent);
flex-shrink: 0;
}
.talk-eyebrow .talk-eyebrow-aside {
color: var(--dim); font-style: italic; text-transform: none;
letter-spacing: 0; font-size: 11px; font-family: var(--serif); font-weight: 300;
}
.talk-card {
display: grid;
grid-template-columns: 280px 1fr;
gap: 30px;
align-items: center;
padding: 24px;
border: 1px solid var(--border-2);
border-radius: 12px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
text-decoration: none; color: inherit;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.talk-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
}
.talk-card .talk-visual {
aspect-ratio: 4/3;
border-radius: 8px; overflow: hidden;
border: 1px solid var(--border-2);
background: var(--bg-3);
}
.talk-card .talk-visual img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.talk-card:hover .talk-visual img { transform: scale(1.04); }
.talk-card .talk-body { display: flex; flex-direction: column; min-width: 0; }
.talk-card .talk-meta {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--accent); margin: 0 0 10px 0;
display: flex; align-items: center; gap: 10px;
}
.talk-card .talk-meta::before {
content: ''; display: inline-block;
width: 24px; height: 1px; background: var(--accent);
opacity: 0.6;
}
.talk-card h3 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2; letter-spacing: -0.02em;
margin: 0 0 8px 0; color: var(--text);
}
.talk-card h3 .arrow {
color: var(--accent); font-size: 18px; font-family: var(--mono);
transition: transform 0.2s, color 0.2s;
display: inline-block; margin-left: 6px;
}
.talk-card:hover h3 .arrow { transform: translate(4px, -2px); color: var(--accent-2); }
.talk-card .talk-when {
font-family: var(--mono); font-size: 11px; color: var(--dim);
margin: 0 0 14px 0; text-transform: uppercase; letter-spacing: 0.12em;
}
.talk-card .talk-desc {
font-family: var(--serif); font-weight: 300; font-size: 14.5px;
color: var(--text-2); margin: 0 0 14px 0; line-height: 1.65;
letter-spacing: -0.003em;
}
.talk-card .talk-tags { margin-bottom: 14px; }
.talk-card .talk-tags .tag {
display: inline-block;
background: var(--bg-3); border: 1px solid var(--border-2);
padding: 4px 10px; border-radius: 4px;
font-family: var(--mono); font-size: 10.5px;
color: var(--muted); margin: 0 6px 6px 0;
}
.talk-card .talk-tags .tag.accent {
color: var(--accent); border-color: rgba(212,163,115,0.35);
background: rgba(212,163,115,0.06);
}
.talk-card .talk-link {
font-family: var(--mono); font-size: 12px;
color: var(--accent); border-bottom: 1px solid rgba(212,163,115,0.35);
padding-bottom: 1px; display: inline-block;
}
@media (max-width: 720px) {
.talk-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
.talk-card .talk-visual { aspect-ratio: 16/10; }
}
.card-note {
margin: 4px 0 0 0;
padding: 16px 0 4px 0;
border-top: 1px solid var(--border);
background: none;
max-width: 640px;
}
.card-note .note-label {
display: inline-block;
font-family: var(--mono); font-size: 10px; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.14em;
margin-bottom: 10px;
}
.card-note .note-label::after {
content: ''; display: inline-block;
width: 18px; height: 1px; background: var(--accent);
vertical-align: middle; margin-left: 8px;
opacity: 0.6;
}
.card-note p {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 14px; color: var(--text-2); line-height: 1.65; margin: 0;
letter-spacing: -0.003em;
}
.card-note p + p { margin-top: 8px; }
@media (max-width: 540px) { .card-note { margin-left: 0; } }
/* ──────── NOW (Building now) ──────── */
.now-lead {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 15.5px; color: var(--text-2); line-height: 1.7;
margin: -8px 0 28px 0; max-width: 600px;
letter-spacing: -0.003em;
}
.now-grid {
display: flex; flex-direction: column; gap: 18px;
margin-bottom: 32px;
}
.now-item {
padding: 22px 24px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 10px;
transition: border-color 0.2s, background 0.2s;
}
.now-item:hover {
border-color: var(--border-2);
background: var(--bg-3);
}
.now-item .now-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 18px; margin-bottom: 10px;
flex-wrap: wrap;
}
.now-item h4 {
font-family: var(--serif); font-weight: 500; font-size: 19px;
color: var(--text); margin: 0; letter-spacing: -0.01em;
line-height: 1.3;
}
.now-item .now-status {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--jade);
padding: 3px 9px; border-radius: 4px;
background: rgba(136,169,156,0.1);
border: 1px solid rgba(136,169,156,0.2);
white-space: nowrap;
}
.now-item .now-status.scoping { color: var(--accent); background: rgba(212,163,115,0.08); border-color: rgba(212,163,115,0.2); }
.now-item .now-status.writeup { color: var(--muted); background: rgba(163,157,142,0.08); border-color: rgba(163,157,142,0.2); }
.now-item p {
font-family: var(--serif); font-weight: 300;
font-size: 14.5px; color: var(--text-2); line-height: 1.65; margin: 0 0 10px 0;
letter-spacing: -0.003em;
}
.now-item .now-stack {
font-family: var(--mono); font-size: 11px;
color: var(--muted); margin-top: 6px;
}
.now-item .now-stack strong {
color: var(--text-2); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 10.5px; margin-right: 6px;
}
.now-looking {
margin-top: 36px; padding: 26px 28px;
border: 1px dashed var(--border-2);
border-radius: 10px;
background: rgba(212,163,115,0.025);
}
.now-looking h4 {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); margin: 0 0 14px 0;
}
.now-looking ul {
margin: 0 0 18px 0; padding: 0; list-style: none;
font-family: var(--serif); font-weight: 400;
font-size: 16px; line-height: 1.65; color: var(--text);
}
.now-looking ul li {
padding-left: 22px; position: relative; margin-bottom: 4px;
}
.now-looking ul li::before {
content: '→'; position: absolute; left: 0; top: 0;
color: var(--accent); font-family: var(--mono);
}
.now-looking .cta {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 15px; color: var(--text-2); line-height: 1.7; margin: 0;
}
.now-looking .cta a {
color: var(--accent); border-bottom: 1px solid rgba(212,163,115,0.4);
padding-bottom: 1px;
}
/* ──────── ABOUT prose ──────── */
.prose {
font-family: var(--serif); font-weight: 300;
font-size: 17px; line-height: 1.7; color: var(--text-2);
letter-spacing: -0.005em;
}
.prose p { margin: 0 0 18px 0; }
.prose strong { color: var(--text); font-weight: 500; }
.prose em { color: var(--accent-2); font-style: italic; font-weight: 400; }
.prose .prose-pull {
margin: 22px 0 6px 0;
padding: 16px 20px;
border-left: 2px solid var(--accent);
background: rgba(212,163,115,0.05);
border-radius: 0 4px 4px 0;
font-size: 16px;
}
.prose .prose-pull em {
font-style: italic; color: var(--text);
font-weight: 400;
}
.tracks-block .tracks-lede {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 14.5px; color: var(--text-2); line-height: 1.7;
margin: 0 0 14px 0; letter-spacing: -0.003em;
}
.tracks-block .tracks-lede strong {
font-style: normal; color: var(--text); font-weight: 500;
}
.tracks-block ul li {
line-height: 1.5;
}
.tracks-block ul li strong {
color: var(--accent-2);
}
.mentor-block {
margin-top: 32px;
padding: 22px 24px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
}
.mentor-block h4 {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); margin: 0 0 14px 0;
}
.mentor-block ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.mentor-block li {
font-family: var(--serif); font-weight: 400; font-size: 15px;
color: var(--text); line-height: 1.4;
}
.mentor-block li .role {
font-family: var(--sans); font-weight: 300;
font-size: 13px; color: var(--muted); margin-left: 8px;
}
/* ──────── CREDENTIALS ──────── */
.cred-lede {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 15px; color: var(--text-2); line-height: 1.7;
margin: -8px 0 28px 0; max-width: 600px;
letter-spacing: -0.003em;
}
.cred-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cred-card {
display: flex; flex-direction: column;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--bg-2);
text-decoration: none; color: inherit;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.cred-card:hover {
border-color: var(--accent);
background: var(--bg-3);
transform: translateY(-2px);
}
.cred-card .cred-thumb {
aspect-ratio: 3 / 2;
background: #f8f5f0;
overflow: hidden;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
padding: 8px;
}
.cred-card .cred-thumb img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain; display: block;
transition: transform 0.4s ease;
}
.cred-card:hover .cred-thumb img { transform: scale(1.03); }
.cred-card .cred-body { padding: 12px 14px 14px 14px; }
.cred-card .cred-issuer {
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--accent); margin-bottom: 6px;
}
.cred-card .cred-title {
font-family: var(--serif); font-weight: 500;
font-size: 13.5px; color: var(--text); margin: 0;
letter-spacing: -0.005em; line-height: 1.3;
}
.cred-text-extras {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 12px;
}
.cred-text-item {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
font-family: var(--serif); font-size: 15px; color: var(--text);
}
.cred-text-item .cred-text-label { font-weight: 500; }
.cred-text-item .cred-text-meta {
font-family: var(--sans); font-size: 12.5px; color: var(--muted);
font-weight: 300;
}
@media (max-width: 700px) {
.cred-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cred-grid { grid-template-columns: 1fr; }
}
/* Speaking & teaching sub-block within Credentials */
.speaking-block {
margin-top: 36px;
padding-top: 26px;
border-top: 1px solid var(--border);
}
.speaking-block .speaking-head {
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); margin: 0 0 8px 0;
}
.speaking-block .speaking-lede {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 14.5px; color: var(--text-2); line-height: 1.6;
margin: 0 0 22px 0; max-width: 600px;
letter-spacing: -0.003em;
}
.speaking-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.speaking-card {
display: flex; flex-direction: column;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--bg-2);
text-decoration: none; color: inherit;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.speaking-card:hover {
border-color: var(--accent);
background: var(--bg-3);
transform: translateY(-2px);
}
.speaking-card .speaking-thumb {
aspect-ratio: 4 / 3;
background: var(--bg-3);
overflow: hidden;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.speaking-card .speaking-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.4s ease;
}
.speaking-card:hover .speaking-thumb img { transform: scale(1.04); }
.speaking-card .speaking-cap { padding: 10px 12px 12px 12px; }
.speaking-card .speaking-when {
font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--accent); margin-bottom: 4px;
}
.speaking-card .speaking-title {
font-family: var(--serif); font-weight: 500;
font-size: 13px; color: var(--text); margin: 0;
line-height: 1.3; letter-spacing: -0.005em;
}
/* Featured speaking card — highlighted with accent border + soft glow */
.speaking-card.speaking-card-featured {
border-color: rgba(212,163,115,0.45);
background: linear-gradient(135deg, rgba(212,163,115,0.06), var(--bg-2));
position: relative;
isolation: isolate;
}
.speaking-card.speaking-card-featured::after {
content: '';
position: absolute; inset: -20px;
background: radial-gradient(ellipse at 50% 40%, rgba(212,163,115,0.25), transparent 65%);
filter: blur(20px);
z-index: -1;
opacity: 0.5;
pointer-events: none;
transition: opacity 0.4s;
}
.speaking-card.speaking-card-featured:hover::after { opacity: 1; }
.speaking-card.speaking-card-featured:hover {
border-color: var(--accent);
box-shadow: 0 14px 32px -18px rgba(212,163,115,0.4);
}
.badge-featured {
display: inline-flex; align-items: center;
padding: 2px 6px;
border-radius: 3px;
background: rgba(212,163,115,0.18);
border: 1px solid rgba(212,163,115,0.4);
color: var(--accent);
font-family: var(--mono); font-size: 9px;
text-transform: uppercase; letter-spacing: 0.14em;
margin-right: 8px;
font-weight: 500;
}
@media (max-width: 700px) {
.speaking-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.speaking-grid { grid-template-columns: 1fr; }
}
/* ──────── BEYOND ──────── */
.beyond-list {
display: flex; flex-direction: column; gap: 22px;
}
.beyond-item {
padding: 22px 0;
border-top: 1px solid var(--border);
}
.beyond-item:first-child { border-top: none; padding-top: 0; }
.beyond-item .beyond-head {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
}
.beyond-item h4 {
font-family: var(--serif); font-weight: 500; font-size: 20px;
color: var(--text); margin: 0; letter-spacing: -0.01em;
}
.beyond-item .beyond-tag {
font-family: var(--mono); font-size: 10.5px;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em;
}
.beyond-item p {
font-family: var(--serif); font-weight: 300;
font-size: 15.5px; color: var(--text-2); line-height: 1.7; margin: 0;
letter-spacing: -0.003em; max-width: 620px;
}
.beyond-item p em {
font-style: italic; color: var(--accent-2); font-weight: 400;
}
/* Piano feature — editorial 2-col with feature photo + secondary thumbs */
.beyond-item.piano-feature .piano-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 30px;
align-items: start;
margin-top: 0;
}
.beyond-item.piano-feature .piano-text p {
margin: 0 0 14px 0;
max-width: none;
}
.beyond-item.piano-feature .piano-text p:last-child { margin-bottom: 0; }
.beyond-item.piano-feature .piano-pull {
margin-top: 18px;
padding: 14px 18px;
border-left: 2px solid var(--accent);
background: rgba(212,163,115,0.05);
border-radius: 0 4px 4px 0;
font-size: 15px;
line-height: 1.65;
}
.beyond-item.piano-feature .piano-pull em {
font-style: italic;
color: var(--text);
font-weight: 400;
}
/* Atmospheric cinematic mood banner — hands close-up, fade-to-bg edges */
.piano-mood {
position: relative;
margin: 22px 0 28px 0;
aspect-ratio: 21 / 9;
overflow: hidden;
isolation: isolate;
}
.piano-mood a {
display: block;
position: absolute; inset: 0;
text-decoration: none;
}
.piano-mood img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 55%;
display: block;
transition: transform 1.6s cubic-bezier(.2,.8,.2,1),
filter 0.8s;
/* Soft horizontal edge fade — image blends into bg, not boxed in */
-webkit-mask-image: linear-gradient(to right,
transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%, #000 8%, #000 92%, transparent 100%);
filter: contrast(1.06) saturate(1.1);
}
.piano-mood:hover img {
transform: scale(1.04);
filter: contrast(1.1) saturate(1.2);
}
/* Vignette + bottom darkening for caption legibility */
.piano-mood::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 55%, transparent 32%, rgba(0,0,0,0.55) 100%),
linear-gradient(180deg, transparent 30%, rgba(14,13,10,0.88));
pointer-events: none;
z-index: 1;
}
/* Cinematic top accent line + bottom accent line — like film letterbox marks */
.piano-mood::after {
content: '';
position: absolute; left: 8%; right: 8%; top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent, rgba(212,163,115,0.55), transparent);
z-index: 2;
}
.piano-mood-cap {
position: absolute;
bottom: 22px; left: 12%; right: 12%;
z-index: 3;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
.piano-mood-eyebrow {
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent);
display: flex; align-items: center; gap: 14px;
}
.piano-mood-eyebrow::before {
content: ''; width: 32px; height: 1px;
background: var(--accent); opacity: 0.7;
flex-shrink: 0;
}
.piano-mood-title {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(22px, 2.8vw, 30px);
color: var(--text);
letter-spacing: -0.015em; line-height: 1.15;
text-shadow: 0 2px 16px rgba(0,0,0,0.75);
max-width: 480px;
}
@media (max-width: 720px) {
.piano-mood { aspect-ratio: 16 / 9; margin: 18px 0 22px; }
.piano-mood-cap { bottom: 14px; left: 8%; right: 8%; }
}
/* Supporting stage photo (single, in piano-grid right column) */
.piano-stage-photo {
display: block;
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--border-2);
background: var(--bg-3);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
isolation: isolate;
}
.piano-stage-photo::before {
content: '';
position: absolute; inset: -22px;
background: radial-gradient(ellipse at 50% 50%, rgba(212,163,115,0.3), transparent 60%);
filter: blur(22px);
z-index: -1;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
border-radius: 22px;
}
.piano-stage-photo:hover::before { opacity: 1; }
.piano-stage-photo:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 22px 44px -28px rgba(0,0,0,0.6);
}
.piano-stage-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
object-position: 35% 50%;
transition: transform 0.6s;
}
.piano-stage-photo:hover img { transform: scale(1.04); }
.piano-stage-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(14,13,10,0.55));
pointer-events: none;
z-index: 1;
}
.piano-stage-cap {
position: absolute;
bottom: 10px; left: 14px;
font-family: var(--mono); font-size: 9.5px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245,238,222,0.85);
z-index: 2;
}
/* Viewfinder corner markers — same language as hero portrait + mood */
.piano-stage-photo .corner {
position: absolute;
width: 11px; height: 11px;
pointer-events: none;
z-index: 3;
opacity: 0.7;
transition: opacity 0.3s, width 0.3s, height 0.3s;
}
.piano-stage-photo .corner::before,
.piano-stage-photo .corner::after {
content: ''; position: absolute; background: var(--accent);
}
.piano-stage-photo .corner::before { width: 100%; height: 1.5px; }
.piano-stage-photo .corner::after { width: 1.5px; height: 100%; }
.piano-stage-photo .corner.tl { top: 7px; left: 7px; }
.piano-stage-photo .corner.tl::before, .piano-stage-photo .corner.tl::after { top: 0; left: 0; }
.piano-stage-photo .corner.tr { top: 7px; right: 7px; }
.piano-stage-photo .corner.tr::before, .piano-stage-photo .corner.tr::after { top: 0; right: 0; }
.piano-stage-photo .corner.bl { bottom: 7px; left: 7px; }
.piano-stage-photo .corner.bl::before, .piano-stage-photo .corner.bl::after { bottom: 0; left: 0; }
.piano-stage-photo .corner.br { bottom: 7px; right: 7px; }
.piano-stage-photo .corner.br::before, .piano-stage-photo .corner.br::after { bottom: 0; right: 0; }
.piano-stage-photo:hover .corner { opacity: 1; width: 14px; height: 14px; }
@media (max-width: 720px) {
.beyond-item.piano-feature .piano-grid {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* ──────── CONNECT ──────── */
.connect-block {
text-align: left;
}
.connect-block .connect-lede {
font-family: var(--serif); font-weight: 300;
font-size: 18px; color: var(--text-2); line-height: 1.65;
margin: 0 0 28px 0; max-width: 580px;
letter-spacing: -0.005em;
}
.connect-block .connect-lede strong {
color: var(--text); font-weight: 500;
}
.connect-block .connect-links {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin-bottom: 32px;
}
.connect-link {
display: flex; align-items: baseline; gap: 12px;
padding: 14px 18px;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: 8px;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
text-decoration: none;
}
.connect-link:hover {
border-color: var(--accent);
background: var(--bg-3);
transform: translateY(-1px);
}
.connect-link .cl-label {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); white-space: nowrap;
}
.connect-link .cl-value {
font-family: var(--sans); font-size: 13.5px;
color: var(--text-2); flex: 1; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.connect-closing {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 15.5px; color: var(--muted); line-height: 1.7;
max-width: 620px; margin: 0;
}
.connect-closing em {
font-style: normal; color: var(--accent-2); font-weight: 400;
}
footer {
margin-top: 80px; padding-top: 32px;
border-top: 1px solid var(--border);
font-family: var(--mono); font-size: 11px;
color: var(--dim); display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
/* ──────── Reveal animations (enhanced: blur + tilt → sharp) ──────── */
.reveal {
opacity: 0;
transform: translateY(22px) rotate(-0.6deg);
filter: blur(6px);
transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(.2,.8,.2,1), filter 0.9s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0) rotate(0);
filter: blur(0);
}
/* ──────── Scroll progress bar at top of viewport ──────── */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
box-shadow: 0 0 10px rgba(212,163,115,0.6);
z-index: 100;
pointer-events: none;
transition: width 0.08s linear;
}
/* ──────── Scroll-down chevron below cinematic banner ──────── */
.scroll-hint {
position: absolute;
bottom: 18px; left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex; flex-direction: column; align-items: center; gap: 6px;
pointer-events: auto;
text-decoration: none;
color: rgba(245,238,222,0.55);
font-family: var(--mono); font-size: 9px;
letter-spacing: 0.22em; text-transform: uppercase;
transition: color 0.3s, transform 0.3s;
}
.scroll-hint:hover { color: var(--accent); transform: translateX(-50%) translateY(-3px); }
.scroll-hint .chev {
width: 18px; height: 18px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
animation: chevBounce 1.8s ease-in-out infinite;
}
@keyframes chevBounce {
0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
/* ──────── Stat scramble — element starts scrambled, settles via JS ──────── */
.stat-num.scrambling { color: var(--accent); }
.stat-num.scrambling .stat-sub { color: var(--accent); opacity: 0.7; }
/* ──────── Arc spine draw animation (CSS transform from 0% → 100%) ──────── */
.arc-list::before {
transform-origin: center;
transform: scaleX(0);
transition: transform 1.2s cubic-bezier(.6, 0, .2, 1);
}
.arc-list.spine-drawn::before { transform: scaleX(1); }
.arc-stop { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.arc-list.spine-drawn .arc-stop { opacity: 1; transform: translateY(0); }
.arc-list.spine-drawn .arc-stop:nth-child(1) { transition-delay: 0.6s; }
.arc-list.spine-drawn .arc-stop:nth-child(2) { transition-delay: 0.75s; }
.arc-list.spine-drawn .arc-stop:nth-child(3) { transition-delay: 0.9s; }
.arc-list.spine-drawn .arc-stop:nth-child(4) { transition-delay: 1.05s; }
.arc-list.spine-drawn .arc-stop:nth-child(5) { transition-delay: 1.2s; }
.arc-list.spine-drawn .arc-stop:nth-child(6) { transition-delay: 1.35s; }
/* ──────── Project card inner spotlight (mouse-follow accent radial) ──────── */
.project-card {
--pcmx: 50%;
--pcmy: 50%;
}
.project-card::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at var(--pcmx) var(--pcmy), rgba(212,163,115,0.12), transparent 220px);
opacity: 0; transition: opacity 0.3s;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.project-list > li:hover .project-card::after { opacity: 1; }
/* ──────── Ambient body texture (grid + grain) ──────── */
body::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(rgba(212,163,115,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(212,163,115,0.025) 1px, transparent 1px);
background-size: 88px 88px;
pointer-events: none;
z-index: 1;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
body::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.06;
pointer-events: none;
z-index: 1;
}
/* ──────── Nav active morphing underline ──────── */
.top-nav .nav-links a {
position: relative;
}
.top-nav .nav-links a::after {
content: '';
position: absolute;
left: 50%; bottom: -4px;
width: 0; height: 1.5px;
background: var(--accent);
transition: width 0.3s ease, left 0.3s ease;
}
.top-nav .nav-links a:hover::after,
.top-nav .nav-links a.active::after {
width: 100%;
left: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
body::after, body::before, #cursor-glow { display: none; }
.reveal { opacity: 1; transform: none; filter: none; transition: none; }
.hero h1 .ch { opacity: 1; transform: none; animation: none; }
.arc-list::before { transform: scaleX(1); }
.arc-stop { opacity: 1; transform: none; }
.scroll-hint .chev { animation: none; }
html { scroll-behavior: auto; }
}
/* ──────── SLIM LANDING — additional components ──────── */
/* Audience switcher chips (triage bar) */
.audience-switcher {
display: flex; align-items: center; gap: 14px;
padding: 18px 0;
margin: 32px 0 28px;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
font-family: var(--mono); font-size: 11px;
flex-wrap: wrap;
}
.audience-switcher .aud-label {
color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px;
}
.audience-switcher .aud-hint {
color: var(--dim); font-style: italic;
font-family: var(--serif); font-weight: 300; font-size: 12.5px;
}
.audience-switcher .aud-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.aud-chip {
font-family: var(--mono); font-size: 11px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border-2);
background: var(--bg-2);
color: var(--muted);
cursor: pointer;
letter-spacing: 0.06em;
transition: all 0.25s;
}
.aud-chip:hover { border-color: rgba(212,163,115,0.5); color: var(--accent); }
.aud-chip[aria-selected="true"] {
background: rgba(212,163,115,0.15);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 14px rgba(212,163,115,0.25);
}
/* Audience-aware section emphasis (chip-driven body data-audience attribute) */
body[data-audience="collaborator"] .section-credentials { opacity: 0.42; transition: opacity 0.4s; }
body[data-audience="builder"] .section-credentials,
body[data-audience="builder"] .section-about { opacity: 0.42; transition: opacity 0.4s; }
body[data-audience="residency"] #now { opacity: 0.55; transition: opacity 0.4s; }
body[data-audience="collaborator"] #shipped,
body[data-audience="builder"] #work,
body[data-audience="residency"] .section-credentials {
outline: 1px dashed rgba(212,163,115,0.4);
outline-offset: 14px;
transition: outline-color 0.35s, outline-offset 0.35s;
}
/* When de-emphasized, hover restores */
body[data-audience] .section-credentials:hover,
body[data-audience] .section-about:hover,
body[data-audience] #now:hover { opacity: 1; }
/* Work mini (slim version of project cards) */
.work-mini { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.work-mini > li { display: flex; }
.work-mini-card {
display: grid;
grid-template-columns: 170px 1fr;
gap: 22px;
align-items: center;
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-2);
text-decoration: none;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
width: 100%;
}
.work-mini-card:hover {
border-color: rgba(212,163,115,0.45);
background: var(--bg-3);
transform: translateY(-2px);
box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
}
/* Inert variant — for in-development cards without a public destination.
Keeps card visual styling but kills hover affordance (no lift, no cursor pointer). */
.work-mini-card.work-mini-card-inert { cursor: default; }
.work-mini-card.work-mini-card-inert:hover {
border-color: var(--border);
background: var(--bg-2);
transform: none;
box-shadow: none;
}
.work-mini-card.work-mini-card-inert:hover .work-mini-thumb img { transform: none; }
.work-mini-thumb {
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: 8px;
border: 1px solid var(--border-2);
background: var(--bg-3);
}
.work-mini-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s;
}
.work-mini-card:hover .work-mini-thumb img { transform: scale(1.05); }
.work-mini-meta {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px;
}
.work-mini h3 {
font-family: var(--serif); font-weight: 500; font-size: 20px;
line-height: 1.1; letter-spacing: -0.015em;
margin: 0 0 6px 0; color: var(--text);
}
.work-mini h3 .arrow {
color: var(--accent); font-size: 14px; font-family: var(--mono);
display: inline-block; margin-left: 4px;
transition: transform 0.2s;
}
.work-mini-card:hover h3 .arrow { transform: translate(4px, -2px); }
.work-mini p {
font-family: var(--serif); font-weight: 300; font-size: 14px;
color: var(--text-2); margin: 0 0 10px 0; line-height: 1.55;
}
.work-mini-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.work-mini-tags .tag {
display: inline-block;
background: var(--bg-3); border: 1px solid var(--border-2);
padding: 3px 9px; border-radius: 4px;
font-family: var(--mono); font-size: 10.5px;
color: var(--muted); margin: 0;
}
.work-mini-tags .tag.accent {
color: var(--accent); border-color: rgba(212,163,115,0.35);
background: rgba(212,163,115,0.06);
}
@media (max-width: 600px) {
.work-mini-card { grid-template-columns: 1fr; gap: 16px; padding: 16px 18px; }
.work-mini-thumb { aspect-ratio: 16 / 10; max-width: 100%; }
}
/* About mini */
.about-mini {
font-family: var(--serif); font-weight: 300; font-size: 16px;
color: var(--text-2); line-height: 1.7; letter-spacing: -0.005em;
margin: 0 0 14px 0; max-width: 660px;
}
.about-mini strong { color: var(--text); font-weight: 500; }
.about-mini em { color: var(--accent-2); font-style: italic; font-weight: 400; }
/* Credibility strip (compact list) */
.cred-strip {
list-style: none; padding: 0; margin: 0 0 16px 0;
display: flex; flex-direction: column; gap: 10px;
}
.cred-strip li {
font-family: var(--serif); font-size: 14.5px;
color: var(--text-2); padding-left: 18px; position: relative;
}
.cred-strip li::before {
content: '·'; position: absolute; left: 6px;
color: var(--accent); font-weight: 700;
}
.cred-strip .cred-issuer {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent); margin-right: 8px;
font-weight: 500;
}
/* Micro link (inline "see all" reference) */
.micro-link {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted);
border-bottom: 1px solid var(--border);
padding-bottom: 1px;
margin-left: 12px;
transition: color 0.25s, border-color 0.25s;
display: inline-block;
}
.micro-link:hover { color: var(--accent); border-color: var(--accent); }
/* Story link CTA (big invitation card to deep page) */
.section-story-cta { padding: 28px 0 12px; }
.story-link-card {
display: block;
padding: 38px 32px;
border: 1px dashed rgba(212,163,115,0.5);
border-radius: 14px;
background: linear-gradient(135deg, rgba(212,163,115,0.05), var(--bg-2));
text-decoration: none;
transition: border-color 0.35s, background 0.35s, transform 0.35s, box-shadow 0.35s;
position: relative; isolation: isolate;
overflow: hidden;
}
.story-link-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(212,163,115,0.22), transparent 65%);
opacity: 0; transition: opacity 0.4s;
z-index: -1;
}
.story-link-card:hover::before { opacity: 1; }
.story-link-card:hover {
border-color: var(--accent);
border-style: solid;
transform: translateY(-2px);
box-shadow: 0 24px 50px -28px rgba(212,163,115,0.5);
}
.story-link-body { display: flex; flex-direction: column; gap: 6px; }
.story-link-eyebrow {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--accent);
}
.story-link-title {
font-family: var(--serif); font-weight: 500;
font-size: clamp(24px, 3vw, 32px);
color: var(--text); letter-spacing: -0.02em;
}
.story-link-title .arrow {
display: inline-block; color: var(--accent);
transition: transform 0.3s;
margin-left: 8px;
}
.story-link-card:hover .story-link-title .arrow { transform: translateX(8px); }
.story-link-sub {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 14px; color: var(--text-2); line-height: 1.55;
margin-top: 4px;
}
/* Nav "Full story" link distinguished from internal anchors */
.top-nav .nav-links a.nav-deep {
color: var(--accent);
padding-left: 12px;
margin-left: 4px;
border-left: 1px solid var(--border);
}
/* Artifact lightbox overlay */
.lightbox {
position: fixed; inset: 0;
background: rgba(8, 7, 5, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 200;
display: flex; align-items: center; justify-content: center;
animation: lightboxIn 0.25s ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes lightboxIn {
from { opacity: 0; }
to { opacity: 1; }
}
.lightbox-frame {
position: relative;
max-width: 92vw; max-height: 86vh;
margin: 0;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-frame img {
max-width: 100%; max-height: 80vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7);
}
.lightbox-cap {
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,238,222,0.78);
text-align: center;
max-width: 620px;
}
.lightbox-close, .lightbox-nav {
border: 1px solid var(--border-2);
background: rgba(20,18,15,0.6);
color: var(--text);
cursor: pointer;
transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s;
z-index: 1;
}
.lightbox-close {
position: absolute; top: 18px; right: 22px;
width: 38px; height: 38px;
border-radius: 50%;
font-size: 14px;
}
.lightbox-close:hover {
border-color: var(--accent); color: var(--accent);
background: rgba(212,163,115,0.12);
transform: rotate(90deg);
}
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
font-size: 26px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); background: rgba(212,163,115,0.12); }
@media (max-width: 600px) {
.lightbox-nav { width: 40px; height: 40px; font-size: 20px; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox-close { top: 12px; right: 12px; }
}
/* ──────── Speaking card — text-only (from story.html) ──────── */
.speaking-card.speaking-card-text {
display: flex; flex-direction: column; justify-content: center;
padding: 22px 22px;
background: var(--bg-2);
border-left: 2px solid var(--accent);
border-radius: 0 8px 8px 0;
transition: border-color 0.25s, background 0.25s, transform 0.25s;
cursor: default;
}
.speaking-card.speaking-card-text:hover {
background: var(--bg-3);
transform: translateY(-1px);
}
.speaking-card.speaking-card-text .speaking-cap { padding: 0; }
.speaking-card.speaking-card-text .speaking-when {
margin-bottom: 6px;
}
.speaking-card.speaking-card-text .speaking-title {
font-size: 14px; margin: 0 0 10px 0;
}
.speaking-card.speaking-card-text .speaking-sub {
font-family: var(--serif); font-weight: 300;
font-size: 12.5px; color: var(--text-2);
line-height: 1.55; margin: 0;
letter-spacing: -0.003em;
}
.speaking-card.speaking-card-text .speaking-sub em {
font-style: italic; color: var(--accent-2); font-weight: 400;
}
/* ═══════ v3 additions — 2026-07-04 · tier restructure + mobile pass ═══════ */
/* Hero pillars line (three-pillar subline under tagline) */
.hero-pillars {
font-family: var(--mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--muted); margin: -6px 0 20px 0;
display: flex; flex-wrap: wrap; align-items: center;
gap: 5px 0; line-height: 1.5;
}
.hero-pillars .sep { color: var(--accent); margin: 0 8px; }
.hero-pillars > span:not(.sep) { white-space: nowrap; }
.hero-pillars em { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--text-2); }
/* Hero visitor-split — three triage links (desktop inline pills, mobile stacked) */
.hero-split {
display: flex; flex-wrap: wrap; gap: 10px 14px;
margin: 16px 0 2px 0;
}
.hero-split a {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
color: var(--text-2); text-decoration: none;
border: 1px solid var(--border); border-radius: 7px;
padding: 7px 13px; white-space: nowrap;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.hero-split a:hover {
color: var(--accent); border-color: rgba(212,163,115,0.5);
background: rgba(212,163,115,0.06);
}
/* Single-card hub lists (learn / events / keep) — class existed in markup but was never styled: raw bullets showed */
.work-mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.work-mini-list > li { display: flex; }
/* Section lede — same fix: markup class had no rules; mirrors .now-lead */
.section-lede {
font-family: var(--serif); font-weight: 300;
font-size: 15.5px; color: var(--text-2); line-height: 1.7;
margin: -8px 0 28px 0; max-width: 620px;
letter-spacing: -0.003em;
}
/* Anchor offsets for new/renamed sections */
#learn, #how, #lab, #events, #keep { scroll-margin-top: 72px; }
/* ── Mobile pass (2026-07-04) ── */
@media (max-width: 680px) {
/* Restore section nav on mobile as a slim scrollable second row (was display:none = no wayfinding) */
.top-nav .nav-inner { flex-wrap: wrap; padding: 10px 18px 0 18px; gap: 0; justify-content: flex-start; }
.top-nav .nav-brand { padding-right: 118px; padding-bottom: 10px; }
.top-nav .lang-toggle { top: 8px; right: 12px; transform: none; }
.top-nav .nav-links {
display: flex; flex-basis: 100%; overflow-x: auto;
gap: 18px; padding: 9px 2px 10px;
border-top: 1px solid var(--border);
scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.top-nav .nav-links::-webkit-scrollbar { display: none; }
.top-nav .nav-links a { white-space: nowrap; flex-shrink: 0; }
/* Taller sticky nav on mobile → bigger anchor offset */
#shipped, #work, #learn, #how, #lab, #now, #about, #credentials, #events, #keep, #connect { scroll-margin-top: 100px; }
/* Portrait caption: stack lines, never split CJK mid-word */
.hero-caption { flex-direction: column; align-items: flex-start; gap: 2px; }
.hero-caption span { white-space: nowrap; }
/* Hero split → full-width stacked buttons; pillars → tighter so they wrap cleanly */
.hero-split { flex-direction: column; align-items: stretch; gap: 8px; }
.hero-split a { text-align: left; }
.hero-pillars { font-size: 10px; letter-spacing: 0.1em; }
.hero-pillars .sep { margin: 0 6px; }
}