@import url('../../fonts/space-mono.css');

:root {
    --os2-grey: #c0c0c0;
    --os2-blue: #000080;
    --os2-blue-light: #1084d0;
    --os2-border-light: #ffffff;
    --os2-border-dark: #808080;
    --os2-border-black: #000000;
    --text-color: #000000;
}

/* SEO Optimization: Visually Hidden but readable by screen readers/bots */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body,
button,
select,
input,
textarea,
h1,
h2,
h3,
p,
span,
a {
    font-family: inherit;
}

body {
    background-color: var(--os2-grey);
    color: var(--text-color);
    font-family: "Times New Roman", Times, serif;
    overflow: hidden;
    margin: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

/* Minimal OS/2 loading strip — indeterminate, shown only during transitions */
#load-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    background: var(--os2-grey);
    border-bottom: 1px solid var(--os2-border-black);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

#load-bar.active {
    opacity: 1;
}

#load-bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 32%;
    background: var(--os2-blue);
    animation: load-bar-slide 1s linear infinite;
}

@keyframes load-bar-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(420%); }
}

/* Splash Container (Full Screen Overlay) */
#splash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #fff 0%, #eee 100%);
    perspective: 2000px;
    transition: background 2s ease;
    user-select: none;
    -webkit-user-select: none;
}

#splash-scene {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    pointer-events: none;
    /* Let clicks pass to blocks */
}

#splash-ring {
    position: relative;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    /* Rotation handled by JS for smooth stop/start */
    pointer-events: auto;
}

.splash-block {
    position: absolute;
    width: 180px;
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transition: opacity 1s ease-in-out, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    backface-visibility: visible;
}

.splash-block-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--os2-border-black);
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.1);
    filter: grayscale(100%);
    animation: blockRotate 15s infinite linear;
}

@keyframes blockRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.splash-block.loaded {
    opacity: 1;
}

.splash-block.dimmed {
    opacity: 0;
    pointer-events: none;
}

.splash-block.selected {
    z-index: 1000;
    opacity: 1;
}

.splash-block.selected .splash-block-inner {
    background-color: #fff;
    filter: grayscale(0%);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    animation: none;
    transform: none !important;
}

/* Under the mouse a tile holds still (the ring and the lean stop in
   script.js; its own slow tumble stops here) and shows its colour. */
.splash-block:hover .splash-block-inner {
    filter: grayscale(0%);
    animation-play-state: paused;
}

/* Keyboard focus on a tile (the ring is one tab stop, arrows move): the same
   still, coloured tile as under the mouse, with an OS/2-blue frame. */
.splash-block:focus {
    outline: none;
}

/* Its slow tumble stops facing forward (paused, it could stop edge-on). */
.splash-block:focus-visible .splash-block-inner {
    outline: 3px solid var(--os2-blue);
    outline-offset: 3px;
    filter: grayscale(0%);
    animation: none;
}

.info-peek h4:focus {
    outline: none;
}

.info-peek h4:focus-visible {
    outline: 2px dotted var(--os2-blue);
    outline-offset: 2px;
}

/* One flat label next to the mouse names the tile (setRingHover). */
.ring-label {
    position: fixed;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 320px;
    padding: 5px 8px;
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ring-label.visible {
    opacity: 1;
}

.ring-label strong {
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.15;
}

.ring-label span {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #ccc;
}

/* A destination window is open: the ring steps back behind it (opacity on
   the flat image layer, not on the 3D ring, which would flatten it). */
.splash-block-inner {
    transition: opacity 0.4s ease;
}

body:has(.os2-window[data-role="content"]) .splash-block-inner {
    opacity: 0.25;
    animation-play-state: paused;
}

/* Info Window (Description Box) */
.splash-info-window {
    position: fixed;
    top: 60px;
    right: 10%;
    /* Moved closer to center on large screens */
    width: 320px;
    max-width: 85vw;
    /* Wider limit for mobile */
    background: var(--os2-grey);
    border: 2px solid var(--os2-border-black);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    /* Below #window-manager (1000): windows opened while a project is focused
       (e.g. LOCATE_IN_RING from a case dossier, CONTACT) used to be stuck
       underneath this panel with no way to bring them forward. */
    z-index: 900;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, right 0.5s ease;
}

.splash-info-window.visible {
    opacity: 1;
    pointer-events: all;
}

/* The peek row (title + MORE) only changes anything on upright phones. */
.info-peek {
    display: contents;
}

.info-more {
    display: none;
}

/* Project details: name, year · kind, a few lines, one button, one link. */
.info-peek h4 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.info-meta {
    margin: 0 0 10px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #555;
}

.info-content .rich-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.info-similar {
    display: block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--os2-blue);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.info-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 6px;
}

.info-steps {
    display: flex;
    gap: 12px;
}

.info-step,
.info-adjust {
    padding: 2px 0;
    background: none;
    border: 0;
    color: #000;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.info-adjust[aria-expanded="true"] {
    color: var(--os2-blue);
}

