/* ============================================================
   FONTS
   ============================================================ */
@font-face {
    font-family: 'TerminalF4';
    src: url('../Fonts/Terminal F4.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'National Park - Medium';
    src: url('../Fonts/NationalPark-VariableVF.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --bg:           #ebf1ef;
    --text:         #282d31;
    --highlight:    #668d3e;
    --orange:       #e78b30;
    --light-orange: #e9b72d;
    --pale-blue:    #6a9ebb;
    --light-green:  #aeb241;
    --dot-grid:     #282d3185;
    --dot-grid-size: 22px;
    --dot-grid-dot:  1.5px;
    --layout-design-width: 1920px;
    --layout-design-height: 911px;
    /* Default launch size for portfolio tiles (1 = original, 1.25 = +25%) */
    --tile-launch-scale: 1.25;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    background-color: rgba(235, 241, 239, 1);
    color: var(--text);
    font-family: 'TerminalF4', 'Courier New', monospace;
    min-height: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 41px 47px 37px;
}

body.modal-open,
body.lightbox-open {
    overflow: hidden;
}

button {
    font-family: inherit;
}

/* Minimal scrollbars — green thumb, transparent track */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--highlight) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--highlight);
    border-radius: 999px;
    border: none;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
    background-color: rgba(102, 141, 62, 0.5);
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ============================================================
   SITE SHELL — header / main / footer
   ============================================================ */
.site-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
    min-height: 72px;
    position: relative;
    z-index: 30;
    background-color: var(--bg);
}

#lottie-container {
    width: min(266px, 50.82vw);
    height: 87px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#lottie-container:focus-visible {
    outline: 2px solid var(--accent, #668d3e);
    outline-offset: 4px;
}

#lottie-frame {
    width: 290px;
    height: 138px;
    display: block;
    background: transparent;
}

.site-main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    margin-top: 12px;
    position: relative;
    /* No isolation here — category-nav must share the root stacking context with
       the stage so the rail can stay above floated tiles. */
    background-color: var(--bg);
}

/* Desktop eyebrow — sits above the stage, outside the scaled artboard */
.category-eyebrow {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0 4px;
    font-family: 'National Park - Medium', sans-serif;
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--text);
    align-self: end;
}

.category-eyebrow[hidden] {
    display: none;
}

/* Artboard viewport: available main area; stage inside scales uniformly */
.stage-viewport {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.portfolio-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--layout-design-width);
    height: var(--layout-design-height);
    display: grid;
    /* Single column: tiles overlay a full-stage absolute #models (like mobile). */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.tile-drag-grid {
    position: absolute;
    /* Behind #models (1), .portfolio-panel (20), and floated tiles (80) */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image: radial-gradient(
        circle,
        var(--dot-grid) calc(var(--dot-grid-dot) / 2),
        transparent calc(var(--dot-grid-dot) / 2 + 0.5px)
    );
    background-size: var(--dot-grid-size) var(--dot-grid-size);
}

.tile-drag-grid-canvas {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Desktop: canvas draws the reactive dots; hide the static CSS pattern. */
.tile-drag-grid.is-reactive {
    background-image: none;
}

.tile-drag-grid.is-reactive .tile-drag-grid-canvas {
    display: block;
}

/* ============================================================
   CATEGORY NAV — left icon rail
   ============================================================ */
.category-nav {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    /* Above #portfolio-float-layer (80) so idle/hover/active rail always wins */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align the first button with the top of the stage viewport */
    justify-content: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 56px;
    padding: 0 10px 0 4px;
    pointer-events: auto;
}

/* Desktop: pin Showreel + Contact to the bottom of the rail */
#showreel-btn {
    margin-top: auto;
}

/* Desktop: filled accent treatment for Showreel + Contact */
#showreel-btn,
#info-btn {
    background: var(--highlight);
    border-color: var(--highlight);
    color: #ebf1ef;
    box-shadow: 0 4px 14px rgba(102, 141, 62, 0.22);
}

#showreel-btn .category-nav-icon,
#info-btn .category-nav-icon,
#showreel-btn .category-nav-label,
#info-btn .category-nav-label {
    color: #ebf1ef;
}

#showreel-btn:hover,
#showreel-btn:focus-visible,
#info-btn:hover,
#info-btn:focus-visible {
    background: #5a7c36;
    border-color: #5a7c36;
    box-shadow: 0 8px 20px rgba(102, 141, 62, 0.28);
}

#showreel-btn:hover .category-nav-label,
#showreel-btn:focus-visible .category-nav-label,
#info-btn:hover .category-nav-label,
#info-btn:focus-visible .category-nav-label {
    color: #ebf1ef;
}

/* Invisible barrier padding so tiles cannot rest under / over the rail */
.category-nav::before {
    content: '';
    position: absolute;
    inset: -12px -18px -12px -8px;
    z-index: -1;
    pointer-events: auto;
}

.category-nav-btn {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 0;
    border: 1.5px solid rgba(102, 141, 62, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    cursor: pointer;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(40, 45, 49, 0.06);
    transition:
        width 0.28s cubic-bezier(0.34, 1.1, 0.64, 1),
        gap 0.22s ease,
        padding 0.22s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.category-nav-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--highlight);
}

.category-nav-icon svg {
    display: block;
}

.category-nav-label {
    font-family: 'National Park - Medium', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text);
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-4px);
    transition:
        max-width 0.28s cubic-bezier(0.34, 1.1, 0.64, 1),
        opacity 0.2s ease,
        transform 0.22s ease;
}

.category-nav-btn:hover,
.category-nav-btn:focus-visible {
    width: auto;
    max-width: min(260px, 42vw);
    gap: 10px;
    padding: 10px 14px 10px 12px;
    border-color: var(--highlight);
    box-shadow: 0 8px 20px rgba(40, 45, 49, 0.1);
    z-index: 2;
}

.category-nav-btn:hover .category-nav-label,
.category-nav-btn:focus-visible .category-nav-label {
    max-width: 200px;
    opacity: 1;
    transform: translateX(0);
}

.category-nav-btn.is-active {
    border-color: var(--highlight);
    background: rgba(102, 141, 62, 0.1);
}

.category-nav-btn.is-active .category-nav-icon {
    color: var(--highlight);
}

.site-footer {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 16px;
    padding: 14px 8px 4px;
    position: relative;
    z-index: 30;
    background-color: var(--bg);
}

.tagline {
    grid-column: 2;
    justify-self: center;
    font-family: 'TerminalF4', monospace;
    font-size: clamp(12px, 1.4vw, 15px);
    color: var(--text);
    letter-spacing: 0.06em;
    text-align: center;
    opacity: 0.7;
    margin: 0;
}

/* ============================================================
   PORTFOLIO PANEL — scattered tiles (no scroll)
   ============================================================ */
.portfolio-panel {
    position: relative;
    z-index: 20;
    /*
     * Keep desktop tile percentages authored against the former left grid
     * column: (0.78 / (0.78 + 1.38)) of the stage after its 14px gap.
     * #models is full-stage behind this panel.
     */
    width: calc((100% - 14px) * 0.361111);
    min-height: 0;
    height: 100%;
    /* Tiles paint over the full-stage #models behind this panel */
    overflow: visible;
    padding: 4px 6px 8px 2px;
    /* Empty stage space falls through to the 3D canvas / OrbitControls */
    pointer-events: none;
}

