/* An explorable world above an accessible, ordinary reading route. */
.portfolio-home { --bg: #faf8f3; --bg-soft: #f1eee6; --ink: #202d2b; --ink-soft: #4b5954; --muted: #64736b; --accent: #446855; --accent-ink: #244b38; --accent-soft: #e6eee7; --accent-line: #c8d8cb; --line: #dedfd4; --maxw: 1400px; }
.portfolio-home::before { display: none; }
.portfolio-home .navbar { background: rgba(250,248,243,.97); border-bottom: 1px solid var(--line); }
.portfolio-home .nav-logo a { font: 500 1.2rem var(--font-display); letter-spacing: -.02em; }
.portfolio-home .nav-link { font-size: .875rem; }
.exploration { padding: 105px 0 0; }
.world-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.6rem; }
.world-heading-row .world-introduction { font-size: .875rem; color: var(--muted); margin: 0 0 .55rem; }
.world-heading-row h1 { font-size: clamp(1.85rem, 3.1vw, 2.8rem); letter-spacing: -.04em; line-height: 1.2; }
.world-heading-row p { font-size: 1rem; margin-top: .5rem; }
.reading-shortcut { flex-shrink: 0; font-size: .875rem; color: var(--muted); line-height: 1.8; }
.reading-shortcut span { display: block; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.exploration-shell { --scene-paper: #e7e2d5; --scene-ink: #302b25; --scene-muted: #665f51; --scene-line: #b9b09b; --scene-accent: #793e34; display: grid; grid-template-columns: minmax(0, 1fr) 350px; border: 1px solid #6e6555; border-radius: 1px; overflow: hidden; background: var(--scene-paper); box-shadow: 0 0 0 4px #e6e0d4; }
.world-column { min-width: 0; background: var(--scene-paper); display: flex; flex-direction: column; justify-content: center; }
.world-toolbar { min-height: 47px; padding: .7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--scene-ink); background: var(--scene-paper); border-bottom: 1px solid var(--scene-line); }
.world-toolbar > span { font: .875rem var(--font-body); }
.world-toolbar i { color: var(--scene-ink); margin-right: .45rem; }
.world-toolbar button { color: var(--scene-ink); font: .875rem var(--font-body); background: none; border: none; cursor: pointer; padding: .2rem 0; }
.world-toolbar button:hover { text-decoration: underline; text-underline-offset: 4px; }
.world-map { position: relative; width: 100%; aspect-ratio: 3 / 2; flex-shrink: 0; background: var(--scene-paper); overflow: hidden; cursor: crosshair; isolation: isolate; }
.island-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.island-monochrome { filter: grayscale(1); }
.island-colour { opacity: 0; transition: opacity 2.4s ease-in-out; }
.world-map.is-complete .island-colour { opacity: 1; }
.map-station { --station: #eddfb7; position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #183b32; z-index: 3; min-width: 105px; padding: 10px; border-radius: 8px; cursor: pointer; }
.station-games { left: 29%; top: 17%; --station: #dfd0ff; }
.station-ai { left: 69%; top: 16%; --station: #b0e5dc; }
.station-interaction { left: 26%; top: 62%; --station: #f7d995; }
.station-journey { left: 74%; top: 63%; --station: #f1c5ae; }
.station-symbol { display: grid; place-items: center; width: 26px; height: 26px; color: var(--scene-ink); background: #e7e2d5f5; border: 1px solid #625b4e; border-radius: 1px; font-size: .8125rem; margin-bottom: 4px; }
.station-name { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--scene-ink); background: #e7e2d5f5; padding: .1rem .45rem; border-bottom: 1px solid #6e6555; white-space: nowrap; }
.station-state { font-size: .75rem; color: var(--scene-muted); margin-top: .2rem; padding: .1rem .4rem; background: #e7e2d5ee; }
.map-station:hover .station-symbol, .map-station:focus-visible .station-symbol { background: #cbc1aa; }
.map-station.current .station-symbol { outline: 1px solid #625b4e; outline-offset: 3px; background: #ccc2ae; }
.map-station.visited .station-name::after { content: ' ✓'; color: var(--scene-accent); }
.player-token { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -100%); pointer-events: none; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.player-you { font: 500 .625rem var(--font-body); color: var(--scene-ink); background: #e7e2d5e8; padding: 1px 4px; margin-bottom: 0; }
.player-piece { display: block; width: 52px; height: 78px; transform-origin: 50% 95%; }
.player-art { display: block; width: 100%; height: 100%; object-fit: contain; transform: translateY(4px); transform-origin: 50% 95%; filter: grayscale(1); transition: filter 2.4s ease-in-out; }
.world-map.is-complete .player-art { filter: grayscale(0); }
/* Trace the illustrated silhouette so the sprite blends into the map at any scale. */
.player-art { clip-path: polygon(41.70% 6.97%, 42.19% 5.66%, 45.21% 4.49%, 48.05% 3.91%, 51.86% 3.71%, 54.79% 4.23%, 57.13% 5.47%, 57.62% 7.16%, 56.64% 9.11%, 56.25% 10.81%, 56.64% 11.78%, 55.66% 13.22%, 55.57% 14.06%, 56.64% 14.91%, 57.62% 17.19%, 61.13% 18.23%, 65.82% 19.73%, 68.16% 21.55%, 69.34% 23.76%, 70.31% 26.69%, 71.48% 29.88%, 72.95% 33.14%, 73.14% 35.22%, 71.97% 37.24%, 70.21% 39.39%, 68.75% 41.28%, 69.63% 44.21%, 70.51% 47.20%, 70.31% 49.61%, 68.36% 51.24%, 66.70% 52.02%, 67.38% 56.32%, 68.75% 62.76%, 70.02% 67.77%, 68.85% 68.55%, 66.50% 69.14%, 66.50% 70.44%, 63.48% 71.29%, 62.70% 74.22%, 63.09% 77.99%, 62.30% 81.12%, 61.62% 83.33%, 61.82% 86.85%, 62.30% 90.63%, 62.21% 93.23%, 61.52% 94.40%, 59.86% 95.25%, 57.13% 95.51%, 55.08% 94.86%, 53.91% 93.68%, 53.91% 91.86%, 54.69% 89.32%, 55.08% 86.65%, 54.49% 84.64%, 53.91% 82.68%, 54.00% 79.17%, 52.73% 75.13%, 51.95% 71.81%, 52.05% 69.08%, 50.10% 68.23%, 45.90% 67.84%, 46.00% 71.55%, 45.80% 74.93%, 44.82% 77.80%, 45.31% 79.62%, 44.53% 81.38%, 43.75% 83.33%, 44.63% 85.81%, 44.73% 88.67%, 44.24% 90.17%, 40.63% 91.15%, 38.67% 90.63%, 36.04% 91.54%, 32.62% 91.99%, 30.08% 92.06%, 27.34% 91.41%, 26.07% 90.63%, 26.56% 89.58%, 28.71% 88.61%, 31.45% 87.76%, 34.28% 86.39%, 36.04% 84.64%, 36.62% 83.20%, 37.11% 81.45%, 36.04% 80.79%, 36.62% 79.49%, 36.52% 77.99%, 36.82% 74.41%, 37.11% 68.88%, 34.18% 69.08%, 31.93% 69.73%, 30.18% 71.16%, 29.20% 71.29%, 28.91% 70.57%, 29.88% 65.04%, 31.15% 59.96%, 32.42% 55.14%, 30.37% 53.97%, 29.20% 52.86%, 29.20% 51.56%, 29.69% 50.13%, 30.27% 48.76%, 29.39% 48.37%, 29.30% 47.85%, 30.96% 43.42%, 31.35% 39.91%, 32.23% 37.37%, 32.32% 35.94%, 33.20% 33.40%, 33.69% 29.56%, 34.28% 26.30%, 34.86% 23.18%, 35.84% 21.22%, 38.77% 19.66%, 42.48% 18.49%, 40.33% 18.23%, 40.53% 17.58%, 43.07% 15.43%, 45.12% 14.32%, 45.31% 13.48%, 43.65% 12.57%, 42.38% 11.13%, 41.70% 9.51%, 42.09% 8.40%); }
.player-token[data-facing="left"] .player-piece { transform: scaleX(-1); }
.player-shadow { position: absolute; width: 24px; height: 6px; border-radius: 50%; background: #302b2533; bottom: -2px; z-index: -1; }
.walking .player-art { animation: traveller-step .42s ease-in-out infinite; }
.walking .player-shadow { animation: traveller-shadow .42s ease-in-out infinite; }
@keyframes traveller-step { 0%, 100% { transform: translateY(4px) rotate(-1.5deg); } 50% { transform: translateY(1px) rotate(1.5deg); } }
@keyframes traveller-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.85); opacity: .7; } }
.arrival-toast { position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%, 10px); background: #fff9e9; color: #2c4a39; border: 1px solid #9cae8c; padding: .5rem .9rem; border-radius: 6px; font-size: .875rem; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 6; }
.arrival-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.arrival-toast { width: max-content; max-width: calc(100% - 2rem); white-space: normal; text-align: center; background: var(--scene-paper); color: var(--scene-ink); border-color: #625b4e; border-radius: 1px; }
.world-controls { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .7rem 1rem; margin-top: auto; background: var(--bg); border-top: 1px solid var(--line); }
.world-toolbar { margin-bottom: auto; }
.world-controls p { color: var(--muted); font-size: .875rem; }
.world-controls kbd { font-family: var(--font-mono); font-size: .75rem; border: 1px solid #c8cfc2; border-radius: 3px; padding: .15rem .25rem; white-space: nowrap; }
.world-controls button { font-size: .875rem; background: none; border: none; color: var(--accent-ink); white-space: nowrap; cursor: pointer; padding: .3rem 0; }
.touch-controls { display: none; justify-content: center; gap: .6rem; padding: .7rem; background: var(--bg); }
.touch-controls button { width: 44px; height: 44px; border-radius: 4px; border: 1px solid #bfc9b9; background: var(--bg); color: var(--ink); font-size: 1.2rem; cursor: pointer; touch-action: manipulation; }
.field-notes { padding: 1.3rem 1.4rem; background: #e3dcca; display: flex; flex-direction: column; min-width: 0; border-left: 1px solid #948772; }
.journal-label { display: flex; justify-content: space-between; gap: 1rem; font: .875rem var(--font-body); color: var(--ink-soft); }
.journal-label span:last-child { white-space: nowrap; }
.journey-progress { height: 4px; border-radius: 2px; background: #e4e7d8; margin: .8rem 0 1.25rem; overflow: hidden; }
.journey-progress span { height: 100%; background: #587d50; display: block; width: 0; transition: width .35s; }
.host-intro { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 1.3rem; }
.host-intro img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 3px solid #e8ecdb; }
.host-intro span { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.host-intro strong { color: var(--ink); font-size: 1rem; }
.field-kicker { font: .8125rem/1.6 var(--font-body); color: var(--muted); display: block; }
.field-notes h2 { font-size: 1.65rem; line-height: 1.15; letter-spacing: -.025em; margin: .55rem 0 .7rem; }
#field-description { font-size: 1rem; line-height: 1.75; }
.welcome-affiliation { font-size: .8125rem; line-height: 1.85; margin-top: 1.25rem; color: var(--muted); }
.field-work { display: block; padding: .7rem 0; border-bottom: 1px dashed #d7dbc7; }
.field-work:first-child { margin-top: .5rem; }
.field-work small { color: var(--muted); display: block; font: .75rem/1.6 var(--font-body); }
.field-work strong { display: block; color: #2f573d; font-size: .9375rem; line-height: 1.45; margin: .2rem 0; }
.field-work > span { display: block; color: #64715e; font-size: .875rem; line-height: 1.6; }
.field-work:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.field-more { font-size: .875rem; display: inline-block; margin: .8rem 0 1rem; font-weight: 500; }
.next-place { width: 100%; text-align: left; background: #36563e; color: #fffbed; border: 1px solid #36563e; border-radius: 5px; padding: .75rem .85rem; font: 500 .875rem var(--font-body); cursor: pointer; margin-top: auto; }
.next-place:hover { background: #24492f; }
.passport { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: 1.1rem; }
.passport button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 55px; border: 1px dashed #bdc5b0; border-radius: 6px; background: none; color: #78856b; cursor: pointer; padding: .5rem .1rem; }
.passport span { font: .75rem var(--font-mono); letter-spacing: -.06em; }
.passport i { font-size: 1rem; }
.passport button.collected { color: #446d3c; border-style: solid; border-color: #b6ca9f; background: #edf2df; }
.passport button:hover { border-color: #446d3c; color: #446d3c; }
.journey-complete { margin-top: 1rem; padding: 1rem 0 0; border-top: 1px solid #d9e1c7; }
.journey-complete strong { font-family: var(--font-display); font-size: 1.25rem; }
.journey-complete p { font-size: .875rem; margin: .4rem 0; }
.journey-complete a { display: inline-block; font-size: .875rem; margin: .4rem .75rem 0 0; font-weight: 500; }
.journal-footnote { font-size: .75rem; color: #7d866f; margin: .85rem 0 0; text-align: center; }
.world-bottom { display: flex; align-items: center; gap: 1.5rem; padding: 1.2rem 0 1.8rem; font-size: .875rem; }
.world-bottom > span { font: .75rem var(--font-mono); letter-spacing: .1em; margin-right: auto; }
.world-bottom b { color: var(--accent); margin: 0 .6rem; }
.portfolio-home .section { padding: 70px 0; }
.portfolio-home .section-head h2 { font-size: clamp(1.65rem, 2.6vw, 2.2rem); }
.portfolio-home .section-head > .lede { max-width: 23rem; margin: 0; }
.portfolio-home .section-head .lede { font-size: 1rem; }
.project-section { background: var(--bg); }
.project-section .container { max-width: 1120px; }
.project-section .section-head { margin-bottom: 1rem; }
.all-research-link { font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.selected-project { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; padding: 2.25rem 0; }
.selected-project + .selected-project { border-top: 1px solid var(--line); }
.project-context { font-size: .8125rem; color: var(--muted); margin-bottom: .55rem; }
.project-heading h3 { font-size: clamp(1.5rem, 2.25vw, 1.9rem); line-height: 1.25; font-weight: 500; }
.project-heading h3 a { color: var(--ink); }
.project-heading h3 a:hover { color: var(--accent); }
.project-publication { font-size: .8125rem; color: var(--muted); line-height: 1.7; margin-top: 1rem; }
.project-description { padding-top: 1.9rem; max-width: 36rem; }
.project-description > p { font-size: 1.0625rem; line-height: 1.75; }
.project-description .project-detail { font-size: .9375rem; margin-top: .65rem; color: var(--muted); }
.paper-link { display: inline-block; font-size: .875rem; margin-top: 1rem; border-bottom: 1px solid var(--accent-line); }
.paper-link:hover { border-color: var(--accent); }
.theme-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.portfolio-home .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.portfolio-home .theme-card { padding: 0; border: 0; border-radius: 0; background: none; }
.portfolio-home .theme-card:hover { box-shadow: none; transform: none; }
.portfolio-home .theme-card h3 { font-size: 1.15rem; line-height: 1.4; }
.portfolio-home .theme-card p { font-size: 1rem; }
.theme-link { display: inline-flex; gap: .8rem; font-size: .875rem; margin-top: .85rem; font-weight: 500; }
.portfolio-home .pub { grid-template-columns: 145px 1fr; padding: 1.5rem 0; }
.portfolio-home .chip { border-radius: 6px; font-family: var(--font-body); font-size: .875rem; }
.portfolio-home .pub-note { font-size: .875rem; }
.portfolio-home .pub-venue, .portfolio-home .pub-year, .portfolio-home .tag { font-size: .75rem; }
.portfolio-home .experience-timeline { max-width: none; }
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 2000; padding: .7rem 1rem; background: var(--ink); color: #fff; transform: translateY(-200%); border-radius: 6px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.portfolio-home :focus-visible { outline: 3px solid #b87f39; outline-offset: 4px; }
.world-map:focus-visible { outline-offset: -4px; }
.portfolio-home [id] { scroll-margin-top: 95px; }
.world-controls, .touch-controls, #guide-button, .next-place, .passport, #player-token { visibility: hidden; }
.exploration-ready :is(.world-controls, #guide-button, .next-place, .passport, #player-token) { visibility: visible; }
.mobile-field-link, .mobile-map-link { display: none; }
/* Paper notes and ink inventory slots share the map's subdued palette. */
.exploration-shell .world-controls, .exploration-shell .touch-controls { background: var(--scene-paper); border-color: var(--scene-line); }
.exploration-shell .world-controls p, .exploration-shell .field-kicker, .exploration-shell .field-work small, .exploration-shell .field-work > span, .exploration-shell .welcome-affiliation, .exploration-shell .journal-footnote { color: var(--scene-muted); }
.exploration-shell .world-controls button, .exploration-shell .field-more, .exploration-shell .field-work strong, .exploration-shell .journal-label, .exploration-shell .field-notes h2, .exploration-shell #field-description, .exploration-shell .mobile-field-link, .exploration-shell .mobile-map-link, .exploration-shell .journey-complete a { color: var(--scene-ink); }
.exploration-shell .world-controls kbd, .exploration-shell .field-work, .exploration-shell .journey-complete { border-color: var(--scene-line); }
.exploration-shell .touch-controls button { background: #e3dcca; color: var(--scene-ink); border-color: #807461; border-radius: 1px; }
.exploration-shell .next-place { background: #494438; color: #f3ecda; border: 1px solid #302b25; border-radius: 1px; }
.exploration-shell .next-place:hover { background: #302b25; }
.exploration-shell .passport button { border: 1px solid #9c907c; border-radius: 1px; color: #746957; background: #e9e2d3; }
.exploration-shell .passport button.collected { color: #793e34; border-color: #793e34; background: #d8cbb5; box-shadow: inset 0 0 0 2px #e9e2d3; }
.exploration-shell .passport button:hover { border-color: #302b25; color: #302b25; }
.exploration-shell .host-intro img { border-color: #cec3ac; filter: grayscale(1); }
.exploration-shell .journey-progress { background: #cfc4ad; }
.exploration-shell .journey-progress span { background: #793e34; }
.exploration-shell :focus-visible { outline-color: #793e34; }
@media (min-width: 941px) {
    .field-notes { max-height: 690px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b4c0a5 #f7f6ef; }
    .next-place { margin-top: 1rem; }
}
@media (max-width: 1150px) {
    .exploration-shell { grid-template-columns: minmax(0, 1fr) 330px; }
    .field-notes { padding: 1.1rem; }
    .world-controls { flex-wrap: wrap; }
}
@media (max-width: 940px) {
    .exploration-shell { grid-template-columns: 1fr; }
    .field-notes { border-left: none; border-top: 1px solid #d1d7c8; padding: 1.5rem; }
    .mobile-field-link { display: block; padding: .4rem 1rem .8rem; color: var(--accent-ink); font-size: .875rem; text-align: center; }
    .mobile-map-link { display: inline-block; font-size: .875rem; margin-top: 1rem; }
    #field-works { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .field-work { margin-top: .5rem; }
    .passport, .next-place { max-width: 360px; }
    .journal-footnote { text-align: left; }
    .portfolio-home .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reading-shortcut { display: none; }
    .selected-project { gap: 2rem; }
}
@media (pointer: coarse) { .exploration-ready .touch-controls { display: flex; visibility: visible; } }
@media (max-width: 600px) {
    .portfolio-home { --pad: 1rem; }
    .exploration { padding-top: 94px; }
    .world-heading-row { margin-bottom: 1.1rem; }
    .world-heading-row h1 { font-size: 1.95rem; }
    .world-heading-row .eyebrow { font-size: .75rem; }
    .world-toolbar { padding: .65rem .75rem; flex-wrap: wrap; gap: .4rem; }
    .world-toolbar > span { font-size: .75rem; letter-spacing: 0; }
    .world-map { min-height: 0; }
    .player-piece { width: 38px; height: 57px; }
    .player-shadow { width: 18px; height: 4px; }
    .station-state { display: none; }
    .map-station { padding: 5px; min-width: 95px; }
    .station-name { font-size: .875rem; }
    .station-interaction .station-name { white-space: normal; max-width: 100px; line-height: 1.2; }
    .field-notes { padding: 1.1rem; }
    #field-works { grid-template-columns: 1fr; gap: 0; }
    .world-bottom { flex-wrap: wrap; gap: .75rem 1.2rem; }
    .world-bottom > span { width: 100%; letter-spacing: .04em; }
    .world-controls p { font-size: .875rem; line-height: 1.8; }
    .selected-project { grid-template-columns: 1fr; gap: .8rem; padding: 1.8rem 0; }
    .project-description { padding-top: 0; }
    .portfolio-home .theme-grid { grid-template-columns: 1fr; gap: 2rem; }
    .portfolio-home .pub { grid-template-columns: 1fr; gap: .7rem; }
    .portfolio-home .section { padding: 50px 0; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-home *, .portfolio-home *::before, .portfolio-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }