@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
    --font-heading: "Space Grotesk", "Arial", sans-serif;
    --font-body: "Inter", "Arial", sans-serif;
    --font-mono: "Space Mono", "Courier New", monospace;
    --paper: #f6f3eb;
    --ink: #24211f;
    --muted: #6b625d;
    --rule: rgba(36, 33, 31, 0.16);
    --accent: #9c4635;
    --accent-hover: #783326;
    --room: #1b1917;
    --room-ink: #ece7dc;
    --room-muted: #a39b8f;
    --room-accent: #e09a7c;
    --gutter: clamp(20px, 5vw, 72px);
    --band: 288px;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    text-transform: lowercase;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; letter-spacing: 0.01em; }

/* ---------- the opening wall ---------- */
.hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 112px);
    padding: 22px var(--gutter) 0;
}
.hero__bar {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: var(--muted);
}
.hero__bar nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 22px; }
.hero__bar a { text-decoration: none; }
.hero__bar a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.hero__foot { margin-top: auto; }
.hero__label {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 24px;
    color: var(--muted);
}
.hero__label p { margin: 0; }
.hero__label b { font-weight: 400; color: var(--ink); }
.hero__down { text-decoration: none; white-space: nowrap; }
.hero__down:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .frame::after, .counter { transition: none !important; } }
.hero h1 {
    margin: 10px 0 0 -0.045em;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: min(300px, calc((100vw - 2 * var(--gutter)) / 6.16));
    line-height: 0.86;
    letter-spacing: -0.055em;
    white-space: nowrap;
    padding-bottom: 0.17em;
}

/* ---------- ordered dither: paper <-> room ---------- */
.band { height: var(--band); overflow: hidden; line-height: 0; }
.band canvas { display: block; height: var(--band); image-rendering: pixelated; }
.band--in { background: linear-gradient(var(--paper), var(--room)); }
.band--out { background: linear-gradient(var(--room), var(--paper)); }

/* ---------- 01: the dark room ---------- */
.room { background: var(--room); color: var(--room-ink); padding: 40px 0 72px; overflow: clip; scroll-margin-top: 96px; }
.room__hang {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
}
.film { position: relative; grid-column: 1 / span 8; margin: 0; aspect-ratio: 16 / 9; background: #000; }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film::before {
    content: ""; position: absolute; inset: -10px; pointer-events: none;
    --c: var(--room-muted);
    background:
        linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat;
}
.film__toggle {
    position: absolute; right: 0; bottom: -40px; z-index: 2;
    border: 0; padding: 4px 0; background: none; cursor: pointer;
    color: var(--room-muted); font: 12.5px/1.7 var(--font-mono); text-transform: lowercase;
}
.film__toggle:hover { color: var(--room-ink); }
.room .placard { grid-column: 9 / -1; padding-left: 8px; margin-top: -6px; }
.room .placard__no, .room .placard__medium { color: var(--room-muted); }
.room .placard h2 { font-size: clamp(30px, 3.1vw, 42px); }
.room .placard__action { color: var(--room-accent); }