.portfolio-category {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.portfolio-category.is-active {
    opacity: 1;
    pointer-events: none;
}

.portfolio-category.is-active .portfolio-tile {
    pointer-events: auto;
}

/* Desktop: titles live in .category-eyebrow above the stage */
.portfolio-category-title {
    display: none;
}

.portfolio-cards {
    position: relative;
    flex: 1;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portfolio-float-layer {
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.scene-stack-layer {
    display: contents;
}

.portfolio-float-layer > .portfolio-tile {
    pointer-events: auto;
}

/* Door dialogue stacks with tiles through the shared portrait scene layer. */
.portfolio-float-layer .door-dialogue.is-visible .door-speech-bubble {
    pointer-events: auto;
}

.portfolio-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(102, 141, 62, 0.18);
    box-shadow: 0 6px 18px rgba(40, 45, 49, 0.06);
    transform-origin: center center;
    opacity: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
    will-change: transform, opacity, left, top, width;
    transition: opacity 0.18s ease, box-shadow 0.18s ease, z-index 0s;
}

.portfolio-tile.is-ready,
.portfolio-category.is-entering .portfolio-tile {
    opacity: 0.92;
}

.portfolio-tile:hover,
.portfolio-tile.is-dragging,
.portfolio-tile.is-raised {
    opacity: 1;
    z-index: 5;
}

.portfolio-tile:hover,
.portfolio-tile.is-raised {
    box-shadow: 0 10px 26px rgba(40, 45, 49, 0.12);
}

/* Freeze idle motion and shrink to 95% while actively dragging. */
.portfolio-tile.is-dragging {
    animation: none !important;
    cursor: grabbing;
    z-index: 90;
    box-shadow: 0 14px 34px rgba(40, 45, 49, 0.16);
    transform: rotate(var(--tile-rot, 0deg)) scale(0.95) !important;
    transition:
        transform 0.16s cubic-bezier(0.34, 1.15, 0.64, 1),
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

/* Bounce back with overshoot after a drag drop. */
.portfolio-tile.is-drop-bounce {
    animation: portfolio-tile-drop-bounce 0.48s cubic-bezier(0.34, 1.45, 0.54, 1) both !important;
}

.portfolio-tile.is-floating {
    position: absolute;
    margin: 0;
}

/* Tile position readout — design aid for launch CSS (toggle with T) */
.tile-pos-readout {
    appearance: none;
    position: absolute;
    z-index: 8;
    left: 6px;
    top: 6px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin: 0;
    padding: 5px 7px;
    border: 1px solid rgba(235, 241, 239, 0.18);
    border-radius: 6px;
    background: rgba(28, 32, 35, 0.9);
    color: rgba(235, 241, 239, 0.88);
    font-family: 'TerminalF4', monospace;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transform: rotate(calc(0deg - var(--tile-rot, 0deg)));
    transform-origin: top left;
    box-shadow: 0 4px 12px rgba(28, 32, 35, 0.22);
}

body.tile-pos-readout-on .portfolio-tile .tile-pos-readout:not([hidden]) {
    display: flex;
}

.tile-pos-readout:hover,
.tile-pos-readout:focus-visible {
    outline: none;
    border-color: rgba(174, 178, 65, 0.65);
    color: #fff;
}

.tile-pos-readout.is-copied {
    border-color: var(--light-green);
    color: var(--light-green);
}

.tile-pos-readout-label {
    color: var(--light-green);
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

.tile-pos-readout-line {
    white-space: nowrap;
}

.tile-pos-readout-px {
    opacity: 0.55;
    white-space: nowrap;
    margin-top: 1px;
}

.portfolio-tile.is-positioned[data-home-slot="1"],
.portfolio-tile.is-positioned[data-home-slot="2"],
.portfolio-tile.is-positioned[data-home-slot="3"],
.portfolio-tile.is-positioned[data-home-slot="4"] {
    /* Inline left/top/width from JS wins after first drag */
}

/* Scatter layout — slot is stable (not DOM nth-child) so siblings don't jump when one floats */
.portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 4%;
    top: 6%;
    --tile-rot: -3deg;
}

.portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 48%;
    top: 18%;
    --tile-rot: 2.2deg;
}

.portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 20%;
    top: 54%;
    --tile-rot: -1.4deg;
}

.portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 58%;
    top: 58%;
    --tile-rot: 1.8deg;
}

.portfolio-category[data-category="showreel"] .portfolio-cards > .portfolio-tile:not(.is-floating):not(.is-positioned) {
    width: 93.8%;
    left: 28.3%;
    top: 18.8%;
    --tile-rot: -1.2deg;
    padding: 14px;
}

.portfolio-category[data-category="showreel"] .portfolio-card-title {
    font-size: 18px;
    padding: 2px 4px 4px;
}

/* Web Videos — launch scatter from tilepos readout */
.portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: 55%;
    left: 13.2%;
    top: 5%;
    --tile-rot: -3deg;
}

.portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: 55%;
    left: 91.9%;
    top: 5%;
    --tile-rot: 2.2deg;
}

.portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
    width: 55%;
    left: 10.8%;
    top: 51.3%;
    --tile-rot: -1.4deg;
}

.portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
    width: 55%;
    left: 78.4%;
    top: 48.5%;
    --tile-rot: 1.8deg;
}

/* Billboards & Events — launch scatter from tilepos readout */
.portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 15%;
    top: 7.7%;
    --tile-rot: -3deg;
}

.portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 91.8%;
    top: 11.3%;
    --tile-rot: 2.2deg;
}

.portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 47.6%;
    top: 52.3%;
    --tile-rot: -1.4deg;
}

/* Explainers & Education — launch scatter from tilepos readout */
.portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 11%;
    top: 21%;
    --tile-rot: -3deg;
}

.portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 59.4%;
    top: 52.2%;
    --tile-rot: 2.2deg;
}

.portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
    width: calc(44% * var(--tile-launch-scale, 1));
    left: 81.5%;
    top: 6.2%;
    --tile-rot: -1.4deg;
}

/* Apps & UX — launch scatter from tilepos readout */
.portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 84.8%;
    top: 5.7%;
    --tile-rot: -3deg;
}

.portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 16.2%;
    top: 27.2%;
    --tile-rot: -1.4deg;
}

/* Personal Projects — launch scatter from tilepos readout */
.portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 6.6%;
    top: 4.9%;
    --tile-rot: -3deg;
}

.portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 92.1%;
    top: 6.6%;
    --tile-rot: 2.2deg;
}

.portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 82.3%;
    top: 51.5%;
    --tile-rot: -1.4deg;
}

.portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
    width: 54.9%;
    left: 22.1%;
    top: 51.4%;
    --tile-rot: 1.8deg;
}

/* Showreel preview thumbnail (16:9). Works when tile is floated. */
.portfolio-card-media.showreel-preview-media {
    aspect-ratio: 16 / 9;
    background: rgba(40, 45, 49, 0.06);
    overflow: hidden;
    position: relative;
    border-radius: 11px;
}

.showreel-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.portfolio-tile-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.portfolio-tile-detail {
    display: none;
    width: 100%;
    gap: 20px;
    align-items: stretch;
}

.portfolio-project-modal-body {
    padding: 4px 18px 18px;
}

.portfolio-project-modal-body .portfolio-tile-detail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    container-type: inline-size;
    container-name: project-detail;
}

.portfolio-project-modal-body .portfolio-tile-detail-title {
    display: none;
}

/* Shared project-modal layout: video keeps aspect; copy scrolls beside it. */
.portfolio-project-modal-body .portfolio-tile-video {
    flex: 1.25 1 0;
    height: auto;
    align-self: flex-start;
}

