/* A paper landscape. Color belongs to the scene, not the interface. */
:root {
  --bg: #fff;
  --panel: #f6f6f2;
  --text: #252824;
  --muted: #777a72;
  --line: #e1e3da;
  --lime: #48624a;
  --violet: #5e6d60;
  --orange: #876449;
  color-scheme: light;
}
::selection { background: #d7e2cf; color: #253128; }
:focus-visible { outline: 2px solid #48624a; outline-offset: 5px; }
.site-header { background: #ffffffed; backdrop-filter: blur(12px); }
.header-inner { min-height: 76px; border-bottom: 0; }
.wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 31px; font-weight: 400; letter-spacing: -1.5px; }
.wordmark > span { font-size: inherit; color: #4e654d; }
.wordmark:hover > span { transform: none; }
.main-nav a { color: #62655e; font-size: 12px; }
.language-switch { border-color: #e8e9e3; background: #f7f8f4; }
.language-switch button[aria-pressed=true] { background: #fff; color: #252824; box-shadow: 0 1px 4px #0000000a; }
.scene-hero {
  --person-x: 64%; --person-y: 55%; --color-x: 64%; --color-y: 55%;
  --color-radius: 220px; --color-opacity: 0;
  --portrait-x: 64%; --portrait-y: 55%; --portrait-radius: 90px; --portrait-opacity: .12;
  height: max(620px, calc(100svh - 76px));
  max-height: 1060px;
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: #fff;
}
.scene-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.scene-monochrome { filter: grayscale(1) brightness(1.07); opacity: .88; }
.scene-color {
  -webkit-mask-image:
    radial-gradient(circle var(--color-radius) at var(--color-x) var(--color-y), rgb(0 0 0 / var(--color-opacity)) 0%, rgb(0 0 0 / var(--color-opacity)) 38%, rgb(0 0 0 / calc(var(--color-opacity) * .55)) 67%, transparent 100%),
    radial-gradient(circle var(--portrait-radius) at var(--portrait-x) var(--portrait-y), rgb(0 0 0 / var(--portrait-opacity)) 0%, rgb(0 0 0 / var(--portrait-opacity)) 55%, transparent 100%);
  mask-image:
    radial-gradient(circle var(--color-radius) at var(--color-x) var(--color-y), rgb(0 0 0 / var(--color-opacity)) 0%, rgb(0 0 0 / var(--color-opacity)) 38%, rgb(0 0 0 / calc(var(--color-opacity) * .55)) 67%, transparent 100%),
    radial-gradient(circle var(--portrait-radius) at var(--portrait-x) var(--portrait-y), rgb(0 0 0 / var(--portrait-opacity)) 0%, rgb(0 0 0 / var(--portrait-opacity)) 55%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.scene-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #fff 0%, #fff0 11%); }
.scene-copy { position: relative; padding-top: 48px; pointer-events: none; }
.scene-role { font-size: 13px; color: #555b52; letter-spacing: .015em; }
.scene-copy h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.3vw, 63px); font-weight: 400; letter-spacing: -.05em; line-height: 1.1; margin-top: 13px; }
.scene-copy h1 > span { color: #658260; }
.scene-intro { white-space: pre-line; font-size: 15px; color: #60665c; max-width: 360px; margin-top: 20px; line-height: 1.85; }
.scene-actions { display: flex; align-items: center; gap: 25px; margin-top: 24px; pointer-events: auto; width: fit-content; }
.scene-contact { display: inline-flex; gap: 21px; align-items: center; background: #292e28; color: #fff; border-radius: 40px; padding: 10px 20px; font-size: 12px; transition: background .2s; }
.scene-contact:hover { background: #48624a; }
.scene-cv { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; border-bottom: 1px solid #aaafa4; padding-block: 8px; }
.scene-cv:hover { color: #48624a; border-color: currentColor; }
.scene-trigger { position: absolute; left: var(--person-x); top: var(--person-y); transform: translate(-50%, -50%); width: 155px; height: 240px; border: 0; border-radius: 60px; background: transparent; z-index: 2; }
.scene-trigger:focus-visible { outline-offset: 0; background: #ffffff14; }
.scene-invite { position: absolute; white-space: nowrap; left: 50%; bottom: -13px; transform: translateX(-50%) rotate(-5deg); font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; color: #4f584c; display: flex; align-items: flex-end; gap: 8px; transition: opacity .25s; text-shadow: 0 1px 5px #fff; }
.scene-invite svg { margin-bottom: 8px; }
.scene-hero.is-exploring .scene-invite { opacity: 0; }
.scene-explorer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.scene-tabs { position: absolute; left: clamp(235px, var(--person-x), calc(100% - 235px)); top: var(--person-y); width: 0; height: 0; }
.scene-tab { position: absolute; min-height: 42px; padding: 9px 19px; background: #fffffff2; border: 1px solid #d2d8cb; border-radius: 40px; font-size: 12px; white-space: nowrap; color: #3f483a; pointer-events: auto; box-shadow: 0 3px 14px #35452b09; animation: scene-option-in .3s both; }
.scene-tab[aria-selected=true] { background: #3e533c; border-color: #3e533c; color: #fff; }
.scene-tab:hover { border-color: #708368; }
.tab-story { left: -199px; top: -96px; transform: rotate(-7deg); }
.tab-skills { left: 102px; top: -92px; transform: rotate(6deg); animation-delay: .04s; }
.tab-experience { left: -226px; top: 10px; transform: rotate(-4deg); animation-delay: .08s; }
.tab-education { left: 118px; top: 22px; transform: rotate(5deg); animation-delay: .12s; }
.scene-card { position: absolute; left: max(56px, calc((100% - 1180px) / 2)); top: min(calc(var(--person-y) + 85px), calc(100% - var(--card-height, 210px) - 24px)); width: 360px; max-width: calc(100% - 40px); padding: 24px 29px 21px; background: #ffffffef; border: 1px solid #dce0d5; border-radius: 13px; box-shadow: 0 8px 30px #3a462013; backdrop-filter: blur(14px); pointer-events: auto; animation: scene-card-in .3s both; }
.scene-dismiss { position: absolute; right: 7px; top: 5px; border: 0; background: transparent; width: 32px; height: 32px; font-size: 21px; color: #777d70; }
.scene-dismiss:hover { color: #202b1f; }
.scene-panel h2 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; letter-spacing: -.025em; padding-right: 4px; line-height: 1.15; }
.scene-panel p { font-size: 12px; line-height: 1.85; color: #69715f; margin-top: 11px; }
.scene-panel a { display: inline-flex; align-items: center; gap: 15px; font-size: 11px; color: #3f5939; margin-top: 13px; min-height: 30px; border-bottom: 1px solid #cdd6c6; }
.scene-panel a:hover { border-color: currentColor; }
.scene-bottom { position: absolute; bottom: 22px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 4; }
.scene-hint { font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-style: italic; color: #8b9082; transition: opacity .2s; }
.is-exploring .scene-hint { opacity: 0; pointer-events: none; }
.is-exploring .scene-bottom { align-items: flex-end; padding-right: max(56px, calc((100% - 1180px) / 2)); }
.scene-scroll { display: flex; align-items: center; gap: 32px; border: 1px solid #dfe2d8; padding: 10px 19px; border-radius: 30px; background: #fff; font-size: 11px; box-shadow: 0 2px 8px #00000005; }
.scene-scroll:hover { border-color: #7d8f6f; }
.scene-no-js { position: absolute; bottom: 100px; left: 20px; right: 20px; text-align: center; font-size: 13px; background: #fffd; padding: 12px; }
.scene-no-js a { text-decoration: underline; }
@keyframes scene-option-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes scene-card-in { from { opacity: 0; margin-top: 8px; } to { opacity: 1; margin-top: 0; } }

/* Keep the full portfolio, with quieter type and less decoration. */
.topic-strip, .heading-doodle, .about-spark, .metric-loop { display: none; }
.section-heading h2, .about-heading h2, .contact-section h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; }
.section-heading h2 { font-size: 43px; }
.section-heading p, .about-copy p, .language-band p, .contact-email { color: #697062; }
.section-heading .section-kicker { color: #89917e; font-size: 10px; }
.work-section { border-top: 1px solid var(--line); padding-top: 65px; }
.project-tile, .project-tile:not(.flow-tile) { border: 1px solid #dfe3d7; border-radius: 14px; padding: 26px; box-shadow: none; }
.project-tile:hover, .project-tile:nth-child(2):hover { transform: translateY(-4px); box-shadow: 0 7px 25px #2735220a; }
.flow-tile { background: #e7ecdf; color: #34432c; }
.risk-tile { background: #f4f1eb; color: #514b40; }
.vision-tile { background: #edf1ee; color: #3b5044; }
.accepted-sticker { background: #3f5337; color: #fff; transform: none; font-weight: 500; }
.accepted-sticker small { color: #dfebd5; }
.battery-art svg { transform: rotate(-5deg); }
.battery-art svg path[fill] { fill: #f7faf0; stroke: #3f5337; }
.flow-tile:hover .battery-art svg { transform: rotate(0); }
.metric-art { color: #80664b; }
.metric-art > span:not(.metric-loop) { color: #817563; }
.focus-frame { border-color: #9aaf9e; border-radius: 4px; transform: rotate(-4deg); }
.focus-frame .spark { color: #698872; }
.vision-tile:hover .focus-frame .spark { transform: none; }
.tile-title { font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.tile-type { letter-spacing: .06em; }
.archive-count { background: #f0f2eb; }
.archive-number { color: #89907f; }
.about-section { padding-block: 53px 0; }
.about-heading h2 { font-size: 40px; }
.interest-pills > span, .interest-pills > span:first-child, .interest-pills > span:last-child { color: #626f58; border-color: #d5dbcd; transform: none; }
.tool-card { background: #fff; border-radius: 0; border: 0; border-top: 1px solid var(--line); padding: 26px 0; }
.tool-grid { column-gap: 56px; row-gap: 10px; }
.tool-card-top { margin-bottom: 18px; }
.tool-symbol, .tool-card:nth-child(2) .tool-symbol, .tool-card:nth-child(3) .tool-symbol, .tool-card:nth-child(4) .tool-symbol { width: 30px; height: 30px; border-radius: 0; background: transparent; color: #859475; transform: none; }
.tool-card h3 { font-size: 22px; font-weight: 550; }
.tool-chips > span { color: #68735f; border-color: #e5e9df; background: #fafbf8; font-size: 11px; border-radius: 4px; }
.career-grid { column-gap: 56px; row-gap: 0; }
.career-card, .career-card.current-role { background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0; }
.career-card.current-role { border-color: #9bad87; }
.career-number, .current-role .career-number { background: transparent; color: #87907d; border-color: #dfe5d7; }
.career-company { color: #657653; font-size: 12px; }
.career-card h3 { font-size: 21px; font-weight: 550; }
.degree-card, .bachelors-card { background: #f5f7f0; color: #4b5540; border: 1px solid #e1e7d9; border-radius: 10px; }
.degree-card h3 { font-weight: 550; }
.grade-sticker { border-color: #d5ddcb; transform: none; color: #6d795e; font-weight: 400; }
.contact-section h2 { font-size: 50px; }
.contact-orb { background: #e7ecdf; color: #667859; width: 105px; height: 105px; }
.contact-orb:hover { background: #d8e2cc; transform: translate(3px,-3px); }
.footer-bottom { color: #8c9285; }
dialog { background: #fff; border-color: #d7dccf; border-radius: 15px; box-shadow: 0 25px 90px #18221233; }
dialog::backdrop { background: #28312175; backdrop-filter: blur(6px); }
.dialog-close { background: #edf0e7; }
#dialog-description { color: #65715b; }
.acceptance-badge { background: #eef4e6; border-color: #bdcca9; color: #4b6437; }
.button-outline:hover { background: #f1f4eb; }

@media (min-width: 1700px) {
  .scene-copy { padding-top: 68px; }
  .scene-hero { max-height: 1150px; }
}
@media (max-width: 1050px) and (min-width: 701px) {
  .scene-copy { padding-top: 37px; }
  .scene-intro { max-width: 300px; font-size: 14px; }
  .scene-card { width: 340px; padding: 21px 25px 17px; }
  .scene-card { left: 36px; }
  .is-exploring .scene-bottom { padding-right: 36px; }
  .tab-story { left: -176px; }
  .tab-skills { left: 82px; }
  .tab-experience { left: -188px; }
  .tab-education { left: 94px; }
}
@media (max-width: 700px) {
  .header-inner { min-height: 65px; }
  .wordmark { font-size: 27px; }
  .main-nav { background: #fffffff7; }
  .main-nav a { color: #596350; font-size: 17px; }
  .scene-hero { height: 950px; max-height: none; }
  .scene-hero.is-exploring { height: max(950px, var(--expanded-height, 950px)); }
  .scene-copy { width: calc(100% - 48px); padding-top: 29px; }
  .scene-copy h1 { font-size: clamp(36px, 9vw, 48px); margin-top: 12px; }
  .scene-role { font-size: 12px; }
  .scene-intro { font-size: 13px; max-width: 330px; line-height: 1.8; margin-top: 16px; }
  .scene-actions { margin-top: 18px; }
  .scene-art { top: 232px; bottom: auto; height: 468px; }
  .scene-art img { object-position: 64% 50%; }
  .scene-art::after { background: linear-gradient(0deg, #fff 0%, #fff0 17%, #fff0 83%, #fff 100%); }
  .scene-trigger { width: 135px; height: 210px; }
  .scene-invite { font-size: 14px; left: 35%; bottom: -5px; }
  .scene-tabs { top: calc(var(--person-y) + 126px); left: 20px; right: 20px; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
  .scene-tab { position: static; transform: none; padding: 9px 14px; font-size: 11px; min-height: 40px; }
  .scene-card { top: calc(var(--person-y) + 126px + var(--tabs-height, 87px) + 14px); left: 50%; transform: translateX(-50%); width: 360px; max-width: calc(100% - 40px); padding: 21px 23px 16px; }
  .scene-panel h2 { font-size: 21px; }
  .scene-panel p { font-size: 12px; }
  .scene-bottom { bottom: 18px; gap: 10px; }
  .is-exploring .scene-bottom { align-items: center; padding-right: 0; }
  .scene-hint { font-size: 11px; }
  .section-heading h2 { font-size: 35px; }
  .work-section { padding-top: 44px; }
  .about-heading h2 { font-size: 35px; }
  .tool-grid, .career-grid { gap: 0; }
  .tool-card, .career-card { padding: 25px 0; }
  .project-tile, .project-tile:not(.flow-tile) { border-radius: 12px; }
  .contact-section h2 { font-size: 36px; }
}
@media (max-width: 380px) {
  .scene-hero { height: 1000px; }
  .scene-hero.is-exploring { height: max(1000px, var(--expanded-height, 1000px)); }
  .scene-art { top: 252px; height: 478px; }
  .scene-copy h1 { font-size: 35px; }
  .scene-tabs { left: 16px; right: 16px; gap: 6px; }
  .scene-tab { padding-inline: 12px; }
  .scene-panel h2 { font-size: 20px; }
  .scene-panel p { font-size: 11px; }
}
@media (hover: none) {
  .scene-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-tab, .scene-card { animation: none; }
}
@media print {
  .scene-hero { height: auto; max-height: none; overflow: visible; }
  .scene-copy { padding: 20px 0; }
  .scene-copy h1 { font-size: 40px; }
  .scene-art, .scene-trigger, .scene-explorer, .scene-bottom, .scene-actions { display: none !important; }
}