/* Shared typography: one scale across every page. Load after component styles. */
:root {
  --type-title: clamp(40px, 4.8vw, 64px);
  --type-section: clamp(32px, 3.4vw, 44px);
  --type-detail: clamp(24px, 2.3vw, 28px);
}
html body :is(#intro, .page-title, .profile-heading h1, .case-hero h1) {
  font-family: 'Geist', sans-serif;
  font-size: var(--type-title);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -.045em;
}
html body :is(.section-heading, .about-paper, .journey-intro, .story) h2,
html body .balloon-footer .bf-title {
  font-family: 'Geist', sans-serif;
  font-size: var(--type-section);
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -.035em;
}
html body :is(.profile-story, .now-entry) h2 {
  font-family: 'Geist', sans-serif;
  font-size: var(--type-detail);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}
html body :is(h1, h2) :is(em, i) {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: inherit;
  font-weight: 400;
  font-style: italic;
  line-height: inherit;
  letter-spacing: inherit;
}
/* Case-study chapter titles remain entirely sans serif for easy scanning. */
html body .story h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}
/* Phosphor icons replace font-dependent arrow and play glyphs. */
.ph-icon{display:inline-block;width:1em;height:1em;fill:currentColor;vertical-align:-.15em;flex-shrink:0}
a>.ph-icon{margin-left:.3em}
.blog-arrow .ph-icon{width:22px;height:22px}
.bf-play-icon .ph-icon{width:16px;height:16px}
.bf-play>.ph-icon,.bf-primary .ph-icon,.nav-contact .ph-icon,.story-button .ph-icon,.about-learn .ph-icon{width:16px;height:16px}
/* Shared CTA treatment, based on the About page button. */
:root{--cta-bg:#282a27;--cta-fg:#faf9f5;--cta-hover-bg:#bd4a25;--cta-hover-fg:#ffffff}
html[data-theme=dark]{--cta-bg:#e9e5dc;--cta-fg:#282a27;--cta-hover-bg:#f1a07d;--cta-hover-fg:#282a27}
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play){
 background:var(--cta-bg);color:var(--cta-fg);border:1px solid transparent;
 border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
 gap:16px;min-height:48px;padding:14px 24px;
 font-family:'Geist',sans-serif;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:0;
 text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s;
}
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play):is(:hover,:focus-visible),
html body:not(#cta-style-scope) .work-row-link:is(:hover,:focus-visible) .story-button{
 background:var(--cta-hover-bg);color:var(--cta-hover-fg);border-color:transparent;
}
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play):focus-visible,
html body:not(#cta-style-scope) .nav a.nav-contact:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html body:not(#cta-style-scope) .nav a.nav-contact{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;font-weight:500}
html body:not(#cta-style-scope) .nav a.nav-contact:is(:hover,:focus-visible){background:var(--cta-hover-bg);color:var(--cta-hover-fg);border-color:var(--cta-hover-bg)}
html body:not(#cta-style-scope) .nav a.nav-contact[aria-current=page]{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
html body:not(#cta-style-scope) .nav a.nav-contact[aria-current=page]:is(:hover,:focus-visible){background:var(--cta-hover-bg);color:var(--cta-hover-fg)}
html body:not(#cta-style-scope) .bf-play{padding:10px 18px 10px 10px;gap:12px}
html body:not(#cta-style-scope) .bf-play-icon{background:var(--cta-fg);color:var(--cta-bg)}
html body:not(#cta-style-scope) .bf-play:is(:hover,:focus-visible) .bf-play-icon{background:var(--cta-hover-fg);color:var(--cta-hover-bg)}
html body:not(#cta-style-scope) .balloon-footer[data-phase]:not([data-phase=idle]) .bf-play{display:none}
@media(prefers-reduced-motion:reduce){html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play){transition:none}}

/* Compact label-to-icon spacing across CTAs. */
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play,.nav a.nav-contact){gap:8px}
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-primary,.bf-play,.nav a.nav-contact)>.ph-icon,
html body:not(#cta-style-scope) .nav a.nav-contact>span{margin-left:0}
/* Section actions use the navbar's outlined secondary treatment. */
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-play){background:transparent;color:var(--ink);border-color:var(--line)}
html body:not(#cta-style-scope) :is(.about-learn,.story-button,.bf-play):is(:hover,:focus-visible),
html body:not(#cta-style-scope) .work-row-link:is(:hover,:focus-visible) .story-button{background:var(--cta-hover-bg);color:var(--cta-hover-fg);border-color:var(--cta-hover-bg)}
html body:not(#cta-style-scope) .clear-actions .about-learn{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
html body:not(#cta-style-scope) .clear-actions .about-learn:is(:hover,:focus-visible){background:var(--cta-hover-bg);color:var(--cta-hover-fg)}
html body:not(#cta-style-scope) .bf-play-icon{background:var(--ink);color:var(--paper)}
/* The game launcher needs an opaque surface over the animated scene. */
html body:not(#cta-style-scope) .bf-play{background:var(--paper);color:var(--ink);border-color:var(--line)}
html body:not(#cta-style-scope) .bf-play:is(:hover,:focus-visible){background:var(--cta-hover-bg);color:var(--cta-hover-fg);border-color:var(--cta-hover-bg)}
/* Hero: handwritten greeting and interests, serif headline, sans-serif description. */
html body #intro,html body #intro em{font-family:'EB Garamond',Georgia,serif;font-weight:400;letter-spacing:-.025em}
html body .clear-intro .hello-note,html body .clear-intro .hero-interest{font-family:'Caveat',cursive;font-weight:400}
html body .clear-intro .clear-description{font-family:'Geist',sans-serif;font-weight:400;font-size:17px;line-height:1.8}
@media(max-width:640px){html body .clear-intro .clear-description{font-size:16px}}
/* About heading: handwritten, colour-coded words */
html body .profile-heading h1 .hand{font-family:'Caveat',cursive;font-weight:600;font-size:1.28em;line-height:.8;letter-spacing:0;padding:0 .1em 0 .04em}.hand-orange{color:#bd4a25}.hand-green{color:#5f7a35}.hand-purple{color:#6d4fa3}html[data-theme=dark] .hand-orange{color:#f1a07d}html[data-theme=dark] .hand-green{color:#b3cc85}html[data-theme=dark] .hand-purple{color:#c2aef0}
/* About page: one size for every section heading, one size for every card title. */
html body.studio :is(.section-heading, .album-section, .journey-intro) h2{font-size:var(--type-section);font-weight:450;line-height:1.16;letter-spacing:-.035em}
html body.studio :is(.resume-row h3, .highlight-card h3, .journey-list h3){font-size:21px;line-height:1.3;letter-spacing:-.025em}