/*
 * DEVIL'S DETAILS — styles for the details layer (see details.js). Each block can be removed on its own.
 */

/* ---------- 1. Veil and loader ---------- */
html.dd-cover body::after {                      /* painted before any script runs: no flash of the page */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: #0A0A0A;
}

.dd-veil {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;                  /* each canvas pixel is one square cell */
    pointer-events: none;
}

.dd-veil.is-idle {
    visibility: hidden;
}

.dd-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483002;
    display: grid;
    place-content: center;
    gap: var(--space-4);
    color: var(--text);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: opacity 0.3s var(--ease-out);
}

.dd-loader.is-out {
    opacity: 0;
}

.dd-loader__title {
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.dd-loader__title span {
    color: var(--accent);
}

.dd-loader__bar {
    display: flex;
    gap: 4px;
}

.dd-loader__bar i {
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-strong);
}

.dd-loader__bar i.is-on {
    background: var(--text);
    border-color: var(--text);
}

.dd-loader__bar i.is-on:last-child {
    background: var(--accent);
    border-color: var(--accent);
}

.dd-loader__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- 2. Hero meta: small signs that say what follows (no decorative letters) ---------- */
.hero__ico {
    display: inline-flex;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--accent-text);
    vertical-align: -0.15em;
}

.hero__ico svg {
    width: 100%;
    height: 100%;
}

.hero__top .hero__ico + span {
    margin-left: 0.35rem;
}

.hero__clock {
    margin-left: 0.6rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--border-strong);
    font-variant-numeric: tabular-nums;
}

.hero__top > div > .hero__ico:not(:first-child) {
    margin-left: var(--space-4);
}

/* ---------- 3. Condensing headings ---------- */
/* the ink pass works on the letters' alpha only (SVG filter #dd-ink): no background, no outline box */
[data-condense].is-condensing {
    filter: url(#dd-ink);
}

[data-condense] .dd-l {
    filter: blur(var(--b, 0));
    opacity: var(--o, 1);
}

/* ---------- 4. Dotted orbits in the home hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
}

.dd-orbits {
    position: absolute;
    top: 6%;
    right: 0;
    z-index: -1;
    width: min(56vw, 900px);
    height: 88%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
    mask-image: linear-gradient(to right, transparent, #000 35%);
}

@media (max-width: 800px) {
    .dd-orbits { width: 100vw; opacity: 0.45; }
}

/* ---------- Dither: a halftone seam where the page turns red ----------
   Rows of red dots grow from a pin-prick to solid red, so the black turns into the footer instead of meeting it.
   The pattern drifts sideways, slowly. */
.site-footer {
    position: relative;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: 60px;
    pointer-events: none;
    /* red dots grow until they touch, then turn into dark holes that shrink to nothing: no straight edge where the red starts */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='60'%3E%3Cg fill='%23e5334a'%3E%3Ccircle cx='0' cy='3.5' r='0.35'/%3E%3Ccircle cx='12' cy='3.5' r='0.35'/%3E%3Ccircle cx='6' cy='10.5' r='0.9'/%3E%3Ccircle cx='0' cy='17.5' r='1.5'/%3E%3Ccircle cx='12' cy='17.5' r='1.5'/%3E%3Ccircle cx='6' cy='24.5' r='2.2'/%3E%3Ccircle cx='0' cy='31.5' r='3'/%3E%3Ccircle cx='12' cy='31.5' r='3'/%3E%3Ccircle cx='6' cy='38.5' r='3.9'/%3E%3Crect y='38.5' width='12' height='21.5'/%3E%3C/g%3E%3Cg fill='%230A0A0A'%3E%3Ccircle cx='0' cy='38.5' r='2.1'/%3E%3Ccircle cx='12' cy='38.5' r='2.1'/%3E%3Ccircle cx='6' cy='45.5' r='1.3'/%3E%3Ccircle cx='0' cy='52' r='0.55'/%3E%3Ccircle cx='12' cy='52' r='0.55'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 12px 60px;
    transform-origin: 50% 100%;
    animation: dd-seam 6s linear infinite, dd-seam-pulse 3.6s var(--ease-ae) infinite alternate;
}

@keyframes dd-seam {
    to { background-position: 24px 0; }
}

/* a slow breath: the dots swell upward a little and settle, the base stays fused with the footer */
@keyframes dd-seam-pulse {
    from { transform: scaleY(0.9); }
    to { transform: scaleY(1.07); }
}

/* Scrolled to the very end the footer fills the screen, so the seam above it is already out of view */
@media (min-width: 800px) and (min-height: 700px) {
    .site-footer:has(.footer-call) {
        min-height: 100vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer::before { animation: none; }
}

/* ---------- Breadcrumb as a route: nodes joined by a line, the current one in red ---------- */
.breadcrumb .container {
    gap: 0;
}

.breadcrumb .container > [aria-hidden="true"] {
    width: 2.25rem;
    height: 1px;
    margin-inline: 0.5rem;
    overflow: hidden;
    color: transparent;
    background: var(--border-strong);
}

.breadcrumb a::before,
.breadcrumb [aria-current="page"]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.5rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    vertical-align: 0.05em;
}

.breadcrumb [aria-current="page"]::before {
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Footer: smaller headline, site map box, live line ---------- */
.footer-call h2 {
    font-size: clamp(2.5rem, 7.4vw, 7rem);
}

@media (min-width: 800px) and (min-height: 700px) {
    .footer-call h2 { font-size: min(7vw, 9.4vh); }
    .footer-call__lead { max-width: 52ch; }
    .status-panel__body { line-height: 1.5; }
}

.sitemap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--ink);
}