.info-step:focus-visible,
.info-adjust:focus-visible,
.info-similar:focus-visible {
    outline: 2px dotted var(--os2-blue);
    outline-offset: 2px;
}

.info-saver {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
}

/* Data saver or low battery: the ring images keep still. */
body.data-saver .splash-block-inner,
body.low-power .splash-block-inner {
    animation: none;
}

.info-header {
    background: #444;
    background: linear-gradient(180deg, #666 0%, #000 100%);
    color: #fff;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-btn-group {
    display: flex;
    gap: 4px;
}

.info-header-btn {
    background: var(--os2-grey);
    border: 1px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    font-size: 9px;
    padding: 0 4px;
    cursor: pointer;
    line-height: normal;
}

.info-content {
    background: #fff;
    margin: 4px;
    padding: 15px;
    border: 1px inset var(--os2-border-dark);
    font-size: 0.8rem;
    max-height: 300px;
    min-height: 0;
    flex: 0 1 auto;
    overflow-y: auto;
    color: #000;
}

.rich-text {
    line-height: 1.45;
}

.rich-text p {
    margin: 0 0 10px 0;
}

.info-content .rich-text,
.case-dossier .rich-text {
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.info-content .rich-text {
    font-size: 0.85rem;
}

.rich-link,
.case-link {
    color: var(--os2-blue);
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    margin-top: 6px;
    overflow-wrap: anywhere;
    text-decoration: underline;
}

.info-controls {
    background: var(--os2-grey);
    border-top: 1px solid var(--os2-border-dark);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Behind ADJUST until asked for. */
.info-controls[hidden] {
    display: none;
}

.info-controls-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: #444;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.control-group label {
    display: block;
    font-size: 9px;
    font-weight: bold;
    color: #444;
}

/* Responsive info window. These must come AFTER the base .info-content /
   .info-controls / .control-group rules above: at equal specificity the later
   rule wins, and while they sat before them none of these values applied. */
@media (max-width: 1100px) {
    .splash-info-window {
        width: 250px;
        right: 15px;
    }

    .info-content {
        padding: 10px;
        font-size: 0.75rem;
        max-height: 200px;
        /* Shorter for smaller screens */
    }
}

@media (max-width: 768px) {
    .splash-info-window {
        width: 190px;
        right: 5px;
        top: auto;
        bottom: 5px;
        transform: none;
        max-height: calc(100vh - 10px);
        max-height: calc(100dvh - 10px);
    }

    .info-content {
        padding: 8px;
        font-size: 0.7rem;
        max-height: 150px;
        /* Shorter for smaller screens */
    }

    .info-controls {
        padding: 5px;
        gap: 3px;
    }

    .control-group label {
        font-size: 7px;
    }
}

.os2-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: #fff;
    border: 1px inset var(--os2-border-dark);
    outline: none;
}

.os2-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 12px;
    background: var(--os2-grey);
    border: 1px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    cursor: pointer;
}

.os2-slider::-moz-range-thumb {
    width: 20px;
    height: 12px;
    background: var(--os2-grey);
    border: 1px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    cursor: pointer;
}

.info-close {
    background: var(--os2-grey);
    border: 1px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    width: 14px;
    height: 14px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The wordmark sits above the 3D scene (not inside it). Plain black, as
   always — an outline and a difference blend were tried and rejected. On
   desktop-shaped screens it stands in the free band above the ring, so black
   tiles never pass behind black letters (2026-09-30, client feedback): the
   ring's highest tiles reach about 205px above the centre. Its size follows
   the height too, so it fits that band on laptops. Short screens and upright
   phones keep it in the middle (see below). */
#splash-center-text {
    position: absolute;
    top: calc(50% - 222px);
    left: 50%;
    transform: translate(-50%, -100%);
    text-align: center;
    font-weight: 900;
    font-size: clamp(30px, min(6vw, 8.5vh), 80px);
    line-height: 0.9;
    letter-spacing: 1px;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    font-family: "Times New Roman", Times, serif;
    user-select: none;
    /* On its own transparent layer above the 3D ring, macOS browsers (Safari
       especially) may smooth glyph edges against the light page colour, which
       shows as a thin white fringe where letters cross dark images. Greyscale
       smoothing + an explicit layer keep the edges clean. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
    transition: opacity 0.4s ease;
}

@media (max-height: 560px) {
    #splash-center-text {
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* One thing at a time: with a project, a destination window or the work
   index open, the wordmark and the caption step back. */
body:has(.splash-block.selected) #splash-center-text,
body:has(.os2-window[data-role="content"]) #splash-center-text,
body.client-view-active #splash-center-text,
body:has(.splash-block.selected) .ring-caption,
body:has(.os2-window[data-role="content"]) .ring-caption,
body.client-view-active .ring-caption {
    opacity: 0;
}

/* Under the menu: what the tiles are, or in the lab what to expect. */
.ring-caption {
    margin: 0;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #000;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.ring-caption:empty {
    display: none;
}

@media (max-height: 500px) {
    .ring-caption {
        display: none;
    }
}

/* Navigation Control Panel (Retro Dropdown) */
.nav-control-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 100;
    /* Only the menu takes the mouse: the caption's strip lets tiles behind it
       be hovered and clicked. */
    pointer-events: none;
}

