/* camera-oscura · page styles.
   Tokens and this page's own markup only. The engine's selectors (.sc-stage,
   [data-sc-*]) are the mechanism and are not restyled here. */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------ tokens -- */
:root {
  /* darkroom ground (before the light) */
  --sc-canvas: #0f0b0a;
  --sc-surface: #1b1412;
  --sc-ink: #f3eee6;
  --sc-ink-soft: #e9dfd3;
  --sc-accent: #ff8a6c;
  --sc-accent-ink: #160b07;
  --sc-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Geist", ui-sans-serif, system-ui, sans-serif;
  --sc-shadow-color: 12 35% 3%;

  --dark: #0f0b0a;
  --film: #1d1512;
  --paper: #f4f0e9;
  --print: #fbf8f2;
  --ink-paper: #161412;
  --ink-paper-soft: #5a534b;
  --brick: #a33d1f;
  --safe: #ff3d24;          /* the safelight: everything under it multiplies to red */
  --pencil: #f4ecdf;        /* white china marker on film */
  --chrome: var(--sc-ink);
  --rail: 84px;             /* room the contact-sheet index takes on the left */
}

html, body { background: var(--dark); }
body { overflow-x: clip; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 12px; top: -80px;
  padding: .7em 1em; background: var(--print); color: var(--ink-paper);
}
.skip:focus { top: 12px; }

/* A section on paper restates its ink: color is inherited as a computed value. */
[data-ground="paper"], .is-lit .luce {
  --sc-ink: var(--ink-paper);
  --sc-ink-soft: var(--ink-paper-soft);
  --sc-accent: var(--brick);
  --sc-accent-ink: #fff;
  --sc-hairline: color-mix(in oklab, var(--ink-paper) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--ink-paper) 26%, transparent);
  color: var(--sc-ink);
}
[data-ground="paper"] { background: var(--paper); position: relative; z-index: 2; }

/* ---------------------------------------------------------- safelight -- */
.safelight {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: var(--safe);
  mix-blend-mode: multiply;
}
.is-lit .safelight { display: none; }

/* ------------------------------------------------------------- chrome -- */
body[data-ground-top="paper"] { --chrome: var(--ink-paper); }
.mark, .ask { position: fixed; z-index: 60; top: 20px; color: var(--chrome); }
.mark {
  left: calc(var(--rail) + 18px);
  font-family: var(--sc-font-display); font-size: 1.4rem; line-height: 1;
  letter-spacing: -.01em; text-decoration: none;
  transition: opacity 240ms var(--sc-ease-out);
}
.js .mark { opacity: 0; pointer-events: none; }
.js .mark:focus-visible { opacity: 1; }
.js .past-hero .mark, .js body.past-hero .mark { opacity: 1; pointer-events: auto; }
.ask {
  right: clamp(16px, 2.4vw, 32px); top: 18px;
  padding: .45em .1em;
  font-size: .86rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: .3em;
}
.ask:hover { color: var(--sc-accent); }
/* over the photo wall the chrome needs its own ground */
body[data-ground-top="wall"] :is(.mark, .ask) { padding: .35em .6em; margin: -.35em -.6em; border-radius: 2px; background: color-mix(in oklab, var(--dark) 82%, transparent); }
.is-lit body[data-ground-top="wall"] :is(.mark, .ask) { background: color-mix(in oklab, var(--paper) 88%, transparent); color: var(--ink-paper); }

/* a band of paper behind the chrome once the page is on paper */
.topband {
  position: fixed; z-index: 59; inset: 0 0 auto; height: 72px; pointer-events: none;
  background: linear-gradient(var(--paper) 62%, rgb(244 240 233 / 0));
  opacity: 0; transition: opacity 200ms var(--sc-ease-out);
}
body[data-ground-top="paper"] .topband { opacity: 1; }