.sitemap__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sitemap__head b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-transform: none;
}

.sitemap svg {
    width: 100%;
    height: auto;
    max-height: 9rem;
    overflow: visible;
}

.sitemap text {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--ink);
}

.sitemap .is-here text {
    font-weight: 700;
}

/* ---------- 5. Works: tabs, file codes, drawer index ---------- */
.schede-group__title {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0.55rem 2.6rem 0.55rem 1rem;
    background-color: var(--scheda-bg);
    border: 1px solid var(--border);
    border-bottom: 0;
    clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 100%, 0 100%);
}

.tab__letter {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--accent-text);
}

.tab__count {
    font-variant-numeric: tabular-nums;
}

.scheda__file {
    margin-right: 0.6rem;
    color: var(--accent-text);
}

.scheda:focus {
    outline: none;
}

.scheda:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.drawer {
    position: fixed;
    right: 0;
    overflow: hidden;
    top: 50%;
    z-index: 70;
    display: none;
    transform: translateY(-50%);
}

/* it slides in from the right edge once the hero is scrolled past, and slides back out the same way */
@media (min-width: 1100px) {
    .drawer { display: block; transform: translate(110%, -50%); pointer-events: none; transition: transform 0.5s var(--ease-ae); }
    .drawer.is-shown { transform: translate(0, -50%); pointer-events: auto; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
    .drawer { transition: none; }
}

.drawer ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.drawer a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 17rem;
    min-height: 1.9rem;
    transform: translateX(12.25rem);          /* only the code shows; the title slides out on hover */
    padding: 0 0.7rem;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-muted);
    background-color: var(--scheda-bg);
    border: 1px solid var(--border);
    border-right: 0;
    clip-path: polygon(0.6rem 0, 100% 0, 100% 100%, 0.6rem 100%, 0 50%);
    transition: transform 0.35s var(--ease-ae), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.drawer:hover a,
.drawer:focus-within a {
    transform: none;
}

.drawer a:hover,
.drawer a:focus-visible {
    color: var(--text);
}

.drawer a[aria-current] {
    color: var(--ink);
    background-color: var(--accent-surface);
    border-color: var(--accent-surface);
}

.drawer__code {
    flex: none;
    font-weight: 700;
}

/* ---------- Home: project cards as windows ---------- */
.win-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
    padding: 0.35rem var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: lowercase;
    color: var(--text-muted);
    background-color: color-mix(in srgb, var(--card-bg) 88%, #fff);
    border-bottom: 1px solid var(--card-edge);
}

.win-bar__x {
    color: var(--accent-text);
    font-weight: 700;
}

/* ---------- Blackletter accent: one word, never a paragraph ---------- */
.dd-goth {
    font-family: 'Grenze Gotisch', var(--font-serif);
    font-weight: 600;
    font-size: 1.35em;
    letter-spacing: 0;
    text-transform: none;
    line-height: 0;
}

/* ---------- Project view: tools list, palette, label, colophon, detail notes ---------- */
.case__tools {
    display: grid;
    gap: 0.15rem;
}

.case__tools-head {
    color: var(--accent-text);
}