#system-nav {
    pointer-events: auto;
}

.nav-control-panel label {
    display: none;
}

#system-nav {
    background: #fff;
    border: 1px solid #000;
    padding: 2px 5px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    min-width: 250px;
    box-shadow: inset 1px 1px 1px #888;
}

/* System Controls (Top Right) */
.system-controls {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 2000;
    display: flex;
    gap: 10px;
}

.os2-btn {
    background: var(--os2-grey);
    border: 2px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    padding: 4px 12px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* Keyboard focus: the menu, sliders and buttons remove or never had a visible
   focus state. A dotted OS/2-blue ring only for keyboard (focus-visible). */
#system-nav:focus-visible,
.os2-slider:focus-visible,
.os2-btn:focus-visible,
.win-btn:focus-visible,
.info-header-btn:focus-visible,
.info-close:focus-visible,
.legal-note-btn:focus-visible {
    outline: 2px dotted var(--os2-blue);
    outline-offset: 2px;
}

.terminal-input-row:focus-within {
    box-shadow: inset 0 0 0 1px #fff;
}

.os2-btn:active {
    border-color: var(--os2-border-dark) var(--os2-border-light) var(--os2-border-light) var(--os2-border-dark);
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* Window Manager & OS/2 Windows */
#window-manager {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    /* Ensure windows are above splash */
}

.os2-window {
    position: absolute;
    background: var(--os2-grey);
    border: 2px solid var(--os2-border-black);
    width: 400px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.4);
    pointer-events: all;
    transition: transform 0.2s ease-out;
}