/* contact-sheet index: the nav is an index of objects, and it jumps */
.provino { position: fixed; z-index: 60; left: 14px; top: 50%; translate: 0 -50%; }
.provino ol {
  position: relative; margin: 0; padding: 14px 10px; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--film); border-radius: 3px;
  box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 14px 30px -10px rgb(0 0 0 / .6);
}
.provino ol::before, .provino ol::after {
  content: ""; position: absolute; top: 7px; bottom: 7px; width: 4px;
  background: repeating-linear-gradient(to bottom, rgb(255 240 225 / .16) 0 4px, transparent 4px 10px);
}
.provino ol::before { left: 3px; }
.provino ol::after { right: 3px; }
.provino li { position: relative; }
.provino a {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 32px; overflow: hidden;
  background: #2b201c; color: #efe4d6; text-decoration: none;
}
.provino img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity 160ms var(--sc-ease-out); }
.provino a:hover img, .provino a[aria-current="true"] img { opacity: 1; }
.provino a[aria-current="true"] { box-shadow: 0 0 0 1.5px #efe4d6; }
.provino__n {
  position: absolute; left: 2px; bottom: 1px;
  font: 600 8px/1 var(--sc-font-text); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000;
}
.provino__t { font: 500 8px/1 var(--sc-font-text); letter-spacing: .02em; text-transform: uppercase; }
@media (max-height: 640px) {
  .provino ol { gap: 6px; padding-block: 10px; }
  .provino a { width: 40px; height: 26px; }
}

/* grease-pencil mark: a trace of what the visitor has already looked at */
.pen { position: absolute; left: -8px; top: -7px; width: calc(100% + 16px); height: calc(100% + 14px); pointer-events: none; overflow: visible; }
.pen path {
  fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  transition: stroke-dashoffset 900ms var(--sc-ease-out);
}
.is-marked > .pen path, .pick[aria-pressed="true"] .pen path, .genre input:checked ~ .pen path { stroke-dashoffset: 0; }
[data-ground="paper"] .pen path { stroke: var(--brick); }

/* --------------------------------------------------------- 1 · camera -- */
.camera {
  background:
    radial-gradient(65% 50% at 50% -6%, #4a3129 0%, rgb(74 49 41 / 0) 70%),
    linear-gradient(#17110f, #0c0908 72%);
}
.camera__lamp {
  position: absolute; z-index: 0; top: 3.5svh; left: 50%;
  width: 92px; height: 32px; margin-left: -46px;
  border-radius: 6px 6px 16px 16px;
  background: linear-gradient(#fff7ef, #ecd1bf);
  box-shadow: 0 0 40px 16px rgb(255 236 220 / .32), 0 0 180px 90px rgb(255 220 200 / .1);
}
.plane { position: absolute; inset: 0; pointer-events: none; }
.plane--far { z-index: 1; }
.plane--mid { z-index: 2; }
.plane--focal { z-index: 3; perspective: 1300px; perspective-origin: 60% 0%; }
.plane--near { z-index: 5; }

.pinned {
  position: absolute; max-width: none; height: auto;
  border: clamp(3px, .35vw, 6px) solid var(--print);
  box-shadow: 0 6px 14px rgb(0 0 0 / .5);
  filter: blur(1.4px) brightness(.55) contrast(.9);
}
.pinned--a { left: calc(var(--rail) + 6vw); top: 12svh; width: 11vw; rotate: -2deg; }
.pinned--b { left: calc(var(--rail) + 19vw); top: 7svh; width: 6.5vw; rotate: 1.5deg; }
.pinned--c { right: 27vw; top: 9svh; width: 8.5vw; rotate: -1deg; }

.wire { position: absolute; left: 0; top: 18svh; width: 100%; height: 5svh; overflow: visible; }
.wire path { fill: none; stroke: #8f7d72; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hang { position: absolute; filter: blur(.7px) brightness(.8); transform-origin: 50% 0; }
.hang img { width: 100%; height: auto; border: clamp(3px, .3vw, 5px) solid var(--print); box-shadow: 0 10px 24px rgb(0 0 0 / .55); }
.hang--a { left: 60vw; top: calc(18svh + 2.6svh); width: 12vw; rotate: 1.5deg; }
.hang--b { left: 76vw; top: calc(18svh + 2.1svh); width: 8vw; rotate: -2deg; }
.peg {
  position: absolute; z-index: 1; top: -10px; left: 50%;
  width: 8px; height: 18px; margin-left: -4px; border-radius: 2px;
  background: linear-gradient(#cdae88, #8d6f50);
  box-shadow: 0 1px 2px rgb(0 0 0 / .5);
}

.camera { --tray-w: min(46vw, 72svh); --tray-r: 6vw; }
.tray {
  position: absolute; right: var(--tray-r); top: 30svh;
  width: var(--tray-w); padding: 1.5vw;
  border-radius: 12px;
  background: linear-gradient(180deg, #2c2321, #171110 62%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -18px 30px rgb(0 0 0 / .45), 0 40px 70px -24px rgb(0 0 0 / .9);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--sc-p, 0) * -16svh)) rotateX(calc(32deg - var(--sc-p, 0) * 22deg));
}
.print { position: relative; background: var(--print); padding: clamp(5px, .7vw, 12px); box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.print img { display: block; width: 100%; height: auto; }
.tray .print img { aspect-ratio: 3 / 2; object-fit: cover; }
.tray__sheen {
  position: absolute; inset: 1.5vw; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .16) 46%, transparent 60%);
  background-size: 260% 100%;
  mix-blend-mode: screen;
  animation: sheen 7s ease-in-out infinite alternate;
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* the signature: paper that develops. Shadows come up first, then mid-tones. */
.js [data-dev] { --dev: 0; }
[data-dev] img {
  filter: brightness(calc(1 + 2.7 * (1 - var(--dev, 1)))) contrast(calc(1 - .32 * (1 - var(--dev, 1))));
}

/* the engine offsets this plane by +180px at the start of the act; start it in the top corner */
.near {
  position: absolute; right: -5vw; top: calc(-9svh - 180px); width: 27vw; max-width: none; height: auto;
  border: 8px solid var(--print);
  filter: blur(9px) brightness(.7);
  rotate: -5deg;
  box-shadow: 0 30px 60px rgb(0 0 0 / .6);
}

.camera__copy {
  position: absolute; z-index: 4; left: calc(var(--rail) + 2.4vw); bottom: 11svh;
  max-width: calc(100vw - var(--tray-r) - var(--tray-w) - var(--rail) - 2.4vw - 4vw);
}
.title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 7.2rem); line-height: .9; letter-spacing: -.03em;
}
.title__sub { margin: 1.1rem 0 0; max-width: 30ch; color: var(--sc-ink-soft); line-height: 1.5; }

.label {
  margin: 0; display: grid; gap: .12rem;
  font-size: var(--sc-t-xs); line-height: 1.38; letter-spacing: .02em;
  color: var(--sc-ink-soft);
}
.label__n { font-weight: 600; letter-spacing: .1em; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.label__state { margin-top: .3rem; font-family: var(--sc-font-display); font-style: italic; font-size: 1.1rem; letter-spacing: 0; color: var(--sc-ink); }
.label--tray { position: absolute; z-index: 4; right: var(--tray-r); width: var(--tray-w); bottom: 5svh; }

/* ---------------------------------------------------------- 2 · corda -- */
.corda { background: linear-gradient(#0e0a09, #140f0d); }
.rail {
  position: absolute; left: 0; top: 15svh;
  width: max-content; align-items: flex-start; gap: 6vw;
  padding: 0 12vw 0 calc(var(--rail) + 4vw);
}
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.4px; background: #8f7d72; }
.rail__lead { flex: none; width: min(26rem, 30vw); padding-top: 9svh; }
.corda__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-3xl); line-height: .95; letter-spacing: -.02em; }
.corda__text { margin: 1.2rem 0 0; max-width: 32ch; color: var(--sc-ink-soft); }
.hung { flex: none; margin: 0; padding-top: 2.4svh; rotate: var(--tilt, 0deg); transform-origin: 50% 0; position: relative; }
.hung .peg { top: calc(-10px); }
.hung img { height: min(50svh, calc(32vw / var(--r))); width: auto; aspect-ratio: var(--r); object-fit: cover; }
.hung .print { box-shadow: 0 2px 4px rgb(0 0 0 / .5), 0 22px 40px -14px rgb(0 0 0 / .7); }
.hung figcaption { width: 0; min-width: 100%; margin-top: 1rem; }
.rail__note {
  flex: none; align-self: center; width: 18rem; margin: 0; padding-top: 6svh;
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-2xl); line-height: 1.04;
}

/* ----------------------------------------------------------- 3 · buio -- */
.act-buio {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; align-items: center;
  padding: 0 calc(var(--rail) + 8vw);
  background: #0b0807;
}
.buio__line { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); color: var(--sc-ink-soft); }

/* ----------------------------------------------------------- 4 · luce -- */
.luce { background: var(--dark); }
.is-lit .luce { background: var(--paper); }
.cord {
  position: absolute; z-index: 6; top: 0; left: calc(var(--rail) + 7vw);
  width: 14px; height: 30svh;
  transform: translateY(calc(var(--pull, 0) * 8svh));
}
.is-lit .cord { transform: translateY(-110%); transition: transform 900ms var(--sc-ease-out) 300ms; }
.cord__line { position: absolute; left: 6px; top: 0; bottom: 16px; width: 1.5px; background: #bba796; }
.cord__knob {
  position: absolute; left: 0; bottom: 0; width: 14px; height: 18px;
  border-radius: 7px 7px 6px 6px;
  background: linear-gradient(#f4ead8, #cbb497);
  box-shadow: 0 3px 6px rgb(0 0 0 / .5);
}
.luce__pull {
  position: absolute; z-index: 6; margin: 0;
  top: calc(30svh + 1.2rem); left: calc(var(--rail) + 7vw + 26px);
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl);
  padding: .2em .55em .28em; background: var(--dark); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .7);
}
.wall-wrap { position: absolute; z-index: 2; inset: 8svh 4vw max(14svh, 8.5rem) calc(var(--rail) + 2vw); display: grid; place-items: center; }
.wall {
  width: min(100%, calc((92svh - max(14svh, 8.5rem)) * 16 / 9)); aspect-ratio: 16 / 9;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  transform-origin: 0 0; will-change: transform;
}
.w {
  display: block; min-width: 0; min-height: 0;
  padding: clamp(3px, .38vw, 7px); background: var(--print);
  box-shadow: 0 1px 2px rgb(40 26 14 / .22), 0 12px 26px -12px rgb(40 26 14 / .45);
}
.w img { width: 100%; height: 100%; object-fit: cover; }
.w:focus-visible { outline-offset: 5px; }
.w-a { grid-area: 1 / 1 / 3 / 4; }
.w-b { grid-area: 1 / 4 / 4 / 6; }
.w-c { grid-area: 1 / 6 / 3 / 9; }
.w-d { grid-area: 1 / 9 / 4 / 11; }
.w-e { grid-area: 1 / 11 / 3 / 13; }
.w-f { grid-area: 3 / 1 / 6 / 4; }
.w-g { grid-area: 3 / 6 / 5 / 9; }
.w-h { grid-area: 3 / 11 / 6 / 13; }
.w-i { grid-area: 4 / 4 / 6 / 6; }
.w-j { grid-area: 4 / 9 / 6 / 11; }
.w-k { grid-area: 6 / 1 / 8 / 3; }
.w-l { grid-area: 6 / 3 / 8 / 6; }
.w-m { grid-area: 5 / 6 / 8 / 9; }
.w-n { grid-area: 6 / 9 / 8 / 11; }
.w-o { grid-area: 6 / 11 / 8 / 13; }
.luce__label {
  position: absolute; z-index: 6; left: calc(var(--rail) + 2.4vw); right: 4vw; bottom: 3.6svh;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 2rem;
}
.luce__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -.02em; }
.luce__label p { margin: 0; color: var(--sc-ink-soft); }

/* ------------------------------------------------------- 5 · cartelle -- */
.act-cartelle { padding: clamp(5rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.cartelle { width: min(100% - 2 * var(--sc-gutter), 82rem); margin-inline: auto; padding-left: var(--rail); }
.cartelle__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cartelle__head h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-4xl); line-height: .9; letter-spacing: -.03em; }
.cartelle__head p { margin: 1.4rem 0 0; max-width: 52ch; color: var(--sc-ink-soft); }
.folder {
  display: grid;
  grid-template-columns: minmax(11rem, .8fr) minmax(16rem, 1.2fr) minmax(0, 1.6fr);
  grid-template-areas: "tab facts strip" "do facts strip";
  gap: 1.2rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid var(--sc-hairline-strong);
}
.folder:last-of-type { border-bottom: 1px solid var(--sc-hairline-strong); }
.folder__tab { grid-area: tab; }
.folder__n { display: block; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
.folder h3 { margin: .4rem 0 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-3xl); line-height: .92; letter-spacing: -.025em; }
.folder__facts { grid-area: facts; margin: 0; display: grid; gap: .75rem; align-content: start; }
.folder__facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.folder__facts dt { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.folder__facts dd { margin: 0; }
.folder__facts [data-sc-count] { font-family: var(--sc-font-display); font-size: 2.2rem; line-height: 1; }
.folder__strip { grid-area: strip; display: flex; gap: .6rem; height: clamp(7rem, 12vw, 11rem); }
.folder__strip a { flex: var(--r) 1 0; min-width: 0; display: block; padding: 4px; background: var(--print); box-shadow: 0 1px 2px rgb(40 26 14 / .2), 0 10px 20px -12px rgb(40 26 14 / .4); }
.folder__strip img { width: 100%; height: 100%; object-fit: cover; }
.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--sc-ease-out) 120ms; }
.js .sc-in [data-wipe] { clip-path: inset(0 0 0 0); }
.folder__do { grid-area: do; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; align-self: end; }
.folder__open { padding: .5rem 0; font-weight: 500; text-underline-offset: .3em; }
.folder__open:hover { color: var(--sc-accent); }
.pick {
  position: relative; padding: .5rem .35rem; border: 0; background: none; cursor: pointer;
  font-weight: 500; color: var(--sc-ink);
}
.pick:hover { color: var(--sc-accent); }
.pick:active { transform: translateY(1px); }
.cartelle__also { margin: 1.6rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ----------------------------------------------------------- 6 · N. 102 -- */
.act-n102 { min-height: 100svh; padding: clamp(3rem, 6vw, 5rem) 0 2rem; display: flex; flex-direction: column; justify-content: center; }
.sheet {
  width: min(100% - 2 * var(--sc-gutter) - var(--rail), 68rem); margin-inline: auto; translate: calc(var(--rail) / 2) 0;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "head head" "form side";
  gap: clamp(1.5rem, 3vw, 2.6rem) clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.4rem, 4vw, 3.4rem);
  background: var(--print);
  box-shadow: 0 1px 2px rgb(60 40 20 / .12), 0 34px 70px -34px rgb(60 40 20 / .4);
}
.sheet__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.sheet__kicker { flex-basis: 100%; margin: 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sheet__num { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(3.6rem, 9vw, 8rem); line-height: .86; letter-spacing: -.03em; }
.sheet__state { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.sheet__form { grid-area: form; }
.row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  margin: 0; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--sc-hairline);
  min-width: 0;
}
.row label, .row legend { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.row--genre { display: block; }
.row--genre legend { float: left; width: 8.5rem; padding: .45rem 0 0; }
.genres { margin-left: 9.5rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.row input, .row textarea {
  width: 100%; padding: .25rem 0; border: 0; border-radius: 0; background: transparent;
  color: var(--sc-ink); font-size: 1.05rem; line-height: 1.5;
}
.row textarea { min-height: 4.6rem; resize: vertical; }
.row ::placeholder { color: color-mix(in oklab, var(--ink-paper) 42%, transparent); }
.row input:focus-visible, .row textarea:focus-visible { outline: 2px solid var(--brick); outline-offset: 5px; border-radius: 1px; }
.row .genre { position: relative; display: inline-flex; padding: .3rem .45rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--sc-ink); }
.genre input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.genre span { font-family: var(--sc-font-display); font-size: 1.4rem; line-height: 1.1; }
.genre input:focus-visible + span { outline: 2px solid var(--brick); outline-offset: 4px; }
.genre .pen { left: -6px; top: -4px; width: calc(100% + 12px); height: calc(100% + 8px); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .7rem; align-items: flex-start; padding-top: 1.1rem; font-size: .9rem; color: var(--sc-ink-soft); }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--brick); }
.sheet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 1.5rem; }
.submit {
  padding: 1rem 1.6rem; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--ink-paper); color: var(--print);
  font-size: .95rem; font-weight: 500; white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.submit:hover { background: var(--brick); }
