/* Light-only cold-press paper portfolio. */
:root { --font-sans: Helvetica, Arial, sans-serif; color-scheme: light; --bg: #f8f9fa; --surface: #fff; --ink: #111827; --muted: #6b7280; --line: #e2e4e8; --accent: #6b8b9b; --wash: #e6eef2; --header: #c8d8e0e6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0px; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
a:hover, a:focus-visible { color: var(--accent); }
input, textarea, select { font-family: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--wash); color: var(--accent); }
.container { width: min(1160px, 100% - 112px); margin-inline: auto; }
.accent { color: var(--accent); }
.site-header { position: sticky; top: 0px; z-index: 10; background: transparent; border: 0; }
.nav { min-height: 84px; display: flex; align-items: center; gap: 32px; }
.wordmark { font-size: 21px; font-weight: 650; letter-spacing: -0.8px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 12px; }
.hero { padding-block: 94px 76px; }
.eyebrow, .section-index, .project-type, .essay-meta { font-size: 9px; line-height: 1.6; letter-spacing: 1.5px; font-weight: 400; }
.eyebrow { color: var(--accent); margin: 0px 0px 32px; }
h1 { font-size: clamp(46px, 5.5vw, 76px); font-weight: 500; letter-spacing: -3.7px; line-height: 1.1; max-width: 1070px; margin: 0px; }
.hero-bottom { margin-top: 40px; }
.hero-bottom > p { font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 505px; margin: 0px; }
.hero-bottom > p a { color: var(--ink); border-bottom: 1px solid var(--line); }
.hero-bottom > p a:hover { color: var(--accent); border-color: var(--accent); }
.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.primary:hover { background: var(--accent); color: var(--bg); }
.section { padding-top: 90px; }
.section-heading { margin-bottom: 32px; }
.section-index { margin: 0px 0px 18px; color: var(--accent); }
h2 { font-size: 35px; line-height: 1.2; letter-spacing: -1.4px; font-weight: 500; margin: 0px; }
h3 { font-size: 27px; line-height: 1.25; letter-spacing: -0.8px; font-weight: 500; margin: 0px; }
.work-list { display: grid; gap: 18px; }
.work-card { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 36px; transition: border-color 0.2s; }
.work-card:hover { border-color: var(--accent); }
.featured { padding-block: 45px; }
.project-type { display: block; color: var(--muted); margin-bottom: 24px; }
.featured .project-type { color: var(--accent); }
.context { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 18px 0px 0px; }
.project-summary { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 0px; max-width: 450px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0px 29px; }
.tags span { background: var(--wash); color: var(--accent); font-size: 9px; padding: 6px 9px; border-radius: 3px; }
.text-link { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; }
.text-link span { font-size: 16px; }
.writing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.essay { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; }
.bio p { font-size: 14px; line-height: 1.95; color: var(--muted); margin: 0px 0px 20px; }
.bio p:first-child { color: var(--ink); }
.dimensions h3 { font-size: 16px; letter-spacing: -0.3px; margin: 0px 0px 20px; }
.dimensions dl { margin: 0px; }
.dimensions dl > div { border-top: 1px solid var(--line); padding: 17px 0px; }
.dimensions dt { font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.dimensions dd { margin: 0px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.contact-section { margin-top: 90px; border-block: 1px solid var(--line); padding: 55px 0px; background: var(--surface); }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; align-items: center; }
.contact-grid h2 { font-size: 43px; letter-spacing: -1.8px; }
.contact-note { font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 320px; margin: 20px 0px 0px; }
.contact-links { display: flex; flex-direction: column; align-items: stretch; gap: 0px; }
.contact-links .handwritten-email { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; letter-spacing: -0.2px; border-bottom: 0; padding: 13px 0px; overflow-wrap: anywhere; }
.contact-links .handwritten-email:hover { border-color: var(--accent); }
.contact-links .github-link { font-size: 11px; border: 0px; margin-top: 10px; width: fit-content; gap: 15px; color: var(--muted); }
.contact-links .github-link:hover { color: var(--accent); }
.footer { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: var(--muted); padding-block: 26px; }
.skip-link { position: fixed; top: -70px; left: 12px; z-index: 30; padding: 12px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; }
@media (max-width: 1000px) {
.container { width: calc(100% - 64px); }
h1 { letter-spacing: -2.7px; }
.work-card { gap: 40px; padding: 30px; }
.about-grid, .contact-grid { gap: 50px; }
.essay-meta { font-size: 7px; letter-spacing: 0.7px; }
}
@media (max-width: 640px) {
.container { width: calc(100% - 40px); }
.nav { min-height: 100px; flex-wrap: wrap; place-content: center space-between; gap: 17px; padding-block: 16px; }
.wordmark { font-size: 20px; }
.nav-links { order: 3; width: 100%; margin: 0px; justify-content: space-between; font-size: 11px; }
.hero { padding-block: 55px 45px; }
.eyebrow { font-size: 8px; letter-spacing: 1.1px; margin-bottom: 27px; }
h1 { font-size: clamp(39px, 8.8vw, 56px); line-height: 1.13; letter-spacing: -1.9px; }
.hero-bottom { margin-top: 29px; }
.hero-bottom > p { font-size: 14px; line-height: 1.85; }
.section { padding-top: 60px; }
.section-index { font-size: 8px; letter-spacing: 1.2px; margin-bottom: 15px; }
.section-heading { margin-bottom: 26px; }
h2 { font-size: 29px; letter-spacing: -1px; }
.work-card { grid-template-columns: 1fr; gap: 27px; padding: 25px 22px; }
.project-type { font-size: 8px; margin-bottom: 17px; }
h3 { font-size: 25px; }
.project-summary { font-size: 13px; }
.tags { margin: 21px 0px 25px; }
.writing-grid { grid-template-columns: 1fr; gap: 16px; }
.essay { padding: 24px; }
.essay-meta { font-size: 8px; letter-spacing: 0.6px; }
.essay h3 { font-size: 25px; margin: 30px 0px; }
.about-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
.bio p { font-size: 13px; }
.dimensions h3 { margin-top: 0px; }
.contact-section { margin-top: 60px; padding: 40px 0px; }
.contact-grid h2 { font-size: 36px; }
.contact-links .handwritten-email { font-size: 14px; }
.footer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, ::before, ::after { transition: none !important; }
}
.tools { font-size: 11px; line-height: 1.9; color: var(--muted); margin: 19px 0px 0px; }
.section-subtitle { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 18px 0px 0px; max-width: 600px; }
.essay { display: flex; flex-direction: column; }
.idea-status { font-size: 11px; color: var(--muted); margin: 0px 0px 25px; }
.essay h3 { font-size: 24px; line-height: 1.4; letter-spacing: -0.6px; margin: 0px 0px 18px; }
.reflection { font-size: 13px; line-height: 1.85; color: var(--muted); margin: 0px 0px 26px; }
.draft-action { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; font-size: 11px; color: var(--muted); cursor: default; }
.truth-quiz h3 { font-size: 20px; letter-spacing: -0.5px; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; line-height: 1.6; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.quiz-option > span { font-size: 10px; color: var(--muted); }
.quiz-option:hover { border-color: var(--accent); }
.quiz-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--wash); }
.quiz-option[aria-pressed="true"] > span { color: var(--accent); }
.quiz-result { margin-top: 16px; padding: 20px; background: var(--wash); border: 1px solid var(--line); border-radius: 4px; animation: 0.35s ease 0s 1 normal both running quiz-reveal; }
.quiz-result[hidden] { display: none; }
.quiz-marathon-receipt { display: block; width: min(100%, 320px); height: auto; margin: 20px auto 0; border-radius: 3px; }
.about-grid:has(.quiz-result:not([hidden])) > .bio { align-self: start; }
.quiz-result p { font-size: 12px; line-height: 1.9; margin: 0px 0px 16px; }
.contact-grid h2 { font-size: 36px; line-height: 1.2; letter-spacing: -1.3px; }
@keyframes quiz-reveal {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 640px) {
.essay h3 { font-size: 22px; margin: 0px 0px 18px; }
.contact-grid h2 { font-size: 31px; }
.section-subtitle { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.quiz-result { animation: auto ease 0s 1 normal none running none; }
}
:root { --name-accent: #6b8b9b; --orb-white: #fff; --orb-slate: #9baeb8; --orb-indigo: #6b8b9b; --orb-line: #8a9ca6; --backdrop: #c8d8e0; }
.hero { padding-block: 60px 54px; overflow: clip; }
.hero-intro { display: grid; grid-template-columns: minmax(0px, 1fr) 300px; gap: 32px; align-items: center; }
.hero-heading { position: relative; z-index: 1; min-width: 0px; }
.hero .eyebrow { font-size: 10px; line-height: 1.8; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 21px; }
.eyebrow del { text-decoration-thickness: 1px; }
.accent-text { color: var(--name-accent); }
.hero .hero-bottom { margin-top: 18px; }
.hero .hero-bottom > p { max-width: 540px; font-size: 14px; line-height: 1.85; }
.hero-geometry { position: relative; width: 300px; height: 290px; isolation: isolate; }
.hero-geometry > span { display: block; position: absolute; will-change: transform; }
.geo-orb { border-radius: 50%; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.orb-large { width: 166px; height: 166px; left: 0px; top: 25px; animation-name: orb-rise; animation-duration: 22s; animation-delay: -8s; }
.orb-medium { width: 110px; height: 110px; right: 12px; top: 100px; animation-name: orb-orbit; animation-duration: 18s; animation-delay: -5s; }
.orb-outline { width: 138px; height: 138px; left: 83px; top: 131px; animation-name: orb-orbit; animation-duration: 20s; animation-delay: -13s; }
.orb-small { width: 56px; height: 56px; left: 40px; bottom: 8px; animation-name: orb-rise; animation-duration: 14s; animation-delay: -4s; }
.orb-ring { width: 30px; height: 30px; right: 14px; top: 27px; animation-name: orb-rise; animation-duration: 16s; animation-delay: -10s; }
@keyframes orb-rise {
  0% { transform: translate3d(0px, 3px, 0px); }
  100% { transform: translate3d(4px, -7px, 0px); }
}
@keyframes orb-orbit {
  0% { transform: translate3d(-4px, 2px, 0px); }
  50% { transform: translate3d(1px, -5px, 0px); }
  100% { transform: translate3d(6px, -2px, 0px); }
}
@media (max-width: 1000px) {
.hero-intro { grid-template-columns: minmax(0px, 1fr) 240px; gap: 22px; }
.hero-geometry { width: 240px; height: 270px; }
.orb-large { width: 145px; height: 145px; }
.orb-medium { width: 95px; height: 95px; right: 0px; }
.orb-outline { width: 120px; height: 120px; left: 75px; }
.orb-small { left: 25px; }
.hero-intro h1 { font-size: clamp(42px, 5.8vw, 60px); }
}
@media (max-width: 640px) {
.hero { padding-block: 38px 30px; }
.hero-intro { grid-template-columns: minmax(0px, 1fr); gap: 20px; }
.hero .eyebrow { font-size: 9px; margin-bottom: 17px; }
.hero-intro h1 { font-size: clamp(39px, 8.8vw, 56px); }
.hero .hero-bottom { margin-top: 15px; }
.hero-geometry { justify-self: end; width: 240px; height: 185px; }
.orb-large { width: 110px; height: 110px; top: 4px; left: 18px; }
.orb-medium { width: 80px; height: 80px; top: 65px; right: 12px; }
.orb-outline { width: 95px; height: 95px; top: 76px; left: 80px; }
.orb-small { width: 40px; height: 40px; bottom: 6px; left: 40px; }
.orb-ring { width: 24px; height: 24px; right: 28px; top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-geometry > span { animation: auto ease 0s 1 normal none running none; will-change: auto; }
}
.endorsements { padding-top: 48px; }
.endorsements > .section-index { font-size: 9px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.6; margin: 0px 0px 20px; }
.endorsement-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; }
.endorsement-card { display: flex; flex-direction: column; margin: 0px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.endorsement-card blockquote { margin: 0px 0px 28px; }
.endorsement-card blockquote p { font-size: 15px; line-height: 1.6; font-style: italic; margin: 0px; }
.endorsement-card figcaption { margin-top: auto; color: var(--muted); }
.recommender { display: block; font-size: 12px; font-weight: 500; line-height: 1.6; }
.recommender-role { display: block; font-size: 11px; line-height: 1.8; margin-top: 4px; }
@media (max-width: 640px) {
.endorsements { padding-top: 36px; }
.endorsement-grid { grid-template-columns: 1fr; gap: 16px; }
.endorsement-card { padding: 25px 22px; }
}
.site-header { border-bottom: 0px; }
.company-title { display: flex; align-items: center; gap: 12px; }
.company-logo { display: block; flex-shrink: 0; object-fit: contain; }
.company-logo[hidden] { display: none; }
.work-card .project-type { color: var(--accent); }
.geo-orb { pointer-events: auto; }
.orb-surface { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid transparent; transition: transform 350ms, background-color 350ms, border-color 350ms; }
.orb-large .orb-surface { background: rgb(107, 139, 155); }
.orb-medium .orb-surface { background: rgb(255, 255, 255); }
.orb-small .orb-surface { background: rgb(138, 155, 168); }
.orb-ice .orb-surface { background: rgb(200, 216, 224); }
.orb-outline .orb-surface, .orb-ring .orb-surface { border-color: var(--orb-line); }
.orb-large:hover .orb-surface, .orb-small:hover .orb-surface { background: rgb(255, 255, 255); }
.orb-medium:hover .orb-surface, .orb-ice:hover .orb-surface { background: rgb(107, 139, 155); }
.orb-outline:hover .orb-surface, .orb-ring:hover .orb-surface { background: rgb(107, 139, 155); border-color: rgb(107, 139, 155); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.orb-surface { transition: none; }
}
.sentry-glyph { width: 24px; height: 24px; fill: currentcolor; color: inherit; display: inline-block; vertical-align: middle; flex-shrink: 0; align-self: center; }
.company-title:has(.sentry-glyph) { gap: 10px; }
.quanthub-logo { width: 26px; height: 26px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.endorsement-card .endorsement-author { display: flex; align-items: center; gap: 12px; }
.author-info { min-width: 0px; }
.endorsement-author .sentry-glyph { color: var(--ink); }
body { cursor: auto; }
a[href], button, summary, [role="button"] { cursor: pointer; }
:root { --header-grid: rgba(107,139,155,.12); --circle-outline: #6b8b9b; }
.orb-outline .orb-surface, .orb-ring .orb-surface { border: 2.5px solid var(--circle-outline); }
.geo-orb, .orb-surface { opacity: 1; }
.hero-intro { grid-template-columns: minmax(0px, 1fr) minmax(0px, 440px); gap: 40px; }
.hero-geometry { width: 100%; height: 380px; align-self: stretch; pointer-events: none; }
.hero-geometry > .geo-orb { pointer-events: auto; }
.orb-large { width: 148px; height: 148px; left: 22px; top: 36px; animation: 6s ease-in-out 0s infinite alternate both running orb-vertical; }
.orb-medium { width: 90px; height: 90px; right: 38px; top: 60px; animation: 7s ease-in-out 1.2s infinite alternate both running orb-horizontal; }
.orb-outline { width: 114px; height: 114px; left: auto; right: 55px; top: 218px; animation: 8s ease-in-out 2.5s infinite alternate both running orb-sway; }
.orb-small { width: 46px; height: 46px; left: 45px; bottom: 29px; animation: 5s ease-in-out 3.8s infinite alternate both running orb-vertical; }
.orb-ice { width: 66px; height: 66px; left: 130px; top: 235px; animation: 6.5s ease-in-out 1.2s infinite alternate both running orb-horizontal; }
.orb-ring { width: 30px; height: 30px; right: 36px; top: 180px; animation: 7.5s ease-in-out 3.8s infinite alternate both running orb-sway; }
@keyframes orb-vertical {
  0% { transform: translate3d(0px, -24px, 0px); }
  100% { transform: translate3d(12px, 20px, 0px); }
}
@keyframes orb-horizontal {
  0% { transform: translate3d(-20px, 0px, 0px); }
  100% { transform: translate3d(25px, 28px, 0px); }
}
@keyframes orb-sway {
  0% { transform: translate3d(0px, -30px, 0px); }
  33% { transform: translate3d(26px, -15px, 0px); }
  66% { transform: translate3d(26px, 15px, 0px); }
  100% { transform: translate3d(0px, 30px, 0px); }
}
@media (max-width: 1000px) {
.hero-intro { grid-template-columns: minmax(0px, 1fr) 270px; gap: 24px; }
.hero-geometry { height: 380px; }
.orb-large { width: 118px; height: 118px; left: 10px; }
.orb-medium { width: 76px; height: 76px; right: 28px; top: 100px; }
.orb-outline { width: 100px; height: 100px; right: 35px; top: 235px; }
.orb-ice { width: 58px; height: 58px; left: 40px; top: 207px; }
.orb-small { left: 25px; }
.orb-ring { right: 35px; top: 195px; }
}
@media (max-width: 640px) {
.hero-intro { grid-template-columns: minmax(0px, 1fr); gap: 22px; }
.hero-geometry { width: 100%; height: 320px; }
.orb-large { width: 104px; height: 104px; left: 4%; top: 30px; }
.orb-medium { width: 70px; height: 70px; right: 35px; top: 50px; }
.orb-outline { width: 84px; height: 84px; right: 40px; top: 192px; }
.orb-ice { width: 50px; height: 50px; left: 40%; top: 155px; }
.orb-small { width: 36px; height: 36px; left: 10%; bottom: 30px; }
.orb-ring { width: 24px; height: 24px; right: 32px; top: 155px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-geometry > .geo-orb { animation: auto ease 0s 1 normal none running none; will-change: auto; }
}
.hero-title { display: grid; min-height: 1.1em; white-space: nowrap; }
.hero-title::before { content: "Hi, I'm Joline|"; visibility: hidden; grid-area: 1 / 1; pointer-events: none; }
.typewriter-line { grid-area: 1 / 1; }
.typing-cursor { color: rgb(107, 139, 155); font-weight: 300; opacity: 0; transition: opacity 0.35s; }
.is-typing .typing-cursor { animation: 0.8s ease 0s infinite normal none running blink; }
.typing-complete .typing-cursor { animation: auto ease 0s 1 normal none running none; opacity: 0; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.is-typing .typing-cursor { animation: auto ease 0s 1 normal none running none; opacity: 0; }
.typing-cursor { transition: none; }
}
:root { --paper-grain: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20200%20200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27noise%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23noise%29%27%20opacity%3D%27.05%27%2F%3E%3C%2Fsvg%3E"); --nav-height: 72px; }
body { background-image: var(--paper-grain); background-size: 200px 200px; }
.work-card, .essay, .endorsement-card, .contact-section { background-image: var(--paper-grain); background-size: 200px 200px; }
.nav { min-height: 72px; }
.hero { position: relative; min-height: calc(100svh - var(--nav-height)); display: flex; flex-direction: column; justify-content: center; padding-block: 65px 110px; }
.hero-intro { grid-template-columns: minmax(0px, 1.8fr) minmax(0px, 1fr); gap: 30px; align-items: center; }
.hero-intro .hero-title { font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; min-height: 1.08em; }
.hero .eyebrow { max-width: 610px; margin-bottom: 25px; }
.hero .hero-bottom { margin-top: 24px; }
.hero .hero-bottom > p { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.4; max-width: 590px; }
.hero-geometry { width: 100%; height: 400px; align-self: center; }
.orb-large { width: 140px; height: 140px; left: 16px; }
.orb-medium { right: 30px; }
.orb-outline { right: 38px; }
.orb-ice { left: 90px; }
.orb-ring { right: 27px; }
@media (max-width: 1000px) {
.hero-intro { grid-template-columns: minmax(0px, 1.65fr) minmax(0px, 1fr); gap: 22px; }
.hero-geometry { height: 380px; }
.orb-large { width: 110px; height: 110px; left: 10px; }
.orb-medium { width: 70px; height: 70px; right: 28px; top: 125px; }
.orb-outline { width: 90px; height: 90px; right: 35px; top: 245px; }
.orb-ice { left: 35px; top: 215px; }
}
@media (max-width: 640px) {
:root { --nav-height: 100px; }
.nav { min-height: 100px; }
.hero { padding-block: 50px 100px; }
.hero-intro { grid-template-columns: minmax(0px, 1fr); gap: 25px; }
.hero-title { white-space: normal; }
.hero-title::before { white-space: normal; }
.hero .hero-bottom { margin-top: 20px; }
.hero .hero-bottom > p { font-size: 1.2rem; max-width: 100%; }
.hero-geometry { height: 260px; width: 100%; }
.orb-large { width: 100px; height: 100px; left: 5%; top: 28px; }
.orb-medium { right: 35px; top: 40px; }
.orb-outline { width: 78px; height: 78px; right: 40px; top: 140px; }
.orb-ice { width: 45px; height: 45px; left: 42%; top: 120px; }
.orb-small { bottom: 25px; }
.orb-ring { right: 30px; top: 128px; }
}
.site-header { isolation: isolate; }
.nav { position: relative; z-index: 2; }
.hero { padding-block: 45px 65px; }
.hero-intro { grid-template-columns: minmax(0px, 1.65fr) minmax(0px, 1fr); gap: 30px; }
.hero-geometry { height: 620px; width: 100%; position: relative; pointer-events: none; --travel: 1; }
.hero-geometry > .geo-orb { position: absolute; border: 0px; border-radius: 50%; pointer-events: auto; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; will-change: transform; }
.geo-orb .orb-surface { position: relative; overflow: hidden; border-radius: 50%; border: 0px; opacity: 1; transform: none; background: var(--photo-color); transition: none; }
.geo-orb:hover .orb-surface { background: var(--photo-color); border: 0px; transform: none; }
.orb-surface img { width: 100%; height: 100%; position: absolute; inset: 0px; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 0.4s, transform 0.4s; }
.geo-orb:hover img { opacity: 1; transform: scale(1); }
.orb-surface img[hidden] { display: none; }
.photo-headshot { width: 300px; height: 300px; right: 30px; top: 45px; --photo-color: #6b8b9b; animation-name: photo-buoy; animation-duration: 9s; animation-delay: 0s; }
.photo-recital { width: 180px; height: 180px; left: 15px; bottom: 90px; --photo-color: #c5d5df; animation-name: photo-sway; animation-duration: 8s; animation-delay: -2.5s; }
.photo-travel { width: 150px; height: 150px; right: 15px; bottom: 20px; --photo-color: #e2e8eb; animation-name: photo-buoy; animation-duration: 10s; animation-delay: -4s; }
.photo-coffee { width: 100px; height: 100px; right: 5px; top: 310px; --photo-color: #25282c; animation-name: photo-sway; animation-duration: 7s; animation-delay: -3.8s; }
.photo-running { width: 90px; height: 90px; left: 15px; top: 20px; --photo-color: #ffffff; animation-name: photo-buoy; animation-duration: 6s; animation-delay: -1.2s; }
@keyframes photo-buoy {
  0% { transform: translate3d(calc(-40px * var(--travel)),calc(-50px * var(--travel)),0); }
  100% { transform: translate3d(calc(35px * var(--travel)),calc(70px * var(--travel)),0); }
}
@keyframes photo-sway {
  0% { transform: translate3d(calc(-30px * var(--travel)),calc(30px * var(--travel)),0); }
  50% { transform: translate3d(calc(10px * var(--travel)),calc(-50px * var(--travel)),0); }
  100% { transform: translate3d(calc(60px * var(--travel)),calc(40px * var(--travel)),0); }
}
@media (max-width: 1000px) {
.hero-intro { grid-template-columns: minmax(0px, 1fr); }
.hero-heading { max-width: 100%; }
.hero-geometry { height: 530px; max-width: 620px; justify-self: end; --travel: .65; }
.photo-headshot { right: 50px; top: 35px; }
.photo-recital { left: 30px; bottom: 35px; }
.photo-travel { right: 25px; bottom: 30px; }
.photo-coffee { right: 10px; top: 300px; }
.photo-running { left: 35px; top: 30px; }
}
@media (max-width: 640px) {
.hero { padding-block: 45px 65px; }
.hero-geometry { height: 570px; --travel: .4; }
.photo-headshot { width: 260px; height: 260px; right: 0px; top: 45px; }
.photo-recital { width: 150px; height: 150px; left: 0px; bottom: 75px; }
.photo-travel { width: 150px; height: 150px; right: 0px; bottom: 10px; }
.photo-coffee { width: 90px; height: 90px; right: 0px; top: 310px; }
.photo-running { width: 90px; height: 90px; left: 0px; top: 0px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-geometry > .geo-orb { animation: auto ease 0s 1 normal none running none; will-change: auto; }
.orb-surface img { transition: none; transform: none; }
}
:root { --bg: #f7f6f2; --paper-grain: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20300%20300%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27paperNoise%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.65%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.085%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23paperNoise%29%27%2F%3E%3C%2Fsvg%3E"); --paper-tooth: rgba(0,0,0,.03); }
body { background-color: var(--bg); background-image: radial-gradient(var(--paper-tooth) 1px,transparent 0),var(--paper-grain); background-size: 5px 5px, 300px 300px; background-repeat: repeat; }
.hero { overflow: visible; isolation: isolate; min-height: max(760px,calc(100svh - var(--nav-height))); padding-block: 70px 180px; }
.hero-intro { display: block; }
.hero-heading { position: relative; z-index: 2; max-width: 720px; }
.hero-geometry { position: absolute; inset: 0px; width: auto; height: auto; max-width: none; overflow: visible; pointer-events: none; z-index: 1; --travel: 1; }
.hero-geometry > .geo-orb { pointer-events: auto; }
.photo-headshot { inset: 75px 45px auto auto; animation-name: roam-headshot; }
.photo-recital { inset: auto auto 85px 42%; animation-name: roam-recital; }
.photo-travel { inset: auto 60px 55px auto; animation-name: roam-travel; }
.photo-coffee { inset: 47% 35px auto auto; animation-name: roam-coffee; }
.photo-running { inset: auto auto 55px 45px; animation-name: roam-running; }
@keyframes roam-headshot {
  0% { transform: translate3d(-25px, -20px, 0px); }
  100% { transform: translate3d(20px, 35px, 0px); }
}
@keyframes roam-recital {
  0% { transform: translate3d(-40px, 15px, 0px); }
  50% { transform: translate3d(0px, -25px, 0px); }
  100% { transform: translate3d(40px, 30px, 0px); }
}
@keyframes roam-travel {
  0% { transform: translate3d(-30px, -20px, 0px); }
  100% { transform: translate3d(30px, 25px, 0px); }
}
@keyframes roam-coffee {
  0% { transform: translate3d(-20px, -40px, 0px); }
  100% { transform: translate3d(15px, 40px, 0px); }
}
@keyframes roam-running {
  0% { transform: translate3d(-20px, -25px, 0px); }
  100% { transform: translate3d(30px, 25px, 0px); }
}
@media (max-width: 1000px) {
.hero { min-height: 1050px; justify-content: flex-start; padding-top: 70px; }
.hero-heading { max-width: 100%; }
.hero-geometry { inset: 0px; width: auto; height: auto; max-width: none; }
.photo-headshot { top: auto; bottom: 240px; right: 45px; }
.photo-recital { left: 30px; bottom: 55px; }
.photo-travel { right: 40px; bottom: 45px; }
.photo-coffee { top: auto; bottom: 240px; right: 48px; }
.photo-running { left: 35px; bottom: 370px; }
}
@media (max-width: 640px) {
.hero { min-height: 1100px; padding-block: 50px 70px; }
.hero-geometry { height: auto; width: auto; }
.photo-headshot { width: 260px; height: 260px; right: 10px; bottom: 300px; }
.photo-recital { width: 150px; height: 150px; left: 25px; bottom: 105px; }
.photo-travel { width: 150px; height: 150px; right: 20px; bottom: 35px; }
.photo-coffee { right: 20px; bottom: 220px; }
.photo-running { left: 20px; bottom: 570px; }
.photo-headshot { animation-name: mobile-headshot; }
.photo-recital { animation-name: mobile-recital; }
.photo-travel { animation-name: mobile-travel; }
.photo-coffee { animation-name: mobile-coffee; }
.photo-running { animation-name: mobile-running; }
}
@keyframes mobile-headshot {
  0% { transform: translate3d(-5px, -20px, 0px); }
  100% { transform: translate3d(8px, 25px, 0px); }
}
@keyframes mobile-recital {
  0% { transform: translate3d(-10px, -20px, 0px); }
  100% { transform: translate3d(20px, 20px, 0px); }
}
@keyframes mobile-travel {
  0% { transform: translate3d(-15px, -15px, 0px); }
  100% { transform: translate3d(10px, 15px, 0px); }
}
@keyframes mobile-coffee {
  0% { transform: translate3d(-10px, -30px, 0px); }
  100% { transform: translate3d(10px, 30px, 0px); }
}
@keyframes mobile-running {
  0% { transform: translate3d(-10px, -15px, 0px); }
  100% { transform: translate3d(20px, 20px, 0px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-geometry > .geo-orb { animation: auto ease 0s 1 normal none running none; }
}
.hero-geometry { place-self: stretch; }
.eyebrow .animated-strike { position: relative; display: inline-block; text-decoration: none; }
.animated-strike::after { content: ""; position: absolute; left: 0px; top: 50%; width: 0%; height: 2px; background: currentcolor; transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
.animated-strike.is-struck::after { width: 100%; }
.hero-geometry > .geo-orb { translate: var(--magnet-x,0px) var(--magnet-y,0px); will-change: transform, translate; }
@media (prefers-reduced-motion: reduce) {
.animated-strike::after { transition: none; }
.hero-geometry > .geo-orb { translate: none; will-change: auto; }
}
:root { --circle-core: #6b8b9b; --circle-mineral: #afc2cd; --circle-slate: #7a96a6; --circle-ink: #25282c; --circle-core-hover: #afc2cd; --circle-mineral-hover: #25282c; --circle-slate-hover: #6b8b9b; --circle-ink-hover: #afc2cd; --eyebrow-ink: #4a5560; }
.photo-headshot { --photo-color: var(--circle-core); --photo-hover: var(--circle-core-hover); }
.photo-recital, .photo-travel { --photo-color: var(--circle-mineral); --photo-hover: var(--circle-mineral-hover); }
.photo-running { --photo-color: var(--circle-slate); --photo-hover: var(--circle-slate-hover); }
.photo-coffee { --photo-color: var(--circle-ink); --photo-hover: var(--circle-ink-hover); }
.geo-orb .orb-surface { background: var(--photo-color); transition: background-color 300ms; }
.geo-orb:hover .orb-surface { background: var(--photo-hover); }
.site-header, .site-header .nav { overflow: visible; }
.hero .eyebrow { font-size: 0.85rem; letter-spacing: 0.06em; font-weight: 500; color: var(--eyebrow-ink); }
.animated-strike::after { height: 1px; top: 50%; transform: translateY(-50%); }
.scroll-cue, .scroll-track, .scroll-label { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.geo-orb .orb-surface { transition: none; }
}
#hero a[href], #hero button { cursor: pointer; }
.music-particle { position: absolute; z-index: 10; pointer-events: none; user-select: none; display: block; width: auto; max-width: none; object-fit: contain; opacity: 0.75; animation: note-float var(--note-duration,1000ms) ease-out both; will-change: transform, opacity; }
@keyframes note-float {
  0% { opacity: 0.75; transform: translate3d(0px, 0px, 0px) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--note-drift),var(--note-rise),0) rotate(var(--note-rotation)); }
}
@media (prefers-reduced-motion: reduce) {
.music-particle { display: none; animation: auto ease 0s 1 normal none running none; }
}
:root { --piano-white: #fbfbfa; --piano-separator: #e2e5e9; }
.piano-divider { position: relative; width: 100%; max-width: none; height: 68px; margin: 0px; overflow: hidden; pointer-events: none; }
.piano-divider * { pointer-events: none; }
.piano-pattern { display: block; width: 100%; height: 68px; }
.piano-key-white { fill: var(--piano-white); }
.piano-key-separators { fill: none; stroke: var(--piano-separator); stroke-width: 1; shape-rendering: crispedges; }
.piano-key-black { fill: rgb(30, 32, 36); }
.hero-geometry { bottom: 80px; }
@media (max-width: 640px) {
.hero { min-height: 1180px; }
.hero-geometry { bottom: 72px; }
}
#hero a[href], #hero button, #hero input, .site-header a[href], .site-header button, .site-header input { cursor: pointer; }
.hero, #hero, .hero-section { width: 100%; max-width: 100vw; margin-inline: 0px; padding-inline: max(56px, 50% - 580px); }
.hero-content, .hero-inner { cursor: inherit; }
.hero-particles { position: absolute; inset: 0px; width: 100%; max-width: 100vw; overflow: hidden; pointer-events: none; z-index: 10; }
.hero-particles * { pointer-events: none; }
@media (max-width: 1000px) {
.hero, #hero, .hero-section { padding-inline: 32px; }
}
@media (max-width: 640px) {
.hero, #hero, .hero-section { padding-inline: 20px; }
}
.site-footer { position: relative; background: transparent; border: 0; }
.site-footer .footer { position: relative; color: var(--ink); padding-block: 29px; }
:root { --contact-blue: #6b8b9b; }
.contact-section { position: relative; isolation: isolate; overflow: hidden; transition: background-color 1.2s ease-out; }
.contact-grid { position: relative; z-index: 1; }
.contact-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.contact-kicker .section-index { margin: 0px; }
.contact-section h2, .contact-section .section-index, .contact-section .contact-note, .contact-section .contact-links a { transition: color 0.7s 0.3s, border-color 0.7s 0.3s; }
.contact-section h2, .contact-section .section-index, .contact-section .contact-note, .contact-section .contact-links a { color: rgb(250, 249, 246); }
.contact-section .contact-links a { border-color: rgba(255, 255, 255, 0.333); }
.contact-section .contact-links a:hover { color: rgb(255, 255, 255); border-color: rgb(255, 255, 255); }
@media (prefers-reduced-motion: reduce) {
.contact-section, .contact-section h2, .contact-section .section-index, .contact-section .contact-note, .contact-section .contact-links a { transition: none; }
}
.photo-bubble { padding: 0px; background: none; appearance: none; overflow: visible; }
.photo-bubble .orb-surface { position: relative; overflow: hidden; border-radius: 50%; transition: transform 0.4s, background-color 0.3s; }
.photo-bubble img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 50%; opacity: 0; transform: scale(1.1); transition: opacity 0.4s, transform 0.4s; }
.photo-bubble:hover .orb-surface, .photo-bubble:focus-visible .orb-surface, .photo-bubble[aria-pressed="true"] .orb-surface { transform: translateY(-6px); }
.photo-bubble:hover img, .photo-bubble:focus-visible img, .photo-bubble[aria-pressed="true"] img { opacity: 1; transform: scale(1); }
.photo-headshot { width: 310px; height: 310px; }
.photo-recital { width: 225px; height: 225px; }
.photo-travel { width: 175px; height: 175px; }
.photo-coffee { width: 130px; height: 130px; }
.photo-running { width: 95px; height: 95px; }
.ambient-bubble .orb-surface { transition: background-color 0.3s; overflow: hidden; border-radius: 50%; background: var(--ambient-fill); }
.ambient-bubble:hover .orb-surface { background: var(--ambient-hover); transform: none; }
.ambient-one { width: 90px; height: 90px; left: 27%; bottom: 32px; --ambient-fill: #8a9ba8; --ambient-hover: #fff; animation: 9s ease-in-out -2s infinite alternate none running accent-drift-a; }
.ambient-two { width: 75px; height: 75px; left: 23%; top: 30px; --ambient-fill: #6b8b9b; --ambient-hover: #8a9ba8; animation: 11s ease-in-out -6s infinite alternate none running accent-drift-b; }
.ambient-three { width: 60px; height: 60px; right: 28%; top: 48px; --ambient-fill: #c5d5df; --ambient-hover: #6b8b9b; animation: 10s ease-in-out -4s infinite alternate none running accent-drift-a; }
.ambient-four { width: 50px; height: 50px; right: 29%; bottom: 270px; --ambient-fill: #fff; --ambient-hover: #6b8b9b; animation: 12s ease-in-out -8s infinite alternate none running accent-drift-b; }
.ambient-five { width: 45px; height: 45px; left: 20%; bottom: 205px; --ambient-fill: #25282c; --ambient-hover: #afc2cd; animation: 8s ease-in-out -3s infinite alternate none running accent-drift-a; }
@keyframes accent-drift-a {
  0% { transform: translate3d(-12px, -15px, 0px); }
  100% { transform: translate3d(16px, 15px, 0px); }
}
@keyframes accent-drift-b {
  0% { transform: translate3d(14px, -12px, 0px); }
  100% { transform: translate3d(-12px, 18px, 0px); }
}
@media (max-width: 1000px) {
.hero { min-height: 1150px; }
.photo-headshot { bottom: 240px; }
.photo-recital { left: 8%; bottom: 65px; }
.photo-travel { right: 40px; bottom: 45px; }
.ambient-one { left: 35%; bottom: 25px; }
.ambient-two { left: 8%; top: 430px; }
.ambient-three { right: 6%; top: 430px; }
.ambient-four { right: 40%; bottom: 230px; }
.ambient-five { left: 25%; bottom: 400px; }
}
@media (max-width: 640px) {
.hero { min-height: 1350px; }
.photo-headshot { width: 280px; height: 280px; right: 16px; bottom: 390px; }
.photo-recital { width: 200px; height: 200px; left: 18px; bottom: 180px; }
.photo-travel { width: 155px; height: 155px; right: 22px; bottom: 30px; }
.photo-coffee { width: 115px; height: 115px; right: 25px; bottom: 285px; }
.photo-running { width: 85px; height: 85px; left: 25px; bottom: 690px; }
.ambient-one { width: 67.5px; height: 67.5px; left: 24px; bottom: 55px; }
.ambient-two { width: 56px; height: 56px; left: 42%; top: 390px; }
.ambient-three { width: 45px; height: 45px; right: 30px; top: 470px; }
.ambient-four { width: 45px; height: 45px; right: 30px; bottom: 180px; }
.ambient-five { width: 45px; height: 45px; left: 28px; bottom: 470px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-geometry > .geo-orb { animation: auto ease 0s 1 normal none running none; translate: none; will-change: auto; }
.photo-bubble .orb-surface, .photo-bubble img, .ambient-bubble .orb-surface { transition: none; }
}
.contact-section { transition: background-color 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
}
:root { --hint-color: #7a8a99; }

@keyframes hint-breathe {
  0% { opacity: 0.45; }
  100% { opacity: 0.85; }
}


.local-time { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 400; font-stretch: normal; font-size: 0.75rem; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.015em; color: var(--muted); margin-bottom: 20px; }
.local-time time { white-space: nowrap; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--name-accent); box-shadow: color-mix(in srgb, var(--name-accent) 7%, transparent) 0px 0px 0px 3px; animation: 2.8s ease-in-out 0s infinite alternate none running live-pulse; flex-shrink: 0; }
@keyframes live-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
:root { --map-land: #dce4e8; --map-border: #f5f5f1; --map-water: #f2f4f3; --pin-visited: #7c8e99; }
.travel-section { margin-top: 65px; padding-top: 35px; border-top: 1px solid var(--line); }
.travel-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 23px; }
.travel-heading h3 { font-size: 10px; letter-spacing: 0.12em; font-weight: 400; margin-bottom: 13px; }
.travel-heading p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 580px; margin: 0px; }
.travel-map { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
.map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.map-views { display: flex; gap: 5px; }
.map-views button { border: 1px solid transparent; background: none; padding: 7px 12px; border-radius: 3px; font-size: 10px; color: var(--muted); }
.map-views button[aria-pressed="true"] { border-color: var(--line); background: var(--wash); color: var(--ink); }
.map-views button:hover { color: var(--accent); }
.place-picker { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); }
.place-picker select { max-width: 250px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 7px; cursor: pointer; }
.place-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-canvas { position: relative; width: 100%; min-width: 0; aspect-ratio: 1000 / 420; background: var(--map-water); isolation: isolate; }
.world-geography { position: absolute; inset: 0px; width: 100%; height: 100%; fill: var(--map-land); stroke: var(--map-border); stroke-width: 0.6; stroke-linejoin: round; }
.map-pins { position: absolute; inset: 0px; pointer-events: none; }
.map-pin { position: absolute; transform: translate(-50%, -50%); padding: 0px; width: 18px; height: 18px; border: 0px; background: none; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; z-index: 1; cursor: pointer; }
.map-pin > span { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--pin-visited); box-shadow: rgba(107, 139, 155, 0.082) 0px 0px 0px 3px; transition: transform 0.2s, box-shadow 0.2s; }
.pin-lived > span { background: var(--accent); width: 7px; height: 7px; box-shadow: rgba(107, 139, 155, 0.145) 0px 0px 0px 4px; }
.map-pin:hover, .map-pin:focus-visible, .map-pin[aria-pressed="true"] { z-index: 3; }
.map-pin:hover > span, .map-pin:focus-visible > span, .map-pin[aria-pressed="true"] > span { transform: scale(1.3); box-shadow: rgba(107, 139, 155, 0.208) 0px 0px 0px 5px; }
.map-pin[hidden] { display: none; }
.map-tooltip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--line); padding: 13px 15px; width: 220px; max-width: calc(100% - 16px); border-radius: 4px; color: var(--ink); box-shadow: rgba(0, 0, 0, 0.035) 0px 4px 15px; }
.map-tooltip[hidden] { display: none; }
.map-tooltip strong { display: block; font-size: 12px; font-weight: 500; }
.tooltip-country, .tooltip-context { display: block; font-size: 10px; line-height: 1.7; color: var(--muted); margin-top: 4px; }
.map-caption { display: flex; justify-content: space-between; gap: 15px; padding: 13px 20px; font-size: 9px; color: var(--muted); border-top: 1px solid var(--line); }
.travel-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); margin-top: 22px; }
.travel-metrics > div { display: flex; justify-content: center; align-items: baseline; gap: 13px; padding: 25px 12px; }
.travel-metrics > div + div { border-left: 1px solid var(--line); }
.travel-metrics strong { font-size: 30px; letter-spacing: -1px; font-weight: 500; }
.travel-metrics span { font-size: 11px; color: var(--muted); }
@media (max-width: 1000px) {
.travel-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width: 640px) {
.local-time { font-size: 0.65rem; gap: 5px; }
.local-time time { white-space: normal; }
.travel-section { margin-top: 40px; padding-top: 28px; }
.map-toolbar { padding: 13px; align-items: flex-start; flex-direction: column; gap: 12px; }
.place-picker { width: 100%; justify-content: space-between; }
.place-picker select { max-width: 70%; }
.map-canvas { min-height: 180px; }
.map-caption { padding: 12px; font-size: 8px; flex-wrap: wrap; gap: 7px; }
.travel-metrics > div { flex-direction: column; align-items: center; gap: 7px; padding: 20px 5px; }
.travel-metrics strong { font-size: 26px; }
.travel-metrics span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
.map-pin > span { transition: none; }
.live-dot { animation: auto ease 0s 1 normal none running none; }
}
:root { --map-land: #d0dce2; --map-border: #f8faf9; --map-water: #edf1f3; --pin-lived: var(--name-accent); --pin-visited: #e2e8f0; --pin-edge: #667e8c; }
.travel-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: start; }
.travel-map { min-width: 0px; }
.travel-sidebar { min-width: 0px; display: grid; gap: 20px; }
.travel-heading { display: block; }
.map-canvas { aspect-ratio: 1000 / 420; min-height: 200px; }
.map-toolbar { padding: 12px 16px; }
.map-caption { font-size: 8px; padding: 12px 15px; flex-wrap: wrap; gap: 7px; }
.world-geography { stroke-width: 0.7; }
.travel-sidebar .travel-metrics { margin: 0px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.travel-sidebar .travel-metrics > div { padding: 20px 7px; gap: 7px; flex-direction: column; align-items: center; }
.travel-sidebar .travel-metrics strong { font-size: 25px; }
.travel-sidebar .travel-metrics span { font-size: 9px; }
.lived-timeline, .city-explorer { padding: 23px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.lived-timeline h4, .city-explorer h4 { margin: 0px 0px 19px; font-size: 14px; font-weight: 500; letter-spacing: -0.3px; }
.lived-timeline dl { margin: 0px; }
.lived-timeline dl > div { padding: 13px 0px; border-top: 1px solid var(--line); }
.lived-timeline dt { font-size: 11px; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; line-height: 1.7; }
.lived-timeline dt span { font-size: 10px; color: var(--accent); font-weight: 400; white-space: nowrap; }
.lived-timeline dd { font-size: 10px; color: var(--muted); line-height: 1.8; margin: 5px 0px 0px; }
.city-explorer .place-picker { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.city-explorer .place-picker select { width: 100%; max-width: none; padding: 10px; font-size: 11px; }
.city-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.city-empty { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 0px; }
.city-detail-title { font-size: 16px; letter-spacing: -0.4px; line-height: 1.4; font-weight: 500; margin: 0px 0px 12px; }
.city-category { display: inline-block; background: var(--wash); color: var(--accent); font-size: 9px; border: 1px solid var(--line); padding: 5px 8px; border-radius: 3px; }
.city-year, .city-context { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 12px 0px 0px; }
.city-detail-content[hidden], .city-empty[hidden] { display: none; }
.map-pin > span { background: var(--pin-visited); border: 1px solid var(--pin-edge); width: 6px; height: 6px; box-shadow: none; }
.pin-lived > span { position: relative; background: var(--pin-lived); border: 1px solid var(--pin-lived); width: 8px; height: 8px; box-shadow: rgba(107, 139, 155, 0.125) 0px 0px 0px 3px; }
.pin-lived > span::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--pin-lived); border-radius: 50%; animation: 3s ease-out 0s infinite normal none running map-pin-pulse; pointer-events: none; }
.map-pin:hover > span, .map-pin:focus-visible > span, .map-pin[aria-pressed="true"] > span { box-shadow: rgba(107, 139, 155, 0.145) 0px 0px 0px 4px; }
@keyframes map-pin-pulse {
  0% { transform: scale(0.7); opacity: 0.65; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 900px) {
.travel-layout { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
.map-canvas { min-height: 0px; }
.travel-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.travel-sidebar .travel-metrics { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.travel-sidebar { grid-template-columns: minmax(0px, 1fr); }
.travel-sidebar .travel-metrics { grid-column: auto; }
.map-canvas { min-height: 180px; }
.lived-timeline, .city-explorer { padding: 20px; }
.map-toolbar { flex-direction: row; }
.travel-layout { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.pin-lived > span::after { animation: auto ease 0s 1 normal none running none; opacity: 0.4; }
}
.travel-metrics .travel-counter { display: inline-grid; place-items: center; min-inline-size: 2ch; line-height: 1.2; overflow: hidden; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.travel-metrics .travel-counter[data-target="2"] { min-inline-size: 1ch; }
.travel-metrics .travel-counter .counter-value { display: block; font: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; }
.piano-marquee-wrapper { width: 100%; max-width: none; position: relative; overflow: hidden; display: flex; white-space: nowrap; pointer-events: none; }
.piano-track { display: flex; flex-shrink: 0; width: 2380px; height: 68px; will-change: transform; animation: 24s linear 0s infinite normal none running scrollKeys; }
.piano-track .piano-pattern { width: 100%; height: 68px; flex-shrink: 0; }
@supports (width:round(up,100vw,119px)) {
.piano-track { width: round(up, 100vw, 119px); }
}
@supports not (width:round(up,100vw,119px)) {
@media (min-width: 2381px) {
.piano-track { width: 4760px; }
}
@media (min-width: 4761px) {
.piano-track { width: 9520px; }
}
}
@keyframes scrollKeys {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.piano-track { animation: auto ease 0s 1 normal none running none; will-change: auto; }
}
@media (max-width: 768px) {
.hero, #hero, .hero-section { position: relative; min-height: 85svh; padding: 80px 20px 40px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hero-intro { display: block; }
.hero-heading { position: relative; z-index: 5; max-width: 100%; padding-bottom: 105px; }
.hero-intro .hero-title { font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1.15; letter-spacing: -0.035em; white-space: normal; min-height: 1.15em; }
.hero-title::before { white-space: normal; }
.hero .hero-bottom { margin-top: 18px; }
.hero .hero-bottom > p { font-size: 1rem; line-height: 1.45; max-width: 430px; }
.hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.8; margin-bottom: 18px; max-width: 470px; }
.local-time { font-size: 0.62rem; margin-bottom: 16px; line-height: 1.7; }
.hero-geometry { position: absolute; inset: 0px; width: auto; height: auto; max-width: none; pointer-events: none; }
.hero-geometry > .geo-orb { animation-name: mobile-integrated-float; animation-duration: var(--mobile-period,9s); }
.photo-headshot { width: 150px; height: 150px; inset: auto 22px 45px auto; --mobile-period: 10s; }
.photo-recital { width: 105px; height: 105px; inset: 20px 22px auto auto; --mobile-period: 9s; }
.photo-travel { width: 95px; height: 95px; inset: auto auto 82px 14px; --mobile-period: 8s; }
.photo-coffee { width: 70px; height: 70px; inset: 28px auto auto 20px; --mobile-period: 9.5s; }
.photo-running { width: 65px; height: 65px; inset: 165px 15px auto auto; --mobile-period: 8.5s; }
.ambient-one { width: 40px; height: 40px; inset: auto auto 24px 24px; --mobile-period: 10s; }
.ambient-two { width: 32px; height: 32px; inset: 35px auto auto 41%; --mobile-period: 11s; }
.ambient-three { width: 28px; height: 28px; inset: 130px 20px auto auto; --mobile-period: 9s; }
.ambient-four { width: 35px; height: 35px; inset: auto 40% 34px auto; --mobile-period: 12s; }
.ambient-five { width: 30px; height: 30px; inset: 155px auto auto 8px; --mobile-period: 8s; }

}
@keyframes mobile-integrated-float {
  0% { transform: translate3d(-4px, -6px, 0px); }
  100% { transform: translate3d(5px, 7px, 0px); }
}
@media (max-width: 768px) and (hover: none) {
.photo-bubble:hover:not([aria-pressed="true"]) img { opacity: 0; transform: scale(1.1); }
.photo-bubble:hover:not([aria-pressed="true"]) .orb-surface { transform: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.hero-geometry > .geo-orb { animation: auto ease 0s 1 normal none running none; will-change: auto; }
}
@media (max-width: 768px) {
.photo-bubble { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
:root { --rest-color: #7a92a2; --rest-opacity: .55; }
.hero-rests { position: absolute; inset: 0px; z-index: 1; pointer-events: none; user-select: none; }
.music-rest { position: absolute; display: block; height: auto; max-width: none; fill: currentcolor; color: var(--rest-color); opacity: var(--rest-opacity); pointer-events: none; user-select: none; animation: 14s ease-in-out 0s infinite alternate none running rest-drift; }
.rest-quarter { right: 12px; top: 26%; animation-duration: 16s; animation-delay: -4s; }
.rest-eighth { right: 26%; bottom: 33%; animation-duration: 13s; animation-delay: -7s; }
.rest-half { left: 13%; bottom: 35px; margin-bottom: 8px; animation-duration: 15s; animation-delay: -9s; }
.rest-sixteenth { right: 38%; top: 25px; animation-duration: 12s; animation-delay: -2s; }
@keyframes rest-drift {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(6px); }
}
@media (max-width: 1000px) {
.rest-quarter { right: 22px; top: 460px; }
.rest-eighth { right: auto; left: 35%; bottom: 220px; }
.rest-half { left: 40px; bottom: 30px; }
.rest-sixteenth { right: auto; left: 55%; top: 435px; }
}
@media (max-width: 768px) {
.rest-quarter { right: 140px; top: 30px; }
.rest-eighth { left: 48%; bottom: 70px; }
.rest-half { left: 30%; bottom: 20px; }
.rest-sixteenth { left: 35%; top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.music-rest { animation: auto ease 0s 1 normal none running none; }
}
.dual-time { align-items: flex-start; font-size: 0.75rem; gap: 9px; }
.dual-time .live-dot { margin-top: 7px; }
.clock-locations { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0px 8px; min-width: 0px; }
.clock-city { display: inline; line-height: 1.9; }
.clock-city time { white-space: nowrap; }
.clock-divider { color: var(--muted); }
.experience-rows { display: grid; gap: 100px; }
.experience-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.experience-copy { padding: 32px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); min-width: 0px; }
.experience-role { display: block; font-size: 0.85rem; font-weight: 650; letter-spacing: 0.07em; line-height: 1.7; color: var(--accent); margin-bottom: 25px; }
.experience-copy .company-title { font-size: 2.2rem; font-weight: 550; letter-spacing: -1.2px; gap: 13px; }
.experience-copy .company-title svg { width: 32px; height: 32px; flex-shrink: 0; }
.experience-copy .context { font-size: 11px; margin-top: 18px; }
.company-link { display: inline-block; font-size: 11px; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--line); color: var(--muted); }
.company-link:hover { color: var(--accent); border-color: var(--accent); }
.experience-narrative { border-top: 1px solid var(--line); margin-top: 27px; padding-top: 8px; }
.experience-narrative p { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 17px 0px 0px; }
.experience-copy .tools { margin-top: 23px; }
.experience-copy .tags { margin-bottom: 0px; }
.experience-story { padding-top: 34px; min-width: 0px; }
.work-visual { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--surface); box-shadow: rgba(17, 24, 39, 0.016) 0px 8px 28px; }
.visual-toolbar { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); padding: 11px 15px; font-size: 9px; color: var(--muted); }
.interface-dots { font-size: 6px; letter-spacing: 2px; color: var(--accent); }
.visual-label { margin-left: auto; font-size: 7px; letter-spacing: 1px; color: var(--muted); }
.notebook-layout { display: grid; grid-template-columns: 105px minmax(0px, 1fr); }
.notebook-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 23px 11px; border-right: 1px solid var(--line); font: 8px / 1.6 var(--font-sans); color: var(--muted); background: var(--map-water); }
.notebook-active { color: var(--accent); }
.notebook-content { padding: 20px; min-width: 0px; }
.report-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--ink); }
.scope-metrics { display: flex; gap: 30px; margin: 23px 0px 19px; }
.scope-metrics > div { display: grid; gap: 6px; }
.scope-metrics strong { font-size: 24px; font-weight: 500; letter-spacing: -0.7px; }
.scope-metrics span { font-size: 8px; color: var(--muted); }
.analytics-chart { height: 82px; }
.analytics-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--line); fill: none; stroke-width: 1; }
.chart-area { fill: var(--wash); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.benchmark-bars { display: grid; gap: 6px; margin: 18px 0px; }
.benchmark-bars span { width: var(--bar); height: 5px; border-radius: 1px; background: var(--accent); opacity: 0.55; }
.benchmark-bars span:nth-child(2) { opacity: 0.3; }
.benchmark-bars span:nth-child(3) { opacity: 0.75; }
.visual-footnote { font-size: 7px; line-height: 1.8; color: var(--muted); }
.experience-story .work-endorsement { margin: 28px 0px 0px 32px; padding: 26px; }
.work-endorsement blockquote { margin-bottom: 23px; }
.work-endorsement .recommender-role { font-size: 10px; }
.quanthub-row .experience-copy { grid-area: 1 / 2; margin-top: 40px; }
.quanthub-row .experience-story { grid-area: 1 / 1; padding-top: 0px; }
.quanthub-row .work-endorsement { margin: 28px 32px 0px 0px; }
.pipeline-content { padding: 24px; }
.crm-total { display: flex; align-items: baseline; gap: 16px; margin: 24px 0px; }
.crm-total strong { font-size: 30px; font-weight: 500; letter-spacing: -1px; }
.crm-total > span { font-size: 9px; color: var(--muted); }
.pipeline-stages { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.pipeline-stages > div { padding: 13px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--map-water); }
.pipeline-stages strong, .pipeline-stages span { display: block; }
.pipeline-stages span { font-size: 7px; letter-spacing: 1px; color: var(--accent); margin-bottom: 10px; }
.pipeline-stages strong { font-size: 9px; font-weight: 500; margin-bottom: 16px; }
.pipeline-stages i { display: block; height: 7px; border: 1px solid var(--line); background: var(--surface); margin-top: 6px; border-radius: 2px; }
.sequence-row { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 8px; line-height: 1.8; color: var(--muted); }
.sequence-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.recital-project { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); }
.recital-project-copy { padding: 35px; }
.recital-project .project-type { font-size: 9px; line-height: 1.8; letter-spacing: 0.09em; color: var(--accent); margin-bottom: 23px; }
.recital-project h3 { font-size: 30px; }
.recital-project-copy > p:not(.context) { font-size: 13px; line-height: 1.9; color: var(--muted); }
.recital-project .text-link { margin-top: 24px; }
.recital-project-image { min-width: 0px; min-height: 300px; overflow: hidden; background: var(--wash); }
.recital-project-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
@media (max-width: 1100px) {
.experience-row { gap: 28px; }
.experience-copy { padding: 27px; }
.notebook-layout { grid-template-columns: 85px minmax(0px, 1fr); }
.notebook-content { padding: 16px; }
.experience-story .work-endorsement { margin-left: 16px; }
.quanthub-row .work-endorsement { margin-left: 0px; margin-right: 16px; }
.experience-role { font-size: 0.8rem; }
.visual-toolbar { gap: 8px; padding-inline: 11px; }
}
@media (max-width: 800px) {
.experience-row { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
.experience-rows { gap: 65px; }
.experience-story { padding-top: 0px; }
.quanthub-row .experience-copy, .quanthub-row .experience-story { grid-area: auto; margin-top: 0px; }
.experience-story .work-endorsement { margin: 20px 0px 0px 22px; }
.quanthub-row .work-endorsement { margin: 20px 22px 0px 0px; }
.notebook-layout { grid-template-columns: 110px minmax(0px, 1fr); }
.recital-project { grid-template-columns: minmax(0px, 1fr); }
.recital-project-image { height: 300px; min-height: 0px; }
.recital-project-image img { object-position: center 40%; }
}
@media (max-width: 768px) {
.dual-time { font-size: 0.62rem; margin-bottom: 16px; }
.clock-locations { display: block; }
.clock-city { display: block; line-height: 1.9; }
.clock-city time { white-space: normal; }
.clock-divider { display: none; }
.dual-time .live-dot { margin-top: 7px; }
.hero-heading { padding-bottom: 105px; }
}
@media (max-width: 480px) {
.experience-copy { padding: 24px; }
.experience-role { font-size: 0.8rem; }
.experience-copy .company-title { font-size: 2.2rem; }
.experience-story .work-endorsement { padding: 22px; margin-left: 12px; }
.quanthub-row .work-endorsement { margin-left: 0px; margin-right: 12px; }
.work-endorsement blockquote p { font-size: 14px; }
.notebook-layout { grid-template-columns: 78px minmax(0px, 1fr); }
.notebook-sidebar { font-size: 7px; padding-inline: 8px; }
.scope-metrics { gap: 22px; }
.notebook-content { padding: 16px 12px; }
.pipeline-content { padding: 20px 15px; }
.pipeline-stages { gap: 7px; }
.pipeline-stages > div { padding: 12px 8px; }
.visual-label { font-size: 6px; }
.recital-project-copy { padding: 25px; }
.recital-project h3 { font-size: 27px; }
.nav-links { gap: 12px; }
}
.experience-section { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.experience-row { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 0px; }
.experience-copy { position: relative; z-index: 2; }
.experience-story { position: relative; z-index: 1; padding-top: 42px; }
.sentry-row .work-visual { width: calc(100% + 48px); margin-left: -48px; opacity: 0.82; }
.sentry-row .experience-story .work-endorsement { margin: 30px 0px 0px 32px; }
.quanthub-row .work-visual { width: calc(100% + 48px); margin-right: -48px; opacity: 0.82; }
.quanthub-row .experience-story .work-endorsement { margin: 30px 32px 0px 0px; }
.quanthub-row .experience-copy { margin-top: 42px; }
.stay-progress { display: inline-block; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(var(--accent),var(--accent)) left bottom/var(--stay-progress,36.8%) 1px no-repeat,var(--wash); font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
.experience-row { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
.experience-story { padding-top: 0px; }
.sentry-row .work-visual, .quanthub-row .work-visual { width: 100%; margin: 0px; }
.quanthub-row .experience-copy { margin-top: 0px; }
.sentry-row .experience-story .work-endorsement { margin: 20px 0px 0px 18px; }
.quanthub-row .experience-story .work-endorsement { margin: 20px 18px 0px 0px; }
}
@media (max-width: 480px) {
.experience-section { padding-inline: 20px; }
.stay-progress { font-size: 9px; }
}
#work.work-section { width: 100%; max-width: 1440px; margin: 0px auto; padding-left: clamp(24px, 5vw, 64px); padding-right: clamp(24px, 5vw, 64px); }
#work .experience-row { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr); gap: 0px; align-items: start; width: 100%; --work-overlap: clamp(40px,5vw,64px); }
#work .sentry-row > .experience-copy { justify-self: start; width: 100%; max-width: 580px; position: relative; z-index: 2; }
#work .sentry-row > .experience-story { justify-self: end; width: 100%; max-width: 680px; }
#work .sentry-row .work-visual { width: calc(100% + var(--work-overlap)); margin-left: calc(-1 * var(--work-overlap)); }
#work .quanthub-row { grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr); }
#work .quanthub-row > .experience-main { grid-area: 1 / 2; justify-self: end; width: 100%; max-width: 580px; min-width: 0px; position: relative; z-index: 2; margin-top: 42px; }
#work .quanthub-row .experience-copy { width: 100%; max-width: 580px; margin-top: 0px; }
#work .quanthub-row > .experience-story { grid-area: 1 / 1; justify-self: start; width: 100%; max-width: 680px; }
#work .quanthub-row .work-visual { width: calc(100% + var(--work-overlap)); margin-right: calc(-1 * var(--work-overlap)); }
#work .quanthub-row .experience-main > .work-endorsement { margin: 30px 0px 0px 24px; }
@media (max-width: 800px) {
#work .experience-row, #work .quanthub-row { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
#work .sentry-row > .experience-copy, #work .sentry-row > .experience-story, #work .quanthub-row > .experience-main, #work .quanthub-row > .experience-story, #work .quanthub-row .experience-copy { max-width: none; justify-self: stretch; grid-area: auto; }
#work .quanthub-row > .experience-main { margin-top: 0px; }
#work .sentry-row .work-visual, #work .quanthub-row .work-visual { width: 100%; margin: 0px; }
#work .quanthub-row .experience-main > .work-endorsement { margin: 20px 0px 0px 18px; }
}
#work.work-section { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); }
#work .sentry-row > .experience-copy, #work .sentry-row > .experience-story, #work .quanthub-row > .experience-main, #work .quanthub-row > .experience-story, #work .quanthub-row .experience-copy { max-width: none; }
#work .sentry-row .work-visual { width: calc(100% + 90px); margin-left: -90px; opacity: 0.72; position: relative; z-index: 1; }
#work .quanthub-row .work-visual { width: calc(100% + 90px); margin-right: -90px; opacity: 0.72; position: relative; z-index: 1; }
.projects-reflections .section-heading { position: relative; }
.journal-anchor { position: absolute; top: 0px; scroll-margin-top: 112px; }
.reflections-layout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.2fr); gap: 48px; align-items: start; position: relative; }
.flagship-project { position: sticky; top: 100px; height: fit-content; min-width: 0px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
.flagship-copy { padding: 27px 27px 23px; }
.flagship-copy .project-type { font-size: 9px; color: var(--accent); letter-spacing: 0.09em; line-height: 1.8; display: block; margin-bottom: 20px; }
.flagship-copy h3 { font-size: 29px; letter-spacing: -0.8px; }
.flagship-copy .context { font-size: 11px; line-height: 1.8; margin-top: 15px; }
.flagship-description { font-size: 13px; line-height: 1.85; color: var(--muted); margin: 18px 0px 0px; }
.flagship-media { height: 210px; width: 100%; overflow: hidden; background: var(--wash); }
.flagship-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.flagship-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0px; padding: 21px 27px; font-size: 11px; border-top: 1px solid var(--line); transition: color 0.2s, background-color 0.2s; }
.flagship-link:hover { background: var(--wash); color: var(--accent); }
.reflection-articles { display: grid; gap: 24px; min-width: 0px; }
.reflection-card { display: flex; flex-direction: column; min-height: 290px; padding: 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); transition: border-color 0.3s, background-color 0.3s; }
.reflection-card:hover { border-color: var(--accent); }
.reflection-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 10px; line-height: 1.7; margin-bottom: 27px; }
.article-status { padding: 3px 7px; background: var(--wash); color: var(--accent); border: 1px solid var(--line); border-radius: 3px; font-size: 8px; white-space: nowrap; }
.reflection-card h3 { font-size: 25px; letter-spacing: -0.6px; line-height: 1.35; margin-bottom: 16px; }
.reflection-card > p { font-size: 13px; line-height: 1.85; color: var(--muted); margin: 0px 0px 25px; }
.reflection-card .draft-action { margin-top: auto; }
@media (max-width: 1000px) {
.reflections-layout { gap: 28px; }
.flagship-copy { padding: 24px; }
.flagship-copy h3 { font-size: 26px; }
.reflection-card { padding: 25px; }
.reflection-meta { flex-wrap: wrap; gap: 9px; }
}
@media (max-width: 800px) {
#work .sentry-row .work-visual, #work .quanthub-row .work-visual { width: 100%; margin: 0px; }
.reflections-layout { grid-template-columns: minmax(0px, 1fr); gap: 26px; }
.flagship-project { position: static; top: auto; }
.flagship-media { height: 280px; }
.reflection-card { min-height: 250px; }
}
@media (max-height: 760px) {
.flagship-project { position: static; }
}
@media (max-width: 480px) {
.flagship-media { height: 220px; }
.reflection-card { padding: 24px; }
.reflection-card h3 { font-size: 23px; }
.reflection-meta { font-size: 9px; }
.nav-links { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.reflection-card, .flagship-link { transition: none; }
}
:root { --section-rhythm: clamp(48px,6vw,72px); --section-gutter: clamp(24px,4vw,56px); }
#work.work-section, #projects.projects-reflections, #about.section, #contact.contact-section { width: 100%; max-width: 1520px; margin: 0px auto; padding: var(--section-rhythm) var(--section-gutter); }
#contact .contact-grid { width: 100%; max-width: none; margin: 0px; padding: 0px; }
.experience-rows { gap: 64px; }
.section-heading { margin-bottom: 28px; }
.experience-section .section-index, .projects-reflections > .section-heading .section-index, #about > .section-heading .section-index, .contact-kicker .section-index { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
#work .quanthub-row > .experience-main { margin-top: 42px; }
#work .quanthub-row .experience-story > .work-endorsement { margin: 28px 32px 0px 0px; }
#work .quanthub-row .experience-main > .work-endorsement { margin: 0px; }
#projects .reflections-layout { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr); gap: 32px; }
#projects .reflection-articles { gap: 28px; }
#projects .reflection-card { padding: 32px; }
#projects .flagship-copy { padding: 32px 32px 24px; }
#projects .flagship-link { padding-inline: 32px; }
@media (max-width: 800px) {
#work .quanthub-row > .experience-main { margin-top: 0px; }
#work .quanthub-row .experience-story > .work-endorsement { margin: 20px 18px 0px 0px; }
#projects .reflections-layout { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
.experience-rows { gap: 48px; }
}
@media (max-width: 480px) {
#projects .reflection-card { padding: 24px; }
#projects .flagship-copy { padding: 24px; }
#projects .flagship-link { padding-inline: 24px; }
#projects .reflection-articles { gap: 24px; }
.nav { gap: 16px; }
}
:root { --section-rhythm: clamp(32px,4vw,48px); }
.section-title, #contact .section-title { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0px 0px 24px; display: flex; align-items: baseline; gap: 16px; color: var(--ink); white-space: nowrap; }
.section-num { color: rgb(107, 139, 155); font-weight: 800; flex-shrink: 0; }
.section-heading:has(.section-title) { margin-bottom: 0px; }
#work.work-section { width: 100%; max-width: 1560px; margin: 0px auto; padding: var(--section-rhythm) 32px; }
.experience-section .section-heading { padding: 0px; }
#work .sentry-graphic-overlap { position: relative; z-index: 1; width: calc(100% + 60px); margin-left: -60px; opacity: 0.88; }
.work-graphic-img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-color,var(--line,#e2e8f0)); box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px -10px; }
#contact.contact-section { width: 100%; max-width: none; position: relative; left: 0px; right: auto; margin: 0px; padding: clamp(60px, 8vw, 96px) clamp(24px, 5vw, 64px); box-sizing: border-box; }
.contact-kicker { align-items: center; gap: 22px; margin-bottom: 23px; }
.contact-kicker .section-title { margin-bottom: 0px; }
.contact-headline { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.035em; font-weight: 500; margin: 0px; max-width: 620px; color: var(--ink); transition: color 0.7s 0.3s; }
.contact-section .contact-headline { color: rgb(250, 249, 246); }
.contact-section .section-title { color: rgb(250, 249, 246); }
.contact-section .section-num { color: rgb(226, 232, 235); }
.contact-section .contact-note { max-width: 560px; }
.contact-section .contact-grid { gap: clamp(32px, 6vw, 96px); }
@media (max-width: 800px) {
#work .sentry-graphic-overlap { width: 100%; margin: 0px; }
}
@media (max-width: 480px) {
.section-title, #contact .section-title { font-size: clamp(1.25rem, 5.4vw, 1.75rem); gap: 12px; letter-spacing: -0.03em; }
#work.work-section { padding-inline: 24px; }
.contact-kicker { gap: 18px; }
.contact-headline { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.contact-headline { transition: none; }
}
:root { --work-margin: #f6f7f9; --work-dot: rgba(107,139,155,.16); --work-well: #faf9f6; --work-guide: #e2e6e9; }
.work-canvas { position: relative; width: 100%; background-color: var(--work-margin); background-image: radial-gradient(circle,var(--work-dot) 1px,transparent 1px); background-size: 20px 20px; }
#work.work-section { position: relative; isolation: isolate; background: none; }
#work.work-section::before { content: ""; position: absolute; inset: 0px 16px; background: var(--work-well); pointer-events: none; z-index: -1; }
#work .endorsement-card { background-image: none; }
#work .sentry-graphic-overlap { width: calc(100% + 110px); margin-left: -110px; z-index: 1; opacity: 0.38; mask-image: linear-gradient(rgb(0, 0, 0) 60%, transparent 100%), linear-gradient(to right, rgb(0, 0, 0) 70%, transparent 100%); mask-composite: source-in; }
#work .sentry-row > .experience-copy { position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 36px; align-self: stretch; display: flex; flex-direction: column; }
#work .sentry-row > .experience-copy .tools { margin-top: auto; padding-top: 23px; }
#work .sentry-row .experience-story > .work-endorsement { margin: 16px 0px 0px 32px; }
@media (max-width: 800px) {
#work .sentry-graphic-overlap { width: 100%; margin-left: 0px; }
#work .sentry-row .experience-story > .work-endorsement { margin: 16px 0px 0px 18px; }
#work .sentry-row > .experience-copy .tools { margin-top: 23px; padding-top: 0px; }
}
@media (max-width: 480px) {
#work.work-section::before { inset-inline: 12px; }
}
#work .sentry-graphic-overlap { max-height: clamp(180px, 18vw, 260px); overflow: hidden; }
#work .sentry-row > .experience-copy .company-link { align-self: flex-start; }
:root { --work-gutter: clamp(16px,2.5vw,36px); }
body { background-color: var(--bg); background-image: radial-gradient(var(--paper-tooth) 1px,transparent 0),var(--paper-grain); background-size: 5px 5px, 300px 300px; }
.work-canvas { background-color: var(--bg); background-image: radial-gradient(circle,var(--work-dot) 1px,transparent 1px),var(--paper-grain); background-size: 20px 20px, 300px 300px; overflow: visible; }
#work.work-section { width: 100%; max-width: 1680px; margin: 0px auto; padding-inline: var(--work-gutter); overflow: visible; }
#work.work-section::before { inset: 0 var(--work-gutter); background-color: var(--bg); background-image: radial-gradient(var(--paper-tooth) 1px,transparent 0),var(--paper-grain); background-size: 5px 5px, 300px 300px; }
#work .sentry-row > .experience-story { z-index: auto; overflow: visible; }
#work .sentry-graphic-overlap { width: min(120%,calc(100% + 80px + var(--work-gutter) - 8px + max(0px,calc((100vw - 1680px)/2)))); margin-left: -80px; opacity: 0.54; max-height: none; height: auto; overflow: visible; position: relative; z-index: 1; }
#work .sentry-row .experience-story > .work-endorsement { margin: -65px 0px 0px 24px; position: relative; z-index: 3; }
#work .sentry-row > .experience-copy { align-self: start; display: block; min-height: 0px; height: auto; position: relative; z-index: 2; }
#work .sentry-row .experience-narrative { padding-top: 12px; margin-top: 22px; }
#work .sentry-row .experience-narrative p { margin: 0px 0px 12px; }
#work .sentry-row > .experience-copy .tools { margin: 12px 0px 0px; padding-top: 0px; }
#work .sentry-row > .experience-copy .tags { margin-top: 18px; }
@media (max-width: 800px) {
#work .sentry-graphic-overlap { width: 100%; margin-left: 0px; }
#work .sentry-row .experience-story > .work-endorsement { margin: -35px 0px 0px 12px; }
}
#work .experience-rows { gap: clamp(24px, 3vw, 40px); }
#work .quanthub-row > .experience-story { position: relative; z-index: auto; overflow: visible; }
#work .quanthub-graphic-overlap { width: calc(100% + 70px); margin-top: -80px; margin-right: -70px; position: relative; z-index: 1; opacity: 0.54; overflow: visible; }
.calculators-graphic { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-color,var(--line,#e2e8f0)); }
#work .quanthub-row .experience-story > .work-endorsement { position: relative; z-index: 3; margin: -50px 24px 0px 0px; }
#work .quanthub-row .experience-copy { position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 36px; }
@media (max-width: 800px) {
#work .quanthub-graphic-overlap { width: 100%; margin-top: 0px; margin-right: 0px; }
#work .quanthub-row .experience-story > .work-endorsement { margin: -25px 12px 0px 0px; }
}
.work-graphic-img, .sentry-graphic-overlap img, .quanthub-graphic-overlap img, .calculators-graphic { image-rendering: crisp-edges; shape-rendering: geometricprecision; text-rendering: geometricprecision; transform: translateZ(0px); backface-visibility: hidden; max-width: none; filter: none; backdrop-filter: none; }
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { opacity: 0.86; filter: none; backdrop-filter: none; mask-image: none; overflow: visible; z-index: 1; }
#work .quanthub-row, #work .quanthub-row > .experience-story { overflow: visible; }
#work .quanthub-graphic-overlap { margin-top: -190px; margin-left: auto; margin-right: -70px; justify-self: end; position: relative; transform: translateX(45px); }
#work .quanthub-row .experience-story > .work-endorsement { margin-top: -40px; position: relative; z-index: 3; }
#work .quanthub-row .experience-copy { position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 36px; }
@media (max-width: 800px) {
#work .quanthub-graphic-overlap { width: 100%; margin: 0px; transform: none; }
#work .quanthub-row .experience-story > .work-endorsement { margin-top: -25px; }
}
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { opacity: 0.45; overflow: visible; filter: none; backdrop-filter: none; mask-composite: source-in; }
#work .sentry-graphic-overlap { mask-image: linear-gradient(to right, rgb(0, 0, 0) 65%, transparent 100%), linear-gradient(rgb(0, 0, 0) 70%, transparent 100%); }
#work .quanthub-graphic-overlap { mask-image: linear-gradient(to left, rgb(0, 0, 0) 60%, transparent 100%), linear-gradient(rgb(0, 0, 0) 70%, transparent 100%); margin-left: auto; justify-self: end; transform: translateX(50px); }
#work .sentry-row .experience-story > .work-endorsement { position: relative; z-index: 3; }
@media (max-width: 800px) {
#work .quanthub-graphic-overlap { transform: none; }
}
html { overflow-x: clip; }
.work-canvas, #work.work-section, #work .experience-rows, #work .experience-row, #work .experience-story { overflow: visible; }
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { width: 145%; max-height: none; position: relative; z-index: 1; opacity: 0.42; overflow: visible; }
#work .sentry-graphic-overlap { margin-left: -80px; transform: translateX(80px); }
#work .quanthub-graphic-overlap { margin-top: -320px; margin-left: 0px; margin-right: 0px; transform: translateX(-60px); }
:root { --quote-fill: #dce6ec; --quote-border: rgba(107,139,155,.35); --quote-ink: #1f2428; --quote-secondary: #465966; }
#work .work-endorsement { background: var(--quote-fill); border: 1px solid var(--quote-border); color: var(--quote-ink); box-shadow: rgba(0, 0, 0, 0.12) 0px 16px 36px -8px; position: relative; z-index: 4; }
#work .work-endorsement figcaption { color: var(--quote-secondary); }
#work .work-endorsement .sentry-glyph { color: var(--quote-ink); }
#work .sentry-row .experience-story > .work-endorsement { margin-top: -140px; position: relative; z-index: 4; }
#work .quanthub-row .experience-story > .work-endorsement { margin-top: -160px; position: relative; z-index: 4; }
@media (max-width: 800px) {
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { width: 100%; margin: 0px; transform: none; }
#work .sentry-row .experience-story > .work-endorsement { margin-top: -35px; }
#work .quanthub-row .experience-story > .work-endorsement { margin-top: -40px; }
}
body { overflow-x: clip; }
:root { --card-bg: var(--surface); }
#work { --graphic-scale: 155%; --graphic-opacity: 0.29; }
#work .work-graphic-img, #work .calculators-graphic { filter: grayscale(100%) contrast(95%); }
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { width: var(--graphic-scale); opacity: var(--graphic-opacity); }
#work .sentry-graphic-overlap { margin-left: -140px; transform: none; }
#work .quanthub-graphic-overlap { margin-top: -140px; margin-left: 0px; margin-right: -130px; transform: translateX(110px); }
#work .work-endorsement { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; box-shadow: rgba(0, 0, 0, 0.08) 0px 14px 30px -10px; background: var(--quote-fill); }
#work .sentry-row > .experience-copy, #work .quanthub-row .experience-copy { position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.08) 0px 16px 36px -12px; background: var(--card-bg); }
@media (max-width: 800px) {
#work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { width: 100%; margin: 0px; transform: none; }
}
:root { --reinforcement-band: rgba(140,155,168,.45); }
#work .work-endorsement { overflow: visible; }
.reinforcement-sticker { width: 34px; height: 34px; position: absolute; bottom: -17px; right: 28px; z-index: 5; pointer-events: none; user-select: none; opacity: 0.6; fill: none; }
.sticker-band { stroke: var(--reinforcement-band); }
#work .company-heading-link { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; transition: color 0.25s; }
#work .company-heading-link:hover, #work .company-heading-link:focus-visible { color: rgb(107, 139, 155); }
#work .sentry-row > .experience-copy, #work .quanthub-row .experience-copy { background: var(--card-bg); border: 1px solid var(--border-color,var(--line)); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#work .sentry-row > .experience-copy:hover, #work .sentry-row > .experience-copy:focus-within, #work .quanthub-row .experience-copy:hover, #work .quanthub-row .experience-copy:focus-within { border-color: rgb(107, 139, 155); transform: translateY(-4px); box-shadow: rgba(107, 139, 155, 0.16) 0px 20px 40px -12px; }
@media (prefers-reduced-motion: reduce) {
#work .experience-copy, #work .company-heading-link { transition: none; }
#work .sentry-row > .experience-copy:hover, #work .sentry-row > .experience-copy:focus-within, #work .quanthub-row .experience-copy:hover, #work .quanthub-row .experience-copy:focus-within { transform: none; }
}

/* Light paper is permanent, independently of operating-system appearance. */
:root{color-scheme:light;--bg:#f7f6f2;--name-accent:#6b8b9b}.nav-links{margin-right:0}
.youtube-preview-card{display:block;margin:0 24px 18px;border-radius:8px;transition:transform .3s ease;position:relative}.youtube-preview-card:hover,.youtube-preview-card:focus-visible{transform:scale(1.02)}.youtube-thumb-wrapper{position:relative;aspect-ratio:16/9;border:1px solid var(--border-color,#e2e8f0);border-radius:8px;overflow:hidden;background:var(--wash)}.youtube-thumb-img{display:block;width:100%;height:100%;object-fit:cover}.youtube-thumb-img[hidden]{display:none}.youtube-play-badge{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;border-radius:4px;padding:9px 12px;background:rgba(31,36,40,.86);color:#fff;font-size:11px}.youtube-fallback-title{display:none}.thumbnail-unavailable{background:repeating-linear-gradient(90deg,#fdfcfa 0 19px,#d1d5db 19px 20px);min-height:180px}.thumbnail-unavailable .youtube-fallback-title{display:block;position:absolute;top:24px;left:18px;right:18px;color:#2d3748;font-size:18px;letter-spacing:-.5px;background:rgba(247,246,242,.9);padding:8px}
.recital-program-accordion{border:1px solid var(--border-color,#e2e8f0);border-radius:8px;background:rgba(255,255,255,.7);margin:16px 24px 24px;overflow:hidden}.program-summary{font-size:.85rem;font-weight:600;color:#6b8b9b;cursor:pointer;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none}.program-summary::-webkit-details-marker{display:none}.chevron-icon{transition:transform .25s ease;flex-shrink:0}details[open] .chevron-icon{transform:rotate(180deg)}.program-content{padding:12px 14px;font-size:.82rem;line-height:1.6;color:#2d3748;border-top:1px solid #edf2f7}.program-piece+.program-piece{margin-top:14px}.movement-list{list-style:none;padding-left:12px;margin:4px 0 8px;color:#718096}.flagship-project:has(.recital-program-accordion[open]){position:static}
@media(max-width:480px){.youtube-preview-card{margin-inline:20px}.recital-program-accordion{margin-inline:20px}.youtube-play-badge{font-size:10px;padding:8px 10px}.program-summary{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.youtube-preview-card,.chevron-icon{transition:none}}

/* trigger build */

/* Opposing fades reserve separate text zones for the two decorative screenshots.
   Intersecting masks also clear the dashboard's lower-left and calculator's upper-right. */
#work .sentry-graphic-overlap {
  mask-image: linear-gradient(to right, #000 65%, transparent 100%), linear-gradient(to bottom, #000 50%, transparent 82%), linear-gradient(to top right, transparent, #000 42%);
  mask-composite: intersect;
}
#work .quanthub-graphic-overlap {
  mask-image: linear-gradient(to left, #000 60%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to bottom left, transparent, #000 42%);
  mask-composite: intersect;
}

/* Doodles reveal independently without changing their positioned boxes. */
.work-sticker-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; clip-path: none; contain: none; }
.work-doodle-sticker { position: absolute; width: var(--sticker-width); height: auto; max-width: none; pointer-events: none; user-select: none; opacity: var(--sticker-opacity, 1); transform: rotate(var(--sticker-angle)); transform-origin: center; transition: opacity .45s ease-out, transform .55s cubic-bezier(.22,1.25,.36,1); }
.sticker-envelope, .sticker-hello { --sticker-opacity: .7; }
.work-sticker-layer.is-ready .work-doodle-sticker { opacity: 0; transform: translateY(8px) scale(.8) rotate(calc(var(--sticker-angle) + 4deg)); transition: none; }
.work-sticker-layer.is-ready .work-doodle-sticker.revealed { opacity: var(--sticker-opacity, 1); transform: rotate(var(--sticker-angle)); transition: opacity .45s ease-out, transform .55s cubic-bezier(.22,1.25,.36,1); transition-delay: var(--sticker-delay); }
@media (max-width: 800px) { .work-doodle-sticker { width: calc(var(--sticker-width) * .8); } }
@media (prefers-reduced-motion: reduce) {
  .work-sticker-layer .work-doodle-sticker,
  .work-sticker-layer.is-ready .work-doodle-sticker,
  .work-sticker-layer.is-ready .work-doodle-sticker.revealed { transition: none; opacity: var(--sticker-opacity, 1); transform: rotate(var(--sticker-angle)); }
}

/* Supplied script artwork replaces the hero's typeset interaction hint. */
.hero-hover-graphic { position: absolute; bottom: 20px; right: 40px; width: 210px; height: auto; aspect-ratio: 430 / 247; z-index: 5; pointer-events: none; animation: hint-breathe 4s ease-in-out infinite alternate; }
.hero-hover-graphic svg { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
  .hero-hover-graphic { bottom: 12px; right: 20px; width: 182px; height: auto; aspect-ratio: 430 / 247; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hover-graphic { animation: none; opacity: .85; }
}

/* Independent addition: its positioning never participates in card layout. */
.work-gap-note { position: absolute; width: 437px; height: auto; aspect-ratio: 698 / 251; z-index: 5; pointer-events: none; user-select: none; }

/* Only the original ink forming “vibe codes” participates in pen drawing. */
.work-gap-note { opacity: .7; }
.vibe-artwork { display: block; width: 100%; height: auto; }
.vibe-lettering { mask: none; }
.writing-ready .vibe-lettering { mask: url(#vibe-pen-mask); }
.writing-ready .vibe-ink-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-writing .vibe-ink-stroke { animation: draw-vibe-ink var(--ink-duration) linear var(--ink-delay) both; }
@keyframes draw-vibe-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .writing-ready .vibe-lettering { mask: none; }
  .vibe-ink-stroke { animation: none !important; stroke-dashoffset: 0 !important; }
}

.vibe-rest-layer, .vibe-word-layer { display: none; }
.writing-ready .vibe-rest-layer, .writing-ready .vibe-word-layer { display: inline; }
.writing-ready .vibe-finished-art { display: none; }
@media (prefers-reduced-motion: reduce) {
  .writing-ready .vibe-rest-layer, .writing-ready .vibe-word-layer { display: none; }
  .writing-ready .vibe-finished-art { display: inline; }
}

/* The thank-you note reuses the recital accordion's existing visual treatment. */
.program-thanks-copy { margin: 0; }
.program-content a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }

/* About narrative shares the existing pale-blue card surface and ink palette. */
#about .bio { padding: clamp(24px, 3vw, 32px); background: var(--quote-fill); border-radius: 4px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.08); }
#about .bio p { color: var(--ink); }
#about .bio p:last-child { margin-bottom: 0; }
.truth-quiz .quiz-options { padding-top: 28px; }
/* State dots are 60% of the existing 6px explored-city markers. */
.map-pin.pin-state { width: 10px; height: 10px; z-index: 0; }
.map-pin.pin-state > span { width: 5px; height: 5px; background: #fff; border: .5px solid rgba(107,139,155,.5); box-shadow: none; }
.map-pin.pin-state:hover, .map-pin.pin-state:focus-visible, .map-pin.pin-state[aria-pressed="true"] { z-index: 1; }
.map-pin.pin-state:hover > span, .map-pin.pin-state:focus-visible > span, .map-pin.pin-state[aria-pressed="true"] > span { box-shadow: none; }
.map-pin.pin-lived { z-index: 2; }
.map-pin.pin-lived:hover, .map-pin.pin-lived:focus-visible, .map-pin.pin-lived[aria-pressed="true"] { z-index: 3; }

/* Original supplied cursor artwork is exclusive to the hero on mouse devices. */
@media (hover: hover) and (pointer: fine) {
  #hero, #hero *, #hero::before, #hero::after,
  #hero *::before, #hero *::after {
    cursor: url("treble-clef-cursor.svg") 17 3, auto !important;
  }
}

/* Four independent annotations, positioned from the dashboard by script. */
.work-tool-doodle { visibility: hidden; --sticker-opacity: .4; }
.work-tool-doodle.is-placed { visibility: visible; }

/* Supplied QuantHub annotations: placement follows the actual card geometry. */
.quanthub-annotation {
  position: absolute;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease-out;
}
.quanthub-annotation.is-positioned { visibility: visible; }
.quanthub-annotation.revealed { opacity: 1; }
.annotation-prospecting.revealed { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .quanthub-annotation { transition: none; }
}


/* One content-height artboard connects sections 01–04, ending before the footer. */
.work-canvas {
  --frame-edge: max(var(--work-gutter), calc((100% - 1680px) / 2 + var(--work-gutter)));
  isolation: isolate;
  background-image: var(--paper-grain);
  background-size: 300px 300px;
}
.work-canvas::before {
  content: "";
  position: absolute;
  inset: 0 var(--frame-edge);
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--paper-tooth) 1px, transparent 0), var(--paper-grain);
  background-size: 5px 5px, 300px 300px;
}
.work-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  /* Dots keep one continuous origin; vertical guides stop before Contact. */
  background-image: radial-gradient(circle, var(--work-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: left top;
  background-repeat: repeat;
  mask-image: linear-gradient(to right, black calc(var(--frame-edge) + 1px),
    transparent calc(var(--frame-edge) + 1px), transparent calc(100% - var(--frame-edge) - 1px),
    black calc(100% - var(--frame-edge) - 1px));
}
#work.work-section::before { content: none; }


/* The page guides frame sections 01–03, leaving the coffee wash unbordered. */
.framed-sections { position: relative; }
.contact-socials {
  --social-icon-height: calc(44px / 3);
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
}
.contact-socials .social-doodle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  border: 0;
  padding: 0;
  background: none;
  opacity: .85;
  transform: translateY(var(--social-offset)) rotate(var(--social-angle));
  transition: transform .2s ease, opacity .2s ease;
}
.social-doodle-link img { display: block; height: var(--social-icon-height); width: auto; filter: brightness(0) invert(1); }
.social-substack img { height: calc(var(--social-icon-height) * 1.05); }
.contact-socials .social-doodle-link:hover,
.contact-socials .social-doodle-link:focus-visible {
  opacity: 1;
  transform: translateY(calc(var(--social-offset) - 2px)) rotate(var(--social-angle));
}
@media (prefers-reduced-motion: reduce) {
  .contact-socials .social-doodle-link { transition: none; }
}


/* Contact is already blue underneath the stationary watercolor paper sheet. */
#contact.contact-section {
  padding-top: clamp(64px, 7vw, 100px);
  border: 0;
  background: var(--contact-blue);
  transition: none;
  isolation: isolate;
}
/* The full-height sheet is removed by a CLEAN clip, never a vertical tear path.
   Torn geometry belongs exclusively to the completed horizontal top boundary. */
.contact-horizontal-tear {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  --contact-fiber-mask: url("paper-edges/contact-watercolor-fibers.png");
  height: 14px;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(0 var(--tear-unrevealed, 0%) 0 0);
}
.contact-torn-paper, .contact-paper-cover {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--paper-tooth) 1px,transparent 0),var(--paper-grain);
  background-size: 5px 5px, 300px 300px;
}
/* The alpha-only mask thins the SAME watercolor texture into matte fibers. */
.contact-torn-paper {
  z-index: 1;
  mask: var(--contact-fiber-mask) center / max(100%, 1000px) 100% no-repeat;
}
.contact-horizontal-tear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35,40,44,.1);
  mask: var(--contact-fiber-mask) center / max(100%, 1000px) 100% no-repeat;
  transform: translateY(.6px);
  filter: blur(.35px);
}
@media (max-width: 768px) {
  .contact-horizontal-tear { height: 10px; }
}
.contact-paper-cover {
  display: none;
  z-index: 4;
  pointer-events: none;
  opacity: 1;
  border: 0;
  box-shadow: none;
  clip-path: inset(0 0 0 var(--paper-removed, 100%));
}
#contact.paper-reveal-ready .contact-paper-cover { display: block; }
#contact.paper-reveal-complete .contact-paper-cover { visibility: hidden; }
.contact-cup-illustration {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(9deg);
  transform-origin: 65% 75%;
}
.contact-cup-illustration img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
/* Content-height Contact no longer reserves a separate sign-off row. */
#contact.contact-section { padding-bottom: 24px; }
/* Reuse the existing short-lived notes; never create a cursor-following element. */
.cursor-particles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }


/* Mobile is a separate composition; the detailed desktop artboard is unchanged. */
@media (max-width: 768px) {
  .mobile-decorative-arrow { display: none !important; }
  #work .work-sticker-layer, #work .work-gap-note { display: none; }

  /* Keep a clear handwritten lane immediately above the keyboard. */
  #hero { min-height: max(85svh, 700px); }
  .hero-heading { padding-bottom: 150px; pointer-events: none; }
  .hero-heading > .local-time, .hero-heading > .eyebrow,
  .hero-heading > .hero-title, .hero-heading > .hero-bottom { pointer-events: auto; }
  .hero-hover-graphic { left: auto; right: 20px; bottom: 0; width: 182px; }
  .photo-headshot { right: 16px; bottom: 86px; }
  .photo-travel { left: 18px; bottom: 116px; }
  .photo-recital { top: 22px; right: 20px; }
  .photo-coffee { top: 28px; left: 24px; }
  .photo-running { top: 66px; right: auto; left: calc(50% - 30px); }
  .ambient-one { inset: auto auto 82px 130px; }
  .ambient-four { inset: auto auto 162px 140px; }
  .ambient-three { top: 115px; }
  .ambient-five { inset: 104px auto auto 112px; }
  .rest-eighth { inset: auto auto 100px 46%; }
  .rest-half { left: 40%; bottom: 210px; }

  /* Foreground card, cropped work artifact, then its manager's endorsement. */
  #work .experience-rows { gap: 40px; }
  #work .experience-row { display: flex; flex-direction: column; gap: 0; }
  #work .sentry-row > .experience-story,
  #work .quanthub-row > .experience-story {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: 24px;
    padding-top: 0;
    z-index: auto;
  }
}


/* Desktop refinements leave the dedicated phone composition intact. */
.about-dumb-strike { position: relative; display: inline-block; text-decoration: none; }
@media (min-width: 769px) {
  .contact-socials { --social-icon-height: 22px; }
}
@media (max-width: 768px) {
  .about-dumb-insertion { display: none; }
}


/* Phone Work Experience has no screenshot layer or reserved screenshot space. */
@media (max-width: 767px) {
  #work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { display: none; }
  #work .sentry-row > .experience-story,
  #work .quanthub-row > .experience-story { margin-top: 24px; }
  #work .sentry-row .experience-story > .work-endorsement { margin: 0 0 0 12px; }
  #work .quanthub-row .experience-story > .work-endorsement { margin: 0 12px 0 0; }
}

/* Tablet artboard: readable cards, natural testimonial rows and real doodle pockets. */
@media (min-width: 768px) and (max-width: 1199px), (min-width: 1200px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .mobile-decorative-arrow { display: none !important; }
  #work { --tablet-pocket: 140px; }
  #work .experience-rows { gap: 44px; }
  #work .experience-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tablet-pocket);
    gap: 0;
    align-items: start;
  }
  #work .sentry-row > .experience-copy { grid-area: 1 / 1; width: 100%; max-width: none; }
  #work .quanthub-row { grid-template-columns: var(--tablet-pocket) minmax(0, 1fr); }
  #work .quanthub-row > .experience-main {
    grid-area: 1 / 2;
    width: 100%;
    max-width: none;
    margin-top: 0;
  }
  #work .quanthub-row .experience-copy { max-width: none; margin-top: 0; }
  #work .sentry-row > .experience-story,
  #work .quanthub-row > .experience-story {
    position: static;
    grid-area: 2 / 1 / auto / -1;
    width: 100%;
    max-width: none;
    margin-top: 24px;
    padding-top: 0;
    z-index: auto;
  }
  #work .sentry-graphic-overlap, #work .quanthub-graphic-overlap { display: none; }
  #work .sentry-row .experience-story > .work-endorsement,
  #work .quanthub-row .experience-story > .work-endorsement {
    width: calc(100% - var(--tablet-pocket));
    margin: 0;
  }
  #work .sentry-row .experience-story > .work-endorsement { margin-left: auto; }
  #work .work-sticker-layer { display: block; }
  #work .work-sticker-layer > :not(.sticker-tam):not(.sticker-icp):not(.sticker-hello):not(.sticker-envelope),
  #work .work-gap-note { display: none; }
  #work .sticker-tam, #work .sticker-icp, #work .sticker-hello, #work .sticker-envelope { display: block; }

  #hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: max(85svh, 820px);
    padding: 110px 32px 220px;
    overflow: hidden;
  }
  .hero-intro { display: block; }
  .hero-heading { width: 100%; max-width: none; padding-bottom: 0; pointer-events: none; }
  .hero-heading > * { pointer-events: auto; }
  .hero-heading > .hero-title { width: fit-content; max-width: 70%; }
  .hero-heading > .hero-bottom { pointer-events: none; }
.hero-bottom > p { pointer-events: auto; }
  .hero .local-time { font-size: .68rem; margin-bottom: 24px; }
  .hero .eyebrow { max-width: 64%; font-size: .75rem; margin-bottom: 24px; }
  .hero-intro .hero-title { font-size: clamp(3.2rem, 5.5vw, 4.5rem); line-height: 1.1; white-space: nowrap; }
  .hero .hero-bottom { margin-top: 24px; }
  .hero .hero-bottom > p { max-width: min(58%, 540px); font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.45; }
  .hero-geometry { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-geometry > .geo-orb {
    animation: none !important;
    transform: none !important;
    --magnet-x: 0px !important;
    --magnet-y: 0px !important;
  }
  .photo-headshot { width: clamp(220px, 24vw, 280px); height: clamp(220px, 24vw, 280px); inset: 32% 4% auto auto; }
  .photo-recital { width: 160px; height: 160px; inset: auto auto 90px 6%; }
  .photo-travel { width: 125px; height: 125px; inset: auto 33% 44px auto; }
  .photo-coffee { width: 100px; height: 100px; inset: auto 6% 148px auto; }
  .photo-running { width: 90px; height: 90px; inset: auto auto 200px 36%; }
  .ambient-one { width: 48px; height: 48px; inset: 16% auto auto 52%; }
  .ambient-two { width: 42px; height: 42px; inset: 10% auto auto 4%; }
  .ambient-three { width: 36px; height: 36px; inset: 18% 5% auto auto; }
  .ambient-four { width: 46px; height: 46px; inset: auto auto 26px 19%; }
  .ambient-five { width: 38px; height: 38px; inset: auto auto 238px 63%; }
  .hero-hover-graphic { left: auto; right: 32px; bottom: 18px; width: 210px; }
  .rest-quarter { top: 17%; right: 21px; }
  .rest-eighth { inset: auto auto 135px 60%; }
  .rest-half { left: 40%; bottom: 25px; }
  .rest-sixteenth { left: 23%; right: auto; top: 70px; }
}


/* The original handwritten email drawings are the links, not supplementary labels. */
.contact-links .handwritten-email {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  border: 0;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.handwritten-email img {
  display: block;
  width: 165px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.handwritten-gatech-email img { width: 160px; }
.contact-links .handwritten-email:hover,
.contact-links .handwritten-email:focus-visible { opacity: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .contact-links .handwritten-email { transition: none; }
}

/* Restore the original paper/tooth layers and original tinted technical grid.
   Deliberately omit the old divider SVG stroke and all boundary borders. */
body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--paper-tooth) 1px, transparent 0), var(--paper-grain);
  background-size: 5px 5px, 300px 300px;
  background-repeat: repeat;
}
.site-header, .site-footer {
  background-color: var(--header);
  background-image: linear-gradient(to right,var(--header-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--header-grid) 1px,transparent 1px);
  background-size: 24px 24px;
  backdrop-filter: blur(16px);
  border: 0;
  outline: 0;
  box-shadow: none;
}
#contact .section-title, #contact .contact-headline, #contact .contact-note { color: #fff; }
#contact .section-num { color: #c8d8e0; }
.contact-beli-note { display: flex; align-items: flex-start; gap: 18px; margin-top: 28px; }
.contact-beli-link { display: flex; align-items: center; justify-content: center; flex: 0 0 60px; min-height: 48px; transform: rotate(5deg); opacity: .9; }
.contact-beli-link img { display: block; width: 60px; height: auto; filter: brightness(0) invert(1); }
.contact-beli-link:hover, .contact-beli-link:focus-visible { opacity: 1; }
#contact .contact-note { margin: 0; max-width: 440px; font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.75; }
/* Animate the artwork inside stable 44px+ hit targets; preserve link hover lifts. */
.social-doodle-link img { animation: social-float 7s ease-in-out infinite alternate; }
.social-doodle-link:nth-child(2) img { animation-duration: 8.5s; animation-delay: -3s; }
.social-doodle-link:nth-child(3) img { animation-duration: 7.8s; animation-delay: -5s; }
.social-doodle-link:nth-child(4) img { animation-duration: 9s; animation-delay: -1.5s; }
@keyframes social-float { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@media (max-width: 600px) {
  .contact-beli-note { gap: 14px; }
  .contact-beli-link { flex-basis: 48px; }
  .contact-beli-link img { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .social-doodle-link img { animation: none; }
}

/* The cup belongs to the heading; the drawing remains the supplied SVG. */
#contact .contact-kicker { align-items: center; gap: 22px; }
#contact .contact-links { justify-self: end; width: min(100%, 272px); }
@media (max-width: 600px) {
  #contact .contact-kicker { gap: 16px; }
  .contact-cup-illustration { flex-basis: 64px; width: 64px; }
}
@media (min-width: 769px) {
}

/* Only the three physical-paper boundaries get a shallow, static fiber edge.
   The grid remains inside the header/footer; there is no stroked divider. */
/* Mask the grid surface, not the entire header: its cutouts reveal grid-blue
   ink over the same header tint instead of exposing a white paper strip. */
.site-header { background: none; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--header);
  background-image: linear-gradient(to right,var(--header-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--header-grid) 1px,transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(#000 0 0), url("paper-edges/matte-bottom-edge.svg");
  mask-size: 100% calc(100% - 6px), 100% 6px;
  mask-position: top, bottom;
  mask-repeat: no-repeat;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  z-index: -2;
  pointer-events: none;
  background-color: var(--header);
  background-image: linear-gradient(var(--header-grid), var(--header-grid));
}
.site-footer {
  mask-image: linear-gradient(#000 0 0), url("paper-edges/matte-top-edge.svg");
  mask-size: 100% calc(100% - 6px), 100% 6px;
  mask-position: bottom, top;
  mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .contact-horizontal-tear { clip-path: none; }
  #contact.paper-reveal-ready .contact-paper-cover { display: none; }
}

/* City Notes keeps one native selector, with short, clearly grouped option lists. */
.place-groups { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: -4px 0 16px; }
.place-groups[hidden] { display: none; }
.place-groups button { padding: 5px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font-size: 11px; line-height: 1.6; }
.place-groups button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.city-category { color: var(--muted); }
.city-category[data-category="lived"], .city-category[data-category="home"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.city-year[hidden], .city-context[hidden], .city-category[hidden], .tooltip-context[hidden] { display: none; }

/* Responsive Contact annotations: the reveal's cover and clip are unchanged. */
#contact .contact-grid { row-gap: 0; }
@media (min-width: 768px) {
  #contact .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  #contact .handwritten-email { justify-content: flex-end; }
}
@media (max-width: 767px) {
  #contact .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }
  #contact .contact-grid > :first-child { grid-column: 1 / -1; grid-row: 1; }
  #contact .contact-links { display: contents; }
  #contact .contact-socials {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: max-content;
    gap: clamp(14px, 5vw, 28px);
    margin-top: 30px;
    margin-bottom: 40px;
  }
  #contact .handwritten-email {
    grid-column: 1;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 0;
  }
  #contact .handwritten-personal-email { grid-row: 3; }
  #contact .handwritten-gatech-email { grid-row: 4; }
  #contact .handwritten-personal-email img { width: clamp(112px, 35vw, 140px); }
  #contact .handwritten-gatech-email img { width: clamp(110px, 34vw, 136px); }
}

/* Atlanta alone shares the hero-name source of truth, including its quiet halo. */
.map-pin[data-city="Atlanta"] { --pin-lived: var(--name-accent); }
.map-pin[data-city="Atlanta"] > span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--name-accent) 12.5%, transparent); }
.map-pin[data-city="Atlanta"]:is(:hover, :focus-visible, [aria-pressed="true"]) > span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--name-accent) 14.5%, transparent); }

/* Targeted project metadata, quiz guidance, and permanent Home badge. */
#projects .journal-project-link { min-height: 0; padding: 24px; gap: 0; }
.journal-project-link .project-date { display: block; font-size: 11px; color: var(--muted); margin-bottom: 16px; }
#projects .journal-project-link > p { margin-bottom: 20px; }
#projects .journal-project-link .draft-action { margin-top: 0; }
.quiz-instruction { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 12px 0 0; }
.stay-progress.stay-home { background: var(--wash); }

/* Original personal artifacts, one per selected truth. */
.quiz-choice-visual { display: block; width: min(100%, 320px); height: auto; margin: 20px auto 0; border-radius: 3px; }
.quiz-choice-visual[hidden] { display: none; }
.site-footer .footer { align-items: center; }
.footer-signature {
  display: block;
  flex: 0 1 150px;
  width: 150px;
  min-width: 0;
  aspect-ratio: 698 / 251;
  background: currentColor;
  mask: url("signature.svg") center / contain no-repeat;
}

/* Shared desktop/tablet rows align the right-hand details with their left-hand context. */
@media (min-width: 768px) {
  #contact .contact-grid { grid-template-rows: auto auto auto; }
  #contact .contact-grid > :first-child,
  #contact .contact-links { display: grid; grid-row: 1 / 4; grid-template-rows: subgrid; row-gap: 0; }
  #contact .contact-grid > :first-child { grid-column: 1; }
  #contact .contact-links { grid-column: 2; align-items: center; }
  #contact .contact-email-group { grid-row: 2; }
  #contact .contact-socials { grid-row: 3; margin-top: 28px; justify-content: flex-end; }
}
@media (max-width: 767px) {
  #contact .contact-email-group { display: contents; }
}
.site-footer .footer {
  width: 100%;
  max-width: none;
  padding-inline: clamp(24px, 5vw, 64px);
}
.map-views { flex-wrap: wrap; }

/* A shallow horizontal-edge indentation and local surface tension, not a curl.
   The vertical progress clip stays perfectly straight and untextured. */
.contact-paper-cover {
  --paper-grip-x: calc(var(--paper-removed, 100%) + 24px);
  mask-image: radial-gradient(ellipse 30px var(--paper-grip-depth, .01px) at var(--paper-grip-x) 0,
    transparent calc(100% - .5px), #000 100%);
}
.contact-paper-cover::after {
  content: "";
  position: absolute;
  left: var(--paper-grip-x);
  top: 1px;
  width: 86px;
  height: 58px;
  pointer-events: none;
  transform: translateX(-28px) skewX(7deg);
  transform-origin: top left;
  opacity: var(--paper-grip-strength, 0);
  background:
    radial-gradient(ellipse 28px 8px at 32px 2px, rgba(35,40,44,.065), transparent 100%),
    radial-gradient(ellipse 23px 14px at 46px 13px, rgba(255,255,255,.38), transparent 100%),
    radial-gradient(ellipse 2px 21px at 35px 10px, rgba(35,40,44,.035), transparent 100%);
}
@media (max-width: 767px) {
  #contact .contact-socials {
    --social-icon-height: 19px;
    margin-top: 46px;
    margin-bottom: 22px;
  }
  #contact .handwritten-personal-email { grid-column: 1; grid-row: 3; }
  #contact .handwritten-gatech-email { grid-column: 2; grid-row: 3; justify-content: flex-end; }
  #contact .handwritten-personal-email img { width: min(100%, 140px); }
  #contact .handwritten-gatech-email img { width: min(100%, 136px); }
  .contact-paper-cover::after { width: 68px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-paper-cover::after { content: none; }
}

/* Mobile-only simplification; desktop/tablet clocks retain their exact design. */
@media (max-width: 767px) {
  #hero .local-time { display: none; }
}