.window-header {
    background: #444;
    background: linear-gradient(180deg, #666 0%, #000 100%);
    color: #fff;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--os2-border-dark);
    gap: 8px;
}

.window-title {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px #000;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window-controls {
    display: flex;
    flex-shrink: 0;
    gap: 1px;
}

.win-btn {
    width: 16px;
    height: 14px;
    background: var(--os2-grey);
    border: 1px solid;
    border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.window-content {
    flex-grow: 1;
    background: #fff;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Minimised: rolled up into its own title bar (OS/2 "shade"). */
.os2-window.minimized {
    min-height: 0;
    /* !important beats the inline height the RAW terminal sets. */
    height: auto !important;
}

.os2-window.minimized .window-content {
    display: none;
}

.os2-window.minimized .window-header {
    border-bottom: none;
}

/* Maximised: fills the window manager below the system controls, so its own
   title-bar buttons don't sit under ? / AUDIO / RAW. */
.os2-window.maximized {
    left: 0 !important;
    top: 56px !important;
    width: 100% !important;
    height: calc(100% - 56px) !important;
    max-width: 100%;
    max-height: none;
    box-shadow: none;
}

.os2-window.maximized .window-content {
    max-height: none;
}

/* Terminal Styles */
.terminal-output {
    flex-grow: 1;
    overflow-y: auto;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.2;
    background: #000;
    color: #ffffff;
    padding: 10px;
}

.terminal-input-row {
    display: flex;
    background: #000;
    color: #ffffff;
    padding: 2px 10px 5px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
}

.terminal-input {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    flex-grow: 1;
    margin-left: 5px;
}

.terminal-prompt {
    color: #ffffff;
}

/* Hidden Mirror Device */
.mirror-device-window {
    width: min(760px, calc(100vw - 80px));
}

.mirror-device-window .window-content {
    background: var(--os2-grey);
    /* Scrollable: on landscape phones the content is capped at 60vh and the
       ENABLE button used to be cut off with no way to reach it. */
    overflow-x: hidden;
    overflow-y: auto;
}

.mirror-device {
    background: var(--os2-grey);
    color: #000;
    min-height: 360px;
    padding: 8px;
    position: relative;
}

.mirror-video-probe {
    height: 120px;
    left: -10000px;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scaleX(-1);
    width: 160px;
}

.mirror-boot,
.mirror-stage {
    background: #fff;
    border: 1px inset var(--os2-border-dark);
    box-sizing: border-box;
}

.mirror-boot {
    min-height: 330px;
    padding: 22px;
}

.mirror-boot strong {
    border-bottom: 2px solid #000;
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    margin-bottom: 14px;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.mirror-boot p {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

.mirror-privacy {
    background: #efefef;
    border: 1px dotted #777;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem !important;
    padding: 9px;
    text-transform: uppercase;
}

.mirror-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 12px 0;
}

.mirror-status,
.mirror-readout {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.mirror-status {
    color: var(--os2-blue);
}

.mirror-stage {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
}

.mirror-canvas {
    background: #f4f4f4;
    border: 1px solid #000;
    display: block;
    image-rendering: crisp-edges;
    /* width/height auto + both max-* caps keeps the canvas's own aspect ratio;
       a fixed width:100% stretched the image once the height cap kicked in. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(62vh, 560px);
    max-height: min(62dvh, 560px);
    margin: 0 auto;
}

.mirror-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 6px;
}

.mirror-toolbar .os2-btn.mirror-snap {
    /* Its own full-width row: the one action worth finding. */
    grid-column: 1 / -1;
    font-size: 11px;
    padding: 8px 6px;
}

.mirror-toolbar .os2-btn {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    min-width: 0;
    overflow: hidden;
    padding: 5px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mirror-mode-btn.is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}

.mirror-readout {
    background: #000;
    color: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 6px;
}

.mirror-readout span {
    background: var(--os2-grey);
    color: #000;
    padding: 5px 7px;
}

/* Primary push-button (navy): START / BOOK actions. */
.os2-btn-primary {
    background: var(--os2-blue);
    color: #fff;
    border-color: #4a4ad0 #00003a #00003a #4a4ad0;
}

.os2-btn-primary:active {
    border-color: #00003a #4a4ad0 #4a4ad0 #00003a;
}

/* --- OS/2 notebook (STUDIO, LAB) -------------------------------------------
   Technical, not cute: hairlines, square tabs, numbered mono labels, a file
   header and a page counter. Pages left, tabs right, as in Warp's settings. */
.notebook-window {
    width: min(760px, calc(100vw - 80px));
}

.notebook-window .window-content {
    background: var(--os2-grey);
}

.notebook {
    display: flex;
    align-items: flex-start;
    padding: 12px 0 12px 12px;
    color: #000;
}

.notebook-sheet {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #000;
}

.notebook-head,
.notebook-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    background: #f2f2f2;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
}

.notebook-head {
    border-bottom: 1px solid #000;
}

.notebook-foot {
    border-top: 1px solid #000;
    color: #555;
}

.notebook-nav {
    display: flex;
    gap: 12px;
}

.notebook-step {
    background: none;
    border: 0;
    padding: 0;
    color: #000;
    cursor: pointer;
    font: inherit;
}

.notebook-tabs {
    display: flex;
    flex-direction: column;
    padding-top: 34px;
}

.notebook-tab {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: -1px;
    padding: 9px 14px 9px 12px;
    background: var(--os2-grey);
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.notebook-tab-no {
    color: #555;
    font-size: 10px;
}

.notebook-tab[aria-selected="true"] {
    background: #fff;
    border-left-color: #fff;
    margin-left: -1px;
}

.notebook-tab[aria-selected="true"] .notebook-tab-no {
    color: var(--os2-blue);
}

.notebook-tab:focus-visible,
.notebook-step:focus-visible,
.programme-filter:focus-visible {
    outline: 2px dotted var(--os2-blue);
    outline-offset: -4px;
}

/* Notebook pages (STUDIO, LAB): one text system, taken from the journal —
   2026-09-30, after the client counted too many styles on RESEARCH. A mono
   label, a Times heading, Times text, and rows on dotted rules (a mono key on
   the left). Black on white; OS/2 blue only for links. No grey cells, no
   boxed tables, no buttons inside a page. */
.sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sheet p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

.sheet-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.sheet-label {
    margin-top: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #000;
}

.sheet-label:first-child {
    margin-top: 0;
}

/* Keys: row labels, numbers, years. */
.sheet-key,
.spec-row > span:first-child,
.service-no {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #555;
}

/* Rows: key/value facts, services, papers, talks. */
.spec-table,
.service-list,
.paper-list,
.sheet .record-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #000;
}

.spec-row,
.service-list li,
.paper-row,
.sheet .record-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px dotted #bbb;
}

.spec-row > span:last-child,
.sheet .record-title {
    font-size: 1rem;
    line-height: 1.4;
}

.service-name,
.paper-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.paper-row {
    grid-template-columns: 110px 1fr auto;
}

.service-list li {
    grid-template-columns: 64px 1fr;
}

.paper-actions {
    display: flex;
    gap: 14px;
}

.paper-journal,
.paper-pdf {
    color: var(--os2-blue);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
}

.lab-caution {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem !important;
    font-weight: 700;
}

/* --- EXHIBITIONS & TALKS ---------------------------------------------------- */
.programme-window {
    width: min(760px, calc(100vw - 80px));
}

.programme {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    color: #000;
}

.programme-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.programme-filter[aria-pressed="true"] {
    background: var(--os2-blue);
    color: #fff;
    border-color: #00003a #4a4ad0 #4a4ad0 #00003a;
}

.workshop-teaser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: #f2f2f2;
    border: 1px dotted #777;
}

.workshop-teaser > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.workshop-teaser strong {
    font-size: 1.05rem;
}

.workshop-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workshop-sheet p {
    margin: 0;
}

.workshop-sheet .book-workshop {
    align-self: flex-start;
}

.record-list {
    border-top: 1px solid #000;
}

.record-row {
    display: grid;
    grid-template-columns: 52px 96px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dotted #bbb;
}

.record-year {
    color: var(--os2-blue);
    font-weight: 700;
}

.record-tag {
    justify-self: start;
    padding: 1px 5px;
    color: #fff;
    background: #000;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
}

.record-tag-talk {
    background: var(--os2-blue);
}

/* Filters: what each view shows. */
.programme [data-kind="workshop"] { display: none; }
.programme[data-filter="workshops"] [data-kind="workshop"] { display: flex; }
.programme[data-filter="workshops"] [data-kind]:not([data-kind="workshop"]) { display: none; }
.programme[data-filter="exhibitions"] [data-kind="talk"],
.programme[data-filter="exhibitions"] [data-kind="workshop-teaser"] { display: none; }
.programme[data-filter="talks"] [data-kind="exhibition"],
.programme[data-filter="talks"] [data-kind="workshop-teaser"] { display: none; }
.programme[data-filter="workshops"] .record-list { border-top: 0; }

.sheet .client-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-size: 0.95rem;
}

/* Content specific styling */
.window-body {
    color: #000;
    padding: 12px 16px;
}

.window-body h3 {
    margin-top: 0;
}

.client-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 0.75rem;
}