.submit:active { transform: translateY(1px); }
.submit:disabled, .is-sending .submit { opacity: .55; cursor: progress; }
.form__status { margin: 0; font-size: .95rem; }
.form__status.is-error { color: var(--brick); }
.sheet__side { grid-area: side; display: grid; gap: 1.1rem; align-content: start; }
.sheet__side p { margin: 0; display: grid; gap: .15rem; font-family: var(--sc-font-display); font-size: 1.5rem; line-height: 1.15; }
.sheet__side span { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sheet__side a { text-decoration: none; }
.sheet__side a:hover { color: var(--brick); text-decoration: underline; }
.colophon {
  width: min(100% - 2 * var(--sc-gutter) - var(--rail), 68rem); margin: 2.4rem auto 0; translate: calc(var(--rail) / 2) 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem;
  font-size: .8rem; color: var(--sc-ink-soft);
}
.colophon p { margin: 0; }
.colophon nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.colophon a { color: inherit; }
.colophon a:hover { color: var(--sc-ink); }

@media (max-width: 960px) {
  .folder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "strip" "facts" "do"; gap: 1.1rem; }
  .folder__strip { height: clamp(6rem, 22vw, 10rem); }
  .sheet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "side"; }
  .sheet__side { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* ------------------------------------------------------------- phones -- */
@media (max-width: 560px), (max-width: 1024px) and (max-aspect-ratio: 4/5) {
  :root { --rail: 0px; }
  .mark { left: 16px; top: 15px; font-size: 1.12rem; }
  .ask { right: 14px; top: 12px; font-size: .8rem; }
  .provino { left: 50%; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); translate: -50% 0; }
  .provino ol { flex-direction: row; gap: 4px; padding: 8px 10px; }
  .provino ol::before, .provino ol::after {
    top: auto; bottom: auto; left: 7px; right: 7px; width: auto; height: 3px;
    background: repeating-linear-gradient(to right, rgb(255 240 225 / .16) 0 4px, transparent 4px 10px);
  }
  .provino ol::before { top: 2px; }
  .provino ol::after { bottom: 2px; }
  .provino a { width: 32px; height: 24px; }
  .provino a::after { content: ""; position: absolute; inset: -10px -2px; }
  .provino__n { display: none; }
  .provino__t { font-size: 6.5px; letter-spacing: .02em; }

  .camera__lamp { width: 64px; height: 24px; margin-left: -32px; }
  .pinned--a { left: 5vw; top: 9svh; width: 24vw; }
  .pinned--b { display: none; }
  .pinned--c { right: 30vw; top: 6svh; width: 15vw; }
  .wire { top: 12svh; }
  .hang--a { left: 52vw; top: calc(12svh + 2.4svh); width: 19vw; }
  .hang--b { display: none; }
  .camera { --tray-w: min(88vw, 60svh); --tray-r: calc((100vw - var(--tray-w)) / 2); }
  .tray { top: 23svh; padding: 3vw; transform: translateY(calc(var(--sc-p, 0) * -10svh)) rotateX(calc(28deg - var(--sc-p, 0) * 18deg)); }
  .tray__sheen { inset: 3vw; }
  .near { right: -18vw; top: calc(-5svh - 180px); width: 48vw; filter: blur(7px) brightness(.7); }
  .label--tray { bottom: auto; top: calc(23svh + var(--tray-w) * .68 + 14px); display: flex; flex-wrap: wrap; gap: .1rem .7rem; }
  .label--tray .label__state { margin-top: 0; font-size: 1rem; }
  .camera__copy { left: 6vw; right: 6vw; bottom: calc(70px + 3svh); max-width: none; }
  .title { font-size: clamp(2.9rem, 13vw, 4.4rem); }
  .title__sub { margin-top: .8rem; font-size: .95rem; }

  .rail { top: 13svh; gap: 9vw; padding: 0 14vw 0 6vw; }
  .rail__lead { width: 74vw; padding-top: 7svh; }
  .hung img { height: min(44svh, calc(66vw / var(--r))); }
  .rail__note { width: 64vw; }

  .act-buio { padding: 0 8vw; }

  .cord { left: 12vw; height: 21svh; }
  .luce__pull { top: calc(21svh + .8rem); left: calc(12vw + 24px); font-size: var(--sc-t-lg); }
  .wall-wrap { inset: 9svh 4vw max(20svh, 11.5rem); }
  .wall {
    width: min(100%, calc((91svh - max(20svh, 11.5rem)) * .6)); aspect-ratio: 6 / 10;
    grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr));
    gap: 7px;
  }
  .w-d, .w-h, .w-i, .w-j, .w-l, .w-m, .w-o { display: none; }
  .w-a { grid-area: 1 / 1 / 3 / 4; }
  .w-b { grid-area: 1 / 4 / 4 / 7; }
  .w-e { grid-area: 3 / 1 / 5 / 4; }
  .w-g { grid-area: 4 / 4 / 6 / 7; }
  .w-k { grid-area: 5 / 1 / 8 / 4; }
  .w-f { grid-area: 6 / 4 / 9 / 7; }
  .w-c { grid-area: 8 / 1 / 11 / 4; }
  .w-n { grid-area: 9 / 4 / 11 / 7; }
  .luce__label { left: 6vw; right: 6vw; bottom: calc(66px + 2svh); flex-direction: column; gap: .35rem; }
  .luce__label p { font-size: .92rem; }

  .folder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "strip" "facts" "do"; gap: 1.1rem; }
  .folder__strip { height: 30vw; }
  .folder__facts div { grid-template-columns: 6.5rem 1fr; }

  .act-n102 { padding-bottom: 96px; }
  .sheet { width: min(100% - 2 * var(--sc-gutter), 68rem); translate: none; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "side"; }
  .row { grid-template-columns: 6.6rem minmax(0, 1fr); gap: .7rem; }
  .row--genre legend { width: auto; float: none; padding: 0 0 .4rem; }
  .genres { margin-left: 0; }
  .colophon { width: min(100% - 2 * var(--sc-gutter), 68rem); translate: none; }
}

/* short phones: the opening needs every pixel */
@media (max-width: 560px) and (max-height: 700px) {
  .title { font-size: 2.6rem; }
  .title__sub { font-size: .88rem; margin-top: .6rem; }
  .camera__copy { bottom: calc(64px + 2svh); }
  .pinned--a { width: 20vw; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .tray, .tray:is(*) { transform: rotateX(20deg); }
  .tray__sheen { animation: none; }
  .cord { transform: none !important; }
  .is-lit .cord { display: none; }
  .wall { transform: none !important; }
  [data-wipe] { clip-path: none !important; transition: none !important; }
  .pen path { transition: none; }
}