.case__palette {
    margin-top: var(--space-5);
}

.case__palette ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.case__palette li {
    display: grid;
    gap: 0.35rem;
}

.swatch-chip {
    display: block;
    height: 2.75rem;
    background: var(--c);
    border: 1px solid var(--border);
}

.case__palette .meta {
    line-height: 1.4;
}

.dd-label {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0.15rem 1.25rem;
    margin-top: var(--space-5);
    padding: 0.6rem 0.8rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    transform: rotate(-1.2deg);
}

.dd-label__code {
    color: var(--accent-text);
    font-weight: 700;
}

.case__colophon {
    margin-top: var(--space-4);
    max-width: 48ch;
    line-height: 1.6;
}

.shot--notes {
    position: relative;
}

.shot__frame {
    position: relative;
}

.shot__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.case--seamless .shot__frame,
.case--grid2 .shot__frame {
    height: 100%;
}

.note-dot {
    position: absolute;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.note-dot::before {
    content: "";
    position: absolute;
    inset: 0.45rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(229, 51, 74, 0.28);
    transition: box-shadow 0.3s var(--ease-out);
}

.note-dot:hover::before,
.note-dot:focus-visible::before,
.note-dot[aria-expanded="true"]::before {
    box-shadow: 0 0 0 8px rgba(229, 51, 74, 0.22);
}

.note-dot__text {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.6rem);
    width: max-content;
    max-width: 16rem;
    padding: 0.55rem 0.7rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--text);
    background: var(--canvas);
    border: 1px solid var(--accent);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.note-dot:hover .note-dot__text,
.note-dot:focus-visible .note-dot__text,
.note-dot[aria-expanded="true"] .note-dot__text {
    opacity: 1;
    transform: translateX(-50%);
}

.note-dot__text b {
    color: var(--accent-text);
}

/* ---------- 6. All works: the exploded floppy is the archive's filter ----------
   One layer per section (the top one is the whole disk). The disk opens out when it comes into view; the chosen
   layer slides out of the stack and turns red, the others step back. Swap a layer's drawing for a picture (img element) of the
   finished model and it keeps working. */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.filefinder {
    --p: 0;
    padding-block: clamp(3rem, 7vw, 6rem);
    border-bottom: 1px solid var(--border);
    transition: --p 1.4s var(--ease-ae);
}

.filefinder.is-open {
    --p: 1;
}

/* the whole disk chosen: closed into one object, outlined in red; pointing at a section opens it again */
.filefinder.is-whole {
    --p: 0;
}

.filefinder.is-whole.is-peeking,
.filefinder.is-whole:has(.floppy__stack:hover) {
    --p: 1;
}

.filefinder.is-whole:not(.is-peeking):not(:has(.floppy__stack:hover)) .floppy__face {
    filter: drop-shadow(0 0 0.5px var(--accent)) drop-shadow(0 0 1px var(--accent));
}

.filefinder.is-whole .floppy__layer.is-active:not(.is-hover) {
    translate: none;
}

.filefinder__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--space-6);
    min-height: min(92vh, 820px);
}

.filefinder__head {
    grid-column: 1 / -1;
    max-width: 44rem;
}

.filefinder__head h2 {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.floppy__stack {
    --gap: calc(12px + var(--p) * 70px);
    position: relative;
    min-height: 34rem;
    perspective: 1600px;
}

.floppy__obj {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(23rem, 30vw);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-38deg);
}

.floppy__layer {
    position: absolute;
    inset: 0;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: translateZ(calc((2 - var(--i)) * var(--gap)));
    transition: translate 0.55s var(--ease-out);
}

/* the face and the slices under it that give the layer its thickness */
.floppy__layer > * {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}

.floppy__layer svg,
.floppy__layer img {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.floppy__edge {
    pointer-events: none;
    opacity: 0.42;                    /* over the dark page this darkens the copy like a filter would, at no cost */
}

.floppy__edge:nth-last-child(2) {
    opacity: 0.25;                    /* the underside, in shadow */
}

/* the chosen layer comes out toward you; with a section chosen, the rest of the disk steps back */
.floppy__layer:hover,
.floppy__layer.is-hover {
    translate: -22px -22px 0;
}

.floppy__layer:hover > .floppy__face,
.floppy__layer.is-hover > .floppy__face {
    filter: drop-shadow(0 0 0.5px var(--accent)) drop-shadow(0 0 1px var(--accent));
}

/* switched off (above the layer pointed at, or not the chosen section): only the wireframe, in a light line.
   Pointing at one brings back the solid piece. */
.filefinder .floppy__layer.is-above,
.filefinder.is-filtered .floppy__layer:not(.is-active):not(.is-hover) {
    --wire: 1;
}

.floppy__layer.is-active {
    translate: -34px -34px 0;
}

.floppy__layer.is-active > .floppy__face {
    filter: drop-shadow(0 0 0.5px var(--accent)) drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 1.5px var(--accent));
}