.client-list span {
    display: block;
    border-bottom: 1px dotted #ccc;
    padding: 2px 0;
}

.entry {
    border-bottom: 1px dotted #ccc;
    padding: 5px 0;
}

.entry-year {
    font-weight: bold;
    color: var(--os2-blue);
    margin-right: 10px;
}

.exhibition-list {
    color: #000;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    padding: 8px;
}

.exhibition-section + .exhibition-section {
    margin-top: 12px;
}

.exhibition-section-title {
    background: #000;
    color: #fff;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0;
    margin-bottom: 6px;
    padding: 3px 6px;
}

.exhibition-card {
    background: #fff;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
    margin-bottom: 10px;
    padding: 8px;
}

.exhibition-card-upcoming,
.exhibition-card-current {
    background: #f6f6f6;
}

.exhibition-card-current {
    border-color: var(--os2-blue);
}

.exhibition-card-head {
    align-items: center;
    border-bottom: 1px dotted #808080;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 7px;
    padding-bottom: 5px;
}

.exhibition-status {
    background: var(--os2-blue);
    color: #fff;
    font-weight: bold;
    padding: 1px 5px;
}

.exhibition-date {
    font-weight: bold;
    text-align: right;
}

.exhibition-card h3 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1;
    margin: 0 0 8px;
}

.exhibition-meta {
    border: 1px solid #000;
    display: grid;
    margin-bottom: 8px;
}

.exhibition-meta div {
    display: grid;
    gap: 8px;
    grid-template-columns: 64px 1fr;
}

.exhibition-meta div + div {
    border-top: 1px dotted #999;
}

.exhibition-meta span,
.exhibition-meta strong {
    padding: 4px 6px;
}

.exhibition-meta span {
    background: var(--os2-grey);
    border-right: 1px solid #000;
    font-weight: bold;
}

.exhibition-meta strong {
    font-weight: normal;
}

.exhibition-schedule {
    border: 1px solid #000;
    display: grid;
    font-size: 0.68rem;
    margin-bottom: 7px;
}

.exhibition-schedule div {
    align-items: stretch;
    display: grid;
    grid-template-columns: 76px 78px 1fr;
}

.exhibition-schedule div + div {
    border-top: 1px dotted #999;
}

.exhibition-schedule span,
.exhibition-schedule strong,
.exhibition-schedule em {
    padding: 3px 5px;
}

.exhibition-schedule span {
    background: #000;
    color: #fff;
    font-weight: bold;
}

.exhibition-schedule strong {
    border-right: 1px dotted #999;
    font-weight: bold;
}

.exhibition-schedule em {
    font-style: normal;
}

.exhibition-note {
    background: #efefef;
    border: 1px dotted #808080;
    font-size: 0.66rem;
    margin-bottom: 8px;
    padding: 4px 6px;
}

.exhibition-card p {
    line-height: 1.35;
    margin: 0;
}

/* Contact Brief */
.brief-contact-window {
    width: min(680px, calc(100vw - 80px));
}

.brief-contact {
    box-sizing: border-box;
    color: #000;
    padding: 18px;
}