.portfolio-project-modal-body .portfolio-tile-copy {
    flex: 1 1 0;
    justify-content: flex-start;
    max-height: calc((100cqi - 20px) * 1.25 / 2.25 * 10 / 16);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.portfolio-tile-close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(40, 45, 49, 0.25);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, color 0.2s;
    padding: 0;
}

.portfolio-tile-close:hover,
.portfolio-tile-close:focus-visible {
    border-color: var(--highlight);
    color: var(--highlight);
}

.portfolio-tile-video {
    flex: 1.25;
    min-width: 0;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(102, 141, 62, 0.16), rgba(106, 158, 187, 0.14)),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 7px,
            rgba(40, 45, 49, 0.03) 7px,
            rgba(40, 45, 49, 0.03) 14px
        );
}

.portfolio-tile-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.portfolio-tile-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 8px 8px 4px;
}

.portfolio-tile-detail-title {
    font-family: 'National Park - Medium', sans-serif;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--text);
}

.portfolio-tile-detail-desc {
    font-family: 'National Park - Medium', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: rgba(40, 45, 49, 0.72);
    margin: 0;
}

/* Opt-in multi-media project layout. Single-video projects keep the rules above. */
.portfolio-project-modal-body .portfolio-tile-detail--multimedia {
    position: relative;
}

.project-media-stage {
    position: relative;
    flex: 1.25 1 0;
    min-width: 0;
    aspect-ratio: 16 / 10;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(102, 141, 62, 0.13), rgba(106, 158, 187, 0.12)),
        rgba(40, 45, 49, 0.035);
}

.project-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px;
    align-content: start;
    grid-auto-rows: max-content;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* 1–5 videos: fill the stage with uniform tile sizes (padding/gap retained). */
.project-video-grid[data-video-count="1"],
.project-video-grid[data-video-count="2"],
.project-video-grid[data-video-count="3"],
.project-video-grid[data-video-count="4"],
.project-video-grid[data-video-count="5"] {
    align-content: stretch;
    grid-auto-rows: unset;
    overflow: hidden;
    scrollbar-gutter: auto;
}

.project-video-grid[data-video-count="1"] .project-video-preview,
.project-video-grid[data-video-count="2"] .project-video-preview,
.project-video-grid[data-video-count="3"] .project-video-preview,
.project-video-grid[data-video-count="4"] .project-video-preview,
.project-video-grid[data-video-count="5"] .project-video-preview {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    align-self: stretch;
}

.project-video-grid[data-video-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
}

.project-video-grid[data-video-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
}

.project-video-grid[data-video-count="3"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.project-video-grid[data-video-count="3"] .project-video-preview:nth-child(1),
.project-video-grid[data-video-count="3"] .project-video-preview:nth-child(2) {
    grid-column: span 2;
}

.project-video-grid[data-video-count="3"] .project-video-preview:nth-child(3) {
    grid-column: 2 / span 2;
}

.project-video-grid[data-video-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.project-video-grid[data-video-count="5"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.project-video-grid[data-video-count="5"] .project-video-preview:nth-child(1),
.project-video-grid[data-video-count="5"] .project-video-preview:nth-child(2),
.project-video-grid[data-video-count="5"] .project-video-preview:nth-child(3) {
    grid-column: span 2;
}

.project-video-grid[data-video-count="5"] .project-video-preview:nth-child(4) {
    grid-column: 2 / span 2;
}

.project-video-grid[data-video-count="5"] .project-video-preview:nth-child(5) {
    grid-column: 4 / span 2;
}

.project-video-preview {
    position: relative;
    min-width: 0;
    width: 100%;
    aspect-ratio: 6 / 5;
    height: auto;
    min-height: max-content;
    align-self: start;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: rgba(40, 45, 49, 0.08);
    color: #fff;
    cursor: pointer;
    outline: none;
}

.project-video-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.project-video-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.38));
    pointer-events: none;
}

.project-video-preview:hover img,
.project-video-preview:focus-visible img {
    transform: scale(1.035);
    filter: brightness(0.82);
}

.project-video-preview:focus-visible {
    box-shadow: inset 0 0 0 3px var(--highlight);
}

.project-video-preview-label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    z-index: 1;
    font-family: 'TerminalF4', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.project-video-preview-play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 24px;
    border-radius: 7px;
    background: rgba(102, 141, 62, 0.9);
    transform: translate(-50%, -50%);
}

.project-video-preview-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 53%;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
    transform: translate(-50%, -50%);
}

.project-video-player {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.project-video-player[hidden],
.project-image-lightbox[hidden] {
    display: none;
}

.project-video-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.project-media-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: rgba(40, 45, 49, 0.82);
    color: #fff;
    cursor: pointer;
    outline: none;
}

.project-media-close:hover,
.project-media-close:focus-visible {
    border-color: #fff;
    background: var(--highlight);
}

.project-video-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
}

.project-image-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 8px 8px 12px;
}

/* 3 images: keep 2-up row, center the third beneath. */
.project-image-gallery[data-image-count="3"] .project-image-tile:nth-child(3) {
    grid-column: 1 / -1;
    width: calc((100% - 14px) / 2);
    justify-self: center;
}

.project-image-tile {
    display: block;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(102, 141, 62, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(40, 45, 49, 0.06);
    transform-origin: center center;
    transform: rotate(var(--tile-rot, 0deg));
    animation: portfolio-tile-wiggle 5.2s ease-in-out infinite;
    cursor: zoom-in;
    outline: none;
}

.project-image-tile:nth-child(2) {
    animation-delay: -2.4s;
    animation-duration: 5.7s;
}

.project-image-tile:hover,
.project-image-tile:focus-visible {
    border-color: var(--highlight);
    box-shadow: 0 8px 22px rgba(40, 45, 49, 0.12);
}

.project-image-tile-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(40, 45, 49, 0.06);
}

.project-image-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.project-image-lightbox {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
    box-sizing: border-box;
    touch-action: none;
}

.project-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(24, 28, 30, 0.88);
    cursor: zoom-out;
}

.project-image-lightbox-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 18px);
    width: min(1180px, 100%);
    max-width: 100%;
    height: min(760px, calc(100dvh - 56px));
    max-height: 100%;
    pointer-events: none;
}

.project-image-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
}

.project-image-lightbox-content img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.project-image-lightbox.is-zoomed .project-image-lightbox-content img {
    cursor: grab;
}

.project-image-lightbox-nav {
    flex: 0 0 auto;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 8vw, 48px);
    height: clamp(40px, 8vw, 48px);
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: rgba(40, 45, 49, 0.82);
    color: #fff;
    cursor: pointer;
    outline: none;
}

.project-image-lightbox-nav[hidden] {
    display: none;
}

.project-image-lightbox-nav:hover,
.project-image-lightbox-nav:focus-visible {
    border-color: #fff;
    background: var(--highlight);
}

.project-image-lightbox-close {
    position: absolute;
    z-index: 2;
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
}

@media (max-width: 560px) {
    .project-image-lightbox {
        padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }

    .project-image-lightbox-stage {
        gap: 0;
        width: 100%;
        height: min(860px, calc(100dvh - 24px));
    }

    .project-image-lightbox-content {
        width: 100%;
        height: 100%;
    }

    /* Overlay arrows so the image can use full stage width. */
    .project-image-lightbox-nav {
        position: absolute;
        z-index: 3;
        top: 50%;
        width: 40px;
        height: 40px;
        transform: translateY(-50%);
        background: rgba(40, 45, 49, 0.72);
    }

    .project-image-lightbox-prev {
        left: 6px;
    }

    .project-image-lightbox-next {
        right: 6px;
    }
}