.filefinder .floppy__layer.is-above:not(.is-hover) svg *,
.filefinder.is-filtered .floppy__layer:not(.is-active):not(.is-hover) svg * {
    fill: transparent !important;
    stroke: rgba(249, 248, 246, 0.6) !important;
    stroke-width: 0.5px !important;
    stroke-opacity: 1 !important;
    opacity: 1 !important;
    vector-effect: non-scaling-stroke;
}

/* the wireframe keeps its depth: the outline on top and the same outline under it, as far down as the piece is thick */
.filefinder .floppy__layer.is-above:not(.is-hover) > .floppy__edge,
.filefinder.is-filtered .floppy__layer:not(.is-active):not(.is-hover) > .floppy__edge {
    opacity: 0;
    filter: none;
}

.filefinder .floppy__layer.is-above:not(.is-hover) > .floppy__edge:nth-last-child(2),
.filefinder.is-filtered .floppy__layer:not(.is-active):not(.is-hover) > .floppy__edge:nth-last-child(2) {
    opacity: 0.55;
}

/* a finished model (an image) cannot turn to lines: switched off it goes pale and see-through instead */
.filefinder .floppy__layer.is-above:not(.is-hover) > img.floppy__face,
.filefinder.is-filtered .floppy__layer:not(.is-active):not(.is-hover) > img.floppy__face {
    opacity: 0.25;
    filter: grayscale(1) brightness(1.8);
}

/* hovered or chosen, a layer never stays dimmed */
.filefinder .floppy__layer.is-hover > *,
.filefinder.is-filtered .floppy__layer.is-hover > * {
    opacity: 1;
}

/* the labels: one button per layer, beside it, joined by a short line */
.floppy__labels {
    position: relative;
    min-height: 34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.floppy__labels li {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + (var(--i) - 2) * (4.2rem + var(--p) * 1.2rem));
    transform: translateY(-50%);
}