.brief-contact-head {
    border-bottom: 2px solid #000;
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.brief-contact-head h3 {
    font-size: 1.5rem;
    line-height: 1;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

.brief-contact-head p {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
}

.brief-booking {
    margin-top: 10px;
    color: var(--os2-blue);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
}

.brief-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brief-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.brief-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.brief-form label span {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.brief-form input,
.brief-form select,
.brief-form textarea {
    background: #fff;
    border: 1px inset var(--os2-border-dark);
    border-radius: 0;
    box-sizing: border-box;
    color: #000;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    padding: 7px;
    width: 100%;
}

.brief-form textarea {
    line-height: 1.35;
    resize: vertical;
}

.brief-privacy {
    background: #f2f2f2;
    border: 1px dotted #777;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 18px 1fr;
    gap: 8px !important;
    padding: 10px;
    width: 100%;
}

.brief-privacy input {
    margin: 2px 0 0 0;
    width: auto;
}

.brief-privacy span {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    line-height: 1.3;
    text-transform: none !important;
}

.brief-actions {
    align-items: center;
    display: flex;
    gap: 14px;
}

.brief-actions span {
    color: #555;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: bold;
}

/* Honeypot for bots: out of sight and out of the tab order. */
.brief-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.brief-sent {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #000;
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
}

.brief-sent[hidden] {
    display: none;
}

.brief-fallback {
    background: #f2f2f2;
    border: 1px dotted #777;
    font-size: 0.8rem;
    line-height: 1.35;
    padding: 10px;
}

.brief-fallback[hidden],
.brief-fallback-note[hidden] {
    display: none;
}

.brief-fallback p {
    margin: 0 0 8px 0;
}

.brief-fallback a {
    color: var(--os2-blue);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
}

.brief-fallback-note {
    font-weight: bold;
}

.brief-footer {
    border-top: 1px dotted #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 16px;
    padding-top: 12px;
}

.brief-footer a {
    color: var(--os2-blue);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
}

.legal-note-btn {
    background: none;
    border: 0;
    color: var(--os2-blue);
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    padding: 0;
    text-decoration: underline;
}

.privacy-notice {
    color: #000;
    padding: 16px;
}

.privacy-notice h3 {
    border-bottom: 2px solid #000;
    font-size: 1.3rem;
    line-height: 1;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    text-transform: uppercase;
}

.privacy-notice p {
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.listmonk-form {
    margin-top: 16px;
}

.newsletter-panel {
    background: #f2f2f2;
    border: 1px dotted #777;
    box-sizing: border-box;
    padding: 12px;
}

.newsletter-head {
    align-items: baseline;
    border-bottom: 1px dotted #000;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.newsletter-head span {
    color: #555;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: bold;
}

.newsletter-head strong {
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 10px;
}

.newsletter-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.newsletter-grid label span,
.newsletter-list span {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.newsletter-grid input {
    background: #fff;
    border: 1px inset var(--os2-border-dark);
    border-radius: 0;
    box-sizing: border-box;
    color: #000;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    padding: 7px;
    width: 100%;
}

.newsletter-grid .os2-btn {
    min-height: 31px;
    white-space: nowrap;
}

.newsletter-list {
    align-items: start;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.newsletter-list input {
    margin: 1px 0 0 0;
}

.newsletter-list span {
    line-height: 1.3;
    text-transform: none;
}

/* Client View Index */
body.client-view-active #splash-ring {
    opacity: 0.28;
}

.client-view-index {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(860px, calc(100vw - 80px));
    max-height: min(720px, calc(100vh - 120px));
    max-height: min(720px, calc(100dvh - 120px));
    transform: translate(-50%, -45%);
    z-index: 850;
    pointer-events: all;
    color: #000;
    /* #splash-container disables selection for the ring; the archive is text
       people want to copy. */
    user-select: text;
    -webkit-user-select: text;
}

.client-view-window {
    background: var(--os2-grey);
    border: 2px solid var(--os2-border-black);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.client-view-header {
    user-select: none;
    -webkit-user-select: none;
    background: linear-gradient(180deg, #666 0%, #000 100%);
    border-bottom: 2px solid var(--os2-border-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    text-shadow: 1px 1px #000;
}

.client-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px inset var(--os2-border-dark);
    margin: 8px;
    overflow: auto;
}

/* Work index: reads like the journal (2026-09-30) — year, image, name and
   what it was; one row per project, newest first. */
.work-lede {
    margin: 0;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #000;
    font-size: 1rem;
}

.work-list {
    margin: 0;
    padding: 0 16px 8px;
    list-style: none;
}

.work-row {
    display: grid;
    grid-template-columns: 52px 56px 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dotted #bbb;
    cursor: pointer;
}

.work-empty {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    cursor: default;
}

.work-year {
    color: var(--os2-blue);
    font-size: 1.05rem;
    font-weight: 700;
}

.work-thumb {
    width: 56px;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    filter: grayscale(100%);
    transition: filter 0.2s ease;
}

.work-row:hover .work-thumb {
    filter: grayscale(0%);
}

.work-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.work-open {
    padding: 0;
    background: none;
    border: 0;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.work-row:hover .work-open {
    text-decoration: underline;
}

.work-open:focus-visible {
    outline: 2px dotted var(--os2-blue);
    outline-offset: 2px;
}

.work-meta {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #555;
}

.case-actions {
    text-align: right;
    white-space: nowrap;
}

.case-dossier {
    color: #000;
    padding: 14px;
}

.case-dossier-window {
    width: min(760px, calc(100vw - 80px));
}

.case-hero {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    filter: grayscale(100%);
    margin-bottom: 12px;
    transition: filter 0.25s ease;
}

.case-hero:hover {
    filter: grayscale(0%);
}

.case-meta-grid {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 1px;
    background: #000;
    border: 1px solid #000;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    margin-bottom: 14px;
}

.case-meta-grid span,
.case-meta-grid strong {
    background: #fff;
    padding: 5px 7px;
}

.case-meta-grid span {
    color: #555;
}

.case-dossier h3 {
    border-bottom: 2px solid #000;
    font-size: 1.4rem;
    line-height: 1;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    overflow-wrap: anywhere;
}

/* All our copy is lowercase (tone of voice) — also the project names and the
   Are.na texts shown here. Are.na itself stays as it is; links keep their
   targets. System labels, buttons and titles stay in caps. */
.info-peek h4,
.info-content .rich-text,
.case-dossier h3,
.case-dossier .rich-text,
.case-statement p,
.case-credits div,
.work-open,
.ring-label strong {
    text-transform: lowercase;
}

.case-dossier p {
    font-size: 0.88rem;
    line-height: 1.35;
}

/* Case file: click-to-load film, labelled sections, stills, actions. */
.case-film {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-film:not(.playing)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.case-film > * {
    position: relative;
}

.case-film-note {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #fff;
}

.case-film iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.case-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    border-bottom: 1px dotted #000;
    margin: 16px 0 8px;
    padding-bottom: 3px;
}

.case-stills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}

.case-still {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    filter: grayscale(100%);
}

.case-still:hover {
    filter: grayscale(0%);
}

.case-credits div {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
}

.case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.info-case {
    display: block;
    width: 100%;
    margin-top: 14px;
}

/* Rotate hint: upright phones get an invitation, not a wall (shown in the
   portrait block below; the old full-screen ORIENTATION_ERROR is gone). */
.rotate-hint {
    display: none;
}

/* Mobile Adaptations */
@media (max-width: 768px) {
    #splash-center-text {
        font-size: 2rem;
        width: 90%;
    }

    .nav-control-panel {
        transform: translate(-50%, 100px);
    }

    #system-nav {
        min-width: 200px;
        font-size: 0.8rem;
    }

    /* No !important on left/top: it beat the inline positions script.js sets,
       so windows could not be dragged and all opened stacked on one spot.
       createWindow() now fits new windows into the viewport instead. */
    .os2-window {
        width: 95%;
        height: auto;
        max-height: 90vh;
        max-height: 90dvh;
    }

    .os2-window.maximized {
        max-height: none;
    }

    .window-content {
        max-height: 60vh;
        max-height: 60dvh;
    }

    .client-view-index {
        width: 95vw;
        max-height: 78vh;
        max-height: 78dvh;
        transform: translate(-50%, -43%);
    }

    .work-row {
        grid-template-columns: 40px 48px 1fr;
        gap: 10px;
    }

    .work-thumb {
        width: 48px;
    }

    .work-open {
        font-size: 1.05rem;
    }

    /* Notebook rows: a narrower key column; paper links under the title. */
    .spec-row,
    .service-list li,
    .paper-row,
    .sheet .record-row {
        grid-template-columns: 72px 1fr;
    }

    .paper-actions {
        grid-column: 2;
    }

    .case-dossier-window {
        width: 95%;
    }

    .mirror-device-window {
        width: 95%;
    }

    .mirror-device {
        min-height: auto;
    }

    .mirror-boot {
        min-height: 260px;
        padding: 16px;
    }

    .mirror-readout {
        grid-template-columns: 1fr;
    }

    .mirror-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brief-contact-window {
        width: 95%;
    }

    /* Narrow screens: notebook tabs become a row above the page. */
    .notebook-window,
    .programme-window {
        width: 95%;
    }

    .notebook {
        flex-direction: column-reverse;
        padding: 8px;
    }

    .notebook-sheet {
        width: 100%;
        box-sizing: border-box;
    }

    .notebook-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        margin-bottom: -1px;
    }

    .notebook-tab {
        margin-top: 0;
        margin-right: -1px;
        padding: 6px 10px;
    }

    .notebook-tab[aria-selected="true"] {
        margin-left: 0;
        border-left-color: #000;
        border-bottom-color: #fff;
    }

    .sheet .client-list {
        grid-template-columns: 1fr 1fr;
    }

    .record-row {
        grid-template-columns: 44px 84px 1fr;
        gap: 8px;
    }

    .brief-grid {
        grid-template-columns: 1fr;
    }

    .brief-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .brief-footer {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .newsletter-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .newsletter-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Phones held upright ----------------------------------------------------
   The standing ring (script.js: portraitPhone), the dropdown in thumb reach,
   full-screen windows, a details sheet for focused projects and a readable
   work index. Same components and colours as everywhere else. */
@media (orientation: portrait) and (max-width: 600px) {
    body {
        overscroll-behavior: none;
    }

    #splash-container {
        /* Vertical swipes spin the ring instead of scrolling or reloading. */
        touch-action: none;
    }

    .splash-block {
        width: 130px;
    }

    #splash-center-text {
        /* max-content: left:50% would otherwise cap the box at half the
           screen and the glyphs spill past the right edge. The standing
           ring leaves the middle free, so the wordmark stays there. */
        top: 50%;
        transform: translate(-50%, -50%);
        width: max-content;
        font-size: 9.5vw;
    }

    .nav-control-panel {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 16px;
        right: 16px;
        transform: none;
        gap: 8px;
    }

    /* The caption sits above the menu at the bottom. */
    .ring-caption {
        order: -1;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    #system-nav {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        font-size: 16px; /* 16px+ keeps iOS from zooming into the select */
    }

    .system-controls {
        top: 12px;
        right: 12px;
        gap: 8px;
    }

    .system-controls .os2-btn {
        min-height: 36px;
        padding: 6px 12px;
    }

    .rotate-hint {
        display: inline-block;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 2000;
        padding: 8px 10px;
        background: #000;
        color: #fff;
        border: 2px solid #f00;
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
    }

    .rotate-hint[hidden] {
        display: none;
    }

    /* Full-screen windows and a focused project own the screen: the corner
       buttons would sit on the title bar and cover its close button. */
    body:has(.os2-window) .system-controls,
    body:has(.os2-window) .rotate-hint,
    body.client-view-active .system-controls,
    body.client-view-active .rotate-hint,
    body:has(.splash-block.selected) .system-controls,
    body:has(.splash-block.selected) .rotate-hint {
        display: none;
    }

    /* (The wordmark steps back while a project is focused: see the rules
       next to #splash-center-text, they apply everywhere now.) */

    /* Nothing of the ring is visible behind a full-screen window or the work
       index: stop drawing it (the frame loop pauses too, see ringCovered()). */
    body:has(.os2-window) #splash-scene,
    body.client-view-active #splash-scene {
        visibility: hidden;
    }

    body:has(.os2-window) .splash-block-inner,
    body.client-view-active .splash-block-inner {
        animation-play-state: paused;
    }

    /* START A SIMILAR PROJECT belongs to the expanded text. Phones step
       with a sideways swipe and have no ADJUST: no foot row. */
    .splash-info-window .info-foot,
    .splash-info-window:not(.expanded) .info-meta,
    .splash-info-window:not(.expanded) .info-similar,
    .splash-info-window:not(.expanded) .info-case,
    .splash-info-window:not(.expanded) .info-saver {
        display: none;
    }

    /* Windows fill the screen; title bar stays on top, thumb-sized close. */
    .os2-window,
    .os2-window.maximized {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none;
        border: 0;
        box-shadow: none;
    }

    .os2-window .window-content {
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .window-header {
        padding: 8px 10px;
        padding-top: calc(8px + env(safe-area-inset-top));
    }

    .window-title {
        font-size: 12px;
    }

    .win-btn {
        width: 40px;
        height: 32px;
        font-size: 16px;
    }

    .win-share {
        height: 32px;
        font-size: 11px;
    }

    .win-min,
    .win-max {
        display: none;
    }

    /* Focused project: its details as a sheet from the bottom. */
    .splash-info-window {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none;
        max-height: 42vh;
        max-height: 42dvh;
        transform: none !important;
        border-width: 2px 0 0 0;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
    }

    .splash-info-window .info-controls {
        display: none;
    }

    .splash-info-window .info-content {
        max-height: none;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    /* Peek: title and MORE in one row; the text waits for MORE or a swipe up. */
    .splash-info-window .info-peek {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .splash-info-window .info-peek h4 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .splash-info-window .info-more {
        display: block;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        background: var(--os2-grey);
        border: 2px solid;
        border-color: var(--os2-border-light) var(--os2-border-dark) var(--os2-border-dark) var(--os2-border-light);
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
    }

    .splash-info-window .info-content .rich-text {
        display: block;
    }

    .splash-info-window:not(.expanded) .rich-text {
        display: none;
    }

    .splash-info-window.expanded {
        max-height: 62vh;
        max-height: 62dvh;
    }

    .splash-info-window.expanded .info-content {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .splash-info-window.expanded .info-peek {
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .splash-info-window.expanded .info-peek h4 {
        white-space: normal;
    }

    .info-header-btn,
    .info-close {
        min-height: 30px;
        min-width: 30px;
    }

    /* Work index: readable rows instead of a table to scroll sideways. */
    .client-view-index {
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        transform: none !important;
    }

    .client-view-window {
        height: 100%;
    }
}

/* BSOD Overlay */
#bsod-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000080;
    /* OS/2 Blue */
    color: #ffffff;
    z-index: 10001;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    font-family: "Courier New", Courier, monospace;
    line-height: 1.5;
    text-align: left;
    box-sizing: border-box;
}

.bsod-header {
    background: #ffffff;
    color: #000080;
    padding: 2px 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.bsod-code {
    font-weight: bold;
    margin-bottom: 20px;
}

.bsod-instructions {
    max-width: 600px;
}

/* Reduced motion: stop the ambient animations (the ring spin, parallax and
   focus drift are handled in script.js). */
@media (prefers-reduced-motion: reduce) {
    .splash-block-inner {
        animation: none;
    }

    #load-bar::before {
        animation: none;
        width: 100%;
        opacity: 0.6;
    }

    .splash-block,
    .splash-info-window,
    .os2-window {
        transition-duration: 0.01ms;
    }
}