.portfolio-card-media {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 11px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(102, 141, 62, 0.14), rgba(106, 158, 187, 0.12)),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 7px,
            rgba(40, 45, 49, 0.03) 7px,
            rgba(40, 45, 49, 0.03) 14px
        );
}

.portfolio-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-card-title {
    font-family: 'TerminalF4', monospace;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0 2px 2px;
    color: var(--text);
}

/* Pop-in with mild overshoot, then hand off to idle wiggle */
@keyframes portfolio-tile-pop {
    0% {
        opacity: 0;
        transform: rotate(var(--tile-rot, 0deg)) scale(0.92);
    }
    100% {
        opacity: 0.92;
        transform: rotate(var(--tile-rot, 0deg)) scale(1);
    }
}

@keyframes portfolio-tile-wiggle {
    0%, 100% {
        transform: rotate(var(--tile-rot, 0deg)) translateY(0);
    }
    35% {
        transform: rotate(calc(var(--tile-rot, 0deg) + 0.75deg)) translateY(-2px);
    }
    70% {
        transform: rotate(calc(var(--tile-rot, 0deg) - 0.65deg)) translateY(1.5px);
    }
}

@keyframes portfolio-tile-drop-bounce {
    0% {
        transform: rotate(var(--tile-rot, 0deg)) scale(0.95);
    }
    55% {
        transform: rotate(var(--tile-rot, 0deg)) scale(1.05);
    }
    78% {
        transform: rotate(var(--tile-rot, 0deg)) scale(0.985);
    }
    100% {
        transform: rotate(var(--tile-rot, 0deg)) scale(1);
    }
}

/* Home tiles: pop in, then idle wiggle */
.portfolio-category.is-entering .portfolio-tile:not(.is-dragging):not(.is-floating):not(.is-positioned) {
    animation:
        portfolio-tile-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
        portfolio-tile-wiggle 5.2s ease-in-out 0.38s infinite;
}

.portfolio-category.is-entering .portfolio-tile[data-home-slot="1"]:not(.is-dragging):not(.is-floating):not(.is-positioned) {
    animation-delay: 0s, 0.38s;
    animation-duration: 0.38s, 5.6s;
}

.portfolio-category.is-entering .portfolio-tile[data-home-slot="2"]:not(.is-dragging):not(.is-floating):not(.is-positioned) {
    animation-delay: 0.07s, 0.45s;
    animation-duration: 0.38s, 4.8s;
}

.portfolio-category.is-entering .portfolio-tile[data-home-slot="3"]:not(.is-dragging):not(.is-floating):not(.is-positioned) {
    animation-delay: 0.14s, 0.52s;
    animation-duration: 0.38s, 5.4s;
}

.portfolio-category.is-entering .portfolio-tile[data-home-slot="4"]:not(.is-dragging):not(.is-floating):not(.is-positioned) {
    animation-delay: 0.21s, 0.59s;
    animation-duration: 0.38s, 5.0s;
}

/* Dragged / floated tiles live outside .portfolio-category — keep the same idle wiggle */
.portfolio-tile.is-floating:not(.is-dragging):not(.is-drop-bounce),
.portfolio-tile.is-positioned:not(.is-dragging):not(.is-drop-bounce) {
    animation: portfolio-tile-wiggle 5.2s ease-in-out infinite;
}

.portfolio-tile.is-floating[data-home-slot="1"]:not(.is-dragging):not(.is-drop-bounce),
.portfolio-tile.is-positioned[data-home-slot="1"]:not(.is-dragging):not(.is-drop-bounce) {
    animation-duration: 5.6s;
}

.portfolio-tile.is-floating[data-home-slot="2"]:not(.is-dragging):not(.is-drop-bounce),
.portfolio-tile.is-positioned[data-home-slot="2"]:not(.is-dragging):not(.is-drop-bounce) {
    animation-duration: 4.8s;
}

.portfolio-tile.is-floating[data-home-slot="3"]:not(.is-dragging):not(.is-drop-bounce),
.portfolio-tile.is-positioned[data-home-slot="3"]:not(.is-dragging):not(.is-drop-bounce) {
    animation-duration: 5.4s;
}

.portfolio-tile.is-floating[data-home-slot="4"]:not(.is-dragging):not(.is-drop-bounce),
.portfolio-tile.is-positioned[data-home-slot="4"]:not(.is-dragging):not(.is-drop-bounce) {
    animation-duration: 5.0s;
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-tile {
        opacity: 0.92;
        transform: rotate(var(--tile-rot, 0deg));
        transition: none;
    }

    .portfolio-tile.is-dragging {
        transform: rotate(var(--tile-rot, 0deg)) !important;
    }

    .portfolio-tile.is-drop-bounce {
        animation: none !important;
    }

    .portfolio-category.is-entering .portfolio-tile,
    .portfolio-tile.is-floating,
    .portfolio-tile.is-positioned,
    .info-profile-tile,
    .project-image-tile {
        animation: none;
        opacity: 0.92;
    }

    .info-profile-tile,
    .project-image-tile {
        transform: rotate(var(--tile-rot, 0deg));
    }

}

@media (max-width: 900px) {
    .portfolio-project-modal-body .portfolio-tile-detail {
        flex-direction: column;
        gap: 12px;
    }

    .portfolio-project-modal-body .portfolio-tile-video {
        flex: 0 0 auto;
        width: 100%;
    }

    .portfolio-project-modal-body .project-media-stage {
        flex: 0 0 auto;
        width: 100%;
    }

    .portfolio-project-modal-body .portfolio-tile-copy {
        flex: 0 1 auto;
        max-height: min(42vh, 320px);
    }
}

@media (max-width: 380px) {
    .project-image-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-image-gallery[data-image-count="3"] .project-image-tile:nth-child(3) {
        width: 100%;
        justify-self: stretch;
    }
}

/* ============================================================
   PHONE LANDSCAPE GATE — portrait-only UX for phone-class devices
   ============================================================ */
.rotate-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(102, 141, 62, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(106, 158, 187, 0.16), transparent 50%),
        var(--bg);
    color: var(--text);
    text-align: center;
    pointer-events: auto;
}

.rotate-gate[hidden] {
    display: none !important;
}

body.phone-landscape:not(.is-video-fullscreen) .rotate-gate {
    display: flex;
}

body.phone-landscape:not(.is-video-fullscreen) .rotate-gate[hidden] {
    display: flex !important;
}

body.phone-landscape:not(.is-video-fullscreen) {
    overflow: hidden;
}

body.phone-landscape:not(.is-video-fullscreen) #models,
body.phone-landscape:not(.is-video-fullscreen) .door-dialogue {
    visibility: hidden !important;
    pointer-events: none !important;
}

.rotate-gate-message {
    font-family: 'National Park - Medium', sans-serif;
    font-size: clamp(18px, 4.5vw, 28px);
    font-weight: 500;
    letter-spacing: 0.01em;
    max-width: 16em;
    line-height: 1.35;
}

/* ============================================================
   MODALS
   ============================================================ */