.floppy__labels li::before {
    content: "";
    position: absolute;
    right: calc(100% + 0.75rem);
    top: 1.15rem;
    width: clamp(2rem, 5vw, 5rem);
    height: 1px;
    background: var(--border-strong);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.floppy__labels button {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.15rem var(--space-3);
    width: 100%;
    max-width: 26rem;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.floppy__labels button .meta {
    grid-row: span 2;
    padding-top: 0.2rem;
    color: var(--accent-text);
}

.floppy__labels button strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.floppy__labels button span:last-child {
    color: var(--text-muted);
    font-size: var(--fs-small);
}

.floppy__labels button:hover {
    border-color: var(--border-strong);
}

.floppy__labels button[aria-pressed="true"] {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.floppy__labels li:has(button[aria-pressed="true"])::before {
    background-color: var(--accent);
}

@media (max-width: 800px) {
    .filefinder__stage { grid-template-columns: 1fr; min-height: 0; }
    .floppy__stack { --gap: calc(8px + var(--p) * 34px); min-height: 0; height: 21rem; margin-block: var(--space-4); }
    .floppy__obj { width: min(13rem, 56vw); }
    .floppy__labels { min-height: 0; display: grid; gap: var(--space-2); }
    .floppy__labels li { position: static; transform: none; }
    .floppy__labels li::before { display: none; }
    .floppy__labels button { max-width: none; border-color: var(--border); }
}

@media (prefers-reduced-motion: reduce) {
    .filefinder, .floppy__layer, .floppy__layer > * { transition: none; }
}

/* ---------- 7. About: ASCII portrait ---------- */
.portrait__frame {
    position: relative;
}

.ascii-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}

[data-ascii].ascii-on .ascii-layer {
    opacity: 1;
}

/* About: margin notes, in red, before the paragraph they annotate */
.margin-note {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--accent-text);
}

/* ---------- 8. Photogallery: horned signature on the enlarged photo ---------- */
.lb-sign {
    position: fixed;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #F9F8F6;
    background: rgba(10, 10, 10, 0.55);
    transform: translate(-100%, -100%);
    pointer-events: none;
}

.lightbox:not(.is-open) .lb-sign {
    display: none;
}

/* ---------- 404 ---------- */
.lost {
    display: grid;
    gap: var(--space-5);
    align-content: center;
    justify-items: center;
    min-height: calc(100vh - var(--header-height));
    padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
    text-align: center;
}

.lost .lead {
    max-width: 46ch;
    margin-inline: auto;
}

.lost .btn-row {
    justify-content: center;
}

.lost__ascii {
    margin: 0;
    text-align: left;
    font-family: var(--font-mono);
    font-size: clamp(0.4rem, 1.15vw, 0.85rem);
    line-height: 1.05;
    color: var(--text);
    white-space: pre;
    overflow: hidden;
}

.lost__ascii b {
    color: var(--accent-text);
    font-weight: 400;
}

.lost h1 {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lost__map svg {
    width: min(100%, 34rem);
    height: auto;
}

.lost__map text {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .drawer a, .ascii-layer, .note-dot__text { transition: none; }
}

/* the hero highlight never breaks inside the word */
.hero__mark {
    white-space: nowrap;
}

/* ---------- 10. Entrances: wiped in from the left (same move as the hero words) ---------- */
/* hidden until the wipe starts: the clip leaves room for focus rings, and that sliver must not show before */
html.dd-motion [data-in] {
    opacity: 0;
    clip-path: inset(-12px 100% -12px -12px);
    transition: clip-path 0.55s var(--ease-ae) var(--in-d, 0ms), opacity 0s linear var(--in-d, 0ms);
}

html.dd-motion [data-in].is-in {
    opacity: 1;
    clip-path: inset(-12px -12px -12px -12px);   /* room for focus rings and shadows */
}

/* once in, the element is left alone: hover states and the tab clip-path of the group titles keep working */
html.dd-motion .schede-group__title[data-in].is-in {
    clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 100%, 0 100%);
}

html.dd-motion .schede-group__title[data-in]:not(.is-in) {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

/* paragraphs: no wipe, they settle in quietly. The wipe stays for controls and labels, the ink for headings:
   one gesture per kind of thing, so the effects never pile up on the same words */
html.dd-motion p[data-in],
html.dd-motion .status-panel__body[data-in],
html.dd-motion .lost__ascii[data-in],
html.dd-motion .email-display[data-in] {
    clip-path: none;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.7s var(--ease-ae) var(--in-d, 0ms), transform 0.7s var(--ease-ae) var(--in-d, 0ms);
}

html.dd-motion p[data-in].is-in,
html.dd-motion .status-panel__body[data-in].is-in,
html.dd-motion .lost__ascii[data-in].is-in,
html.dd-motion .email-display[data-in].is-in {
    clip-path: none;
    opacity: 1;
    transform: none;
}

/* full-height footer: the call at the top, the panels and the legal line at the bottom */
@media (min-width: 800px) and (min-height: 700px) {
    .site-footer:has(.footer-call) > .container {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/* "Available for new projects": a real touch target, without moving the line it sits on */
.hero__status {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
}

/* each sign stays with its label when the line wraps */
.hero__item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.hero__item + .hero__item {
    margin-left: var(--space-4);
}

.hero__top > div > .hero__item .hero__ico {
    margin-left: 0;
}

/* a long address never runs off a narrow screen */
.email-display a {
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .email-display { font-size: clamp(1.25rem, 6.4vw, 2rem); }
}

/* the map is the footer's navigation: every page on it is a link */
.sitemap a {
    cursor: pointer;
}

.sitemap a rect {
    transition: fill var(--dur-fast) var(--ease-out);
}

.sitemap a:hover rect,
.sitemap a:focus-visible rect {
    fill: var(--ink);
}

.sitemap a:focus-visible {
    outline: none;
}

.sitemap a:focus-visible text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* the disk takes the larger column and most of the height; the heading sits above the buttons on the right */
.filefinder__stage {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    min-height: min(94vh, 880px);
}

.filefinder__side {
    display: grid;
    gap: var(--space-5);
    align-content: center;
}

.filefinder__side .filefinder__head {
    grid-column: auto;
}

.filefinder__side .filefinder__head .lead {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.filefinder .floppy__stack {
    --gap: calc(14px + var(--p) * 62px);
    height: min(88vh, 820px);
    min-height: 0;
}

.filefinder .floppy__obj {
    width: min(32rem, 34vw);
}

/* the buttons as a list under the heading; each one's short line still points at the disk */
.filefinder .floppy__labels {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
}

.filefinder .floppy__labels li {
    position: relative;
    top: auto;
    transform: none;
}

@media (max-width: 800px) {
    .filefinder__stage { grid-template-columns: 1fr; min-height: 0; }
    .filefinder .floppy__stack { --gap: calc(8px + var(--p) * 34px); height: 21rem; }
    .filefinder .floppy__obj { width: min(15rem, 62vw); }
    .filefinder__side { order: -1; }
}

/* more air: between the heading and the buttons, and between the buttons */
.filefinder__side {
    gap: clamp(2rem, 4vw, 3.5rem);
}

.filefinder .floppy__labels {
    gap: var(--space-4);
}

.filefinder .floppy__labels button {
    padding-block: var(--space-3);
}

/* the disk centred in the empty space on the left of the buttons (the tilt draws it to the right of its box) */
@media (min-width: 801px) {
    .filefinder .floppy__obj {
        left: 40%;
    }
}

/* opened out, the layers part wider */
.filefinder .floppy__stack {
    --gap: calc(14px + var(--p) * 100px);
}

@media (min-width: 801px) {
    .filefinder .floppy__obj {
        top: 40%;
        width: min(30rem, 32vw);
    }
}

/* the top shell stands for the whole disk: it does not slide out like a single section */
.filefinder .floppy__layer[data-filter="all"],
.filefinder .floppy__layer[data-filter="all"]:hover,
.filefinder .floppy__layer[data-filter="all"].is-hover,
.filefinder .floppy__layer[data-filter="all"].is-active {
    translate: none;
}

/* closer to the hero above */
.filefinder {
    padding-top: clamp(1rem, 2vw, 1.75rem);
}

.filefinder__stage {
    min-height: min(86vh, 800px);
}

/* opened out, the pieces part even more */
.filefinder .floppy__stack {
    --gap: calc(14px + var(--p) * 135px);
}

@media (min-width: 801px) {
    .filefinder .floppy__obj {
        top: 36%;
    }
}

/* room for the disk opened all the way: it parts evenly above and below its centre */
@media (min-width: 801px) {
    .filefinder .floppy__stack {
        height: min(100vh, 980px);
    }

    .filefinder .floppy__obj {
        top: 50%;
    }

    .filefinder__stage {
        min-height: min(100vh, 980px);
    }
}

/* the disk floats: up and down every 5 seconds, turning a few degrees as it goes */
.filefinder .floppy__obj {
    animation: floppy-float 5s var(--ease-ae) infinite alternate;
    animation-play-state: paused;
}

.filefinder.is-visible .floppy__obj {
    animation-play-state: running;
}

@keyframes floppy-float {
    from { transform: translate(-50%, calc(-50% + 10px)) rotateX(58deg) rotateZ(-40.5deg); }
    to   { transform: translate(-50%, calc(-50% - 10px)) rotateX(58deg) rotateZ(-35.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .filefinder .floppy__obj { animation: none; }
}

/* less room under the disk too, but more than above it */
.filefinder {
    padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

/* the opening follows the scroll (set inline by script.js), so it has no timing of its own */
.filefinder {
    transition: none;
}

/* further left in its column */
@media (min-width: 801px) {
    .filefinder .floppy__obj {
        left: 34%;
    }
}

/* a layer comes out sliding to the right on the screen (its own axes are turned with the disk:
   38deg round, tilted 58deg, so screen-right is about (0.79, 0.62) in the layer's plane) */
.floppy__layer:hover,
.floppy__layer.is-hover {
    translate: 22px 17px 0;
}

.floppy__layer.is-active {
    translate: 40px 31px 0;
}

.filefinder .floppy__layer[data-filter="all"],
.filefinder .floppy__layer[data-filter="all"]:hover,
.filefinder .floppy__layer[data-filter="all"].is-hover,
.filefinder .floppy__layer[data-filter="all"].is-active {
    translate: none;
}

@media (min-width: 801px) {
    .filefinder .floppy__obj {
        left: 37%;                    /* as far left as it goes without the open disk leaving the screen */
    }
}