@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/bricolage-grotesque-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, a { font: inherit; }
  button { border: 0; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --paper: #e8dfce;
    --ink: #13120f;
    --signal: #e53a20;
    --mono: "IBM Plex Mono", monospace;
    --sans: "Syne", sans-serif;
    --serif: "Bodoni Moda", serif;
    --header-h: 88px;
  }

  html { background: var(--ink); }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }

  body.modal-open { overflow: hidden; }

  ::selection { background: var(--signal); color: #fff; }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 12px 16px;
    background: #fff;
    color: #000;
    font: 600 12px var(--mono);
    transform: translateY(-150%);
    transition: transform .2s ease;
  }

  .skip-link:focus { transform: translateY(0); }



  .scroll-progress {
    position: fixed;
    z-index: 950;
    right: 0;
    top: 0;
    width: 4px;
    height: 100vh;
    background: rgb(255 255 255 / .12);
  }

  .scroll-progress span {
    display: block;
    width: 100%;
    height: var(--scroll-progress, 0%);
    background: var(--signal);
  }

  :focus-visible { outline: 3px solid var(--signal); outline-offset: 5px; }
}

@layer layout {
  .site-header {
    position: fixed;
    z-index: 800;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    width: 100%;
    height: var(--header-h);
    padding: 24px 3vw;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .site-header a { pointer-events: auto; }

  .wordmark {
    justify-self: start;
    font: 800 23px/1 var(--sans);
    letter-spacing: -.06em;
  }

  .wordmark sup {
    position: relative;
    top: -7px;
    margin-left: 3px;
    font: 500 7px var(--mono);
    letter-spacing: 0;
  }

  .exhibition-id {
    text-align: center;
    font: 500 8px/1.55 var(--mono);
    letter-spacing: .18em;
  }

  .site-header nav {
    justify-self: end;
    display: flex;
    gap: 34px;
    font: 600 10px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
  }

  .site-header nav a { position: relative; }
  .site-header nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
  }
  .site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .site-header nav span { color: var(--signal); }

  .hero {
    --hero-ink: #0b0b0a;
    --hero-paper: #d8d6ce;
    --hero-muted: #97958f;
    --hero-accent: #ad3029;
    --hero-print-paper: #c9c0ad;
    --hero-print-wash: rgb(201 192 173 / .065);
    --hero-print-fiber: rgb(235 224 201 / .22);
    --hero-print-smudge: rgb(2 2 1 / .86);
    --hero-print-smudge-soft: rgb(7 6 4 / .56);
    --hero-print-mark: rgb(216 208 191 / .68);
    --hero-print-red: rgb(187 50 42 / .96);
    --hero-print-rule: 1px;
    --hero-print-mark-size: clamp(36px, 3.2vw, 58px);
    --hero-print-cross-size: clamp(22px, 2vw, 32px);
    --hero-print-light-width: clamp(142px, 14.2vw, 218px);
    --hero-print-light-height: clamp(108px, 10.8vw, 166px);
    --print-light-x: 50%;
    --print-light-y: 42%;
    --hero-draft-surface: rgb(11 11 10 / .94);
    --hero-draft-paper: rgb(216 208 191 / .9);
    --hero-draft-paper-soft: rgb(216 208 191 / .18);
    --hero-draft-grid: rgb(216 208 191 / .12);
    --hero-draft-red-soft: rgb(187 50 42 / .24);
    --hero-draft-rule: 1px;
    --hero-draft-rule-strong: 2px;
    --hero-draft-space-1: 4px;
    --hero-draft-space-2: 8px;
    --hero-draft-space-3: 12px;
    --hero-draft-space-4: 16px;
    --hero-draft-space-5: 24px;
    --hero-draft-space-6: 32px;
    --hero-draft-space-7: 48px;
    --hero-draft-type-xs: clamp(.375rem, .46vw, .5rem);
    --hero-draft-type-sm: clamp(.5rem, .58vw, .625rem);
    --hero-draft-type-md: clamp(.625rem, .72vw, .75rem);
    --hero-draft-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    min-height: max(820px, 100svh);
    overflow: hidden;
    background: var(--hero-ink);
    color: var(--hero-paper);
    isolation: isolate;
  }

  .hero-print-room {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    contain: paint;
    pointer-events: none;
  }

  .hero-print-room__reveal {
    position: absolute;
    inset: 0;
    opacity: .22;
  }

  .hero-print-room__paper,
  .hero-print-room__smudges,
  .hero-print-room__marks {
    position: absolute;
    inset: 0;
  }

  .hero-print-room__paper {
    background-color: var(--hero-print-wash);
    background-image:
      linear-gradient(104deg, transparent 0 17%, var(--hero-print-wash) 31%, transparent 46% 67%, var(--hero-print-wash) 83%, transparent),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='paper' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.44' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' fill='%23c9c0ad' filter='url(%23paper)' opacity='.25'/%3E%3C/svg%3E");
    background-size: 100% 100%, 220px 220px;
    background-blend-mode: normal, screen;
    mix-blend-mode: screen;
  }

  .hero-print-room__paper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(97deg, transparent 0 24%, var(--hero-print-fiber) 24.15%, transparent 24.45% 71%, var(--hero-print-fiber) 71.1%, transparent 71.38%),
      linear-gradient(7deg, transparent 0 56%, var(--hero-print-fiber) 56.1%, transparent 56.4%);
    opacity: .24;
  }

  .print-smudge {
    position: absolute;
    display: block;
    opacity: .82;
    filter: blur(1.4px);
  }

  .print-smudge--drag {
    top: 55%;
    left: 3%;
    width: clamp(190px, 27vw, 440px);
    height: clamp(48px, 6vw, 82px);
    border-radius: 52% 31% 62% 26%;
    background:
      linear-gradient(177deg, transparent 0 25%, var(--hero-print-smudge-soft) 29% 34%, transparent 38% 44%, var(--hero-print-smudge) 49% 55%, transparent 60%),
      radial-gradient(ellipse at 34% 52%, var(--hero-print-smudge) 0 11%, transparent 64%);
    transform: rotate(-4deg);
  }

  .print-smudge--thumb {
    top: 17%;
    right: 17%;
    width: clamp(62px, 6.5vw, 104px);
    aspect-ratio: .72;
    border-radius: 48% 52% 44% 58%;
    background:
      radial-gradient(ellipse at 49% 52%, transparent 0 28%, var(--hero-print-smudge-soft) 31% 35%, transparent 39%),
      radial-gradient(ellipse at 47% 50%, var(--hero-print-smudge-soft) 0 18%, transparent 64%);
    transform: rotate(17deg);
  }

  .print-smudge--roller {
    right: 2%;
    bottom: 8%;
    width: clamp(220px, 31vw, 510px);
    height: clamp(50px, 6vw, 88px);
    border-radius: 63% 28% 51% 35%;
    background:
      repeating-linear-gradient(174deg, transparent 0 8px, var(--hero-print-smudge-soft) 10px 13px, transparent 15px 22px),
      radial-gradient(ellipse at 55% 48%, var(--hero-print-smudge) 0 9%, transparent 67%);
    transform: rotate(2deg);
  }

  .hero-print-room__marks {
    color: var(--hero-print-mark);
    opacity: .72;
  }

  .print-crop {
    position: absolute;
    display: block;
    width: var(--hero-print-mark-size);
    height: var(--hero-print-mark-size);
  }

  .print-crop::before,
  .print-crop::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: currentColor;
  }

  .print-crop::before {
    width: 100%;
    height: var(--hero-print-rule);
  }

  .print-crop::after {
    width: var(--hero-print-rule);
    height: 100%;
  }

  .print-crop--north-west { top: 13%; left: 2.6%; }
  .print-crop--north-east { top: 9%; right: 6%; transform: rotate(90deg); }
  .print-crop--south { bottom: 5%; left: 34%; transform: rotate(-90deg); }
  .print-crop--east { right: 2.4%; bottom: 27%; transform: rotate(180deg); }

  .print-register {
    position: absolute;
    display: block;
    width: var(--hero-print-cross-size);
    aspect-ratio: 1;
    border: var(--hero-print-rule) solid var(--hero-print-red);
    border-radius: 50%;
    background:
      linear-gradient(var(--hero-print-red), var(--hero-print-red)) center / 100% var(--hero-print-rule) no-repeat,
      linear-gradient(90deg, var(--hero-print-red), var(--hero-print-red)) center / var(--hero-print-rule) 100% no-repeat;
    opacity: .88;
  }

  .print-register--one { top: 29%; left: 11%; }
  .print-register--two { top: 43%; right: 4.2%; }
  .print-register--three { bottom: 7%; left: 57%; }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .js .hero-print-room__reveal {
      opacity: 0;
      -webkit-mask-image: radial-gradient(ellipse var(--hero-print-light-width) var(--hero-print-light-height) at var(--print-light-x) var(--print-light-y), black 0, rgb(0 0 0 / .98) 24%, rgb(0 0 0 / .76) 54%, transparent 100%);
      mask-image: radial-gradient(ellipse var(--hero-print-light-width) var(--hero-print-light-height) at var(--print-light-x) var(--print-light-y), black 0, rgb(0 0 0 / .98) 24%, rgb(0 0 0 / .76) 54%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
      will-change: opacity;
    }

    .js .hero.is-print-lit .hero-print-room__reveal {
      opacity: 1;
      transition-duration: .18s;
    }
  }



  .hero-xray-layer,
  .hero-xray-secret {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .hero-xray-layer {
    z-index: 0;
    color: var(--hero-draft-paper);
    opacity: .18;
    pointer-events: none;
  }

  .hero-xray-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(90deg, var(--hero-draft-grid) var(--hero-draft-rule), transparent var(--hero-draft-rule)),
      linear-gradient(var(--hero-draft-grid) var(--hero-draft-rule), transparent var(--hero-draft-rule));
    background-size: var(--hero-draft-space-7) 100%, 100% var(--hero-draft-space-2);
    opacity: .44;
  }

  .hero-xray-secret {
    z-index: 3;
    opacity: .82;
    pointer-events: none;
  }

  .hero-xray-grid {
    position: absolute;
    top: 42%;
    right: 4.8vw;
    bottom: var(--hero-draft-space-7);
    left: 4.8vw;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    border-top: var(--hero-draft-rule) solid var(--hero-draft-paper-soft);
    border-bottom: var(--hero-draft-rule) solid var(--hero-draft-paper-soft);
    background: linear-gradient(var(--hero-draft-grid) var(--hero-draft-rule), transparent var(--hero-draft-rule)) 0 0 / 100% var(--hero-draft-space-2);
  }

  .hero-xray-grid::before {
    content: "12 COL / LIVE CONTENT BOUNDS";
    position: absolute;
    top: calc(-1 * var(--hero-draft-space-4));
    left: 0;
    color: var(--hero-draft-paper);
    font: 600 var(--hero-draft-type-xs)/1 var(--mono);
    letter-spacing: .12em;
  }

  .hero-xray-grid span {
    position: relative;
    border-left: var(--hero-draft-rule) solid var(--hero-draft-paper-soft);
  }

  .hero-xray-grid span:last-child {
    border-right: var(--hero-draft-rule) solid var(--hero-draft-paper-soft);
  }

  .hero-xray-traces {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-xray-trace {
    position: absolute;
    min-width: 1px;
    min-height: 1px;
    pointer-events: none;
  }

  .hero-xray-trace--text {
    border: var(--hero-draft-rule) solid rgb(187 50 42 / .76);
    background:
      linear-gradient(to bottom, transparent calc(100% - 2px), rgb(216 208 191 / .56) calc(100% - 2px) calc(100% - 1px), transparent calc(100% - 1px)),
      rgb(187 50 42 / .075);
  }

  .hero-xray-trace::before,
  .hero-xray-trace::after {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    padding: 2px 4px;
    background: rgb(11 11 10 / .9);
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
    letter-spacing: .045em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-xray-trace--text::before {
    content: attr(data-trace-label);
    bottom: calc(100% + 2px);
    left: -1px;
    max-width: max(100%, 120px);
    color: var(--hero-draft-paper);
  }

  .hero-xray-trace--text::after {
    content: attr(data-trace-metrics);
    top: calc(100% + 2px);
    left: -1px;
    max-width: max(100%, 150px);
    color: var(--hero-print-red);
  }

  .hero-xray-trace--component {
    border: var(--hero-draft-rule) dashed rgb(216 208 191 / .72);
    outline: var(--hero-draft-rule) solid rgb(187 50 42 / .34);
    outline-offset: 2px;
  }

  .hero-xray-trace--component::before {
    content: attr(data-trace-label);
    top: 2px;
    left: 2px;
    max-width: calc(100% - 4px);
    color: var(--hero-draft-paper);
  }

  .hero-xray-trace--component::after {
    content: attr(data-trace-metrics);
    right: 2px;
    bottom: 2px;
    max-width: calc(100% - 4px);
    color: var(--hero-print-red);
  }

  .hero-xray-trace--text.hero-xray-trace--compact::before {
    display: none;
  }

  .hero-xray-trace--text.hero-xray-trace--compact::after {
    content: attr(data-trace-size);
    top: auto;
    right: auto;
    bottom: -10px;
    left: -1px;
    max-width: 92px;
    padding: 1px 2px;
    background: rgb(11 11 10 / .82);
    font-size: 5px;
  }

  .hero-xray-trace--micro {
    border-style: solid;
    outline: none;
  }

  .hero-xray-trace--micro::before,
  .hero-xray-trace--micro::after { display: none; }

  .hero-xray-grid span::before {
    content: attr(data-column);
    position: absolute;
    top: var(--hero-draft-space-1);
    left: var(--hero-draft-space-1);
    color: var(--hero-print-red);
    font: 600 var(--hero-draft-type-xs)/1 var(--mono);
  }

  .hero-xray-box {
    position: absolute;
    border: var(--hero-draft-rule) solid currentColor;
    color: var(--hero-print-red);
  }

  .hero-xray-box::before,
  .hero-xray-box::after {
    content: "";
    position: absolute;
    width: var(--hero-draft-space-2);
    height: var(--hero-draft-space-2);
    border-color: currentColor;
  }

  .hero-xray-box::before {
    top: calc(-1 * var(--hero-draft-rule));
    left: calc(-1 * var(--hero-draft-rule));
    border-top: var(--hero-draft-rule-strong) solid;
    border-left: var(--hero-draft-rule-strong) solid;
  }

  .hero-xray-box::after {
    right: calc(-1 * var(--hero-draft-rule));
    bottom: calc(-1 * var(--hero-draft-rule));
    border-right: var(--hero-draft-rule-strong) solid;
    border-bottom: var(--hero-draft-rule-strong) solid;
  }

  .hero-xray-box--structural {
    border-style: dashed;
    color: var(--hero-draft-paper);
    opacity: .5;
  }

  .hero-xray-box--headline {
    background: linear-gradient(var(--hero-draft-red-soft) var(--hero-draft-rule), transparent var(--hero-draft-rule)) 0 0 / 100% var(--xray-headline-leading, var(--hero-draft-space-7));
  }

  .hero-xray-box--portrait {
    color: var(--hero-draft-paper);
    outline: var(--hero-draft-rule) dashed var(--hero-print-red);
    outline-offset: var(--hero-draft-space-1);
  }

  .hero-xray-class-label {
    position: absolute;
    z-index: 2;
    top: calc(-1 * var(--hero-draft-space-4));
    left: 0;
    max-width: 100%;
    overflow: hidden;
    padding: var(--hero-draft-space-1) var(--hero-draft-space-2);
    background: var(--hero-draft-surface);
    color: currentColor;
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-xray-class-label b,
  .hero-xray-measure b,
  .hero-xray-ruler b {
    color: var(--hero-draft-paper);
    font-weight: 600;
  }

  .hero-xray-padding {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--xray-story-padding, 0);
    border-left: var(--hero-draft-rule) dashed var(--hero-print-red);
    background: repeating-linear-gradient(135deg, transparent 0 var(--hero-draft-space-1), var(--hero-draft-red-soft) var(--hero-draft-space-1) var(--hero-draft-space-2));
  }

  .hero-xray-padding::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    right: var(--hero-draft-space-1);
    color: var(--hero-draft-paper);
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
    text-orientation: mixed;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
  }

  .hero-xray-baseline {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    border-top: var(--hero-draft-rule) dashed var(--hero-print-red);
  }

  .hero-xray-baseline::after {
    content: attr(data-label);
    position: absolute;
    right: var(--hero-draft-space-1);
    bottom: var(--hero-draft-space-1);
    padding: var(--hero-draft-space-1);
    background: var(--hero-draft-surface);
    color: var(--hero-draft-paper);
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
  }

  .hero-xray-measure {
    position: absolute;
    color: var(--hero-print-red);
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .hero-xray-measure--width {
    right: 0;
    bottom: calc(-1 * var(--hero-draft-space-5));
    left: 0;
    padding-top: var(--hero-draft-space-1);
    border-top: var(--hero-draft-rule) solid currentColor;
    text-align: center;
  }

  .hero-xray-measure--width::before,
  .hero-xray-measure--width::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--hero-draft-space-1));
    width: var(--hero-draft-rule);
    height: var(--hero-draft-space-2);
    background: currentColor;
  }

  .hero-xray-measure--width::before { left: 0; }
  .hero-xray-measure--width::after { right: 0; }

  .hero-xray-measure--height {
    top: 0;
    right: calc(-1 * var(--hero-draft-space-5));
    bottom: 0;
    padding-left: var(--hero-draft-space-1);
    border-left: var(--hero-draft-rule) solid currentColor;
    text-align: center;
    writing-mode: vertical-rl;
  }

  .hero-xray-ruler {
    position: absolute;
    height: var(--hero-draft-rule);
    border-top: var(--hero-draft-rule) solid var(--hero-print-red);
    color: var(--hero-print-red);
  }

  .hero-xray-ruler::before,
  .hero-xray-ruler::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--hero-draft-space-1));
    width: var(--hero-draft-rule);
    height: var(--hero-draft-space-2);
    background: currentColor;
  }

  .hero-xray-ruler::before { left: 0; }
  .hero-xray-ruler::after { right: 0; }

  .hero-xray-ruler span {
    position: absolute;
    top: calc(-1 * var(--hero-draft-space-4));
    left: 50%;
    padding: var(--hero-draft-space-1);
    background: var(--hero-draft-surface);
    font: 500 var(--hero-draft-type-xs)/1 var(--mono);
    letter-spacing: .06em;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .hero-xray-ruler.is-vertical {
    width: var(--hero-draft-rule);
    height: auto;
    border-top: 0;
    border-left: var(--hero-draft-rule) solid var(--hero-print-red);
  }

  .hero-xray-ruler.is-vertical::before,
  .hero-xray-ruler.is-vertical::after {
    left: calc(-1 * var(--hero-draft-space-1));
    width: var(--hero-draft-space-2);
    height: var(--hero-draft-rule);
  }

  .hero-xray-ruler.is-vertical::before { top: 0; }
  .hero-xray-ruler.is-vertical::after { top: auto; right: auto; bottom: 0; }

  .hero-xray-ruler.is-vertical span {
    top: 50%;
    left: var(--hero-draft-space-2);
    transform: translateY(-50%);
  }

  .hero-xray-layer:not(.is-synced) .hero-xray-box,
  .hero-xray-layer:not(.is-synced) .hero-xray-ruler {
    display: none;
  }

  .hero-xray-console {
    position: absolute;
    top: var(--xray-console-y, 62%);
    left: var(--xray-console-x, 58%);
    width: var(--xray-console-width, clamp(16rem, 22vw, 21rem));
    max-width: calc(100% - var(--hero-draft-space-6));
    padding: var(--hero-draft-space-3);
    border: var(--hero-draft-rule) solid var(--hero-draft-paper);
    background:
      linear-gradient(90deg, var(--hero-print-red) var(--hero-draft-rule-strong), transparent var(--hero-draft-rule-strong)),
      linear-gradient(var(--hero-draft-grid) var(--hero-draft-rule), transparent var(--hero-draft-rule)) 0 0 / 100% var(--hero-draft-space-2),
      var(--hero-draft-surface);
    box-shadow: var(--hero-draft-space-1) var(--hero-draft-space-1) 0 var(--hero-draft-red-soft);
    color: var(--hero-draft-paper);
    pointer-events: none;
    translate: -50% -50%;
  }

  .hero-xray-console::before,
  .hero-xray-console::after {
    content: "";
    position: absolute;
    width: var(--hero-draft-space-3);
    height: var(--hero-draft-space-3);
    border-color: var(--hero-print-red);
  }

  .hero-xray-console::before {
    top: calc(-1 * var(--hero-draft-rule));
    left: calc(-1 * var(--hero-draft-rule));
    border-top: var(--hero-draft-rule-strong) solid;
    border-left: var(--hero-draft-rule-strong) solid;
  }

  .hero-xray-console::after {
    right: calc(-1 * var(--hero-draft-rule));
    bottom: calc(-1 * var(--hero-draft-rule));
    border-right: var(--hero-draft-rule-strong) solid;
    border-bottom: var(--hero-draft-rule-strong) solid;
  }

  .hero-xray-console__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hero-draft-space-3);
    padding-bottom: var(--hero-draft-space-2);
    border-bottom: var(--hero-draft-rule) solid var(--hero-print-red);
    font: 600 var(--hero-draft-type-sm)/1 var(--mono);
    letter-spacing: .08em;
  }

  .hero-xray-console__header i {
    color: var(--hero-print-red);
    font-style: normal;
  }

  .hero-xray-console__scope {
    margin-top: var(--hero-draft-space-2);
    padding: var(--hero-draft-space-2);
    border-left: var(--hero-draft-rule-strong) solid var(--hero-print-red);
    color: var(--hero-draft-paper);
    font: 500 var(--hero-draft-type-xs)/1.45 var(--mono);
    letter-spacing: .04em;
  }

  .hero-xray-console__scope strong {
    color: var(--hero-print-red);
    font-weight: 600;
  }

  .hero-xray-console__readout {
    margin: var(--hero-draft-space-2) 0 0;
    font: 500 var(--hero-draft-type-xs)/1.3 var(--mono);
  }

  .hero-xray-console__readout div {
    display: grid;
    grid-template-columns: var(--hero-draft-space-7) minmax(0, 1fr);
    gap: var(--hero-draft-space-2);
    padding: var(--hero-draft-space-1) 0;
    border-bottom: var(--hero-draft-rule) dotted var(--hero-draft-paper-soft);
  }

  .hero-xray-console__readout dt {
    color: var(--hero-print-red);
    letter-spacing: .1em;
  }

  .hero-xray-console__readout dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--hero-draft-paper);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-xray-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hero-draft-space-2);
    width: 100%;
    margin-top: var(--hero-draft-space-3);
    padding: var(--hero-draft-space-3) var(--hero-draft-space-4);
    border: var(--hero-draft-rule) solid var(--hero-draft-paper);
    background: var(--hero-draft-paper);
    box-shadow: var(--hero-draft-space-1) var(--hero-draft-space-1) 0 var(--hero-print-red);
    color: var(--hero-ink);
    cursor: crosshair;
    font: 600 var(--hero-draft-type-sm)/1.15 var(--mono);
    letter-spacing: .08em;
    pointer-events: auto;
    text-align: left;
    transition: color .2s var(--hero-draft-ease), background-color .2s var(--hero-draft-ease), box-shadow .2s var(--hero-draft-ease), translate .2s var(--hero-draft-ease);
  }

  .hero-xray-toggle__mark {
    color: var(--hero-print-red);
    font-size: var(--hero-draft-type-md);
  }

  .hero-xray-toggle:focus-visible {
    outline: var(--hero-draft-rule-strong) solid var(--hero-draft-paper);
    outline-offset: var(--hero-draft-space-1);
  }

  .hero-xray-toggle[aria-pressed="true"] {
    background: var(--hero-print-red);
    box-shadow: var(--hero-draft-space-1) var(--hero-draft-space-1) 0 var(--hero-draft-paper);
    color: var(--hero-paper);
  }

  .hero-xray-toggle[aria-pressed="true"] .hero-xray-toggle__mark {
    color: var(--hero-paper);
  }

  .hero-xray-verdict {
    min-height: var(--hero-draft-space-3);
    margin-top: var(--hero-draft-space-2);
    color: var(--hero-print-red);
    font: 600 var(--hero-draft-type-xs)/1.35 var(--mono);
    letter-spacing: .07em;
  }

  @media (hover: hover) {
    .hero-xray-toggle:hover {
      background: var(--hero-print-red);
      box-shadow: none;
      color: var(--hero-paper);
      translate: var(--hero-draft-space-1) var(--hero-draft-space-1);
    }

    .hero-xray-toggle:hover .hero-xray-toggle__mark { color: var(--hero-paper); }
  }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .js .hero-xray-layer,
    .js .hero-xray-secret {
      opacity: 0;
      -webkit-mask-image: radial-gradient(ellipse var(--hero-print-light-width) var(--hero-print-light-height) at var(--print-light-x) var(--print-light-y), black 0, rgb(0 0 0 / .98) 24%, rgb(0 0 0 / .76) 54%, transparent 100%);
      mask-image: radial-gradient(ellipse var(--hero-print-light-width) var(--hero-print-light-height) at var(--print-light-x) var(--print-light-y), black 0, rgb(0 0 0 / .98) 24%, rgb(0 0 0 / .76) 54%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      transition: opacity .7s var(--hero-draft-ease);
    }

    .js .hero.is-print-lit .hero-xray-layer,
    .js .hero.is-print-lit .hero-xray-secret {
      opacity: 1;
      transition-duration: .18s;
    }
  }

  .js .hero.is-xray-focus .hero-xray-secret,
  .js .hero-xray-secret:focus-within {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .js .hero.is-xray-full .hero-print-room__reveal,
  .js .hero.is-xray-full .hero-xray-layer,
  .js .hero.is-xray-full .hero-xray-secret {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero.is-xray-full .hero-xray-box--structural { opacity: .86; }
  .hero.is-xray-full .hero-xray-layer::before { opacity: .72; }

  @media (max-width: 760px) {
    .hero-xray-grid span:nth-child(even)::before { display: none; }

    .hero-xray-console {
      top: auto;
      right: var(--hero-draft-space-4);
      bottom: calc(var(--hero-draft-space-7) + var(--hero-draft-space-4));
      left: auto;
      width: min(18rem, calc(100% - var(--hero-draft-space-6)));
      padding: var(--hero-draft-space-2);
      translate: none;
    }

    .hero-xray-console__scope,
    .hero-xray-console__readout {
      display: none;
    }

    .hero-xray-console__header {
      padding-bottom: var(--hero-draft-space-2);
    }

    .hero-xray-toggle { margin-top: var(--hero-draft-space-2); }
    .hero-xray-measure--height { display: none; }
  }

  .hero-edition {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: max(820px, 100svh);
    padding: 84px 4.8vw 25px;
  }

  .hero-edition__topline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hero-paper);
    color: var(--hero-muted);
    font: 600 8px/1 var(--mono);
    letter-spacing: .16em;
  }

  .hero-edition__topline span:nth-child(2) { text-align: center; }
  .hero-edition__topline span:last-child { text-align: right; }

  .hero-masthead {
    position: relative;
    padding: clamp(10px, 1.8vh, 20px) 0 8px;
    text-align: center;
  }

  .hero-title {
    display: flex;
    justify-content: center;
    overflow: hidden;
    color: var(--hero-paper);
    font: 400 clamp(6.8rem, 12vw, 11.5rem)/.72 var(--serif);
    letter-spacing: -.055em;
    white-space: nowrap;
  }

  .js .hero-title:not(.decrypt-ready) { visibility: hidden; }

  .hero-letter {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: newspaper-letter-in .9s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-letter:nth-child(2) { animation-delay: .06s; }
  .hero-letter:nth-child(3) { animation-delay: .12s; }
  .hero-letter:nth-child(4) { animation-delay: .18s; }


  .hero-issue {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 2.4vw, 38px);
    min-height: 42px;
    border-top: 1px solid var(--hero-paper);
    border-bottom: 2px solid var(--hero-paper);
    color: var(--hero-muted);
    font: 600 10px/1 var(--mono);
    letter-spacing: .13em;
  }

  .hero-issue__urgent {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: clamp(8px, 1.6vw, 24px);
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 24px;
    overflow: hidden;
    background: var(--hero-accent);
    box-shadow: 5px 5px 0 var(--hero-paper);
    color: var(--hero-paper);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: .18em;
    transform: translateY(-50%) rotate(-2deg);
  }

  .hero-issue__urgent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .24) 48%, transparent 66%);
    transform: translateX(-130%);
    animation: urgent-flash 3.4s 1.2s ease-in-out infinite;
  }

  .hero-issue i {
    width: 3px;
    height: 3px;
    background: var(--hero-accent);
    border-radius: 50%;
  }


  .hero-news {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1.24fr) minmax(360px, .76fr);
    gap: clamp(38px, 4.8vw, 76px);
    min-height: 0;
    padding-top: clamp(10px, 1.5vh, 18px);
  }

  .hero-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-right: clamp(25px, 3vw, 50px);
    border-right: 1px solid rgb(216 214 206 / .28);
  }


  .hero-headline {
    max-width: 100%;
    overflow: hidden;
    animation: newspaper-rise .9s .3s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-story h2 {
    width: 192%;
    color: var(--hero-paper);
    font: 400 clamp(4.2rem, 8.9vw, 10.6rem)/.78 var(--serif);
    letter-spacing: -.06em;
    white-space: nowrap;
    transform: scaleX(.52);
    transform-origin: left center;
  }

  .hero-story h2 em {
    color: var(--hero-accent);
    font-weight: 400;
  }

  .hero-dispatch {
    margin-top: clamp(25px, 3vh, 36px);
    padding-left: 18px;
    border-left: 3px solid var(--hero-accent);
  }

  .hero-story__lead,
  .hero-incident {
    max-width: none;
    color: var(--hero-paper);
    font: 600 clamp(.92rem, 1.05vw, 1.05rem)/1.4 var(--mono);
    letter-spacing: .025em;
    /* Bez nowrap: przy szerokim ekranie i tak jedna linia,
       w węższej kolumnie zawija sie zamiast byc uciete. */
    text-wrap: pretty;
  }

  .hero-story__lead {
    animation: newspaper-rise .8s .42s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-incident {
    margin-top: 12px;
    animation: newspaper-rise .8s .48s cubic-bezier(.16, 1, .3, 1) both;
  }

  .typewriter-text {
    display: inline;
  }

  .typewriter-text.is-typing::after {
    content: "";
    display: inline-block;
    width: .08em;
    height: .82em;
    margin-left: .12em;
    background: var(--hero-accent);
    vertical-align: -.08em;
    animation: typewriter-caret .62s step-end infinite;
  }

  .typewriter-text.is-complete::after {
    animation: typewriter-caret .62s step-end infinite;
  }

  .typewriter-text.is-finished::after {
    display: none;
  }

  .hero-enter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: stretch;
    width: min(100%, 560px);
    min-height: 72px;
    margin-top: clamp(24px, 3vh, 34px);
    border: 1px solid rgb(216 214 206 / .52);
    color: var(--hero-paper);
    background: rgb(216 214 206 / .035);
    box-shadow: none;
    transition: color .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease, translate .28s cubic-bezier(.16, 1, .3, 1);
    animation: newspaper-rise .8s .5s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-enter::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 5px;
    border: 1px dashed rgb(216 214 206 / .16);
    transition: border-color .28s ease;
  }

  .hero-enter::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -1px;
    width: 3px;
    background: var(--hero-accent);
  }

  .hero-enter__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
  }

  .hero-enter__copy small {
    color: var(--hero-muted);
    font: 600 7px/1 var(--mono);
    letter-spacing: .18em;
    transition: color .28s ease;
  }

  .hero-enter__copy strong {
    font: 800 clamp(14px, 1.05vw, 17px)/1 var(--sans);
    letter-spacing: .075em;
  }

  .hero-enter__arrow {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    border-left: 1px solid rgb(216 214 206 / .28);
    background: rgb(173 48 41 / .12);
    color: var(--hero-accent);
    font: 400 32px/1 var(--serif);
    transition: color .28s ease, background-color .28s ease, border-color .28s ease;
  }

  .hero-enter:hover {
    border-color: var(--hero-paper);
    color: var(--hero-ink);
    background: var(--hero-paper);
    box-shadow: 4px 4px 0 var(--hero-accent);
    translate: -2px -2px;
  }

  .hero-enter:hover::before { border-color: rgb(11 11 10 / .24); }
  .hero-enter:hover .hero-enter__copy small { color: #68665f; }
  .hero-enter:hover .hero-enter__arrow {
    border-color: rgb(11 11 10 / .22);
    background: var(--hero-accent);
    color: var(--hero-paper);
  }


  .hero-portrait {
    align-self: center;
    min-width: 0;
    animation: newspaper-image-in 1s .28s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-portrait__frame {
    height: clamp(380px, 48vh, 510px);
    overflow: hidden;
    border: 1px solid var(--hero-paper);
    background: var(--hero-paper);
  }

  .hero-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    mix-blend-mode: normal;
  }

  .hero-portrait figcaption {
    margin-top: 8px;
    color: var(--hero-muted);
    font: 500 clamp(10px, .82vw, 12px)/1.35 var(--mono);
    letter-spacing: .03em;
  }

  .hero-portrait figcaption strong {
    color: var(--hero-paper);
    font-weight: 600;
  }


  @keyframes urgent-flash {
    0%, 62% { transform: translateX(-130%); }
    82%, 100% { transform: translateX(130%); }
  }

  @keyframes cta-pulse-mark {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
  }

  @keyframes cta-arrow-punch {
    0%, 100% { translate: -3px -3px; }
    50% { translate: 4px 4px; }
  }

  @keyframes typewriter-caret {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
  }

  @keyframes typewriter-caret-exit {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes newspaper-letter-in {
    from { opacity: 0; transform: translateY(105%) rotate(2deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
  }

  @keyframes newspaper-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes newspaper-image-in {
    from { opacity: 0; clip-path: inset(0 0 100%); }
    to { opacity: 1; clip-path: inset(0); }
  }


  .room {
    --wall: #1b1b1b;
    --room-ink: #fff;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 106vh;
    overflow: hidden;
    background: var(--wall);
    color: var(--room-ink);
    isolation: isolate;
  }

  .room::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 14vh;
    background: linear-gradient(to bottom, rgb(0 0 0 / .03), rgb(0 0 0 / .25)), repeating-linear-gradient(90deg, transparent 0 8vw, rgb(255 255 255 / .05) 8vw calc(8vw + 1px));
    border-top: 1px solid rgb(0 0 0 / .3);
    transform: perspective(350px) rotateX(20deg);
    transform-origin: bottom;
  }

  .room-layout {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 2.12fr) minmax(260px, .72fr);
    align-items: center;
    gap: clamp(40px, 6vw, 115px);
    width: min(92vw, 1580px);
    margin: 0 auto;
    zoom: .85;
    padding: 10vh 0 12vh;
  }

  .room-layout--reverse { grid-template-columns: minmax(260px, .72fr) minmax(0, 2.12fr); }
  .room-layout--reverse .artwork { grid-column: 2; grid-row: 1; }
  .room-layout--reverse .museum-card { grid-column: 1; grid-row: 1; }

  .room-number {
    position: absolute;
    z-index: 0;
    top: 7vh;
    right: 2.5vw;
    color: rgb(255 255 255 / .07);
    font: 800 clamp(7rem, 16vw, 15rem)/1 var(--sans);
    letter-spacing: -.1em;
  }

  .spotlight {
    position: absolute;
    z-index: 1;
    top: -18vh;
    width: 72vw;
    height: 105vh;
    clip-path: polygon(46% 0, 54% 0, 80% 100%, 20% 100%);
    background: linear-gradient(to bottom, rgb(255 246 214 / .16), rgb(255 246 214 / .01));
    filter: blur(15px);
    pointer-events: none;
  }
  .spotlight--left { left: -4vw; }
  .spotlight--center { left: 32vw; }
  .spotlight--right { right: -5vw; }

  .hanger {
    position: absolute;
    z-index: 3;
    top: 0;
    width: min(61vw, 990px);
    height: 36vh;
    pointer-events: none;
  }
  .hanger--brick, .hanger--world { left: 4vw; }
  .hanger--thaddeus, .hanger--pwcc { right: 4vw; }
  .hanger i {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(rgb(255 255 255 / .04), rgb(255 255 255 / .48));
    transform-origin: top;
  }
  .hanger i:first-child { left: 15%; transform: rotate(-3deg); }
  .hanger i:last-child { right: 15%; transform: rotate(3deg); }

  .room-caption {
    position: absolute;
    z-index: 5;
    right: 1.6vw;
    bottom: 17vh;
    font: 500 8px var(--mono);
    letter-spacing: .19em;
    writing-mode: vertical-rl;
  }
}

@layer components {
  .reveal { --reveal-y: 42px; opacity: 0; transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1); transform: translateY(var(--reveal-y)); }
  .reveal.is-visible { --reveal-y: 0px; opacity: 1; }

  .artwork {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
    transform: translateY(var(--reveal-y, 0));
    transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1);
  }

  .artwork:focus-visible { outline-offset: 12px; }

  .artwork-mat {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    background: #080808;
  }

  .artwork img {
    width: 100%;
    aspect-ratio: 1.44 / 1;
    object-fit: cover;
    transform: none;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  }

  .artwork:hover img, .artwork:focus-visible img { transform: scale(1.055); }
  .artwork-mat::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: rgb(0 0 0 / .48);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .artwork:hover .artwork-mat::after,
  .artwork:focus-visible .artwork-mat::after { opacity: 1; }

  .artwork-shine {
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .artwork-shine::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 38%;
    height: 320%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent);
    transform: rotate(24deg) translateX(-260%);
    transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  }

  .artwork:hover .artwork-shine::after { transform: rotate(24deg) translateX(520%); }

  .artwork-view {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font: 800 clamp(3rem, 7vw, 7.5rem)/.8 var(--sans);
    letter-spacing: -.08em;
    text-shadow: 0 8px 35px rgb(0 0 0 / .65);
    opacity: 0;
    transform: scale(.88);
    transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }

  .artwork:hover .artwork-view,
  .artwork:focus-visible .artwork-view {
    opacity: 1;
    transform: scale(1);
  }

  .artwork--brick .artwork-view { color: #ffe000; }
  .artwork--thaddeus .artwork-view { color: #81d8d0; }
  .artwork--world .artwork-view { color: #ff4522; }

  .artwork--brick {
    --brick-frame: clamp(20px, 2.7vw, 42px);
    --brick-stud-step: 42px;
    padding: var(--brick-frame);
    background: #f1c500;
    border: clamp(8px, .9vw, 14px) solid #141414;
    box-shadow:
      inset 0 0 0 3px #ffeb65,
      inset 0 0 28px rgb(90 60 0 / .45),
      0 38px 70px rgb(0 0 0 / .33),
      0 8px 0 #8d7200;
  }

  .artwork--brick .artwork-mat { border: clamp(6px, .65vw, 10px) solid #151515; }

  .brick-studs {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at center, #ffe35b 0 5px, #a48600 6px, transparent 7px) center top / var(--brick-stud-step) var(--brick-frame) repeat-x,
      radial-gradient(circle at center, #ffe35b 0 5px, #a48600 6px, transparent 7px) center bottom / var(--brick-stud-step) var(--brick-frame) repeat-x;
  }

  .brick-studs::after {
    content: "";
    position: absolute;
    inset: var(--brick-frame) 0;
    background:
      radial-gradient(circle at center, #ffe35b 0 5px, #a48600 6px, transparent 7px) left center / var(--brick-frame) var(--brick-stud-step) repeat-y,
      radial-gradient(circle at center, #ffe35b 0 5px, #a48600 6px, transparent 7px) right center / var(--brick-frame) var(--brick-stud-step) repeat-y;
  }

  .room--brick {
    --wall: #0d58a4;
    background:
      radial-gradient(circle at 12px 12px, rgb(255 255 255 / .08) 0 3px, transparent 4px) 0 0 / 32px 32px,
      linear-gradient(105deg, #073a72, #0d62b5 56%, #084781);
  }

  .room--brick::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at var(--cursor-room-x, 50%) var(--cursor-room-y, 35%), rgb(255 222 52 / .13), transparent 26%);
  }

  .room--brick .museum-card {
    color: #111;
    background: #f4e8c9;
    box-shadow: 12px 14px 0 #e63722, 0 28px 50px rgb(0 0 0 / .28);
    scale: none;
    zoom: 1.12;
    width: calc(100% + clamp(40px, 3vw, 56px));
    justify-self: end;
    transform: none;
  }
  .room--brick .museum-card.reveal {
    --reveal-y: 0px;
    opacity: 1;
    transition: none;
  }
  .room--brick .museum-card h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    color: #db2d1f;
    font-family: var(--sans);
    font-size: clamp(4.1rem, 5.7vw, 6.8rem);
    font-weight: 800;
    line-height: .7;
    letter-spacing: -.09em;
    text-align: center;
  }
  .room--brick .museum-card h3 span {
    display: block;
    width: max-content;
  }
  .room--brick .museum-card h3 span:last-child {
    transform: none;
  }
  .room--brick .museum-card > p {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    letter-spacing: -.01em;
    font-size: clamp(.88rem, .96vw, 1.02rem);
    line-height: 1.52;
  }
  .room--brick .museum-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgb(0 0 0 / .2);
    border-bottom: 1px solid rgb(0 0 0 / .2);
  }
  .room--brick .museum-card li {
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
  }
  .room--brick .museum-card li:nth-child(-n + 2) { border-bottom: 1px solid rgb(0 0 0 / .2); }
  .room--brick .museum-card li:nth-child(odd) { border-right: 1px solid rgb(0 0 0 / .2); }
  .room--brick .museum-card .text-link {
    min-height: 58px;
    margin-top: 24px;
    padding: 0 17px;
    color: #fff;
    background: #0d58a4;
    border: 0;
    box-shadow: 6px 6px 0 #df321f;
    font: 800 14px/1 var(--sans);
    letter-spacing: .01em;
  }
  .room--brick .museum-card .text-link span { color: #ffe000; font-size: 25px; }
  .room--brick .museum-card:hover .text-link span,
  .room--brick .museum-card:focus-within .text-link span { transform: none; }

  .artwork--thaddeus {
    padding: clamp(18px, 2.1vw, 34px);
    background: linear-gradient(135deg, #604514 0, #e7c67c 14%, #8a6727 30%, #fae6a4 48%, #72511d 67%, #d3af61 85%, #503814 100%);
    border: 2px solid #f1db9d;
    box-shadow: inset 0 0 0 7px #251906, inset 0 0 0 9px #d1ad5c, 0 48px 90px rgb(0 0 0 / .62);
  }
  .artwork--thaddeus::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 12px;
    border: 1px solid #ffe9ad;
    box-shadow: inset 0 0 10px #241601;
    pointer-events: none;
  }
  .artwork--thaddeus .artwork-mat { border: clamp(8px, 1.1vw, 17px) solid #07110f; }

  .deco-corner {
    position: absolute;
    z-index: 5;
    width: clamp(32px, 4vw, 64px);
    aspect-ratio: 1;
    border: 3px double #2d1d05;
    background: #d1aa57;
    transform: rotate(45deg);
    box-shadow: inset 0 0 0 5px #806024;
    pointer-events: none;
  }
  .deco-corner--tl { top: 4px; left: 4px; }
  .deco-corner--tr { top: 4px; right: 4px; }
  .deco-corner--bl { bottom: 4px; left: 4px; }
  .deco-corner--br { right: 4px; bottom: 4px; }

  .room--thaddeus {
    --wall: #062824;
    background:
      linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px) 0 0 / 19vw 100%,
      radial-gradient(circle at 74% 38%, #0d625a, transparent 34%),
      linear-gradient(110deg, #03110f, #073a35 50%, #041815);
  }
  .room--thaddeus::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at var(--cursor-room-x, 50%) var(--cursor-room-y, 35%), rgb(119 238 223 / .11), transparent 27%);
  }

  .room--thaddeus .museum-card {
    display: flex;
    flex-direction: column;
    color: #d8c385;
    background: #080c0b;
    border: 1px solid #91763e;
    box-shadow: inset 0 0 0 6px #080c0b, inset 0 0 0 7px #4e4025, 0 30px 70px rgb(0 0 0 / .42);
  }
  .room--thaddeus .museum-card h3 {
    margin-bottom: 24px;
    color: #8de0d9;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3rem, 4.25vw, 5.6rem);
    letter-spacing: -.07em;
    text-align: center;
  }
  .room--thaddeus .museum-card > p {
    color: #c4c0b5;
    font-family: "Bricolage Grotesque", sans-serif;
  }
  .room--thaddeus .museum-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgb(216 195 133 / .3);
  }
  .room--thaddeus .museum-card li {
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    font-size: 10px;
    font-weight: 700;
  }
  .room--thaddeus .museum-card li:nth-child(-n + 2) { border-bottom: 1px solid rgb(216 195 133 / .3); }
  .room--thaddeus .museum-card li:nth-child(odd) { border-right: 1px solid rgb(216 195 133 / .3); }
  .room--thaddeus .museum-card .text-link {
    min-height: 58px;
    margin-top: auto;
    padding: 0 17px;
    color: #07110f;
    background: #8de0d9;
    border: 0;
    box-shadow: 6px 6px 0 #91763e;
    font: 800 14px/1 var(--sans);
    letter-spacing: .01em;
  }
  .room--thaddeus .museum-card .text-link span {
    color: #72551d;
    font-size: 25px;
  }
  .room--thaddeus .museum-card:hover .text-link span,
  .room--thaddeus .museum-card:focus-within .text-link span { transform: none; }

  .artwork--world {
    padding: clamp(18px, 2.1vw, 34px);
    background: linear-gradient(120deg, #171717, #8b8b86 10%, #292927 22%, #bebeb6 36%, #222 51%, #6e6e6a 70%, #161616 86%, #979792);
    border: 3px solid #0b0b0b;
    box-shadow: inset 0 0 0 7px #2d2d2b, inset 0 0 0 8px #b2b2aa, 0 45px 85px rgb(0 0 0 / .72);
  }
  .artwork--world .artwork-mat { border: clamp(7px, .8vw, 13px) solid #080808; }
  .artwork--world::after {
    content: "REC • 00:05:56:23";
    position: absolute;
    z-index: 5;
    right: 3.6%;
    bottom: 1.3%;
    color: #ff3b19;
    font: 600 7px var(--mono);
    letter-spacing: .1em;
  }
  .rivets {
    position: absolute;
    z-index: 5;
    inset: 9px;
    pointer-events: none;
    background:
      radial-gradient(circle, #d9d9d2 0 2px, #151515 3px, transparent 4px) left top / 10px 10px no-repeat,
      radial-gradient(circle, #d9d9d2 0 2px, #151515 3px, transparent 4px) right top / 10px 10px no-repeat,
      radial-gradient(circle, #d9d9d2 0 2px, #151515 3px, transparent 4px) left bottom / 10px 10px no-repeat,
      radial-gradient(circle, #d9d9d2 0 2px, #151515 3px, transparent 4px) right bottom / 10px 10px no-repeat;
  }

  .room--world {
    --wall: #181818;
    background:
      linear-gradient(110deg, transparent 45%, rgb(236 52 24 / .15) 45.2%, transparent 46%),
      repeating-linear-gradient(0deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 6px),
      radial-gradient(circle at 28% 30%, #363634, #101010 56%, #050505);
  }
  .room--world::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at var(--cursor-room-x, 50%) var(--cursor-room-y, 35%), rgb(255 72 38 / .13), transparent 25%);
  }

  .room--world .museum-card {
    display: flex;
    flex-direction: column;
    width: calc(100% + 24px);
    color: #f0eee7;
    background:
      linear-gradient(115deg, transparent 0 48%, rgb(255 69 34 / .07) 48.2% 48.6%, transparent 48.8%),
      repeating-linear-gradient(0deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 5px),
      #101010;
    border: 1px solid #666;
    box-shadow: inset 0 0 0 5px #101010, inset 0 0 0 6px #343434, 10px 10px 0 #e83618, 0 32px 70px rgb(0 0 0 / .55);
  }
  .room--world .museum-card::before {
    content: "MUSIC VIDEOS  •  LIVE  •  BACKSTAGE";
    display: block;
    margin-bottom: 28px;
    color: #ff4522;
    font: 700 8px var(--mono);
    letter-spacing: .14em;
  }
  .room--world .museum-card h3 {
    margin-bottom: 24px;
    color: #f3f1e9;
    font-family: var(--sans);
    font-size: clamp(3.2rem, 4.4vw, 5.6rem);
    line-height: .7;
    letter-spacing: -.08em;
  }
  .room--world .museum-card h3 strong { color: #ff4522; font-size: 1.2em; font-weight: 800; }
  .room--world .museum-card > p {
    color: #c9c7c0;
    font-family: "Bricolage Grotesque", sans-serif;
  }
  .room--world .museum-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    top: -14px;
    border-top: 1px solid #3b3b3b;
  }
  .room--world .museum-card li {
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    font-size: 9px;
    font-weight: 700;
  }
  .room--world .museum-card li:nth-child(-n + 2) { border-bottom: 1px solid #3b3b3b; }
  .room--world .museum-card li:nth-child(odd) { border-right: 1px solid #3b3b3b; }
  .room--world .museum-card .text-link {
    min-height: 58px;
    margin-top: auto;
    padding: 0 17px;
    color: #111;
    background: #ff4522;
    border: 0;
    box-shadow: 6px 6px 0 #b8b8b0;
    font: 800 14px/1 var(--sans);
    letter-spacing: .01em;
  }
  .room--world .museum-card .text-link span { color: #111; font-size: 25px; }
  .room--world .museum-card:hover .text-link span,
  .room--world .museum-card:focus-within .text-link span { transform: none; }

  .artwork--pwcc .artwork-view { color: #e6c47e; }

  .artwork--pwcc {
    padding: clamp(16px, 1.9vw, 30px) clamp(16px, 1.9vw, 30px) clamp(50px, 5vw, 76px);
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 6px),
      linear-gradient(155deg, #2c060c, #6d1522 44%, #380810 78%, #1e0407);
    border: 2px solid #c9a75a;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .55), 26px 30px 60px rgb(0 0 0 / .55);
  }
  .artwork--pwcc::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: clamp(9px, 1vw, 15px);
    border: 1px solid rgb(201 167 90 / .55);
    pointer-events: none;
  }
  .artwork--pwcc .artwork-mat {
    border: clamp(5px, .6vw, 9px) solid #180307;
    outline: 1px solid rgb(201 167 90 / .8);
  }

  .plaque {
    position: absolute;
    z-index: 5;
    bottom: clamp(13px, 1.4vw, 22px);
    left: 50%;
    display: grid;
    place-items: center;
    min-width: clamp(180px, 20vw, 290px);
    padding: clamp(6px, .7vw, 10px) clamp(12px, 1.4vw, 22px);
    background: linear-gradient(120deg, #8a6a24, #e8cd8d 46%, #a17f2c);
    border: 1px solid #f0dda9;
    box-shadow: 0 4px 14px rgb(0 0 0 / .5);
    color: #2a0a0f;
    font: 700 clamp(7px, .62vw, 9px)/1 var(--mono);
    letter-spacing: .2em;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .plaque::after { content: "PWCC · IZBA GOSPODARCZA KOBIET BIZNESU"; }

  .room--pwcc {
    --wall: #3d070f;
    background:
      radial-gradient(circle at 12px 12px, rgb(201 167 90 / .07) 0 1.5px, transparent 2px) 0 0 / 44px 44px,
      radial-gradient(circle at 26% 34%, #7d1826, transparent 38%),
      linear-gradient(125deg, #1d0407, #5d1220 52%, #250509);
  }
  .room--pwcc::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at var(--cursor-room-x, 50%) var(--cursor-room-y, 35%), rgb(232 205 141 / .1), transparent 27%);
  }

  .room--pwcc .museum-card {
    display: flex;
    flex-direction: column;
    color: #f3e8d5;
    background: #200408;
    border: 1px solid #c9a75a;
    box-shadow: 12px 14px 0 rgb(201 167 90 / .22), 0 28px 50px rgb(0 0 0 / .45);
  }
  .room--pwcc .museum-card h3 {
    margin-bottom: 24px;
    color: #f6efe1;
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.04em;
  }
  .room--pwcc .museum-card h3 strong { color: #e6c47e; font-weight: 700; }
  .room--pwcc .museum-card > p {
    color: #d8ccb8;
    font-family: "Bricolage Grotesque", sans-serif;
  }
  .room--pwcc .museum-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgb(201 167 90 / .32);
  }
  .room--pwcc .museum-card li {
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    color: #e6c47e;
  }
  .room--pwcc .museum-card li:nth-child(-n + 2) { border-bottom: 1px solid rgb(201 167 90 / .32); }
  .room--pwcc .museum-card li:nth-child(odd) { border-right: 1px solid rgb(201 167 90 / .32); }
  .room--pwcc .museum-card .text-link {
    min-height: 58px;
    margin-top: auto;
    padding: 0 17px;
    color: #2a0a0f;
    background: linear-gradient(120deg, #a5822d, #e8cd8d 48%, #a5822d);
    border: 0;
    box-shadow: 6px 6px 0 rgb(246 239 225 / .18);
    font: 800 14px/1 var(--sans);
    letter-spacing: .01em;
  }
  .room--pwcc .museum-card .text-link span { color: #2a0a0f; font-size: 25px; }
  .room--pwcc .museum-card:hover .text-link span,
  .room--pwcc .museum-card:focus-within .text-link span { transform: none; }

  .museum-card {
    position: relative;
    scale: 1.12;
    padding: clamp(25px, 2.5vw, 42px);
    transition-delay: .12s;
  }


  .museum-card__hitarea {
    position: absolute;
    z-index: 10;
    inset: -1px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .museum-card__hitarea:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 7px;
  }

  .museum-card__index {
    display: block;
    margin-bottom: clamp(35px, 5vh, 65px);
    font: 600 8px var(--mono);
    letter-spacing: .15em;
  }

  .museum-card h3 {
    margin-bottom: 28px;
    font: 900 clamp(3.7rem, 5.8vw, 7rem)/.8 var(--serif);
    letter-spacing: -.07em;
  }

  .museum-card > p {
    margin-bottom: 28px;
    font: 500 clamp(.77rem, .82vw, .9rem)/1.6 var(--sans);
  }

  .museum-card ul { padding: 0; list-style: none; }
  .museum-card li {
    padding: 8px 0;
    border-top: 1px solid rgb(0 0 0 / .2);
    font: 500 8px var(--mono);
    letter-spacing: .1em;
  }
  .museum-card li:last-child { border-bottom: 1px solid rgb(0 0 0 / .2); }

  .text-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
    padding: 0 0 10px;
    color: inherit;
    background: none;
    border-bottom: 2px solid;
    font: 600 9px var(--mono);
    letter-spacing: .1em;
    cursor: pointer;
    text-align: left;
  }
  .text-link span { font-size: 21px; transition: transform .25s ease; }
  .museum-card:hover .text-link span, .museum-card:focus-within .text-link span { transform: translateX(7px); }

  .contact {
    --contact-paper: #d9d5ca;
    --contact-ink: #111310;
    --contact-accent: #24556a;
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12vh 5vw 10vh;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgb(17 19 16 / .035) 1px, transparent 1px) 0 0 / 12.5vw 100%,
      radial-gradient(circle at 84% 18%, rgb(36 85 106 / .12), transparent 29%),
      var(--contact-paper);
    color: var(--contact-ink);
  }

  .contact::before {
    content: "J";
    position: absolute;
    top: 50%;
    right: -4vw;
    color: transparent;
    font: 900 min(75vw, 900px)/.6 var(--serif);
    -webkit-text-stroke: 1px rgb(17 19 16 / .13);
    transform: translateY(-47%);
  }

  .contact-index {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin-bottom: clamp(3rem, 6vh, 6rem);
    padding-top: 12px;
    border-top: 1px solid rgb(17 19 16 / .42);
    font: 600 9px var(--mono);
    letter-spacing: .14em;
  }

  .contact h2 {
    position: relative;
    z-index: 1;
    font: 800 clamp(4rem, 8vw, 8.4rem)/.78 var(--sans);
    letter-spacing: -.075em;
  }

  .contact h2 em {
    color: var(--contact-accent);
    font-family: var(--serif);
    font-weight: 900;
  }

  .contact-links {
    position: relative;
    z-index: 1;
    width: min(980px, 90vw);
    margin: clamp(3rem, 7vh, 6rem) auto 0 0;
  }

  .contact-links a {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 14px;
    padding: 16px 0 20px;
    border-top: 1px solid rgb(17 19 16 / .42);
    color: var(--contact-ink);
    transition: color .25s ease, background-color .25s ease;
  }

  .contact-links a:last-child {
    border-bottom: 1px solid rgb(17 19 16 / .42);
  }

  .contact-links small {
    font: 600 8px var(--mono);
    letter-spacing: .13em;
  }

  .contact-links strong {
    white-space: nowrap;
    font: 400 clamp(2.4rem, 4vw, 4rem)/.86 var(--serif);
    letter-spacing: -.045em;
  }

  .contact-links span {
    display: grid;
    grid-column: 3;
    width: 48px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 18px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }

  .contact-links a:hover,
  .contact-links a:focus-visible,
  .contact-links a.is-copied {
    color: var(--contact-paper);
    background: var(--contact-ink);
  }

  .contact-links a:hover span,
  .contact-links a:focus-visible span {
    transform: rotate(45deg);
  }

  .contact-links a.is-copied span {
    transform: none;
  }

  .contact-copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .contact > p {
    position: absolute;
    right: 3vw;
    bottom: 4vh;
    font: 500 8px var(--mono);
    letter-spacing: .13em;
  }

  .site-footer {
    display: flex;
    justify-content: space-between;
    padding: 24px 3vw;
    color: #ddd6ca;
    background: #11110f;
    font: 500 8px var(--mono);
    letter-spacing: .11em;
  }
  .site-footer a:hover { color: var(--signal); }

  .project-modal {
    --modal-accent: var(--signal);
    --modal-title: #f2eee5;
    --modal-text: #f2eee5;
    --modal-muted: #c9c4ba;
    --modal-line: #4c4c4c;
    position: fixed;
    z-index: 1200;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(66px, 8vh, 110px) clamp(24px, 5vw, 76px) clamp(30px, 5vh, 60px);
    overflow: auto;
    color: var(--modal-text);
    background: #111;
    border: 0;
  }

  .project-modal[data-theme="minibrickz"] {
    --modal-accent: #ffd600;
    --modal-title: #df321f;
    --modal-text: #15130f;
    --modal-muted: #39352c;
    --modal-line: rgb(21 19 15 / .28);
    background:
      radial-gradient(circle, rgb(255 216 0 / .16) 0 2px, transparent 2.5px) 0 0 / 28px 28px,
      linear-gradient(135deg, #0d58a4, #062859 70%, #04172f);
  }
  .project-modal[data-theme="minibrickz"] .modal-copy {
    padding: clamp(28px, 2.5vw, 38px) clamp(26px, 3vw, 46px) clamp(26px, 3vw, 42px);
    background: #f4e8c9;
    box-shadow: 12px 12px 0 #df321f;
  }
  .project-modal[data-theme="minibrickz"] .modal-type { margin-bottom: 14px; }
  .project-modal[data-theme="minibrickz"] .modal-copy h2 {
    width: 100%;
    font-size: clamp(2.65rem, 3.65vw, 4.15rem);
    text-align: center;
  }
  .project-modal[data-theme="minibrickz"] .modal-description {
    margin-top: 28px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(.94rem, 1.05vw, 1.06rem);
    font-weight: 500;
    line-height: 1.58;
    letter-spacing: -.01em;
  }
  .project-modal[data-theme="minibrickz"] .modal-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 26px;
  }
  .project-modal[data-theme="minibrickz"] .modal-services span {
    min-height: 34px;
    padding: 8px 7px 8px 2px;
    font-size: 10.4px;
  }
  .project-modal[data-theme="minibrickz"] .modal-services span:nth-child(even) {
    padding-left: 12px;
  }
  .project-modal[data-theme="minibrickz"] .modal-site-link { margin-top: 24px; }
  .project-modal[data-theme="minibrickz"] .modal-media {
    border: 10px solid #f2cc00;
    outline: 3px solid #15130f;
    box-shadow: 14px 14px 0 #df321f, 0 40px 100px #001126;
  }
  .project-modal[data-theme="minibrickz"] .modal-site-link {
    color: #fff;
    background: #0d58a4;
    box-shadow: 6px 6px 0 #df321f;
  }

  .project-modal[data-theme="thaddeus"] {
    --modal-accent: #81d8d0;
    --modal-title: #81d8d0;
    --modal-text: #eee6cf;
    --modal-muted: #c4c0b5;
    --modal-line: rgb(216 195 133 / .42);
    background:
      linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px) 0 0 / 16vw 100%,
      radial-gradient(circle at 28% 36%, #0d625a, transparent 42%),
      linear-gradient(125deg, #03110f, #073a35 56%, #020b09);
  }
  .project-modal[data-theme="thaddeus"] .modal-copy {
    padding: clamp(24px, 2.4vw, 36px);
    background: rgb(4 17 15 / .9);
    border: 1px solid #91763e;
    box-shadow: inset 0 0 0 6px #04110f, inset 0 0 0 7px #4e4025, 12px 12px 0 rgb(129 216 208 / .22);
  }
  .project-modal[data-theme="thaddeus"] .modal-copy h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.06em;
  }
  .project-modal[data-theme="thaddeus"] .modal-description {
    margin-top: 22px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(.94rem, 1.05vw, 1.06rem);
    font-weight: 500;
    line-height: 1.58;
    letter-spacing: -.01em;
  }
  .project-modal[data-theme="thaddeus"] .modal-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
  .project-modal[data-theme="thaddeus"] .modal-services span {
    min-height: 34px;
    padding: 7px 8px 7px 2px;
    font-size: 10px;
  }
  .project-modal[data-theme="thaddeus"] .modal-services span:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--modal-line);
  }
  .project-modal[data-theme="thaddeus"] .modal-stack {
    display: block;
    margin-top: 18px;
  }
  .project-modal[data-theme="thaddeus"] .modal-stack small {
    color: #81d8d0;
    font-size: 9px;
    font-weight: 700;
  }
  .project-modal[data-theme="thaddeus"] .modal-stack div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .project-modal[data-theme="thaddeus"] .modal-stack span {
    display: grid;
    min-width: 0;
    min-height: 26px;
    padding: 4px 3px;
    place-items: center;
    overflow: hidden;
    background: rgb(129 216 208 / .06);
    border-color: rgb(216 195 133 / .42);
    font-size: clamp(6.5px, .55vw, 8px);
    font-weight: 700;
    letter-spacing: .025em;
    text-align: center;
    text-overflow: clip;
  }
  .project-modal[data-theme="thaddeus"] .modal-site-link {
    min-height: 58px;
    margin-top: 18px;
    padding: 13px 18px;
    color: #07110f;
    background: linear-gradient(120deg, #604514, #fae6a4 48%, #72511d);
    box-shadow: 6px 6px 0 rgb(129 216 208 / .35);
    font-size: clamp(.82rem, .95vw, 1rem);
  }
  .project-modal[data-theme="thaddeus"] .modal-site-link span { font-size: 22px; }
  .project-modal[data-theme="thaddeus"] .modal-media {
    padding: 9px;
    background: linear-gradient(135deg, #604514, #fae6a4 48%, #72511d);
    border: 1px solid #f1db9d;
    box-shadow: 0 40px 100px #010806;
  }
  .project-modal[data-theme="thaddeus"] .modal-site-link[aria-disabled="true"] {
    color: #81d8d0;
    background: #0d2926;
    box-shadow: 6px 6px 0 #91763e;
  }

  .project-modal[data-theme="world556"] {
    --modal-accent: #ff4522;
    --modal-title: #f3f1e9;
    --modal-text: #f0eee7;
    --modal-muted: #bbb;
    --modal-line: #474747;
    background:
      linear-gradient(112deg, transparent 47%, rgb(255 69 34 / .12) 47.2%, transparent 48%),
      radial-gradient(circle at 28% 35%, #363634, #101010 58%, #050505);
  }
  .project-modal[data-theme="world556"] .modal-copy {
    padding: clamp(24px, 2.4vw, 36px);
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 5px),
      rgb(12 12 12 / .94);
    border: 1px solid #666;
    box-shadow: 12px 12px 0 #e83618;
  }
  .project-modal[data-theme="world556"] .modal-type { margin-bottom: 14px; }
  .project-modal[data-theme="world556"] .modal-copy h2 {
    color: #f3f1e9;
    font-family: var(--sans);
    letter-spacing: -.08em;
  }
  .project-modal[data-theme="world556"] .modal-description {
    margin-top: 22px;
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: 1.58;
  }
  .project-modal[data-theme="world556"] .modal-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
  .project-modal[data-theme="world556"] .modal-services span {
    min-height: 34px;
    padding: 7px 8px 7px 2px;
    font-size: 10px;
  }
  .project-modal[data-theme="world556"] .modal-stack {
    display: block;
    margin-top: 18px;
  }
  .project-modal[data-theme="world556"] .modal-stack small {
    margin-bottom: 11px;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .project-modal[data-theme="world556"] .modal-stack div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .project-modal[data-theme="world556"] .modal-stack span {
    display: grid;
    min-height: 32px;
    padding: 5px 6px;
    place-items: center;
    border-color: #555;
    font-size: 9px;
    text-align: center;
  }
  .project-modal[data-theme="world556"] .modal-media {
    border: 9px solid #292927;
    outline: 1px solid #a8a8a1;
    box-shadow: 14px 14px 0 #e83618, 0 40px 100px #000;
  }
  .project-modal[data-theme="world556"] .modal-site-link {
    min-height: 58px;
    margin-top: 18px;
    padding: 13px 18px;
    font-size: clamp(.82rem, .95vw, 1rem);
  }
  .project-modal[data-theme="world556"] .modal-site-link span { font-size: 22px; }
  .project-modal[data-theme="world556"] .modal-site-link[aria-disabled="true"] {
    color: #f0eee7;
    background: #202020;
    box-shadow: 6px 6px 0 #e83618;
  }

  .project-modal[data-theme="pwcc"] {
    --modal-accent: #e6c47e;
    --modal-title: #f6efe1;
    --modal-text: #f3e8d5;
    --modal-muted: #d3c4ad;
    --modal-line: rgb(230 196 126 / .3);
    background:
      radial-gradient(circle, rgb(230 196 126 / .1) 0 1.5px, transparent 2px) 0 0 / 40px 40px,
      linear-gradient(135deg, #1d0407, #64121f 62%, #260509);
  }
  .project-modal[data-theme="pwcc"] .modal-copy {
    padding: clamp(24px, 2.4vw, 36px);
    background: rgb(20 3 6 / .9);
    border: 1px solid #c9a75a;
    box-shadow: 12px 12px 0 rgb(201 167 90 / .22);
  }
  .project-modal[data-theme="pwcc"] .modal-type { margin-bottom: 14px; }
  .project-modal[data-theme="pwcc"] .modal-copy h2 {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.04em;
  }
  .project-modal[data-theme="pwcc"] .modal-description {
    margin-top: 22px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(.94rem, 1.05vw, 1.06rem);
    line-height: 1.58;
  }
  .project-modal[data-theme="pwcc"] .modal-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
  .project-modal[data-theme="pwcc"] .modal-services span {
    min-height: 34px;
    padding: 7px 8px 7px 2px;
    font-size: 10px;
  }
  .project-modal[data-theme="pwcc"] .modal-services span:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--modal-line);
  }
  .project-modal[data-theme="pwcc"] .modal-stack {
    display: block;
    margin-top: 18px;
  }
  .project-modal[data-theme="pwcc"] .modal-stack small {
    display: block;
    margin-bottom: 11px;
    color: #e6c47e;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .project-modal[data-theme="pwcc"] .modal-stack div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .project-modal[data-theme="pwcc"] .modal-stack span {
    display: grid;
    min-width: 0;
    min-height: 30px;
    padding: 5px 4px;
    place-items: center;
    background: rgb(230 196 126 / .07);
    border: 1px solid rgb(230 196 126 / .34);
    font-size: 7.5px;
    letter-spacing: .04em;
    text-align: center;
  }
  .project-modal[data-theme="pwcc"] .modal-media {
    padding: 8px;
    background: linear-gradient(135deg, #8a6a24, #e8cd8d 48%, #a17f2c);
    border: 1px solid #f0dda9;
    box-shadow: 14px 14px 0 rgb(0 0 0 / .5), 0 40px 100px #120305;
  }
  .project-modal[data-theme="pwcc"] .modal-site-link {
    min-height: 58px;
    margin-top: 18px;
    padding: 13px 18px;
    color: #2a0a0f;
    background: linear-gradient(120deg, #a5822d, #e8cd8d 48%, #a5822d);
    box-shadow: 6px 6px 0 rgb(246 239 225 / .18);
    font-size: clamp(.82rem, .95vw, 1rem);
  }
  .project-modal[data-theme="pwcc"] .modal-site-link span { font-size: 22px; }
  .project-modal::backdrop { background: rgb(0 0 0 / .82); backdrop-filter: blur(14px); }
  .project-modal[open] { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); grid-template-rows: 1fr auto; gap: clamp(30px, 5vw, 80px); animation: modal-in .48s cubic-bezier(.16, 1, .3, 1); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(30px); } }

  .modal-close {
    position: fixed;
    z-index: 2;
    top: 24px;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    color: #fff;
    background: transparent;
    font: 600 9px var(--mono);
    letter-spacing: .12em;
    cursor: pointer;
  }
  .modal-close span { color: var(--modal-accent); font: 300 25px/1 var(--sans); }
  .modal-count { position: fixed; top: 31px; left: 3vw; font: 500 9px var(--mono); letter-spacing: .15em; }

  .modal-media { align-self: center; justify-self: center; width: 94%; overflow: hidden; border: 1px solid var(--modal-line); box-shadow: 0 40px 100px #000; }
  .modal-media img { display: block; width: 100%; aspect-ratio: 1.44; object-fit: cover; }
  .modal-copy { align-self: center; justify-self: center; width: 94%; color: var(--modal-text); }
  .modal-type { margin-bottom: 24px; color: var(--modal-accent); font: 600 9px var(--mono); letter-spacing: .15em; }
  .modal-copy h2 { color: var(--modal-title); font: 800 clamp(2.7rem, 4vw, 4.5rem)/.8 var(--sans); letter-spacing: -.075em; white-space: nowrap; }
  .modal-description { margin-top: 35px; color: var(--modal-muted); font: 500 clamp(.85rem, 1vw, 1rem)/1.7 var(--sans); }
  .modal-services {
    display: grid;
    width: 100%;
    margin-top: 34px;
    border-top: 1px solid var(--modal-line);
  }
  .modal-services span {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--modal-line);
    font: 600 clamp(.66rem, .72vw, .78rem) var(--mono);
    letter-spacing: .1em;
  }

  .modal-stack {
    margin-top: 22px;
  }

  .modal-stack small {
    display: block;
    margin-bottom: 9px;
    color: var(--modal-muted);
    font: 600 7px var(--mono);
    letter-spacing: .16em;
  }

  .modal-stack div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .modal-stack span {
    padding: 5px 7px;
    color: var(--modal-text);
    border: 1px solid var(--modal-line);
    font: 600 7px/1 var(--mono);
    letter-spacing: .08em;
  }

  .project-modal[data-theme="minibrickz"] .modal-stack {
    display: block;
    margin-top: 24px;
  }

  .project-modal[data-theme="minibrickz"] .modal-stack small {
    display: block;
    margin: 0 0 10px;
    color: #0d58a4;
    font-size: clamp(8px, 1.5vw, 9px);
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .project-modal[data-theme="minibrickz"] .modal-stack div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-width: 0;
    gap: clamp(3px, .8vw, 6px);
  }

  .project-modal[data-theme="minibrickz"] .modal-stack span {
    flex: 0 1 auto;
    min-width: 0;
    padding: clamp(4px, .7vw, 6px) clamp(5px, .8vw, 7px);
    overflow: hidden;
    background: rgb(13 88 164 / .06);
    border: 1px solid rgb(13 88 164 / .38);
    font-size: clamp(7px, 1.5vw, 9px);
    font-weight: 700;
    letter-spacing: .025em;
    text-overflow: clip;
    white-space: nowrap;
  }

  .project-modal[data-theme="minibrickz"] .modal-stack span + span::before {
    content: none;
  }

  .modal-site-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    margin-top: 32px;
    padding: 18px 22px;
    color: #111;
    background: #f2eee5;
    box-shadow: 6px 6px 0 var(--modal-accent);
    font: 800 clamp(.9rem, 1.2vw, 1.2rem) var(--sans);
    letter-spacing: -.02em;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .modal-site-link span { color: var(--modal-accent); font-size: 28px; transition: transform .25s ease; }
  .modal-site-link[href]:hover {
    color: #fff;
    background: var(--modal-accent);
    box-shadow: 8px 8px 0 #f2eee5;
    transform: translate(-2px, -2px);
  }
  .modal-site-link[href]:hover span { color: #fff; transform: translate(4px, -4px); }
  .modal-site-link[aria-disabled="true"] {
    color: #999;
    background: #242424;
    box-shadow: 6px 6px 0 #444;
    cursor: not-allowed;
  }
  .modal-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid var(--modal-line); }
  .modal-nav button { padding: 18px 0 0; color: #fff; background: none; font: 500 9px var(--mono); letter-spacing: .1em; cursor: pointer; }
  .modal-nav button:hover { color: var(--modal-accent); }
}

@layer responsive {
  @media (hover: none), (pointer: coarse) {
    .js .hero-print-room__reveal,
    .js .hero-xray-layer,
    .js .hero-xray-secret {
      display: none;
    }
  }

  @media (min-width: 761px) {
    .room--brick .museum-card { left: clamp(18px, 1.5vw, 26px); }
  }

  @media (max-width: 1050px) {
    .room-layout, .room-layout--reverse { grid-template-columns: minmax(0, 1.75fr) minmax(230px, .68fr); gap: 4vw; }
    .room-layout--reverse { grid-template-columns: minmax(230px, .68fr) minmax(0, 1.75fr); }
    .museum-card { padding: 24px; }
    .museum-card__index { margin-bottom: 30px; }
    .museum-card h3 { font-size: clamp(3rem, 5.2vw, 5.2rem); }
    .room--brick .museum-card { width: calc(100% + 24px); }
  }

  @media (min-width: 1051px) {
    .room--thaddeus .museum-card {
      width: calc(100% + 10px);
      min-height: 506.5px;
    }

    .room--world .museum-card,
    .room--pwcc .museum-card {
      width: calc(100% + 10px);
      min-height: 506.5px;
    }
  }

  @media (min-width: 761px) and (max-width: 1050px) {
    .room--thaddeus .museum-card,
    .room--world .museum-card,
    .room--pwcc .museum-card { min-height: 470px; }

    /* Kolumna nagłówka to (szerokość okna - stała kolumna portretu),
       więc stopień pisma musi iść za kolumną, nie za oknem. */
    .hero-story h2 { font-size: calc(15vw - 67px); }
  }
  @media (max-width: 760px) {
    :root { --header-h: 70px; }
    .site-header { grid-template-columns: 1fr 1fr; padding: 20px; }
    .exhibition-id { display: none; }
    .site-header nav { gap: 18px; }
    .site-header nav a:first-child { display: none; }
    .scroll-progress { width: 3px; }
    .cursor-glow { display: none; }

    .hero { min-height: auto; overflow: hidden; }
    .hero-edition {
      min-height: 100svh;
      padding: 76px 20px 20px;
    }
    .hero-edition__topline {
      grid-template-columns: 1fr auto;
      font-size: 6px;
      letter-spacing: .1em;
    }
    .hero-edition__topline span:nth-child(2) { display: none; }
    .hero-title { font-size: clamp(5.7rem, 28vw, 7.2rem); }
    .hero-masthead { padding: 14px 0 9px; }
    .hero-issue {
      justify-content: center;
      gap: 7px;
      min-height: 36px;
      font-size: 7px;
      letter-spacing: .05em;
    }
    .hero-issue__urgent {
      left: 4px;
      min-height: 39px;
      padding: 0 10px;
      box-shadow: 3px 3px 0 var(--hero-paper);
      font-size: 9px;
      letter-spacing: .1em;
    }
    .hero-issue span:last-of-type,
    .hero-issue i:last-of-type { display: none; }
    .hero-news {
      grid-template-columns: 1fr;
      gap: 18px;
      padding-top: 18px;
    }
    .hero-story {
      position: relative;
      justify-content: flex-start;
      padding: 18px 0;
      border-right: 0;
      border-bottom: 1px solid rgb(216 214 206 / .28);
    }
    .hero-headline { overflow: visible; }
    .hero-story h2 {
      width: 100%;
      font-size: clamp(1.6rem, 8.6vw, 2.35rem);
      line-height: .82;
      white-space: nowrap;
      transform: none;
    }
    .hero-dispatch {
      margin-top: 22px;
      padding-left: 13px;
    }
    .hero-story__lead,
    .hero-incident {
      max-width: 100%;
      font-size: .76rem;
      white-space: normal;
    }
    .hero-incident { margin-top: 10px; }
    .hero-enter {
      grid-template-columns: 1fr 46px;
      width: 100%;
      min-height: 58px;
      margin-top: 18px;
    }
    .hero-enter__copy { gap: 5px; padding: 9px 12px; }
    .hero-enter__copy strong { font-size: 11.5px; line-height: 1.05; }
    .hero-enter__copy small { font-size: 5.5px; letter-spacing: .15em; }
    .hero-enter__arrow { font-size: 26px; }
    .hero-portrait { align-self: stretch; }
    .hero-portrait__frame { height: 164px; }


    .room { display: block; min-height: auto; padding: 85px 20px 100px; }
    .room-layout, .room-layout--reverse { display: flex; flex-direction: column; gap: 55px; width: 85%; padding: 0; }
    .room--brick .room-layout { width: 92%; }
    .room--brick .museum-card { width: 100%; align-self: center; }
    .room-layout--reverse .artwork, .room-layout--reverse .museum-card { grid-column: auto; grid-row: auto; }
    .room-layout--reverse .artwork { order: 0; }
    .room-layout--reverse .museum-card { order: 1; }
    .room-number { top: 30px; right: 18px; font-size: 7rem; }
    .spotlight { top: -4vh; width: 100vw; height: 76vh; }
    .spotlight--left, .spotlight--center, .spotlight--right { right: auto; left: 0; }
    .hanger { top: 0; left: 20px !important; width: calc(100vw - 40px); height: 27vh; }
    .room-caption { right: 8px; bottom: 25px; }

    .artwork--brick { --brick-frame: 18px; padding: var(--brick-frame); border-width: 7px; }
    .artwork--thaddeus, .artwork--world { padding: 17px; }
    .artwork--pwcc { padding: 14px 14px 46px; }
    .artwork img { aspect-ratio: 1.44; }
    .museum-card { width: calc(100% - 14px); max-width: 440px; padding: 28px; }
    .room--brick .museum-card { align-self: flex-start; }
    .room--thaddeus .museum-card { min-height: 430px; align-self: flex-end; }
    .room--world .museum-card { width: calc(100% - 14px); min-height: 430px; padding: 26px; align-self: flex-start; }
    .room--pwcc .museum-card { min-height: 430px; align-self: flex-end; }
    .museum-card h3 { font-size: clamp(3.2rem, 16vw, 5rem); }
    .room--brick .museum-card h3 { font-size: clamp(3.35rem, 14vw, 4rem); }
    .room--thaddeus .museum-card h3 { font-size: clamp(3rem, 15vw, 4.4rem); }
    .room--world .museum-card h3 { font-size: clamp(3rem, 14.5vw, 4.25rem); }
    .room--pwcc .museum-card h3 { font-size: clamp(3rem, 15vw, 4.4rem); }

    .contact { min-height: 90svh; padding: 12vh 20px 10vh; }
    .contact-index { margin-bottom: 6vh; }
    .contact h2 { font-size: clamp(2.7rem, 12.2vw, 5rem); }
    .contact-links { width: 100%; margin-top: 7vh; }
    .contact-links a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .contact-links small { grid-column: 1; grid-row: 1; }
    .contact-links strong { grid-column: 1; grid-row: 2; font-size: clamp(1.1rem, 5.5vw, 2.7rem); }
    .contact-links span { grid-column: 2; grid-row: 1 / 3; width: 42px; }
    .contact > p { display: none; }
    .site-footer { flex-wrap: wrap; gap: 18px; padding: 22px 20px; }
    .site-footer span:last-child { width: 100%; }

    .project-modal { padding: 72px 20px 25px; }
    .project-modal[open] { grid-template-columns: 1fr; grid-template-rows: repeat(3, max-content); align-content: start; gap: 30px; }
    .modal-media { grid-column: 1; grid-row: 1; align-self: start; }
    .modal-copy { grid-column: 1; grid-row: 2; }
    .modal-copy h2 { font-size: clamp(2.55rem, 11.8vw, 3.4rem); }
    .modal-description { margin-top: 24px; }
    .modal-nav { grid-column: 1; grid-row: 3; }
  }

  @media (max-width: 480px) {
    .project-modal[data-theme="minibrickz"] .modal-copy {
      padding-right: 16px;
      padding-left: 16px;
    }
    .project-modal[data-theme="minibrickz"] .modal-stack div { gap: 3px; }
    .project-modal[data-theme="minibrickz"] .modal-stack span {
      padding-right: 4px;
      padding-left: 4px;
      font-size: 6.5px;
      letter-spacing: 0;
    }
    .project-modal[data-theme="thaddeus"] .modal-stack div {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (hover: none) {
    .artwork { --rx: 0deg !important; --ry: 0deg !important; }
  }

  @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .hero-print-room__reveal {
      opacity: .22;
      -webkit-mask-image: none;
      mask-image: none;
    }

  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .typewriter-text::after { display: none !important; }
  }
}