.site-modal {
    position: fixed;
    inset: 0;
    /* Above .category-nav (100) so Contact/Showreel cover the mobile pill */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.site-modal.is-closing {
    pointer-events: none;
}

.site-modal[hidden] {
    display: none;
}

.site-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 45, 49, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.site-modal-dialog {
    position: relative;
    z-index: 1;
    /* Desktop default: 920×820 scaled uniformly ×1.2 */
    width: min(1104px, 100%);
    max-height: min(90vh, 984px);
    overflow: auto;
    background: var(--bg);
    border: 2px solid var(--highlight);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(40, 45, 49, 0.18);
    opacity: 0;
    transform: scale(0.975);
    transform-origin: center;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.site-modal.is-visible .site-modal-backdrop {
    opacity: 1;
}

.site-modal.is-visible .site-modal-dialog {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .site-modal-backdrop,
    .site-modal-dialog {
        transition: none;
    }
}

.info-dialog {
    width: min(480px, 100%);
}

.site-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.site-modal-title {
    font-family: 'TerminalF4', monospace;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.08em;
    margin: 0;
    color: var(--text);
}

.site-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(40, 45, 49, 0.25);
    background: transparent;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, color 0.2s;
}

.site-modal-close:hover,
.site-modal-close:focus-visible {
    border-color: var(--highlight);
    color: var(--highlight);
}

.info-modal-body {
    padding: 4px 20px 22px;
}

/* Desktop: tagline hidden. Phone shows it below the profile picture. */
.info-tagline {
    display: none;
    font-family: 'TerminalF4', monospace;
    font-size: clamp(13px, 1.5vw, 16px);
    letter-spacing: 0.06em;
    color: var(--text);
    opacity: 0.75;
    margin: 0 0 14px;
}

/* Contact portrait — tile chrome + idle wiggle, no drag */
.info-profile-tile {
    display: block;
    width: min(168px, 42%);
    margin: 0 auto 18px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(102, 141, 62, 0.18);
    box-shadow: 0 6px 18px rgba(40, 45, 49, 0.06);
    transform-origin: center center;
    transform: rotate(var(--tile-rot, 0deg));
    animation: portfolio-tile-wiggle 5.2s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.info-profile-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 11px;
    overflow: hidden;
    background: rgba(40, 45, 49, 0.06);
}

.info-profile-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    -webkit-user-drag: none;
}

.info-bio {
    font-family: 'National Park - Medium', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    margin: 0 0 18px;
}

.info-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-links a {
    font-family: 'TerminalF4', monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--highlight);
    text-decoration: none;
}

.info-links a:hover,
.info-links a:focus-visible {
    text-decoration: underline;
}

/* Showreel video (YouTube native controls inside modal) */
#video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 6px 6px;
}

#yt-player,
#video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Range inputs — shared (3D light sliders, etc.) */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    background: linear-gradient(
        to right,
        var(--highlight) var(--progress, 0%),
        rgba(235, 241, 239, 0.18) var(--progress, 0%)
    );
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--highlight);
    cursor: pointer;
    transition: transform 0.15s;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
    transform: scale(1.25);
}

input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--highlight);
    cursor: pointer;
    border: none;
}

/* ============================================================
   3D MODELS VIEWER — full-stage canvas behind the tile panel
   ============================================================ */
#models {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

#model-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.75s ease;
}

#model-canvas.is-ready {
    opacity: 1;
}

#model-canvas:active {
    cursor: grabbing;
}

.stub-text {
    font-family: 'TerminalF4', monospace;
    font-size: 14px;
    color: rgba(40, 45, 49, 0.25);
    letter-spacing: 0.08em;
    z-index: 1;
    pointer-events: none;
}

.stub-text.is-hidden {
    display: none;
}

/* -- Draggable dev overlays -- */
.dev-overlay {
    position: fixed;
    z-index: 60;
    background: rgba(28, 32, 35, 0.92);
    border: 1px solid rgba(235, 241, 239, 0.15);
    border-radius: 6px;
    color: rgba(235, 241, 239, 0.85);
    font-family: 'TerminalF4', monospace;
    font-size: 11px;
    box-shadow: 0 8px 28px rgba(28, 32, 35, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.dev-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.dev-overlay-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(235, 241, 239, 0.1);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(235, 241, 239, 0.55);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.dev-overlay-header:active {
    cursor: grabbing;
}

.dev-overlay-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(40vh, 320px);
    overflow: auto;
}

#dev-camera-overlay {
    left: 16px;
    bottom: 56px;
    width: min(360px, calc(100vw - 32px));
}

#dev-camera-overlay .dev-overlay-body {
    max-height: min(36vh, 280px);
}

/* -- Camera + selection readouts -- */
.camera-readout,
.speech-offset-readout,
.selection-readout,
.animation-readout {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(235, 241, 239, 0.85);
    font-family: 'TerminalF4', monospace;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: pre;
    pointer-events: none;
}

.camera-readout {
    opacity: 1;
}

.speech-offset-readout {
    pointer-events: auto;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(235, 241, 239, 0.12);
    background: rgba(235, 241, 239, 0.04);
}

.speech-offset-readout:hover,
.speech-offset-readout:focus-visible {
    border-color: rgba(102, 141, 62, 0.55);
    outline: none;
}

.speech-offset-readout.is-copied {
    color: var(--highlight);
}

.door-dialogue.is-speech-calibrating .door-speech-bubble {
    cursor: grab;
    touch-action: none;
}

.door-dialogue.is-speech-dragging .door-speech-bubble {
    cursor: grabbing;
}

.selection-readout.has-selection {
    color: var(--highlight);
}

