@layer base, layout, illustrations, motion, responsive;
@font-face { font-family: Caveat; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/caveat-600.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./assets/fonts/dm-sans-latin.woff2') format('woff2'); }

@layer base {
  :root { color-scheme: light; --paper: #fcf5e9; --ink: #0759df; --stamp-red: #8e1616; --muted: #58749b; --line: #cad8ed; --panel: #fff; --radius: 19px; --sidebar: 180px; --header-height: 96px; font-family: 'Trebuchet MS', Arial, sans-serif; color: var(--ink); background: var(--paper); }
  * { box-sizing: border-box; }
  body { margin: 0; }
  button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { font: inherit; color: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  button:disabled { cursor: wait; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
  [hidden] { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 99; padding: 12px 18px; background: var(--panel); transform: translateY(-180%); }
  .skip-link:focus { transform: translateY(0); }
  ::selection { color: white; background: var(--ink); }
}

@layer layout {
  /* The introduction uses the reserved left column for the portfolio identity. */
  main { width: calc(100% - 48px); margin: 0 24px; }
  .masthead { position: sticky; top: 0; z-index: 20; height: var(--header-height); margin-left: var(--sidebar); background: var(--paper); }
  .home-wordmark { position: absolute; left: calc(24px - var(--sidebar)); top: 50%; transform: translateY(-50%); max-width: calc(var(--sidebar) - 24px); color: #1b4fd8; font: 700 18px/normal 'DM Sans', Arial, sans-serif; white-space: nowrap; }
  .home-wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }
  /* Cover the reserved sidebar and page gutters while keeping the route in place. */
  .masthead::before { content: ""; position: absolute; inset: 0 -24px 0 calc(-1 * (var(--sidebar) + 24px)); z-index: -1; background: var(--paper); pointer-events: none; }
  .route-map { position: relative; width: 100%; height: 100%; }
  .route-art { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; overflow: visible; }
  .route-line { fill: none; stroke: #6d95d2; stroke-width: 2; stroke-dasharray: 14 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .route-stop { position: absolute; top: calc(var(--stop-y) - 17px); width: 14%; height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transform: translateX(-50%); font: 700 clamp(10px, 1.2vw, 17px)/1.2 Consolas, 'Lucida Console', monospace; letter-spacing: -.04em; z-index: 2; }
  .route-home { left: 4%; width: 8%; min-width: 44px; --stop-y: 52.03%; }
  .route-work { left: 45%; --stop-y: 53.66%; }
  .route-about { left: 86%; --stop-y: 43.9%; }
  .route-dot, .route-dot svg { display: block; width: 34px; height: 34px; }
  .route-dot { border-radius: 50%; background: var(--paper); }
  /* Separate outline geometry replaces the filled/uneven raster circles.
     The paper backing hides the route behind each empty centre. */
  .route-dot svg { fill: none; stroke: #6d95d2; stroke-width: 2; }
  .route-dot .route-dot-fill { fill: var(--ink); stroke: none; opacity: 0; transition: opacity .2s ease; }
  .route-stop[aria-current="location"] .route-dot-fill { opacity: 1; }
  .route-sun { position: absolute; left: 98%; top: 45%; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; }
  .route-ship { position: absolute; left: 4%; top: 52.03%; width: 80px; height: 50px; transform: translate(14px, -40px); pointer-events: none; }
  .reset-button { flex-shrink: 0; margin-left: auto; padding: 10px 0 10px 14px; border: 0; background: none; font-size: 12px; white-space: nowrap; }
  .reset-button span { font-size: 18px; margin-right: 5px; }
  .portfolio-content { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .intro, .selected-works { grid-column: 2; margin-left: 0; }
  .intro { grid-row: 1; }
  .portfolio-content > .selected-works { grid-row: 2; margin-left: 0; }
  .intro { position: relative; scroll-margin-top: var(--header-height); container-type: inline-size; }
  .intro-profile { position: sticky; top: calc(var(--header-height) + 20px); grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 20px 0 24px; width: min(156px, calc(var(--sidebar) - 12px)); color: #171613; }
  .intro-profile h1 { margin: 0 0 18px; font: 400 40px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
  .profile-quote { margin: 0 0 16px; color: #6e6a64; font: 13px/1.7 Consolas, 'Lucida Console', monospace; }
  .profile-background { display: grid; gap: 10px; margin: 0; font: 13px/1.95 Consolas, 'Lucida Console', monospace; }
  .profile-background dt { margin-bottom: 4px; font-weight: 700; }
  .profile-background dd { margin: 0; color: #817a72; }
  .profile-contact { margin-top: 24px; }
  .profile-contact a { overflow-wrap: anywhere; }
  .profile-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .about-toggle { position: fixed; z-index: 21; left: 24px; bottom: 24px; width: min(140px, calc(var(--sidebar) - 12px)); min-height: 32px; padding: 7px 16px; border: 1px solid var(--stamp-red); border-radius: 2px; background: var(--stamp-red); color: var(--paper); font: 700 10px/16px Consolas, 'Lucida Console', monospace; letter-spacing: .06em; }
  .about-toggle:hover { background: color-mix(in srgb, var(--stamp-red) 88%, #000); }
  .about-toggle:focus-visible { outline-color: var(--stamp-red); }
  .about-toggle[aria-expanded="true"] { color: var(--stamp-red); background: color-mix(in srgb, var(--stamp-red) 7%, var(--paper)); }
  .about-toggle[aria-expanded="true"]:hover { background: color-mix(in srgb, var(--stamp-red) 14%, var(--paper)); }
  body[data-about-open="true"] .intro > .scenes, body[data-about-open="true"] .intro > .intro-toolbar { display: none; }
  .about-panel { min-height: calc(100svh - var(--header-height) - 16px); padding: 32px 36px 48px; color: #171613; scroll-margin-top: var(--header-height); }
  .about-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
  .about-eyebrow { margin: 0; color: var(--muted); font: 11px/1.5 Consolas, 'Lucida Console', monospace; letter-spacing: .12em; }
  .about-back { padding: 8px 0; border: 0; background: none; font: 11px/1.5 Consolas, 'Lucida Console', monospace; }
  .about-back:hover { text-decoration: underline; text-underline-offset: 4px; }
  .about-panel h2 { margin: 0 0 14px; font: 400 40px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.03em; outline: none; }
  .about-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; max-width: 1100px; }
  .about-copy { min-width: 0; }
  .about-photos { position: relative; width: 100%; max-width: 475px; aspect-ratio: 475 / 650; justify-self: end; container-type: inline-size; }
  .about-polaroid { position: absolute; margin: 0; padding: 2cqw 2cqw 9cqw; border: 1px solid #ddd7ce; border-radius: 5px; background: #fffefb; box-shadow: 0 3px 8px #30241514, 0 12px 28px #3024150a; }
  .about-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
  .about-polaroid--top { z-index: 1; top: 2cqw; left: 4cqw; width: 55cqw; transform: rotate(5deg); }
  .about-polaroid--bottom { z-index: 2; top: 44cqw; left: 50cqw; width: 62cqw; transform: rotate(-3deg); }
  .about-paintings { grid-column: 2; justify-self: end; width: 100%; max-width: 475px; margin: 0; }
  .about-painting-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; }
  .about-painting-grid img { display: block; width: 100%; height: auto; border: 4px solid #fffefb; box-shadow: 0 3px 10px #30241514; }
  .about-paintings figcaption { margin-top: 16px; color: #817a72; text-align: center; font: 12px/1.5 Consolas, 'Lucida Console', monospace; }
  .about-bio { max-width: 760px; margin-top: 32px; font: 18px/1.8 'Trebuchet MS', Arial, sans-serif; }
  .about-bio p { margin: 0; }
  .about-bio p + p { margin-top: 24px; }
  .about-now { margin-top: 36px; font: 16px/1.75 'Trebuchet MS', Arial, sans-serif; }
  .about-now h3 { margin: 0 0 12px; color: var(--muted); font: 12px/1.5 Consolas, 'Lucida Console', monospace; letter-spacing: .04em; }
  .about-now ul { margin: 0; padding-left: 20px; }
  .about-now li + li { margin-top: 6px; }
  .about-now li::marker { color: var(--muted); }
  .scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .scene { --canvas-width: 1162; --canvas-height: 808; position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; border-radius: var(--radius); background: var(--panel); aspect-ratio: 1162 / 808; container-type: size; }
  /* One shared, proportional canvas keeps PNG layers, text and pointer coordinates
     aligned even when the surrounding panel is made shorter for the viewport. */
  .scene-stage { position: relative; overflow: hidden; width: min(100cqw, calc(100cqh * var(--canvas-width) / var(--canvas-height))); height: min(100cqh, calc(100cqw * var(--canvas-height) / var(--canvas-width))); container-type: inline-size; }
  /* The original sleeve exits at the artboard's bottom-right corner. Anchor
     that corner to the panel so its cut edge cannot float in white space. */
  .boarding .scene-stage { justify-self: end; align-self: end; }
  /* Cover the existing harbor/interior panels with one proportional artboard.
     All PNG layers move together; the panel crops overflow without changing
     the grid, the ticket, or any individual object's original coordinates. */
  .harbor .scene-stage, .interior .scene-stage { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--canvas-width) / var(--canvas-height))); height: max(100cqh, calc(100cqw * var(--canvas-height) / var(--canvas-width))); transform: translate(-50%, -50%); }
  /* Fit the complete 2360x748 artboard to the existing panel height: the ceiling
     and table remain visible together, with no vertical crop or distortion. */
  .interior .scene-stage { top: auto; bottom: 0; width: calc(100cqh * var(--canvas-width) / var(--canvas-height)); height: 100cqh; transform: translateX(-50%); overflow: visible; }
  /* Reflect the sofa at its original scale so cushion seams and seat curves
     continue into the sides. Only the table/frame use 32-pixel edge strips,
     avoiding duplicate tables and window posts around the central artboard.
     The opaque seat base matches the PNG's upholstery colour and closes the
     transparent area beneath its curved outer contour without hiding windows. */
  .interior .scene-stage::before, .interior .scene-stage::after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transform: scaleX(-1); background-image: url('./assets/portfolio/billed%203/bord.png'), url('./assets/portfolio/billed%203/sofaen.png'), url('./assets/portfolio/billed%203/interior-frame.png'), linear-gradient(transparent 75%, #fbfdfe 75%); background-size: 7375% 100%, 100% 100%, 7375% 100%, 100% 100%; background-repeat: no-repeat; }
  /* One-pixel overlaps cover fractional raster edges, which otherwise let the
     blue panorama leak through as vertical seams across the white sofa. */
  .interior .scene-stage::before { left: calc(-100% + 1px); background-position: left top; }
  .interior .scene-stage::after { left: calc(100% - 1px); background-position: right top; }
  .scene::after { content: ''; position: absolute; inset: 0; border: 1px solid #b9ceff; border-radius: inherit; pointer-events: none; z-index: 8; }
  .scene-art { position: absolute; inset: 0; pointer-events: none; }
  .boarding:has(.ticket-hit-area:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
  .interior { --canvas-width: 2360; --canvas-height: 748; grid-column: 1 / -1; aspect-ratio: 2360 / 748; }
  .intro-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 62px; font-size: 11px; }
  .intro-toolbar p { color: var(--muted); margin: 0; }
  .intro-actions { display: flex; gap: 24px; align-items: center; }
  .pause-button { border: 0; padding: 10px 0; background: none; font-size: 11px; white-space: nowrap; }
  .pause-button span { display: inline-block; width: 14px; }
  .works-link { padding: 10px 0; white-space: nowrap; }
  .works-link span { margin-left: 12px; }
  /* An editorial heading beside two previews and a full-width third preview,
     following the supplied Elaine Yu reference within the existing palette. */
  .selected-works { display: grid; grid-template-columns: clamp(150px, 14vw, 220px) minmax(0, 1fr); column-gap: 24px; margin-left: var(--sidebar); padding: 44px 0 0; scroll-margin-top: calc(var(--header-height) + 16px); outline: none; }
  .works-heading { padding: 10px 0 0; }
  .work-stop { margin: 0 0 14px; color: var(--muted); font: 10px/1.4 Consolas, 'Lucida Console', monospace; letter-spacing: .18em; }
  .works-heading h2 { margin: 0; color: var(--ink); font: 400 clamp(38px, 3.6vw, 58px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
  .project-grid, .visual-grid { display: grid; list-style: none; margin: 0; padding: 0; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .work-placeholder { position: relative; min-width: 0; overflow: hidden; background: #1d50d2; border-radius: 4px; }
  .project-placeholder { aspect-ratio: 4 / 3; border: 1px solid #0759df55; border-radius: 6px; }
  .project-wide { grid-column: 1 / -1; aspect-ratio: 8 / 3; }
  .project-card { position: absolute; inset: 0; }
  .project-preview-label { position: absolute; top: 16px; right: 18px; color: #ffffff80; font: 12px/1 Consolas, 'Lucida Console', monospace; letter-spacing: .12em; }
  .project-caption { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); width: max-content; padding: 12px 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); }
  .project-caption h3 { margin: 0; font: 400 clamp(17px, 1.5vw, 24px)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
  .project-tags { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 8px 0 0; padding: 0; }
  .project-tags li { padding: 3px 5px; border: 1px solid #0759df33; color: var(--muted); font: 8px/1.1 Consolas, 'Lucida Console', monospace; text-transform: uppercase; letter-spacing: .04em; }
  .upcoming-project { background: #fffefb; }
  .upcoming-project .project-preview-label { color: var(--muted); }
  .coming-soon { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 16px; width: max-content; max-width: 80%; }
  .coming-soon p { margin: 0; color: #808080; font: 500 clamp(16px, 1.65vw, 24px)/1.1 'Trebuchet MS', Arial, sans-serif; }
  .project-eyebrow { margin: 0 0 8px; color: var(--muted); font: 10px/1.4 Consolas, 'Lucida Console', monospace; letter-spacing: .14em; }
  .project-summary { max-width: 30ch; margin: 8px 0 0; color: var(--muted); font: 11px/1.6 Consolas, 'Lucida Console', monospace; }
  /* Vivian's Hello Panda variant uses a 1s tween with [.44, 0, .03, .94].
     The opaque mascot exits left while the opaque logo/carton enter from left.
     Vector clips reuse the supplied photograph's pixels as independent layers;
     the original files, title, panel geometry and other projects stay intact. */
  .squice-project { background: #f5eee2; }
  .squice-media { --preview-duration: 1s; --preview-ease: cubic-bezier(.44, 0, .03, .94); position: absolute; inset: 0; overflow: hidden; container-type: size; }
  .squice-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #ef7d24, #f5a44c); opacity: 0; transition: opacity var(--preview-duration) var(--preview-ease); }
  .squice-media img, .squice-media svg { position: absolute; display: block; pointer-events: none; user-select: none; }
  .squice-media > svg, .squice-mascot { transition: transform var(--preview-duration) var(--preview-ease); will-change: transform; }
  .squice-mascot { left: 50%; top: 43%; width: auto; height: 76%; max-width: 58%; object-fit: contain; transform: translate(-50%, -50%) scale(1); }
  .squice-product { inset: 0; width: 100%; height: 100%; transform-origin: 72.5% 55%; transform: translateX(-92%) scale(1.05); filter: drop-shadow(0 7px 7px #0003); }
  .squice-logo { inset: 0; width: 100%; height: 100%; transform-origin: 20% 55%; transform: translateX(-86%) scale(1.15); }
  .squice-card[data-preview="true"] .squice-mascot { transform: translate(calc(-50% - 114cqw), -50%) scale(1.32); }
  .squice-card[data-preview="true"] .squice-product { transform: translateX(0) scale(1.4); }
  .squice-card[data-preview="true"] .squice-logo { transform: translateX(0) scale(1.1); }
  .squice-card[data-preview="true"] .squice-media::before { opacity: 1; }
  .project-preview-toggle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; border: 0; padding: 0; background: transparent; }
  .project-preview-toggle:focus-visible { outline-offset: -5px; border-radius: 5px; }
  .squice-card .project-caption, .book-card .project-caption { z-index: 2; pointer-events: none; opacity: 1; transition: opacity .3s ease; }
  .squice-card[data-preview="true"] .project-caption, .book-card[data-preview="true"] .project-caption { opacity: 0; }
  /* Two original PNG layers fan apart without changing the project grid. */
  .book-project { background: #f5eee2; border-color: #e6e8de; }
  .book-media { --book-duration: 1s; --book-ease: cubic-bezier(.44, 0, .03, .94); position: absolute; inset: 0; overflow: hidden; container-type: size; }
  .book-media::before { content: ''; position: absolute; inset: 0; background: #214d3f; opacity: 0; transition: opacity var(--book-duration) var(--book-ease); }
  .book-motif { position: absolute; left: -3%; top: 9%; width: 23%; fill: none; stroke: #315b48; stroke-width: 1; opacity: .035; transition: opacity .4s ease; }
  .book-media img { position: absolute; display: block; width: auto; max-width: none; pointer-events: none; user-select: none; will-change: transform; }
  /* The 4x exports have tight, upright canvases. Restore the previous visible
     phone bounds and Reading tilt in CSS rather than resampling the artwork. */
  .book-media .book-home { z-index: 1; left: 52%; top: 4.33%; width: 45.04cqh; height: auto; filter: drop-shadow(0 4px 7px #0002); transform: translateX(-50%); transition: transform var(--book-duration) var(--book-ease); }
  .book-home[data-thumbnail-variant="blue"] { border-radius: 8% / 3.36%; }
  .book-reading { left: 52.5%; top: 9%; height: 88%; opacity: 0; transform: translateX(-20cqw) scale(.94) rotate(.7deg); transform-origin: 40% 90%; transition: transform var(--book-duration) var(--book-ease), opacity .55s ease; }
  .book-card[data-preview="true"] .book-home { transform: translateX(calc(-50% - 10cqw)); }
  .book-card[data-preview="true"] .book-reading { opacity: 1; transform: translateX(0) scale(1) rotate(6.7deg); }
  .book-card[data-preview="true"] .book-media::before { opacity: 1; }
  .book-card[data-preview="true"] .book-motif { opacity: 0; }
  .squice-card .project-preview-label, .book-card .project-preview-label { color: #b7ccbb; pointer-events: none; }
  /* This deliberately activated preview retains the requested full 1s motion,
     including when the browser reports reduced motion. Scroll still respects
     that preference in the global motion layer. */
  /* An even poster gallery, with close spacing and a shared top/bottom edge.
     Future artwork can replace a placeholder with an image in the same slot. */
  .visual-design { padding: 56px 0 64px; scroll-margin-top: calc(var(--header-height) + 16px); }
  .visual-design h2 { margin: 0 0 28px; text-align: center; color: var(--ink); font: 400 clamp(38px, 3.6vw, 58px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
  .visual-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .poster-placeholder { aspect-ratio: 3 / 4; }
  .poster-artwork { background: var(--paper); }
  .poster-open { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
  .poster-open img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* Match the other portrait posters while preserving the entire artwork. */
  .poster-open[data-gallery-item="ida-lilja"] img { width: 94.34%; margin-inline: auto; object-fit: contain; background: #000; }
  /* Rotate only the grid preview. The gallery uses the original landscape image. */
  .poster-open--rotated img { position: absolute; left: 50%; top: 50%; width: 133.333333%; height: 75%; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
  .poster-open:focus-visible { outline-offset: -4px; }
  .visual-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: #080808e8; overflow: hidden; }
  .visual-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .visual-lightbox::backdrop { background: transparent; }
  .lightbox-stage { position: relative; min-height: 0; touch-action: pan-y pinch-zoom; }
  .lightbox-figure { position: absolute; inset: 20px 80px 8px; display: flex; align-items: center; justify-content: center; margin: 0; }
  .lightbox-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1; transition: opacity .16s ease; user-select: none; }
  .visual-lightbox[data-loading="true"] .lightbox-image { opacity: 0; }
  .lightbox-close, .lightbox-arrow { position: absolute; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; color: #d4d4d4; background: transparent; cursor: pointer; }
  .lightbox-close:hover, .lightbox-arrow:hover { color: #fff; }
  .lightbox-close:focus-visible, .lightbox-arrow:focus-visible, .lightbox-thumbnails button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .lightbox-close { top: 12px; right: 16px; width: 44px; height: 44px; }
  .lightbox-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; }
  .lightbox-arrow { top: 50%; width: 64px; height: 80px; transform: translateY(-50%); }
  .lightbox-arrow svg { width: 24px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.5; }
  .lightbox-arrow:disabled { visibility: hidden; }
  .lightbox-previous { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: #ddd; }
  .lightbox-footer { padding: 4px 16px max(12px, env(safe-area-inset-bottom)); }
  .lightbox-caption { display: flex; justify-content: center; gap: 14px; margin: 0 0 10px; color: #ddd; font: 12px/1.4 'Trebuchet MS', Arial, sans-serif; }
  #lightbox-count { color: #a8a8a8; }
  .lightbox-thumbnails { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; }
  .lightbox-thumbnails button { flex: 0 0 48px; height: 64px; padding: 0; border: 2px solid transparent; background: #292929; opacity: .55; }
  .lightbox-thumbnails button[aria-current="true"] { opacity: 1; border-color: #fff; }
  .lightbox-thumbnails img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .work-placeholder > img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

@layer illustrations {
  .hover-stamp { position: fixed; z-index: 100; width: clamp(88px, 8vw, 120px); height: auto; max-width: none; transform: translate(-40%, -80%); opacity: 0; transition: opacity 1.5s ease; pointer-events: none; user-select: none; }
  @media (any-hover: hover) and (any-pointer: fine) {
    .hover-stamp[data-visible="true"] { opacity: 1; transition-duration: .3s; }
    .boarding[data-stamp-hover="true"], .boarding[data-stamp-hover="true"] * { cursor: none; }
  }
  .layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
  .ticket-hit-area { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0; }
  .ticket-hit-area:focus-visible { outline: none; }
  .ticket-hit-area[aria-disabled="true"] { cursor: default; }
  .ticket-prompt { position: absolute; z-index: 4; left: 48%; top: 12%; width: max-content; max-width: 90%; margin: 0; transform: translateX(-50%) rotate(-4deg); transform-origin: center; color: var(--ink); font: 600 clamp(16px, 6.5cqw, 44px)/1.1 Caveat, cursive; white-space: nowrap; pointer-events: none; user-select: none; }
  .ticket-copy { position: absolute; left: 10.8%; top: 32.7%; width: 60.5%; height: 39.5%; transform: rotate(-4deg); transform-origin: top left; display: flex; flex-direction: column; pointer-events: none; font-family: Consolas, 'Lucida Console', monospace; font-weight: 700; letter-spacing: -.035em; }
  .ticket-route { display: grid; grid-template-columns: 17% 10% 73%; align-items: end; }
  .ticket-label { display: block; font-size: 1.9cqw; line-height: 1.4; letter-spacing: .02em; }
  .ticket-route strong { display: block; font-size: 3.35cqw; line-height: 1.15; white-space: nowrap; }
  .ticket-arrow { font-size: 4cqw; color: #8ab8ff; line-height: 1; }
  .ticket-rule { flex-shrink: 0; width: 100%; height: 1px; background: #a9ceff; margin: 4% 0; }
  .ticket-details { display: grid; grid-template-columns: 27% 29% 24% 20%; }
  .ticket-details .ticket-label { font-size: 1.65cqw; color: #5796ed; }
  .ticket-details strong { display: block; font-size: 2.65cqw; line-height: 1.35; white-space: nowrap; }
  .ticket-footer { display: flex; justify-content: space-between; align-items: end; margin-top: auto; font-size: 2.05cqw; line-height: 1.2; }
  .ticket-brand { display: flex; flex-direction: column; align-items: center; font-size: 2.15cqw; white-space: nowrap; }
  .ticket-brand svg { width: 5cqw; height: 1.3cqw; margin-bottom: .4cqw; fill: none; stroke: currentColor; stroke-width: 3; }
  .stamp-paper-mask, .stamp-position { position: absolute; inset: 0; z-index: 3; }
  .stamp { --stamp-scale: 1.5; opacity: 0; transform: scale(var(--stamp-scale)); transform-origin: 55.25% 51.86%; }
  /* Ship paint occupies x=584..1087 in the original full transparent layer.
     +54% hides all paint off the right edge; -21.9% centers the painted ship. */
  .harbor-boat { transform: translate3d(54%, 0, 0); will-change: transform; }
  .panorama { position: absolute; inset: 0; overflow: hidden; }
  .panorama-base { width: 200%; max-width: none; object-fit: fill; }
  .panorama-track { position: absolute; left: 0; top: 0; width: 400%; height: 100%; display: flex; transform: translate3d(-2.5%, 0, 0); will-change: transform; }
  .panorama-track img { position: static; flex: 0 0 50%; width: 50%; height: 100%; max-width: none; object-fit: fill; }
  /* Continue the existing view underneath the extended, transparent windows.
     A small track overscan keeps its left edge covered throughout every loop. */
  .interior .panorama { overflow: visible; }
  .interior .panorama-base { left: -100%; width: 400%; }
  .interior .panorama-track { left: -50%; }
  .interior-reveal { opacity: 0; }
}

@layer motion {
  @keyframes ticket-prompt-fade { 0%, 100% { opacity: 1; } 50% { opacity: .16; } }
  .ticket-prompt { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
  .ticket-prompt-text { display: block; animation: ticket-prompt-fade 1.9s ease-in-out infinite; }
  .intro[data-stamped="true"] .ticket-prompt-text { animation-play-state: paused; }
  .intro[data-stamped="true"] .ticket-prompt { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
  @keyframes stamp-down { 0% { opacity: 0; transform: scale(calc(2.3 * var(--stamp-scale))) rotate(12deg); } 45% { opacity: 1; transform: scale(calc(.92 * var(--stamp-scale))) rotate(-3deg); } 66% { transform: scale(calc(1.06 * var(--stamp-scale))) rotate(1deg); } 100% { opacity: 1; transform: scale(var(--stamp-scale)) rotate(0); } }
  @keyframes arrive { from { transform: translate3d(54%, 0, 0); } to { transform: translate3d(-21.9%, 0, 0); } }
  @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
  @keyframes interior-fade { from { opacity: 0; } to { opacity: 1; } }
  .intro[data-stamped="true"] .stamp { opacity: 1; }
  .intro[data-phase="stamping"] .stamp { animation: stamp-down var(--stamp-duration, 700ms) cubic-bezier(.22,.7,.3,1) both; }
  .intro[data-phase="harbor"] .harbor-boat { animation: arrive var(--boat-duration, 1500ms) cubic-bezier(.4,0,.2,1) both; }
  .intro[data-phase="revealing"] .harbor-boat, .intro[data-phase="crossing"] .harbor-boat, .intro[data-phase="complete"] .harbor-boat { transform: translate3d(-21.9%, 0, 0); }
  .intro[data-phase="revealing"] .interior-reveal { animation: interior-fade var(--reveal-duration, 800ms) cubic-bezier(.4,0,.2,1) both; }
  .intro[data-phase="crossing"] .interior-reveal, .intro[data-phase="complete"] .interior-reveal { opacity: 1; }
  .intro[data-sailing="true"] .panorama-track { animation: drift var(--drift-duration) linear infinite; animation-delay: calc(var(--drift-duration) * -.05); }
  .intro[data-paused="true"] *, .intro[data-hidden="true"] * { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .lightbox-image { transition: none; }
  }
}

@layer responsive {
  @media (min-width: 761px) {
    .scenes { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    /* Enlarge the shared ticket canvas by 5%, keeping its paper, text,
       ink mask and hit area aligned and the sleeve anchored at the corner. */
    .boarding .scene-stage { position: absolute; right: 0; bottom: 0; width: min(105cqw, calc(105cqh * var(--canvas-width) / var(--canvas-height))); height: min(105cqh, calc(105cqw * var(--canvas-height) / var(--canvas-width))); }
  }
  @media (min-width: 761px) and (max-width: 1000px) {
    /* Preserve the previous equal-column row height while moving the divider. */
    .scenes { grid-template-rows: calc((100cqw - 12px) * 808 / 2324) auto; }
    .boarding, .harbor { aspect-ratio: auto; }
  }
  @media (min-width: 1001px) {
    .scenes {
      /* The header, all three panels, controls and 16px of bottom breathing room
         fit in the first screen. svh also accounts for browser window height. */
      height: min(calc((100cqw - 12px) * 808 / 2324 + 100cqw * 748 / 2360 + 14px), calc(100svh - var(--header-height) - 78px));
      grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
    }
    .scene { aspect-ratio: auto; }
  }
  @media (max-width: 1000px) {
    :root { --sidebar: 110px; }
    .home-wordmark { left: calc(-1 * var(--sidebar) - 8px); max-width: var(--sidebar); }
    main { width: calc(100% - 48px); }
    .intro-profile h1 { font-size: 28px; }
    .profile-quote, .profile-background { font-size: 11px; }
    .about-toggle { padding-inline: 10px; }
    .about-panel { padding-inline: 24px; }
    .about-content { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .about-photos { justify-self: center; }
    .about-paintings { grid-column: 1; justify-self: center; }
  }
  @media (min-width: 761px) and (max-width: 1100px) {
    .visual-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .selected-works { grid-template-columns: 1fr; row-gap: 24px; }
    .works-heading h2 br { display: none; }
  }
  @media (max-width: 760px) {
    :root { --radius: 14px; --sidebar: 0px; --header-height: 112px; }
    main { width: calc(100% - 32px); margin: 0 16px; }
    .masthead { margin-left: 0; padding-top: 36px; }
    .home-wordmark { left: 24px; top: 10px; transform: none; max-width: none; }
    .route-map { height: 76px; }
    .masthead::before { left: -16px; right: -16px; }
    .route-stop { height: 49px; top: calc(var(--stop-y) - 12px); min-height: 44px; }
    .route-dot, .route-dot svg { width: 24px; height: 24px; }
    .route-sun { width: 36px; height: 36px; }
    .route-ship { width: 48px; height: 30px; transform: translate(8px, -26px); }
    .reset-button { padding: 4px 0; font-size: 11px; }
    .portfolio-content { display: block; }
    .intro-profile { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 16px; width: auto; margin: 18px 0 28px; }
    .intro-profile h1 { margin: 0; font-size: 40px; }
    .profile-quote { align-self: center; margin: 0; font-size: 13px; }
    .profile-background { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; font-size: 13px; }
    .about-toggle { left: 16px; bottom: 16px; width: auto; min-width: 110px; min-height: 44px; padding: 10px 16px; font-size: 11px; box-shadow: 0 2px 12px color-mix(in srgb, var(--stamp-red) 10%, transparent); }
    body[data-about-open="true"] .intro-profile { display: none; }
    .about-panel { min-height: calc(100svh - var(--header-height) - 16px); padding: 24px 0 72px; }
    .about-panel-header { gap: 16px; margin-bottom: 28px; }
    .about-back { min-height: 44px; }
    .about-panel h2 { font-size: 36px; }
    .about-photos { width: 87%; justify-self: start; }
    .about-bio { margin-top: 28px; font-size: 17px; line-height: 1.75; }
    .scenes { grid-template-columns: 1fr; gap: 14px; }
    .interior { grid-column: auto; }
    .intro-toolbar { align-items: flex-start; padding: 22px 0; gap: 16px; flex-direction: column; }
    .intro-actions { width: 100%; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .works-link { margin-left: auto; }
    .selected-works { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 40px 0 0; }
    .works-heading { padding: 0; }
    .works-heading h2 br { display: none; }
    .project-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .project-wide { grid-column: auto; aspect-ratio: 4 / 3; }
    .project-caption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
    .coming-soon { top: 35%; gap: 12px; }
    .visual-design { padding: 40px 0 40px; }
    .visual-design h2 { margin-bottom: 20px; }
    .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lightbox-figure { inset: 56px 16px 8px; }
    .lightbox-arrow { width: 40px; height: 56px; background: #0008; border-radius: 4px; }
    .lightbox-previous { left: 4px; }
    .lightbox-next { right: 4px; }
  }
  @media (max-width: 680px) {
    .home-wordmark { font-size: 15px; }
  }
}