/* Walkie reference, measured 2026-09-27. Local theme experiment. */
@font-face { font-family:Geist; src:url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:Geist; src:url('/fonts/Geist-Italic-Variable.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; }
html.walkie-theme, html.walkie-theme[data-theme="light"] {
 --main-font:Geist,'Helvetica Neue',Helvetica,Arial,sans-serif;
 --heading-font:var(--main-font);
 --background:#f5f5f7; --dark:#f5f5f7; --home-feed-background:#f5f5f7;
 --heading:#111; --paragraphs:#888; --portfolio-copy:#888;
 --background-2:#f5f5f5; --border:#0000000f;
 color-scheme:light;
}
.walkie-theme body { background:var(--home-feed-background); }
.walkie-theme body::before { content:none; }
.walkie-theme .grid-hero-b { position:relative; z-index:1; background:transparent; }
.walkie-theme .grid-hero-b .hero-sticky,.walkie-theme .grid-hero-b .hero-b { background:transparent; }
.walkie-theme .hero-sticky .portfolio-bio > .intro-greeting,
.walkie-theme .hero-sticky .intro-greeting .brand,
.walkie-theme .hero-sticky .intro-greeting .brand-name {
 font-family:var(--main-font); font-size:clamp(2.1rem,3.8vw,3.6rem); font-weight:500; line-height:.95; letter-spacing:-.04em; color:#111; -webkit-text-fill-color:#111;
}
.walkie-theme .hero-sticky .portfolio-bio > .intro-greeting { margin-bottom:28px; }
.walkie-theme .hero-sticky .portfolio-bio > .intro-identity,
.walkie-theme .hero-sticky .portfolio-bio > .heading-hero { font-weight:500; letter-spacing:-.04em; }
.walkie-theme .hero-sticky .portfolio-bio .portfolio-bio-copy { font-family:var(--main-font); font-size:clamp(.9rem,1.2vw,1.05rem); font-weight:400; line-height:1.4; letter-spacing:normal; color:#888; }
.walkie-theme .hero-sticky .portfolio-bio .portfolio-bio-copy > p { color:#888; }
.walkie-theme .hero-sticky .portfolio-bio-copy .intro-inline-link { text-decoration:none; }
.walkie-theme .hero-sticky .portfolio-bio-copy .intro-inline-link::after { display:none; }
.walkie-theme .hero-sticky .portfolio-bio-copy .intro-inline-link:hover { color:var(--accent-blue); }
.walkie-theme .hero-sticky .portfolio-bio-copy .intro-about-link:hover { color:var(--nav-about); }
.walkie-theme .hero-sticky .portfolio-bio-copy .intro-spotify-link:hover { color:#16883e; }

/* Centered local introduction; work follows in the same page scroll. */
html.walkie-theme.home-gallery .grid-hero-b {
 display:block; height:auto; min-height:100svh; overflow:visible;
}
html.walkie-theme.home-gallery .grid-hero-b .hero-sticky {
 position:relative; top:auto; width:100%; height:auto; min-height:88svh;
 padding:100px 24px 56px; display:flex; flex-direction:column;
 align-items:center; justify-content:center; text-align:center;
}
html.walkie-theme.home-gallery .grid-hero-b .hero-sticky > .portfolio-bio {
 width:100%; max-width:680px; margin:0 auto; text-align:center; align-items:center;
}
html.walkie-theme .hero-sticky .portfolio-bio::before { display:none; }
html.walkie-theme .hero-sticky .portfolio-bio > .intro-greeting { margin:0 0 28px; }
html.walkie-theme .hero-sticky .portfolio-bio > .intro-identity { margin:0 0 8px; }
html.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero { margin:0 0 28px; width:100%; font-family:var(--main-font); font-size:clamp(2.1rem,3.8vw,3.6rem); font-weight:500; line-height:.95; letter-spacing:-.04em; }
html.walkie-theme .hero-sticky .portfolio-bio .portfolio-bio-copy { width:100%; max-width:48ch; margin-inline:auto; text-align:center; gap:16px; }
html.walkie-theme .hero-sticky .home-like-invite { position:relative; inset:auto; margin:28px auto 0; }
html.walkie-theme.home-gallery .grid-hero-b .hero-b { width:100%; max-width:1200px; margin:0 auto; padding:0 32px 64px; height:auto; overflow:visible; }
.role-typewriter { display:inline-grid; vertical-align:top; justify-items:center; }
.role-typewriter-sizer,.role-typewriter-line { grid-area:1 / 1; white-space:nowrap; padding:.05em .07em; }
.role-typewriter-sizer { visibility:hidden; }
.role-typewriter-line { display:inline-flex; align-items:baseline; border-radius:.12em; background:rgba(251,69,1,.16); min-width:.5ch; }
.role-typewriter-caret { display:inline-block; align-self:center; width:.05em; height:.8em; margin-left:.03em; background:currentColor; animation:role-caret 1s step-end infinite; }
@keyframes role-caret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@media(max-width:600px) {
 html.walkie-theme.home-gallery .grid-hero-b .hero-sticky { padding:80px 20px 40px; min-height:88svh; }
 .role-typewriter { max-width:100%; }
 .role-typewriter-sizer,.role-typewriter-line { white-space:normal; overflow-wrap:normal; }
 .role-typewriter-line { align-self:center; max-width:100%; }
 html.walkie-theme.home-gallery .grid-hero-b .hero-b { padding:0 16px 40px; }
}
@media(prefers-reduced-motion:reduce) { .role-typewriter-caret { animation:none; display:none; } }

/* The centered layout scrolls the document, not the old desktop feed. */
html.walkie-theme.portfolio-home:not(.portfolio-viewer-open),
html.walkie-theme.portfolio-home:not(.portfolio-viewer-open) body {
 height:auto; min-height:100%; overflow-x:clip; overflow-y:visible;
}
html.walkie-theme.portfolio-home.portfolio-viewer-open body {
 position:fixed; left:var(--portfolio-page-x,0px); top:var(--portfolio-page-y,0px); width:100%;
}

/* Only the discipline types; center the whole visible phrase as its width changes. */
.role-typewriter-phrase { position:relative; left:50%; display:flex; width:max-content; align-items:baseline; gap:.18em; white-space:nowrap; transform:translateX(-50%); }
.role-typewriter-phrase[data-centered] { transition:transform .24s cubic-bezier(.22,1,.36,1); }
.role-typewriter-phrase .role-typewriter { justify-items:end; }
.role-typewriter-phrase .role-typewriter-sizer,
.role-typewriter-phrase .role-typewriter-line { white-space:nowrap; }
.role-typewriter-fixed { display:inline-block; }

@media(prefers-reduced-motion:reduce) { .role-typewriter-phrase[data-centered] { transition:none; } }

/* Name shares the greeting's responsive typography. */
html.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .intro-identity {
 font-family:var(--main-font); font-size:clamp(2.1rem,3.8vw,3.6rem);
 font-weight:500; line-height:.95; letter-spacing:-.04em;
}

/* Evening theme follows the same local-hour boundary as the greeting. */
html.walkie-theme[data-theme="dark"] {
 --background:#121212; --dark:#121212; --home-feed-background:#121212;
 --heading:#f5f5f7; --paragraphs:#999; --portfolio-copy:#999;
 --background-2:#1c1c1c; --border:#ffffff1f;
 color-scheme:dark;
}
html.walkie-theme[data-theme="dark"] .hero-sticky .portfolio-bio .portfolio-bio-copy,
html.walkie-theme[data-theme="dark"] .hero-sticky .portfolio-bio .portfolio-bio-copy > p { color:#999; }