.animation-readout {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

.animation-readout.is-visible {
    opacity: 1;
    max-height: 120px;
}

/* -- Door dialogue: comic bubble over house, near Frog-Lee -- */
/* Lives in #portfolio-float-layer; JS raise z-index stacks it with tiles. */
.door-dialogue {
    /* Share the scaled stage coordinate system with the 3D canvas. */
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: min(260px, 42vw);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    color: var(--text);
}

.door-dialogue.is-visible {
    opacity: 1;
}

.door-dialogue.is-visible .door-speech-bubble {
    pointer-events: auto;
}

.door-speech-bubble {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 22px 18px 18px;
    background: #ebf1ef;
    border: 1.75px solid #668d3e;
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(40, 45, 49, 0.1);
    text-align: left;
    color: inherit;
    cursor: default;
    /* Desktop: origin at bottom-right tail circle */
    transform-origin: calc(100% + 8px) calc(100% + 8px);
    transition:
        width 0.32s cubic-bezier(0.34, 1.1, 0.64, 1),
        height 0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/*
 * Desktop + tablet landscape: +50% speech bubble.
 * Scales from the tail so Frog-Lee anchoring stays put.
 * Phone / tablet portrait keep their dedicated sizing below.
 */
@media (min-width: 1025px), ((min-width: 744px) and (orientation: landscape)) {
    body:not(.phone-landscape) .door-speech-bubble {
        transform: scale(1.5);
    }
}

.door-speech-choices.is-layout-only {
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .door-speech-bubble {
        transition: none;
    }
}

.door-dialogue.is-interactive .door-speech-bubble {
    cursor: pointer;
}

.door-dialogue.is-awaiting-choice .door-speech-bubble {
    cursor: default;
}

.door-speech-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.door-speech-choices[hidden] {
    display: none;
}

.door-speech-choice {
    margin: 0;
    padding: 5px 12px 6px;
    border: 1.5px solid #668d3e;
    border-radius: 999px;
    background: #fff;
    color: #282d31;
    font-family: 'National Park - Medium', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.door-speech-choice:hover,
.door-speech-choice:focus-visible {
    background: #ebf1ef;
    outline: none;
}

/* Blinking right-pointing triangle — click affordance */
.door-speech-click-cue {
    position: absolute;
    right: 10px;
    bottom: 9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent #668d3e;
    opacity: 0;
    pointer-events: none;
}

.door-dialogue.is-interactive .door-speech-click-cue {
    animation: blink-cursor 1s step-end infinite;
}

/* Desktop: circle tail at bottom-right, same -10px edge padding as before */
.door-speech-tail {
    position: absolute;
    top: auto;
    right: -10px;
    bottom: -10px;
    width: 12px;
    height: 12px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ebf1ef;
    border: 2px solid #668d3e;
    box-shadow: 0 2px 6px rgba(40, 45, 49, 0.08);
    pointer-events: none;
    transform: none;
}

.door-speech-text {
    display: block;
    margin: 0;
    min-height: 1.45em;
    text-align: left;
    padding: 0;
    font-family: 'National Park - Medium', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: pre-line;
    color: #282d31;
}

@media (max-width: 900px) {
    .door-dialogue {
        max-width: min(200px, 48%);
    }
}

.door-speech-text::after {
    content: '';
}

.door-dialogue.is-typing .door-speech-text::after {
    content: '_';
    animation: blink-cursor 1s step-end infinite;
}

/* -- Sun light controls -- */
.light-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    width: min(220px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0 0 12px;
    background: rgba(28, 32, 35, 0.9);
    border: 1px solid rgba(235, 241, 239, 0.15);
    border-radius: 4px;
    color: rgba(235, 241, 239, 0.85);
    font-family: 'TerminalF4', monospace;
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.light-panel.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.light-panel-header {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(235, 241, 239, 0.1);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(235, 241, 239, 0.55);
}

.light-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 0;
}

.light-control-label {
    letter-spacing: 0.06em;
    color: rgba(235, 241, 239, 0.55);
}

.light-direction-pad {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border: 1px solid rgba(235, 241, 239, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(235, 241, 239, 0.04) 0%, transparent 70%),
        repeating-conic-gradient(
            from 0deg,
            rgba(235, 241, 239, 0.05) 0deg 90deg,
            transparent 90deg 180deg
        );
    cursor: crosshair;
    touch-action: none;
}

.light-direction-pad::before,
.light-direction-pad::after {
    content: '';
    position: absolute;
    background: rgba(235, 241, 239, 0.1);
    pointer-events: none;
}

.light-direction-pad::before {
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 1px;
    transform: translateX(-50%);
}

.light-direction-pad::after {
    top: 50%;
    left: 6px;
    right: 6px;
    height: 1px;
    transform: translateY(-50%);
}

.light-direction-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--highlight);
    border-radius: 50%;
    background: rgba(102, 141, 62, 0.35);
    box-shadow: 0 0 0 2px rgba(28, 32, 35, 0.85);
    pointer-events: none;
    transition: transform 0.08s ease;
}

.light-direction-pad:active .light-direction-handle {
    transform: scale(1.12);
}

.light-direction-readout {
    text-align: center;
    color: rgba(235, 241, 239, 0.45);
    letter-spacing: 0.04em;
}

.light-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.light-slider-row input[type="range"] {
    flex: 1;
}

.light-control-value {
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
    color: rgba(235, 241, 239, 0.65);
}

/* -- Scene object panel (dev overlay) -- */
.scene-panel {
    top: 88px;
    right: 16px;
    width: min(300px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scene-panel .scene-panel-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(235, 241, 239, 0.1);
}

.scene-search {
    flex-shrink: 0;
    margin: 10px 12px 0;
    padding: 7px 10px;
    background: rgba(235, 241, 239, 0.06);
    border: 1px solid rgba(235, 241, 239, 0.12);
    border-radius: 4px;
    color: rgba(235, 241, 239, 0.9);
    font-family: inherit;
    font-size: 11px;
    outline: none;
}

.scene-search:focus {
    border-color: var(--highlight);
}

.scene-object-list {
    flex: 1;
    min-height: 0;
    margin: 8px 0 0;
    padding: 0 6px 6px;
    list-style: none;
    overflow-y: auto;
}

.scene-object-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.scene-object-item:hover {
    background: rgba(235, 241, 239, 0.06);
}

.scene-object-item.is-selected {
    background: rgba(102, 141, 62, 0.18);
}

.scene-visibility-btn {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(235, 241, 239, 0.2);
    border-radius: 3px;
    color: rgba(235, 241, 239, 0.7);
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.scene-visibility-btn.is-hidden {
    color: rgba(235, 241, 239, 0.25);
    border-color: rgba(235, 241, 239, 0.08);
}

.scene-object-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.scene-object-type {
    flex-shrink: 0;
    font-size: 9px;
    color: rgba(235, 241, 239, 0.3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.scene-inspector {
    flex-shrink: 0;
    border-top: 1px solid rgba(235, 241, 239, 0.1);
    padding: 10px 12px 12px;
    max-height: 40%;
    overflow-y: auto;
}

.scene-selected-label {
    margin-bottom: 8px;
    color: var(--highlight);
    letter-spacing: 0.04em;
    word-break: break-word;
}

.scene-clip-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scene-clip-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scene-clip-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(235, 241, 239, 0.65);
}

.scene-clip-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    background: rgba(235, 241, 239, 0.06);
    border: 1px solid rgba(235, 241, 239, 0.12);
    border-radius: 3px;
    color: rgba(235, 241, 239, 0.75);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.scene-clip-btn:hover,
.scene-clip-btn.is-playing {
    background: rgba(102, 141, 62, 0.18);
    border-color: rgba(102, 141, 62, 0.45);
    color: var(--highlight);
}

.scene-clip-empty {
    color: rgba(235, 241, 239, 0.3);
    font-size: 10px;
}

@media (max-width: 600px) {
    #dev-camera-overlay {
        left: 10px;
        right: 10px;
        bottom: 48px;
        width: auto;
    }

    .camera-readout,
    .selection-readout,
    .animation-readout {
        font-size: 10px;
    }

    .scene-panel {
        top: auto;
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
        max-height: 45vh;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    body {
        padding: 37px 39px 35px;
        height: auto;
        min-height: 100%;
    }

    .site-main {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto minmax(520px, 70vh);
        column-gap: 10px;
        row-gap: 6px;
    }

    .category-nav {
        width: 48px;
        padding: 0 6px 8px 2px;
        gap: 8px;
    }

    .category-nav-btn {
        width: 40px;
        min-height: 40px;
        padding: 8px;
        border-radius: 12px;
    }

    /* Keep .portfolio-stage as a 2-column artboard at all breakpoints so
       tiles + 3D scale uniformly via transform (do not stack). */

    #lottie-container {
        width: min(218px, 58.08vw);
        height: 68px;
    }

    #lottie-frame {
        width: 230px;
        height: 109px;
    }

}

@media (max-width: 600px) {
    .site-modal {
        padding: 12px;
    }
}

/*
 * Mobile composition: phones (≤743px) OR tablet portrait (≤1024px).
 * Phone and portrait-tablet layouts use dedicated responsive profiles.
 * Mobile is authored against this reference artboard:
 *   393×665 · DPR 3 · physical 1179×1995
 * Other vertical devices scale that template uniformly via the stage transform.
 */
@media (max-width: 743px), ((max-width: 1024px) and (orientation: portrait)) {
    :root {
        --phone-design-width: 393;
        --phone-design-height: 665;
        --phone-design-dpr: 3;
        --layout-design-width: 393px;
        --layout-design-height: 665px;
    }

    /* Allow browser pull-to-refresh / rubber-band at the document edge. */
    html {
        overscroll-behavior-y: auto;
    }

    body {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        /* No extra top inset — logo sits at the top; rely on safe-area only on real devices. */
        padding:
            env(safe-area-inset-top, 0px)
            max(12px, env(safe-area-inset-right, 0px))
            max(10px, env(safe-area-inset-bottom, 0px))
            max(12px, env(safe-area-inset-left, 0px));
    }

    .site-header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        min-height: 0;
        padding-top: 0;
        order: 1;
        flex-shrink: 0;
        /* Clip the taller Lottie host so it cannot paint over the stage. */
        overflow: hidden;
    }

    /* Fit the complete Lottie artwork, including its four lower shapes. */
    #lottie-container {
        grid-column: unset;
        justify-self: unset;
        flex: 0 1 auto;
        width: min(314px, 84vw);
        height: 92px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 0;
        overflow: hidden;
    }

    #lottie-frame {
        width: 274px;
        height: 130px;
        flex-shrink: 0;
        transform: translateY(-8px);
    }

    .site-footer {
        display: none;
    }

    .site-main {
        min-height: 0;
        order: 2;
        margin-top: 5px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 58px;
        gap: 8px;
    }

    /* Phone keeps titles in-stage; desktop eyebrow stays off. */
    .category-eyebrow {
        display: none !important;
    }

    .stage-viewport {
        grid-column: 1;
        grid-row: 1;
    }

    /* Seven-button pill sits below the stage on phone layouts. */
    .category-nav {
        --mobile-nav-button-width: clamp(42px, 12vw, 48px);
        grid-column: 1;
        grid-row: 2;
        width: max-content;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 4px 6px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        align-self: center;
        gap: 3px;
        border: 1.5px solid rgba(40, 45, 49, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 6px 18px rgba(40, 45, 49, 0.1);
        transform: translateY(-25px);
    }

    #showreel-btn,
    #info-btn {
        margin-top: 0;
        background: transparent;
        border: none;
        color: var(--text);
        box-shadow: none;
    }

    #showreel-btn .category-nav-icon,
    #info-btn .category-nav-icon {
        color: var(--highlight);
    }

    #showreel-btn .category-nav-label,
    #info-btn .category-nav-label {
        color: var(--text);
    }

    #showreel-btn:hover,
    #showreel-btn:focus-visible,
    #info-btn:hover,
    #info-btn:focus-visible {
        background: rgba(102, 141, 62, 0.1);
        border: none;
        box-shadow: none;
    }

    .category-nav::before {
        display: none;
    }

    .category-nav-btn,
    .category-nav-btn:hover,
    .category-nav-btn:focus-visible {
        width: var(--mobile-nav-button-width);
        min-width: var(--mobile-nav-button-width);
        max-width: var(--mobile-nav-button-width);
        min-height: 48px;
        height: 48px;
        padding: 0;
        gap: 0;
        border: none;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        justify-content: center;
        overflow: visible;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .category-nav-btn:hover,
    .category-nav-btn:focus-visible {
        background: rgba(102, 141, 62, 0.1);
        width: var(--mobile-nav-button-width);
        max-width: var(--mobile-nav-button-width);
        padding: 0;
    }

    .category-nav-btn.is-active {
        border: none;
        background: rgba(102, 141, 62, 0.18);
        box-shadow: none;
    }

    .category-nav-btn.is-active:hover,
    .category-nav-btn.is-active:focus-visible {
        background: rgba(102, 141, 62, 0.22);
    }

    .category-nav-icon {
        width: 26px;
        height: 26px;
    }

    .category-nav-icon svg {
        width: 26px;
        height: 26px;
    }

    .category-nav-label,
    .category-nav-btn:hover .category-nav-label,
    .category-nav-btn:focus-visible .category-nav-label {
        display: none;
        max-width: 0;
        opacity: 0;
    }

    .stage-viewport {
        grid-row: 1;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    /* Phone: full-height tile stage; 3D sits behind as an absolute overlay. */
    .portfolio-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
    }

    .portfolio-panel {
        grid-column: 1;
        grid-row: 1;
        /* Undo desktop left-column width so phone tiles/grid use the full stage */
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        padding: 2px 4px 5px;
        overflow: visible;
        /* Let taps fall through empty stage space to Frog-Lee / door */
        pointer-events: none;
    }

    .portfolio-category.is-active {
        pointer-events: none;
    }

    .portfolio-category.is-active .portfolio-tile,
    .portfolio-category.is-active .portfolio-category-title {
        pointer-events: auto;
    }

    /*
     * Flatten the float container's stacking context so the portrait scene
     * wrapper and floated tiles can interleave with the home tile panel.
     */
    .portfolio-float-layer {
        z-index: auto;
    }

    /*
     * Compensate for .portfolio-stage transform: scale(--stage-scale) so the
     * requested 17px (+2) reads as true screen pixels on phone.
     */
    .portfolio-category-title {
        display: block;
        flex-shrink: 0;
        margin: 0 0 16px 4px;
        font-family: 'National Park - Medium', sans-serif;
        font-size: calc(17px / var(--stage-scale, 1));
        font-weight: 500;
        letter-spacing: 0.02em;
        text-align: left;
        color: var(--text);
    }

    .portfolio-cards {
        width: 100%;
        height: 100%;
    }

    /* Phone launch scatter — captured via tilepos readouts */
    .portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 49.5%;
        top: 16.2%;
        --tile-rot: -3deg;
    }

    .portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 48.2%;
        top: 60.3%;
        --tile-rot: 2.2deg;
    }

    .portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 1.8%;
        top: 1.7%;
        --tile-rot: -1.4deg;
    }

    .portfolio-category[data-category="videos"] .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 1.4%;
        top: 42.6%;
        --tile-rot: 1.8deg;
    }

    .portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 3.7%;
        top: 0.4%;
        --tile-rot: -3deg;
    }

    .portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 47.8%;
        top: 25.9%;
        --tile-rot: 2.2deg;
    }

    .portfolio-category[data-category="billboards"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 4.5%;
        top: 51.3%;
        --tile-rot: -1.4deg;
    }

    .portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 2.7%;
        top: 0.1%;
        --tile-rot: -3deg;
    }

    .portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 9.8%;
        top: 53.6%;
        --tile-rot: 2.2deg;
    }

    .portfolio-category[data-category="explainers"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 44.7%;
        top: 26.3%;
        --tile-rot: -1.4deg;
    }

    .portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 8.6%;
        top: 4.7%;
        --tile-rot: -3deg;
    }

    .portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 44.8%;
        top: 44.7%;
        --tile-rot: -1.4deg;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 49.1%;
        left: 49.8%;
        top: 6.5%;
        --tile-rot: -3deg;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 2.4%;
        top: 2.1%;
        --tile-rot: 2.2deg;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 1.8%;
        top: 41.4%;
        --tile-rot: -1.4deg;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
        width: 49.5%;
        left: 48.6%;
        top: 54.1%;
        --tile-rot: 1.8deg;
    }

    .portfolio-category[data-category="showreel"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned),
    .portfolio-category[data-category="showreel"] .portfolio-cards > .portfolio-tile:not(.is-floating):not(.is-positioned) {
        width: 93.3%;
        left: 4.1%;
        top: 5.9%;
        padding: 10px;
    }

    .portfolio-tile {
        gap: 5px;
        padding: 7px;
        border-radius: 12px;
    }

    /* Keep tilepos readouts visible and tappable on phone for layout tuning */
    body.tile-pos-readout-on .portfolio-tile .tile-pos-readout:not([hidden]) {
        display: flex;
        z-index: 12;
        left: 4px;
        top: 4px;
        padding: 6px 8px;
        font-size: 9px;
        max-width: calc(100% - 8px);
    }

    .tile-pos-readout-line,
    .tile-pos-readout-px {
        white-space: normal;
    }

    .portfolio-tile-compact {
        gap: 5px;
    }

    .portfolio-card-media {
        border-radius: 8px;
    }

    .portfolio-card-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .portfolio-category[data-category="showreel"] .portfolio-card-title {
        font-size: 20px;
    }

    .portfolio-tile-close {
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
    }

    .portfolio-tile-detail-title {
        padding-right: 42px;
        font-size: 20px;
    }

    .portfolio-tile-detail-desc {
        font-size: 12px;
    }

    /* Contact: keep tagline on phone, under the profile picture */
    .info-tagline {
        display: block;
        text-align: center;
        margin: 0 0 14px;
    }

    /*
     * Mobile 3D canvas fills the complete stage behind the full-height tile panel.
     * Absolute positioning leaves tile drag bounds and navigation layout unchanged.
     * Hidden when a non-showreel category is active (body.mobile-3d-off).
     */
    .scene-stack-layer {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    body.modal-open .scene-stack-layer {
        z-index: 1 !important;
    }

    #models {
        --mobile-models-overlap: 0px;
        position: absolute;
        grid-column: unset;
        grid-row: unset;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin-left: 0;
        margin-top: 0;
        border-radius: 10px;
        z-index: 1;
        pointer-events: none;
    }

    body.mobile-3d-off #models {
        visibility: hidden;
        pointer-events: none;
    }

    body.mobile-3d-off .door-dialogue {
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    #model-canvas {
        border-radius: 10px;
    }

    .door-dialogue {
        max-width: min(210px, 58%);
    }

    .door-speech-bubble {
        padding: 10px 18px 14px 14px;
        border-radius: 17px;
        /* Phone keeps mid-right tail */
        transform-origin: calc(100% + 19px) 50%;
    }

    .door-speech-tail {
        top: 50%;
        right: -25px;
        bottom: auto;
        transform: translateY(-50%);
    }

    .door-speech-text,
    .door-speech-choice {
        font-size: 12px;
    }

    .door-speech-choice {
        min-height: 36px;
        padding: 6px 10px;
    }

    /* Mobile camera tooling — top of screen so it does not block cabin orbit/pan */
    #dev-camera-overlay {
        z-index: 110;
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: auto;
        width: auto;
        max-width: none;
    }

    #dev-camera-overlay .dev-overlay-body {
        max-height: min(22vh, 160px);
    }

    .site-modal {
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .site-modal-dialog {
        max-height: 90dvh;
    }
}