/* ---------- wall labels ---------- */
.work { position: relative; min-width: 0; }
.placard__no { display: block; color: var(--muted); }
.placard h2 {
    margin: 2px 0 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.placard__medium { display: block; margin-top: 6px; color: var(--muted); }
.placard p { margin: 14px 0 0; max-width: 46ch; }
.placard__action {
    display: inline-block; margin-top: 14px; color: var(--accent);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.work__link { color: inherit; text-decoration: none; }
.work__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work:has(.work__link:hover) .placard__action { text-decoration-thickness: 2px; }
.work:has(.work__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 12px; }
.work__link:focus-visible { outline: none; }

/* ---------- 02–13: the hang ---------- */
.works { padding: 56px 0 0; }
.hang {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: clamp(96px, 13vw, 190px);
    align-items: start;
}
.frame { position: relative; margin: 0 0 20px; aspect-ratio: 4 / 3; }
.frame > img, .frame > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame--shot > img { outline: 1px solid var(--rule); outline-offset: -1px; }
.frame--paper > img { mix-blend-mode: multiply; }
.frame--square { aspect-ratio: 1; }
.frame--square > img { object-fit: contain; }
.frame > .feather > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.frame > .feather {
    display: block; width: 100%; height: 100%; mix-blend-mode: multiply;
    --f: 8%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent), linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent), linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.frame--phone { aspect-ratio: 5 / 9; }
/* viewfinder corners, as in the learning machines panels */
.frame::after {
    content: ""; position: absolute; inset: -4px; pointer-events: none; opacity: 0;
    transition: inset 160ms ease-out, opacity 160ms ease-out;
    --c: var(--ink);
    background:
        linear-gradient(var(--c), var(--c)) top left / 14px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 1px 14px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 14px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 1px 14px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 14px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 1px 14px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 1px 14px no-repeat;
}
.work:has(.work__link:hover) .frame::after,
.work:has(.work__link:focus-visible) .frame::after { inset: -11px; opacity: 1; }

.w02 { grid-column: 1 / span 6; }
.w03 { grid-column: 8 / span 5; margin-top: 168px; }
.w04 { grid-column: 2 / span 5; margin-top: 120px; }
.w05 { grid-column: 7 / span 6; }
.w06 { grid-column: 1 / span 5; }
.w07 { grid-column: 6 / span 7; margin-top: 144px; }
.w08 { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.w08 .frame { grid-column: 1 / span 7; margin: 0; }
.w08 .placard { grid-column: 9 / -1; padding-bottom: 6%; }
.w09 { grid-column: 2 / span 5; margin-top: 132px; }
.w10 { grid-column: 7 / span 6; }
.w11 { grid-column: 1 / span 6; }
.w12 { grid-column: 8 / span 4; margin-top: 156px; }
.w13 { grid-column: 5 / span 4; margin-top: clamp(40px, 9vw, 150px); text-align: center; }
.w13 .frame { width: min(230px, 62%); margin-inline: auto; }
.w13 .placard p { margin-inline: auto; max-width: 30ch; }

/* thumbnail toys, unchanged from the live page */
.frame svg { pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .learning-thumb-slab { transition: transform 180ms ease-out; }
    .work:has(.work__link:hover) .learning-thumb-slab { transform: translateY(var(--slab-lift)); }
    .mmd-piece { transition: transform 220ms ease-out; }
    .work:has(.work__link:hover) .mmd-piece { transform: translate(var(--mmd-x), var(--mmd-y)); }
}

/* ---------- colophon ---------- */
.colophon { margin-top: clamp(120px, 16vw, 230px); padding-bottom: 96px; color: var(--muted); }
.colophon__grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px;
    border-top: 1px solid var(--rule); padding-top: 18px;
}
.colophon p { margin: 0; }
.colophon b { font-weight: 400; color: var(--ink); white-space: nowrap; }
.colophon__a { grid-column: 1 / span 2; color: var(--ink); }
.colophon__b { grid-column: 3 / span 4; }
.colophon__c { grid-column: 8 / span 3; }
.colophon__d { grid-column: 11 / span 2; text-align: right; }
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- the counter ---------- */
.counter {
    position: fixed; left: calc(var(--gutter) / 2); top: 50%; z-index: 5;
    writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); white-space: nowrap;
    color: #fff; mix-blend-mode: difference; pointer-events: none;
    opacity: 0; transition: opacity 200ms ease-out;
}
.counter.is-on { opacity: 1; }

.arrow { display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; width: .62em; height: .28em; vertical-align: .03em; margin-left: .3em; }
.arrow--s { transform: rotate(90deg); margin-left: .5em; }

@media (max-width: 760px) {
    :root { --band: 192px; }
    body { font-size: 16.5px; }
    .hero { min-height: calc(100svh - 76px); padding-top: 16px; }
    .hero__bar { flex-direction: column; gap: 2px; }
    .hero__bar nav { justify-content: flex-start; gap: 0 16px; }
    .hero__label { flex-direction: column; align-items: flex-start; gap: 6px; }
    .hero h1 { font-size: 23.5vw; white-space: normal; line-height: 0.84; margin-top: 16px; }
    .room { padding: 24px 0 56px; }
    .room__hang, .hang, .w08 { display: block; }
    .film { margin-inline: calc(-1 * var(--gutter)); }
    .film::before { display: none; }
    .film__toggle { right: var(--gutter); bottom: -34px; }
    .room .placard { padding: 44px 0 0; }
    .hang > .work { margin-top: 0; margin-bottom: 88px; }
    .w08 .frame { margin-bottom: 20px; }
    .w08 .placard { padding-bottom: 0; }
    .w13 { margin-top: 120px !important; margin-bottom: 0 !important; }
    .counter { display: none; }
    .colophon__grid { display: block; }
    .colophon__grid p { margin-bottom: 18px; text-align: left; }
}