:root {
  --ink:#eee0ce; --muted:#beb1bb; --gold:#d5ae83; --paper:#faf5e9;
  --line:#ffffff20; --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif;
}
* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;background:#28283e;color:var(--ink);font:14px/1.6 var(--sans);overflow:hidden}
a {color:inherit;text-decoration:none}
button,input,textarea {font:inherit}
button {border:0;background:none;color:inherit;cursor:pointer}
button:disabled {opacity:.2;cursor:default}
a:hover,button:hover {color:#f8d9af}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible {outline:2px solid #efc190;outline-offset:5px}
.skip-link {position:fixed;left:18px;top:-100px;z-index:20;background:#efe1c9;color:#322c3c;padding:10px}
.skip-link:focus {top:10px}
.world-header {position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 32px;background:linear-gradient(#211f35d9,#211f3500)}
.brand {display:flex;gap:12px;align-items:center;font-size:13px;font-weight:600;line-height:1.5}
.brand-mark {display:grid;place-items:center;width:39px;height:39px;font:25px var(--serif);border:1px solid #d6b68d55;border-radius:4px;color:#ecd3b1;background:#28253780}
.brand small {display:block;color:#bfacb9;font-size:8px;letter-spacing:1.7px;margin-top:3px}
.world-header nav {display:flex;align-items:center;gap:7px;font-size:11px}
.world-header nav>a,.world-header nav>button {padding:8px 12px;border:1px solid #cfbca22b;border-radius:4px;background:#2b293bcc;backdrop-filter:blur(8px)}
.world-header nav>a[aria-current] {border-color:#c6a27b83;background:#57465755}
#standard-toggle {border-color:#c6a27b70;background:#8c6c4933}
.immersive {position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 22% 15%,#906d7650,transparent 55%),linear-gradient(160deg,#4d465e 0%,#615160 38%,#33394e 70%,#202c43 100%)}
.scene {position:absolute;inset:0}
.scene canvas {display:block;width:100%;height:100%;image-rendering:pixelated}
.scene-vignette {position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#171b3238 100%)}
.home-intro,.room-heading {position:absolute;left:40px;top:125px;z-index:2;pointer-events:none;max-width:420px}
.home-intro a {pointer-events:auto}
.eyebrow {font-size:9px;letter-spacing:2px;font-weight:600;color:var(--gold);margin:0 0 14px}
h1 {font:normal clamp(40px,4vw,62px)/1.05 var(--serif);letter-spacing:-1.8px;margin:0 0 20px}
em {font-family:var(--serif);color:#d6bda8;font-weight:normal}
.home-intro>p:not(.eyebrow),.room-heading>p:not(.eyebrow) {font-size:12px;line-height:1.85;color:#d1c3cc;max-width:330px}
.text-link {font-size:11px;display:inline-flex;gap:22px;margin-top:7px;border-bottom:1px solid #b79b8550;padding-bottom:6px}
.room-heading h1 {font-size:40px;margin-bottom:12px}
.room-heading {top:120px;max-width:340px}
.world-label {position:absolute;z-index:3;transform:translate(-50%,0);display:grid;grid-template-columns:1fr 22px;align-items:center;gap:2px 10px;text-align:left;white-space:nowrap;padding:10px 13px;border:1px solid #c8a98766;border-radius:5px;background:#29283dd9;box-shadow:0 7px 20px #14172840;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.world-label:hover {background:#4b3d4ded;border-color:#e3be95;color:#ffe9cb}
.label-title {font:16px var(--serif)}
.label-arrow {display:grid;place-items:center;font:14px var(--sans);color:#dfbd92;width:20px;height:20px;background:#e8c39517;border-radius:3px}
.world-label small {grid-column:1 / 3;font-size:8px;letter-spacing:1.6px;color:#c4b7c0}
.small-label {padding:6px 9px;gap:2px 7px;background:#29283dcc}
.small-label .label-title {font:11px var(--sans)}
.small-label .label-arrow {font-size:12px;width:17px;height:17px}
.is-moving .world-label {pointer-events:none;opacity:.15}
.world-footer {position:absolute;left:32px;right:32px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d2bcc522;padding-top:15px;font-size:8px;letter-spacing:1.6px;color:#bfaebc;z-index:2}
.world-instruction {font:11px var(--serif);letter-spacing:.2px;color:#d0bdc7}
.world-footer button {font-size:9px;letter-spacing:.5px;color:#c9b4bb}
.scene-status {position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);padding:15px;background:#28283dde;border:1px solid #ae927950;border-radius:5px;font-size:12px}
.exhibit-index {position:absolute;right:32px;top:124px;z-index:3;display:flex;flex-direction:column;gap:8px;min-width:170px;padding:17px 20px;border-left:1px solid #d0ac8550;background:linear-gradient(90deg,#29283dab,transparent)}
.exhibit-index .eyebrow {margin:0 0 3px;font-size:8px}
.exhibit-index a {font-size:11px}
.pan-arrow {position:absolute;top:57%;z-index:4;width:42px;height:80px;font:52px/1 var(--serif);background:#e8d2b30a;border:1px solid #e3c99f20;border-radius:6px;color:#e5d1bd99;backdrop-filter:blur(4px)}
.pan-arrow:hover:not(:disabled) {background:#e8d2b323;color:#fff0d5}
.pan-arrow.left {left:24px}.pan-arrow.right {right:24px}
.viewpoints {position:absolute;bottom:85px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:4px;border:1px solid #b89d8540;background:#26263ccc;border-radius:5px;padding:4px;white-space:nowrap}
.viewpoints button {font-size:10px;padding:7px 13px;border-radius:3px;color:#c4b3bc}
.viewpoints button[aria-pressed=true] {background:#a5836240;color:#f3dfc2}
.catalogue {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.catalogue-card {display:flex;align-items:center;gap:20px;border:1px solid #d3dac8;border-radius:8px;background:#faf8f0;padding:23px;color:#324536}
.object-art {display:block;width:78px;height:78px;flex-shrink:0}.object-art svg {width:100%;height:100%}
.catalogue-card .eyebrow {color:#71836a;font-size:8px;margin:0}
.catalogue-card h3 {font:25px var(--serif);margin:8px 0}
.catalogue-card p {font-size:12px;color:#6f7968;margin:0}
.catalogue-card .card-arrow {margin-left:auto;align-self:flex-start}
.catalogue-card:hover {border-color:#95a181;background:#fffff8;color:#536542}
.content-note {font-size:12px;color:#7d806c;margin-top:25px}
/* HTML dossier panels remain sharp, selectable, and keyboard accessible. */
dialog {border:1px solid #a98b6d;border-radius:10px;background:#f6efe0;color:#353a34;max-width:740px;width:calc(100% - 32px);max-height:88dvh;padding:38px;box-shadow:0 25px 100px #141b4460}
dialog::backdrop {background:#191c3a80;backdrop-filter:blur(5px)}
.dialog-close {position:sticky;float:right;top:0;right:0;z-index:3;font-size:26px;width:34px;height:34px;border-radius:50%;background:#e5dfcf;color:#564e4b}
dialog .eyebrow {color:#92725a;max-width:90%}
dialog h2 {font:38px/1.1 var(--serif);letter-spacing:-1px;margin:17px 0}
dialog h3 {font:21px var(--serif);margin:25px 0 8px}
dialog a:focus-visible,dialog button:focus-visible,dialog textarea:focus-visible {outline-color:#835b39}
.detail-art {border-radius:6px;background:#e3ddcf;margin-bottom:25px;min-height:130px;display:grid;place-items:center}
.detail-art .object-art {width:120px;height:120px}
.detail-summary {font-size:16px;color:#727263;line-height:1.8}
.detail-section p,.editor-content p {color:#606958;font-size:14px;line-height:1.8}
.detail-links {display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.primary-button {background:#485c45;color:#f8efdf;padding:12px 19px;border-radius:5px;display:inline-block;font-size:12px}
.primary-button:hover {background:#627557;color:white}
.detail-catalogue .catalogue-card {margin-top:15px}
figure {margin:25px 0}figure img,figure video {max-width:100%;height:auto;border-radius:6px}figcaption {font-size:12px;color:#7e7d6d}
#editor-dialog {max-width:900px}.editor-content label {display:block;font-weight:600;margin:16px 0 8px}
textarea {width:100%;min-height:300px;resize:vertical;font:12px/1.6 monospace;border:1px solid #b4b79e;border-radius:5px;padding:15px;background:#f7f5e9;color:#354934}
.editor-actions {display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.editor-actions>button:not(.primary-button),.file-button {border:1px solid #c4c8b5;border-radius:5px;padding:10px;font-size:12px!important;cursor:pointer}
.editor-actions .file-button {display:inline-block;font-weight:normal;margin:0}input[type=file] {width:100%;font-size:11px}.file-button input {max-width:160px}
#editor-status {margin:10px 0;min-height:24px}.noscript {position:fixed;inset:100px 20px 20px;z-index:6;padding:30px;background:#f3ecdf;color:#354535}
@media(max-width:1000px) {
  .world-header {padding:18px 22px}.world-header nav {gap:5px}.world-header nav>a,.world-header nav>button {padding:7px 9px;font-size:10px}
  .home-intro,.room-heading {left:28px;top:108px;max-width:300px}h1 {font-size:46px}.home-intro>p:not(.eyebrow) {font-size:11px;max-width:270px}
  .room-heading h1 {font-size:32px}.exhibit-index {right:24px;top:110px;min-width:145px;padding:12px 15px}
  .world-label .label-title {font-size:14px}.small-label .label-title {font-size:10px}
  .catalogue-card {padding:18px;gap:14px}.catalogue-card .object-art {width:58px;height:58px}
}
@media(max-width:650px) {
  .world-header {padding:14px 16px;flex-wrap:wrap;gap:12px;background:linear-gradient(#252237ee,#25223788,#25223700)}
  .brand {font-size:12px}.brand-mark {width:31px;height:31px;font-size:22px}.brand small {font-size:7px;letter-spacing:1.1px}
  .world-header nav {width:100%;gap:4px;justify-content:space-between}.world-header nav>a,.world-header nav>button {padding:6px 7px;font-size:9px}.world-header nav>a[href='#experience'] {display:none}
  .home-intro,.room-heading {left:22px;top:126px;max-width:280px}.home-intro .eyebrow {font-size:7px;letter-spacing:1.3px;margin-bottom:10px}
  h1 {font-size:35px;letter-spacing:-1px;margin-bottom:12px}.home-intro h1 br {display:none}.home-intro h1 em {display:block}
  .home-intro>p:not(.eyebrow) {font-size:10px;line-height:1.65;max-width:260px}.text-link {font-size:10px;margin-top:1px}.desktop-break {display:none}
  body[data-world=overview] .scene {top:300px;bottom:75px}
  body[data-world=overview] .home-intro {top:120px}
  .world-label {padding:7px 9px;gap:2px 5px}.world-label .label-title {font-size:13px}.world-label small {font-size:6px;letter-spacing:1px}
  .small-label {padding:4px 6px}.small-label .label-title {font-size:8px}.small-label .label-arrow {width:12px;font-size:10px}
  .world-footer {left:16px;right:16px;bottom:17px;font-size:7px;padding-top:10px;letter-spacing:.8px}.world-instruction {display:none}.world-footer button {font-size:8px}
  .room-heading {top:122px;max-width:240px}.room-heading h1 {font-size:27px}.room-heading .eyebrow {font-size:7px;margin-bottom:10px}.room-heading>p:not(.eyebrow) {font-size:10px;max-width:215px}
  .exhibit-index {top:auto;right:16px;left:16px;bottom:115px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px;border-left:0;border-top:1px solid #d0ac8550;background:#29283dcc;gap:9px}.exhibit-index .eyebrow {font-size:6px;margin:0}.exhibit-index a {font-size:9px}
  .pan-arrow {width:29px;height:62px;top:55%;font-size:38px}.pan-arrow.left {left:7px}.pan-arrow.right {right:7px}
  .viewpoints {bottom:67px}.viewpoints button {font-size:8px;padding:7px 9px}
  .standard-content {padding:35px 20px}.standard-content h1 {font-size:40px}.standard-nav {gap:13px;font-size:11px}.catalogue {grid-template-columns:1fr}.catalogue-card h3 {font-size:22px}
  dialog {padding:24px;max-height:90dvh}dialog h2 {font-size:30px}.detail-summary {font-size:14px}.detail-catalogue .catalogue-card {padding:15px}.detail-catalogue .object-art {width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important;scroll-behavior:auto!important}}


/* Canal UI: restrained ivory type, fine rules, and a game-menu selection cursor. */
.canal-mode {background:#15252c;--gold:#c5b184;--ink:#efe9d6;--muted:#b8bdb7}
.canal-mode .immersive {background:#192b34}
.canal-mode[data-world=overview] .scene {inset:0}
.canal-mode .scene canvas {image-rendering:pixelated}
.canal-mode .home-intro {display:none}
.canal-mode .world-header {padding:23px 35px;background:linear-gradient(#0d171dda,transparent);align-items:flex-start}
.canal-mode .brand-mark {border-radius:0;background:transparent;border-color:#bbaa7844}
.canal-mode .brand small {color:#9ca9a9}
.canal-mode .world-header nav>a,.canal-mode .world-header nav>button {border-radius:0;background:#14242b80;border-color:#aeac8c33;backdrop-filter:blur(5px)}
.canal-mode .scene-vignette {background:linear-gradient(90deg,#0a192357,transparent 32%),linear-gradient(0deg,#0a1828cc,transparent 20%,transparent 86%,#101c2777)}
.canal-mode .world-footer {color:#b6bdae;border-color:#b5a88444}
.canal-mode .world-instruction {color:#c5c6b5}
.canal-mode dialog {border-radius:1px;background:#17272af5;border:1px solid #b7a77c88;box-shadow:0 0 0 3px #142329,0 0 0 4px #b7a77c33,0 25px 100px #0008}
@media(max-width:800px){
 .canal-mode .world-header {padding:18px;gap:8px}
 .canal-mode .world-header nav {gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:390px}
 .canal-mode .world-header nav>a,.canal-mode .world-header nav>button {padding:6px 8px;font-size:10px}
}
@media(max-width:500px){
 .canal-mode .world-header {padding:14px;display:block}
 .canal-mode .brand small {font-size:7px}
 .canal-mode .world-header nav {margin-top:12px;max-width:none;justify-content:flex-start;gap:4px}
 .canal-mode .world-header nav>a,.canal-mode .world-header nav>button {padding:5px 7px;font-size:9px}
 .canal-mode .world-footer {left:16px;right:16px;bottom:18px;padding-top:10px}
 .canal-mode .world-instruction {display:none}
}

/* Personal portfolio framing and room navigation. */
#room-entry-list {border-top:1px solid #b5a88444;padding-top:12px;margin-top:8px;max-height:175px;overflow-y:auto}
#room-entry-list .eyebrow {margin:0 0 4px}
#room-entry-list .room-record {font:12px/1.4 Arial,sans-serif;min-height:38px;padding-block:7px}
#leave-room {font-size:12px;border-top:1px solid #b5a88433;margin-top:8px}
.canal-mode dialog {color:#eee5d3}
.canal-mode dialog .detail-summary,.canal-mode dialog .detail-section p,.canal-mode dialog .editor-content p {color:#cad0c3}
.canal-mode dialog .detail-art {background:#283a3b}
.canal-mode dialog .eyebrow {color:#c0ad7c}

@media(max-width:500px){
 #room-entry-list {grid-column:1/-1;margin-top:3px;padding-top:7px;max-height:115px}
 #room-entry-list .room-record {font-size:11px;padding:6px 12px;min-height:32px}
 #room-entry-list .eyebrow {font-size:7px}
 #leave-room {min-height:30px;font-size:10px;margin-top:0;border-top:0}
 .canal-interior #canal-lights {grid-column:auto;margin-top:0;border-top:0}
}

/* Scenery is a deliberate choice, distinct from section navigation. */
.world-header nav #view-switch {display:flex;align-items:center;gap:11px;min-height:44px;padding:8px 14px;margin-left:8px;border:1px solid #f0d49b;border-radius:3px;background:linear-gradient(120deg,#ecd4a5,#c4a571);color:#242c2c;box-shadow:0 0 0 3px #cfb67b18,0 5px 20px #0003}
#view-switch .switch-symbol {font-size:25px;line-height:1}
#view-switch small {display:block;font-size:7px;letter-spacing:1.4px;line-height:1.3}
#view-switch strong {display:block;font-size:12px;font-weight:600;line-height:1.6}
.world-header nav #view-switch:hover {background:#fff0ce;color:#162630;box-shadow:0 0 0 3px #e8cf8c33}
.world-header nav #view-switch:focus-visible {outline:3px solid #fff0c5;outline-offset:4px}
.world-label.exhibit {border-color:#efd49b;background:#152832ed;color:#fff0d1;box-shadow:0 0 0 2px #cfb67b28,0 6px 24px #0005}
.canal-exhibit {width:170px;height:52px;padding:8px 11px;border-radius:2px;font-family:Arial,sans-serif}
.canal-exhibit .label-title {font:600 12px Arial,sans-serif;overflow:hidden;text-overflow:ellipsis}
.canal-exhibit small {font-size:8px;letter-spacing:1px;color:#e7c688}
.canal-exhibit .label-arrow {background:#e2c084;color:#24333a;border-radius:0}
.canal-exhibit::after {content:'';position:absolute;left:50%;top:100%;height:12px;width:1px;background:#f0d49b}
.canal-exhibit:hover,.canal-exhibit:focus-visible,.canal-exhibit.is-highlighted {background:#f0dbad;color:#1e3037;border-color:#fff1d0;box-shadow:0 0 0 3px #efd49b44,0 8px 26px #0005}
.canal-exhibit:hover small,.canal-exhibit:focus-visible small,.canal-exhibit.is-highlighted small {color:#445150}
.profile-dialog {max-width:810px}
.profile-dialog .detail-summary {font-size:18px}
.profile-links {display:flex;gap:10px;flex-wrap:wrap;border-block:1px solid #b7a77c55;padding:15px 0;margin:22px 0}
.profile-links a {padding:9px 15px;background:#beaa7b22;border:1px solid #b7a77c88;font-size:13px;min-height:40px}
.profile-links a:hover {background:#beaa7b44}
.profile-dialog .detail-section {border-left:2px solid #b7a77c77;padding-left:18px;margin-top:24px}
.profile-dialog .detail-section h3 {margin:0 0 8px}
.canal-mode .standard-nav a[href='#certificates'] {display:inline}
@media(max-width:800px){
 .world-header {flex-wrap:wrap;gap:12px}.world-header nav {flex-wrap:wrap;justify-content:flex-end}
 .world-header nav #view-switch {padding:7px 10px;gap:8px;margin-left:3px}
}
@media(max-width:500px){
 .world-header nav #view-switch {order:-1;margin:0 0 5px;flex-basis:100%;justify-content:center;min-height:42px}
 #view-switch strong {font-size:12px}
 .canal-exhibit {width:116px;height:44px;padding:6px 7px;gap:2px 5px;grid-template-columns:1fr 17px}
 .canal-exhibit .label-title {font-size:10px}.canal-exhibit small {font-size:6px;letter-spacing:.6px}.canal-exhibit .label-arrow {width:17px;height:17px;font-size:12px}
 .profile-dialog .detail-summary {font-size:15px}
}
.canal-mode dialog a:focus-visible,.canal-mode dialog button:focus-visible {outline-color:#efd49b}
@media(max-width:500px){
 body:not(.canal-mode)[data-world=overview] .home-intro {top:178px}
 body:not(.canal-mode)[data-world=overview] .scene {top:350px}
 body:not(.canal-mode) .room-heading {top:176px}
}

/* Islands view: dusk-lit low-poly world with plum glass panels and warm cream type. */
.island-mode {--isl-text:#fff1e0;--isl-muted:#d6e0da;--isl-panel:#16303bd6;--isl-panel-solid:#16303b;--isl-line:#ffffff2e;--isl-accent:#f2b66d;--isl-label:#fff4e6;--isl-label-ink:#1f3a44;--isl-label-muted:#5f7a80;--isl-label-accent:#b8661f;--isl-sans:"Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:#1d3a4a}
.canal-mode {--isl-text:#fff1e0;--isl-muted:#d6e0da;--isl-panel:#16303bd6;--isl-panel-solid:#16303b;--isl-line:#ffffff2e;--isl-accent:#f2b66d;--isl-label:#fff4e6;--isl-label-ink:#1f3a44;--isl-label-muted:#5f7a80;--isl-label-accent:#b8661f;--isl-sans:"Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
body.island-mode .immersive {background:radial-gradient(ellipse 90% 28% at 50% 100%,#f2a070cc 0%,transparent 70%),linear-gradient(180deg,#3d4a54 0%,#56646d 24%,#7a6c68 46%,#b8795a 66%,#e58753 84%,#f2a070 100%)}
body.island-mode .immersive .scene {inset:0;touch-action:none;cursor:grab}
body.island-mode .scene.is-dragging {cursor:grabbing}
body.canal-mode[data-world=overview] .immersive .scene {touch-action:none;cursor:grab}
body.canal-mode .scene.is-dragging {cursor:grabbing}
body.island-mode .scene canvas {image-rendering:auto}
.island-mode .scene-vignette {background:radial-gradient(ellipse at center,transparent 55%,#0f222a40 100%)}
.hud-mode:not(.standard-mode) .world-header {background:none;padding:20px 24px;font-family:var(--isl-sans)}
.hud-mode:not(.standard-mode) .brand {color:var(--isl-text)}
.hud-mode:not(.standard-mode) .brand-mark {font:700 17px var(--isl-sans);border:0;border-radius:12px;background:#fff1e0;color:#1f3a44}
.hud-mode:not(.standard-mode) .brand small {color:var(--isl-muted);letter-spacing:1.4px}
.hud-mode:not(.standard-mode) .world-header nav>a,.hud-mode:not(.standard-mode) .world-header nav>button {border:1px solid var(--isl-line);border-radius:999px;background:var(--isl-panel);color:var(--isl-text);font-weight:600;backdrop-filter:blur(12px);box-shadow:0 4px 16px #0b1a2040}
.hud-mode:not(.standard-mode) .world-header nav>a:hover,.hud-mode:not(.standard-mode) .world-header nav>button:hover {background:#fff1e0;color:#1f3a44}
.hud-mode:not(.standard-mode) .world-header nav>a[aria-current] {background:var(--isl-accent);color:#16303b;border-color:var(--isl-accent)}
.hud-mode .world-header nav #view-switch {border-radius:999px;border:0;background:linear-gradient(120deg,#ffe29a,#f2b66d);color:#16303b;box-shadow:0 6px 20px #ff6a4a55}
.hud-mode a:focus-visible,.hud-mode button:focus-visible {outline:3px solid #ffe29a;outline-offset:3px}
.hud-mode .world-footer {left:auto;right:24px;bottom:22px;border:0;padding:0}
.hud-mode .world-footer>span {display:none}
.hud-mode .world-footer button {font:600 11px var(--isl-sans);color:var(--isl-text);background:var(--isl-panel);padding:7px 12px;border-radius:999px}
.island-ui {font-family:var(--isl-sans);color:var(--isl-text)}
.island-labels {position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.isl-label {position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:1px;margin:0;transform:translate(-50%,-100%);padding:9px 16px 10px;border-radius:16px;background:var(--isl-label);color:var(--isl-label-ink);box-shadow:0 10px 30px #0f222a55;white-space:nowrap;transition:scale .2s,background .2s,box-shadow .2s}
.isl-label::after {content:'';position:absolute;left:50%;top:100%;width:10px;height:10px;background:inherit;translate:-50% -50%;rotate:45deg;border-radius:2px}
.isl-label strong {font-size:15px;font-weight:700}
.isl-label small {font-size:11px;color:var(--isl-label-muted);font-weight:600}
.isl-label-entry {padding:7px 12px 8px;border-radius:12px}
.isl-label-entry strong {font-size:13px}.isl-label-entry small {font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--isl-label-accent)}
.isl-label:hover,.isl-label.is-hovered {scale:1.08;background:var(--isl-panel-solid);color:#fff1e0;box-shadow:0 14px 34px #0b1a2077}
.isl-label:hover small,.isl-label.is-hovered small {color:#f6d7a8}
.is-dragging~.island-ui .isl-label {pointer-events:none}
.isl-intro {position:absolute;left:24px;bottom:24px;z-index:3;display:flex;gap:14px;align-items:flex-start;max-width:370px;padding:16px 18px;border-radius:22px;background:var(--isl-panel);border:1px solid var(--isl-line);backdrop-filter:blur(16px);box-shadow:0 14px 40px #0b1a2055}
.isl-avatar {flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;overflow:hidden;font-weight:700;color:#16303b;background:linear-gradient(135deg,#ffe29a,#f2b66d 55%,#f7d4a0)}
.isl-avatar img {width:100%;height:100%;object-fit:cover}
.isl-intro-copy p {margin:0}
.isl-hello {font-size:16px;font-weight:700}
#isl-intro-text {font-size:12.5px;line-height:1.55;color:var(--isl-muted);margin-top:3px}
.isl-more {display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#f6cf9a}
.isl-intro-toggle {flex:none;width:26px;height:26px;border-radius:50%;background:#ffffff1f;color:var(--isl-text);font-weight:700;line-height:1}
.isl-intro.is-collapsed .isl-intro-copy,.isl-intro.is-compact .isl-intro-copy #isl-intro-text {display:none}
.isl-intro.is-collapsed {padding:8px;gap:8px;align-items:center}.isl-intro.is-collapsed .isl-avatar {width:38px;height:38px;border-radius:12px;font-size:13px}
.isl-intro.is-collapsed .isl-intro-toggle {rotate:180deg}
.isl-sections {position:absolute;left:24px;top:96px;z-index:3;display:flex;flex-direction:column;gap:6px}
.isl-section-list {display:flex;flex-direction:column;gap:6px}
.isl-panel-toggle {display:none}
.isl-section-link {display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:180px;padding:10px 14px;border-radius:14px;background:var(--isl-panel);border:1px solid var(--isl-line);backdrop-filter:blur(12px);font-weight:700;font-size:13px;transition:background .2s,translate .2s}
.isl-section-link small {min-width:22px;text-align:center;padding:1px 6px;border-radius:999px;background:#ffffff22;color:#f6cf9a;font-size:11px}
.isl-section-link:hover {translate:4px 0;background:#24444f;color:#fff}
.isl-section-link[aria-current] {background:var(--isl-accent);color:#16303b}.isl-section-link[aria-current] small {background:#16303b26;color:#16303b}
.isl-room {position:absolute;right:24px;top:96px;z-index:3;width:290px;max-height:calc(100% - 200px);overflow:auto;padding:18px;border-radius:22px;background:var(--isl-panel);border:1px solid var(--isl-line);backdrop-filter:blur(16px);box-shadow:0 14px 40px #0b1a2055}
.isl-leave {font-size:12px;font-weight:700;color:#f6cf9a;padding:0}
.isl-room h2 {font:700 26px/1.1 var(--isl-sans);margin:12px 0 4px;letter-spacing:-.5px}
.isl-room>p {margin:0 0 12px;font-size:12.5px;color:var(--isl-muted)}
.isl-room-list {list-style:none;margin:0;padding:0;display:grid;gap:6px}
.isl-record {display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:#ffffff17;border:1px solid #ffffff1f}
.isl-record small {font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#f6cf9a;font-weight:700}
.isl-record span {font-weight:700;font-size:14px}
.isl-record:hover,.isl-record:focus-visible {background:#fff1e0;color:#1f3a44}.isl-record:hover small {color:var(--isl-label-accent)}
.isl-empty {font-size:12px;color:var(--isl-muted);padding:8px 2px}
.isl-zoom {position:absolute;right:24px;bottom:64px;z-index:3;display:flex;flex-direction:column;gap:6px}
.isl-zoom button {width:40px;height:40px;border-radius:14px;background:var(--isl-panel);border:1px solid var(--isl-line);backdrop-filter:blur(12px);font:700 18px var(--isl-sans);color:var(--isl-text)}
.isl-zoom button:hover {background:#fff1e0;color:#1f3a44}
.isl-hint {position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:2;margin:0;padding:8px 16px;border-radius:999px;background:var(--isl-panel);color:var(--isl-text);font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none}
.island-mode dialog {border:0;border-radius:26px;background:#fffaf3;color:#1d3239;font-family:var(--isl-sans);box-shadow:0 30px 100px #0b1a2077}
.island-mode dialog::backdrop {background:#0f222a66;backdrop-filter:blur(6px)}
.island-mode dialog h2,.island-mode dialog h3 {font-family:var(--isl-sans);font-weight:700;letter-spacing:-.5px}
.island-mode dialog .eyebrow {color:#a85a1a}
.island-mode dialog .detail-summary,.island-mode dialog .detail-section p {color:#46606a}
.island-mode .dialog-close {background:#f3e6df;color:#1d3239}
.island-mode .detail-art {background:linear-gradient(135deg,#fff0dc,#dcebe8);border-radius:18px}
.island-mode .primary-button {background:#1f3a44;border-radius:999px}
.island-mode .primary-button:hover {background:#2c5663}
.island-mode .profile-links a {border-radius:999px;background:#f6e8e2;border-color:#ecd3ca}
.island-mode .profile-dialog .detail-section {border-left-color:#e0a85f}
.detail-chips {list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:20px 0}
.detail-chips li {padding:6px 12px;border-radius:999px;background:#f6e8e2;color:#1f3a44;font-size:13px;font-weight:600}
.card-items {margin-top:6px!important;font-weight:600}
@media(max-width:800px){
 .isl-sections {top:auto;bottom:68px;left:12px;right:12px;align-items:center}
 .isl-panel-toggle {display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 16px;border-radius:999px;background:var(--isl-panel);border:1px solid var(--isl-line);backdrop-filter:blur(12px);font:700 12px var(--isl-sans);color:var(--isl-text)}
 .isl-panel-toggle:hover {background:#fff1e0;color:#1f3a44}
 .isl-section-list {flex-direction:row;flex-wrap:wrap;justify-content:center}
 .isl-section-list.is-collapsed,.isl-room-list.is-collapsed {display:none}
 .isl-room .isl-panel-toggle {margin:12px 0 0}
 .isl-section-link {min-width:0;padding:8px 12px;gap:8px;font-size:12px}
 .isl-intro {left:12px;right:12px;bottom:auto;top:150px;max-width:none}
 .isl-room {left:12px;right:12px;top:auto;bottom:118px;width:auto;max-height:38%}
 body.hud-mode[data-world=room] .isl-intro {display:none}
 .isl-zoom {right:12px;top:150px;bottom:auto}
 body.hud-mode[data-world=overview] .isl-zoom {top:auto;bottom:118px}
 .isl-hint {bottom:22px;font-size:11px;max-width:calc(100% - 140px);white-space:normal;text-align:center;left:12px;translate:none}
 .hud-mode .world-footer {right:12px;bottom:22px}
 body.hud-mode[data-world=room] .isl-sections {display:none}
 body.hud-mode[data-world=room] .isl-room {bottom:12px;max-height:36%}
}
@media(max-width:500px){
 .isl-label strong {font-size:13px}.isl-label {padding:7px 12px 8px}.isl-hint {display:none}
 .hud-mode:not(.standard-mode) .world-header {padding:14px 12px 8px}
 .isl-intro {top:112px;padding:12px 14px;gap:10px;border-radius:18px}
 .isl-avatar {width:40px;height:40px;border-radius:12px;font-size:13px}
 .isl-hello {font-size:14px}#isl-intro-text {font-size:11.5px}.isl-more {margin-top:4px;font-size:11px}
 .isl-zoom {display:none}
 .isl-room {padding:14px}.isl-room h2 {font-size:21px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.isl-label,.isl-section-link,.isl-intro {transition:none}}
/* Island cats: a polaroid-style card and quiet "Meet" buttons. */
.isl-pets-label {margin:10px 4px 0;font-size:10px;letter-spacing:1.4px;font-weight:700;color:var(--isl-muted);order:1}
.isl-pet-link {order:2;min-width:180px}.isl-pet-link small {background:none!important;font-size:13px;padding:0!important}
.isl-pet {position:absolute;left:50%;bottom:84px;translate:-50% 0;rotate:-2deg;z-index:4;width:252px;padding:14px 14px 16px;border-radius:12px;background:#fff4e6;color:#1f3a44;box-shadow:0 18px 50px #0b1a2088;text-align:center;animation:isl-pet-in .35s cubic-bezier(.2,1.3,.4,1)}
.isl-pet img {display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:#e8dccb}
.isl-pet-kicker {margin:12px 0 0;font-size:9px;letter-spacing:2px;font-weight:700;color:#b8661f}
.isl-pet h2 {margin:2px 0 0;font:700 28px/1.1 var(--isl-sans);letter-spacing:-.5px}
.isl-pet-close {position:absolute;right:-10px;top:-10px;width:30px;height:30px;border-radius:50%;background:#1f3a44;color:#fff1e0;font:700 18px/1 var(--isl-sans);box-shadow:0 4px 12px #0b1a2066}
.isl-pet-close:hover {background:#b8661f}
@keyframes isl-pet-in {from {opacity:0;translate:-50% 20px;scale:.92}}
@media(max-width:800px){.isl-pet {bottom:auto;top:132px;left:auto;right:12px;translate:0 0;width:176px;padding:10px 10px 12px}.isl-pet h2 {font-size:22px}@keyframes isl-pet-in {from {opacity:0;scale:.92}}}
@media(prefers-reduced-motion:reduce){.isl-pet {animation:none}}
/* The name tag shown while hovering a cat: a small non-interactive pill so it never steals the hover. */
.isl-label-pet {pointer-events:none!important;padding:5px 12px 6px;border-radius:999px;font-weight:700;font-size:13px;background:#fff4e6;color:var(--isl-label-ink);box-shadow:0 8px 22px #0f222a66}
.isl-label-pet::after {width:8px;height:8px}
#source-preview-notice {position:fixed;inset:0;z-index:100;background:#15252c;color:#eee5d3;display:grid;place-items:center;padding:28px;overflow:auto}
#source-preview-notice>div {max-width:580px}#source-preview-notice h1 {font-size:38px}#source-preview-notice p {line-height:1.8}#source-preview-notice a:not(.primary-button) {text-decoration:underline}
.canal-mode dialog .catalogue-card {background:#243a3e;border-color:#9baf9870;color:#f2e7cf}
.canal-mode dialog .catalogue-card p {color:#cad0c3}.canal-mode dialog .catalogue-card .eyebrow {color:#d0ba88}
.credential-section {margin-bottom:24px}
/* Starry sky: tiny star pixels turning slowly behind the islands; it fades out before the orange horizon. */
/* The scene is its own stacking context and the sky sits at z-index -1, so the stars paint behind the 3D canvas, never over islands or rooms. */
.island-mode .scene {isolation:isolate}
.scene .isl-sky {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.95;-webkit-mask-image:linear-gradient(#000 22%,transparent 68%);mask-image:linear-gradient(#000 22%,transparent 68%)}
.isl-sky-spin {position:absolute;will-change:transform;animation:isl-sky-turn 720s linear infinite}
.scene .isl-sky canvas {display:block;width:100%;height:100%;image-rendering:auto}
@keyframes isl-sky-turn {to {transform:rotate(360deg)}}
.isl-sky-star {position:absolute;translate:-50% -50%;border-radius:50%;box-shadow:0 0 3px #fff4dcaa;animation:isl-sky-twinkle var(--d,3s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes isl-sky-twinkle {from {opacity:.3}to {opacity:1}}
@media(prefers-reduced-motion:reduce){.isl-sky-spin,.isl-sky-star {animation:none}}
/* Standard view: a warm terminal window in the City view's palette (dusk slate, ivory type, lamp-gold accents). */
body.standard-mode {--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace;--t-page:#14191b;--t-win:#1c2325;--t-bar:#2b3231;--t-line:#3b4440;--t-row:#232b2d;--t-row-hover:#2d3632;--t-ink:#efe9d6;--t-body:#d6cfba;--t-muted:#bdb59f;--t-gold:#dcb98a;--t-coral:#e8946f;overflow:auto;background:var(--t-page);color:var(--t-ink);font-family:var(--mono)}
html:has(body.standard-mode) {background:#14191b}
body.standard-mode .world-header {position:sticky;padding:14px 28px;background:#14191bf2;border-bottom:1px solid var(--t-line);backdrop-filter:blur(10px);color:var(--t-ink)}
body.standard-mode .brand-mark {border:1px solid #dcb98a88;border-radius:6px;background:var(--t-win);color:var(--t-gold)}
body.standard-mode .brand small {color:var(--t-muted)}
body.standard-mode .world-header nav>a,body.standard-mode .world-header nav>button {border:1px solid var(--t-line);border-radius:6px;background:var(--t-row);color:var(--t-ink);font:12px var(--mono);backdrop-filter:none;box-shadow:none}
body.standard-mode .world-header nav>a:hover,body.standard-mode .world-header nav>button:hover {border-color:var(--t-gold);background:var(--t-row-hover);color:var(--t-gold)}
body.standard-mode .world-header nav #view-switch {font-family:var(--sans)}
body.standard-mode .world-header nav #view-switch:hover {color:#162630}
body.standard-mode .standard-content {width:min(960px,calc(100% - 32px));max-width:none;margin:32px auto 64px;padding:0 0 40px;overflow:hidden;background:var(--t-win);color:var(--t-ink);border:1px solid var(--t-line);border-radius:12px;box-shadow:0 30px 80px #0009}
body.standard-mode .standard-content::before {content:"kevin@portfolio: ~ — zsh";content:"kevin@portfolio: ~ — zsh" / "";display:block;padding:12px 84px;text-align:center;font:12px var(--mono);color:var(--t-muted);border-bottom:1px solid var(--t-line);background:radial-gradient(circle 6px at 22px 50%,#e0675c 96%,transparent),radial-gradient(circle 6px at 44px 50%,#e3b04b 96%,transparent),radial-gradient(circle 6px at 66px 50%,#74b866 96%,transparent),linear-gradient(var(--t-bar),#262d2c)}
body.standard-mode .standard-content>* {margin-left:36px;margin-right:36px}
body.standard-mode .standard-content>.eyebrow {margin-top:32px;margin-bottom:8px;font:13px var(--mono);letter-spacing:0;color:var(--t-muted)}
body.standard-mode .standard-content>.eyebrow::before {content:"$ ";color:var(--t-coral)}
body.standard-mode .standard-content h1 {margin-top:0;margin-bottom:14px;font:700 clamp(34px,6vw,52px)/1.1 var(--mono);letter-spacing:-1px;color:var(--t-ink)}
body.standard-mode .standard-content h1::after {content:"";display:inline-block;width:.5ch;height:.8em;margin-left:.25em;vertical-align:-.05em;background:var(--t-gold);animation:std-cursor 1.1s steps(1) infinite}
@keyframes std-cursor {50% {opacity:0}}
@media(prefers-reduced-motion:reduce){body.standard-mode .standard-content h1::after {animation:none}}
body.standard-mode .standard-intro {font-size:14px;line-height:1.8;color:var(--t-body);max-width:68ch}
body.standard-mode .standard-nav {display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:26px;margin-bottom:8px;padding:14px 0;border:0;border-block:1px dashed var(--t-line);font:13px var(--mono)}
body.standard-mode .standard-nav::before {content:"$ ls sections/";margin-right:8px;color:var(--t-coral)}
body.standard-mode .standard-nav a {padding:5px 12px;border:1px solid var(--t-line);border-radius:6px;background:var(--t-row);color:var(--t-gold)}
body.standard-mode .standard-nav a:hover,body.standard-mode .standard-nav a:focus-visible {border-color:var(--t-gold);background:var(--t-gold);color:#1c2325}
body.standard-mode .standard-section {scroll-margin-top:90px}
body.standard-mode .standard-section h2 {margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--t-line);font:700 17px/1.4 var(--mono);color:var(--t-ink);text-transform:lowercase}
body.standard-mode .standard-section h2::before {content:"$ ls ";font-weight:400;color:var(--t-coral)}
body.standard-mode .standard-section h2::after {content:"/";color:var(--t-gold)}
body.standard-mode .catalogue {grid-template-columns:1fr;gap:10px}
body.standard-mode .catalogue-card {align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--t-line);border-left:3px solid #a98c63;border-radius:8px;background:var(--t-row);color:var(--t-ink)}
body.standard-mode .catalogue-card:hover,body.standard-mode .catalogue-card:focus-visible {border-color:var(--t-gold);background:var(--t-row-hover);color:var(--t-ink)}
body.standard-mode .catalogue-card .object-art {width:64px;height:64px;padding:8px;border-radius:10px;background:#e8dec7}
body.standard-mode .catalogue-card .eyebrow {margin:0;font:600 10px var(--mono);letter-spacing:1.6px;color:var(--t-gold)}
body.standard-mode .catalogue-card h3 {margin:6px 0;font:700 16px/1.35 var(--mono);color:#f6efdc}
body.standard-mode .catalogue-card p {max-width:68ch;font:13px/1.7 var(--mono);color:var(--t-body)}
body.standard-mode .catalogue-card .card-items {margin-top:8px;font-size:12px;font-weight:400;color:var(--t-gold)}
body.standard-mode .catalogue-card .card-arrow {color:var(--t-muted)}
body.standard-mode .catalogue-card:hover .card-arrow {color:var(--t-gold)}
body.standard-mode .content-note {margin-top:40px;font-size:12px;color:var(--t-muted)}
body.standard-mode .content-note::before {content:"# ";color:var(--t-coral)}
@media(max-width:800px){
 body.standard-mode .world-header {padding:12px 16px}
 body.standard-mode .standard-content>* {margin-left:20px;margin-right:20px}
}
@media(max-width:500px){
 body.standard-mode #standard-toggle {color:var(--t-ink)}
 body.standard-mode .standard-content {width:100%;margin:0 0 32px;border-radius:0;border-inline:0;box-shadow:none}
 body.standard-mode .standard-content::before {padding:11px 80px 11px 84px;font-size:11px}
 body.standard-mode .standard-content>* {margin-left:16px;margin-right:16px}
 body.standard-mode .catalogue-card {gap:12px;padding:14px}
 body.standard-mode .catalogue-card .object-art {width:48px;height:48px;padding:6px}
}
body.standard-mode #standard-title:focus {outline:none}
/* Town view: viewpoint chips in the room panel and the lamp toggle share the Islands HUD styling. */
.isl-views {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.isl-views button {padding:6px 11px;border-radius:999px;background:#ffffff17;border:1px solid #ffffff1f;font:600 11px var(--isl-sans);color:var(--isl-text)}
.isl-views button:hover,.isl-views button:focus-visible {background:#fff1e0;color:#1f3a44}
.isl-views button[aria-pressed=true] {background:var(--isl-accent);border-color:var(--isl-accent);color:#16303b}
#canal-lights[aria-pressed=false] {opacity:.55}

/* Welcome pop-up */
.welcome-dialog {max-width:500px;text-align:center;padding:34px 34px 30px}
.welcome-dialog .dialog-close {position:absolute;top:12px;right:12px;float:none}
.welcome-photo {width:96px;height:96px;margin:0 auto 14px;border-radius:50%;border:2px dashed currentColor;display:grid;place-items:center;overflow:hidden;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}
.welcome-photo.has-photo {border:2px solid #b7a77c;opacity:1}
.welcome-photo img {width:100%;height:100%;object-fit:cover;grid-area:1/1}
.welcome-photo span {grid-area:1/1}.welcome-photo.has-photo span {display:none}
.welcome-dialog h2 {font-size:32px;margin:0 0 16px}
.welcome-lists {text-align:left;display:grid;gap:14px}
.welcome-dialog .welcome-lists h3 {font:700 11px/1 var(--sans,inherit);letter-spacing:1.6px;text-transform:uppercase;margin:0 0 7px;opacity:.7}
.welcome-lists ul {margin:0;padding-left:20px}
.welcome-lists li {font-size:15px;line-height:1.5;margin:0 0 4px}
.welcome-actions {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.welcome-actions button {min-height:44px;padding:0 20px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.welcome-secondary {background:transparent;border:1px solid currentColor;color:inherit}
@media(max-width:500px){.welcome-dialog{padding:30px 20px 24px}.welcome-dialog h2{font-size:27px}.welcome-actions button{flex:1 1 100%}}

/* Contact page */
.contact-list {list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.contact-link {display:flex;align-items:baseline;gap:14px;padding:13px 16px;border:1px solid #b7a77c55;border-radius:8px;text-decoration:none;color:inherit}
.contact-link:hover,.contact-link:focus-visible {border-color:#b7a77c;background:#ffffff10}
.contact-link small {min-width:78px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;opacity:.7}
.contact-link span {font-size:17px;font-weight:600}
.island-mode .contact-link {border-color:#e0a85f66}.island-mode .contact-link:hover,.island-mode .contact-link:focus-visible {background:#fff1e0}

/* Keyword highlights (src/highlight.js): a plain underline, no bold and no background */
mark.kw {background:none;color:inherit;font-weight:inherit;text-decoration:underline;text-decoration-color:#e8c97a;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-skip-ink:none}
.island-mode dialog mark.kw {text-decoration-color:#e08a2a}
/* Dark cards and panels keep light text with the gold underline; only the light island dialogs use the orange one. */

/* Photos on the About page and the standard-view About card */
.object-art.has-photo {border-radius:50%;overflow:hidden;padding:0!important;background:none!important}
.object-art img {display:block;width:100%;height:100%;object-fit:cover}
.profile-gallery {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 4px}
.profile-gallery figure {margin:0}
.profile-gallery img {display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid #b7a77c55}
.profile-gallery figcaption {margin-top:6px;font-size:12px;opacity:.75;text-align:center}
@media(max-width:500px){.profile-gallery{gap:8px}.profile-gallery figcaption{font-size:11px}}

/* How to navigate */
.help-steps {margin:18px 0 0;padding-left:22px;display:grid;gap:12px;line-height:1.55}
.help-steps li::marker {font-weight:700}

/* Images inside a section (for example the Hobbies posters) */
.section-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:14px;max-width:420px}
.section-gallery figure {margin:0}
.section-gallery img {display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;border:1px solid #b7a77c55}
.section-gallery figcaption {margin-top:6px;font-size:12px;opacity:.75;text-align:center}

/* Section text keeps deliberate line breaks (for example the two Education lines on the About page) */
.detail-section p {white-space:pre-line}

/* A project photo in place of the pixel-art banner at the top of an entry */
.detail-photo {display:grid;place-items:center;padding:12px;margin-bottom:6px;border-radius:10px;background:#00000026}
.detail-photo img {display:block;max-width:100%;max-height:min(46dvh,380px);width:auto;height:auto;object-fit:contain;border-radius:8px}

/* Wide images (screenshots) in a section gallery use the full width instead of a poster-shaped tile */
.section-gallery:has(.is-wide) {max-width:none}
.section-gallery figure.is-wide {grid-column:1/-1}
.section-gallery figure.is-wide img {aspect-ratio:auto;object-fit:contain}

/* Small caption text kept readable */
#view-switch small {font-size:9px}
.isl-pets-label {font-size:11px}
.isl-record small,.isl-label small {font-size:10px}
.eyebrow {font-size:11px}
.exhibit-index .eyebrow,.catalogue-card .eyebrow {font-size:10px}
body.standard-mode .catalogue-card .eyebrow {font-size:11px}
.world-header .brand small {font-size:10px}
/* Phones: the town hint is the only cue that the street can be dragged, so keep it visible in the overview. */
@media(max-width:500px){
 body.canal-mode[data-world=overview] .isl-hint {display:block;bottom:20px;left:12px;right:12px;max-width:none;translate:none}
 .isl-intro.is-collapsed {right:auto}
}

/* Locked 3D viewport: the page itself never scrolls or rubber-bands (so pull-to-refresh cannot shift the layout); only panels scroll inside it. Standard view is excluded and scrolls normally. */
html:has(body:not(.standard-mode)) {height:100%;overflow:hidden;overscroll-behavior:none}
body:not(.standard-mode) {position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body:not(.standard-mode) main {height:100%}
.isl-room,.isl-section-list,#room-entry-list,#site-nav {overscroll-behavior:contain}
.world-footer {pointer-events:none}.world-footer button {pointer-events:auto}

/* Phone navigation: one Menu button opens a stacked panel; desktop and tablet keep the inline nav. */
.menu-toggle,.nav-extra,.nav-cat {display:none}
@media(prefers-reduced-motion:no-preference){@keyframes nav-drop {from {opacity:0;translate:0 -6px}}#site-header #site-nav.is-open {animation:nav-drop .16s ease-out}}
@media(max-width:500px) {
  #site-header {display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
  #site-header .brand {min-width:0}
  .menu-toggle {display:inline-flex;align-items:center;gap:10px;flex:none;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--isl-line,#ffffff2e);background:var(--isl-panel,#16303bd6);color:var(--isl-text,#fff1e0);font:700 13px var(--isl-sans,Arial,sans-serif);letter-spacing:.3px;backdrop-filter:blur(12px)}
  .menu-toggle:hover,.menu-toggle[aria-expanded=true] {background:#fff1e0;color:#1f3a44}
  .menu-icon {position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:background .15s}
  .menu-icon::before,.menu-icon::after {content:'';position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:top .15s,rotate .15s}
  .menu-icon::before {top:-6px}.menu-icon::after {top:6px}
  .menu-toggle[aria-expanded=true] .menu-icon {background:transparent}
  .menu-toggle[aria-expanded=true] .menu-icon::before {top:0;rotate:45deg}
  .menu-toggle[aria-expanded=true] .menu-icon::after {top:0;rotate:-45deg}
  #site-header #site-nav {display:none;position:absolute;top:calc(100% + 2px);left:12px;right:12px;width:auto;max-width:none;margin:0;padding:10px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:6px;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-x:hidden;overflow-y:auto;border-radius:18px;background:var(--isl-panel-solid,#16303b);border:1px solid var(--isl-line,#ffffff2e);box-shadow:0 18px 50px #0b1a2088}
  #site-header #site-nav.is-open {display:flex}
  #site-header #site-nav>* {order:0;flex:none;width:100%;margin:0}
  #site-header #site-nav>a:not(#view-switch),#site-header #site-nav>button {display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--isl-line,#ffffff2e);background:#ffffff14;color:var(--isl-text,#fff1e0);font:600 15px var(--isl-sans,Arial,sans-serif);text-align:left;backdrop-filter:none;box-shadow:none}
  #site-header #site-nav>a:not(#view-switch):hover,#site-header #site-nav>button:hover,#site-header #site-nav>a:not(#view-switch):focus-visible,#site-header #site-nav>button:focus-visible {background:#fff1e0;color:#1f3a44}
  #site-header #site-nav>a[aria-current]:not(#view-switch) {background:var(--isl-accent,#f2b66d);border-color:var(--isl-accent,#f2b66d);color:#16303b}
  #site-header #site-nav>*:focus-visible {outline-offset:-3px}
  #site-header #site-nav>a[href='#resume'],#site-header #site-nav>#view-switch,#site-header #site-nav>a[href='#help'] {margin-top:8px}
  #site-header #site-nav>a[href='#help'] {order:1}
  #site-header #site-nav #view-switch {display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-radius:12px}
  #site-header #site-nav #view-switch>span:nth-child(2) {flex:1}
  #site-header #site-nav #view-switch small {display:block}
  #site-header #site-nav #view-switch strong {font-size:14px;white-space:normal}
  #site-header #site-nav #view-switch:focus-visible {outline-color:#16303b}
  .nav-extra {display:inline;white-space:pre}
  body.standard-mode #site-header #site-nav>.nav-cat {display:none}
  body.standard-mode .menu-toggle {border-color:var(--t-line);background:var(--t-row);color:var(--t-ink);font-family:var(--mono);border-radius:6px;backdrop-filter:none}
  body.standard-mode .menu-toggle:hover,body.standard-mode .menu-toggle[aria-expanded=true] {border-color:var(--t-gold);background:var(--t-row-hover);color:var(--t-gold)}
  body.standard-mode #site-header #site-nav {background:var(--t-win);border-color:var(--t-line);border-radius:10px;box-shadow:0 18px 50px #000a}
  body.standard-mode #site-header #site-nav>a:not(#view-switch),body.standard-mode #site-header #site-nav>button {background:var(--t-row);border-color:var(--t-line);color:var(--t-ink);font:14px var(--mono);border-radius:6px}
  body.standard-mode #site-header #site-nav>a:not(#view-switch):hover,body.standard-mode #site-header #site-nav>button:hover,body.standard-mode #site-header #site-nav>a:not(#view-switch):focus-visible,body.standard-mode #site-header #site-nav>button:focus-visible,body.standard-mode #site-header #site-nav>a[aria-current]:not(#view-switch) {border-color:var(--t-gold);background:var(--t-row-hover);color:var(--t-gold)}
  body.standard-mode #site-header #site-nav #view-switch {border-radius:6px}

  /* Phones: sections and cats live in the header Menu, so the bottom sections panel is dropped. */
  .isl-sections {display:none}
  body.hud-mode[data-world=room] .isl-room {bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .hud-mode .world-footer {bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .isl-intro {top:70px}
}