/*
 * Mobile portrait only (393×665 reference): speech bubble +56% (1.3 × 1.2).
 * Tablet portrait keeps its own dedicated sizing below.
 */
@media (max-width: 743px) {
    .door-dialogue {
        max-width: min(328px, 90.5%);
    }

    .door-speech-bubble {
        padding: 16px 28px 22px 22px;
        border-radius: 26px;
    }

    .door-speech-text,
    .door-speech-choice {
        font-size: 18.7px;
    }

    .door-speech-choice {
        min-height: 56px;
        padding: 10px 16px;
    }
}

/*
 * Tablet portrait (820×1073): dedicated launch scatter.
 * Regular tiles at 35% width; showreel at 80%.
 * Floating, positioned, and expanded tiles keep interaction sizing.
 */
@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --layout-design-width: 820px;
        --layout-design-height: 1073px;
    }

    .portfolio-category[data-category="showreel"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned),
    .portfolio-category[data-category="showreel"]
    .portfolio-cards > .portfolio-tile:not(.is-floating):not(.is-positioned) {
        width: 80%;
        max-width: none;
        left: 13.1%;
        top: 9.8%;
    }

    /* +56% vs shared phone/tablet-portrait speech sizing (1.3 × 1.2) */
    .door-dialogue {
        max-width: min(328px, 90.5%);
    }

    .door-speech-bubble {
        padding: 16px 28px 22px 22px;
        border-radius: 27px;
    }

    .door-speech-text,
    .door-speech-choice {
        font-size: 18.7px;
    }

    .door-speech-choice {
        min-height: 56px;
        padding: 10px 16px;
    }

    .portfolio-category[data-category="videos"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 49.5%;
        top: 0.7%;
    }

    .portfolio-category[data-category="videos"]
    .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 58.9%;
        top: 33.5%;
    }

    .portfolio-category[data-category="videos"]
    .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 6.1%;
        top: 7.4%;
    }

    .portfolio-category[data-category="videos"]
    .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 9.6%;
        top: 36.6%;
    }

    .portfolio-category[data-category="billboards"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 24.9%;
        top: 5.3%;
    }

    .portfolio-category[data-category="billboards"]
    .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 60.7%;
        top: 26.5%;
    }

    .portfolio-category[data-category="billboards"]
    .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 5.5%;
        top: 40.9%;
    }

    .portfolio-category[data-category="explainers"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 58.2%;
        top: 9.2%;
    }

    .portfolio-category[data-category="explainers"]
    .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 28%;
        top: 36.2%;
    }

    .portfolio-category[data-category="explainers"]
    .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 6.3%;
        top: 7.4%;
    }

    .portfolio-category[data-category="apps"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 8.8%;
        top: 11.1%;
    }

    .portfolio-category[data-category="apps"]
    .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 53.9%;
        top: 25.5%;
    }

    .portfolio-category[data-category="personal"]
    .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 9.5%;
        top: 2.1%;
    }

    .portfolio-category[data-category="personal"]
    .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 54.5%;
        top: 2.2%;
    }

    .portfolio-category[data-category="personal"]
    .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 56.6%;
        top: 31.4%;
    }

    .portfolio-category[data-category="personal"]
    .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
        width: 35%;
        max-width: none;
        left: 10.5%;
        top: 36.3%;
    }
}

/*
 * Landscape tablet keeps the desktop stage, but launch tiles are +15% vs default
 * (--tile-launch-scale 1.25 → 1.4375). Height/width caps avoid large monitors.
 */
@media (min-width: 744px) and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
    :root {
        --layout-design-width: 1180px;
        --layout-design-height: 713px;
        --tile-launch-scale: 1.4375; /* 1.25 × 1.15 */
    }

    .portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned),
    .portfolio-category[data-category="apps"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 63.1%; /* 54.9 × 1.15 */
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="1"]:not(.is-floating):not(.is-positioned) {
        width: 63.2%;
        max-width: none;
        left: 5.6%;
        top: 5.2%;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="2"]:not(.is-floating):not(.is-positioned) {
        width: 63.2%;
        max-width: none;
        left: 99.4%;
        top: 2%;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 63.2%;
        max-width: none;
        left: 68.1%;
        top: 37.7%;
    }

    .portfolio-category[data-category="personal"] .portfolio-cards > .portfolio-tile[data-home-slot="4"]:not(.is-floating):not(.is-positioned) {
        width: 63.2%;
        max-width: none;
        left: 5.7%;
        top: 60.5%;
    }

    .portfolio-category[data-category="showreel"] .portfolio-cards > .portfolio-tile:not(.is-floating):not(.is-positioned) {
        width: calc(93.8% * 1.15);
    }

    .portfolio-category[data-category="videos"]
    .portfolio-cards > .portfolio-tile[data-home-slot="3"]:not(.is-floating):not(.is-positioned) {
        width: 63.2%;
        max-width: none;
        left: 5.2%;
        top: 50.6%;
    }
}