/* Darkroom — two rooms in one page. data-lights="off": the tray under the safelight. data-lights="on": the light table. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  --room: #07040a; --safe: #ff6a3a; --safe-dim: rgba(255,140,90,.72); --safe-line: rgba(255,120,80,.45);
  --table: #ece6db; --table-deep: #d9d1c3; --paper: #f7f3ec; --paper-edge: #e4dccf; --ink: #1c1917; --ink-soft: #55504a; --pencil: #6b625a; --grease: #d0342c;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif; --display: "Poiret One", var(--sans);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
html { background: var(--room); }
body { min-height: 100svh; color: var(--paper); font: 300 17px/1.6 var(--sans); background: var(--room); transition: background-color .6s ease; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#tray { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .9s ease; }
.corner { position: fixed; z-index: 6; padding: 4px 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.back { top: 12px; left: 12px; color: var(--safe-dim); text-decoration: none; border-bottom: 1px dotted transparent; }
.back:hover, .back:focus-visible { border-bottom-color: currentColor; outline: none; }

/* ---------- the tray ---------- */
.dark { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.dark > * { pointer-events: auto; }
.readout { position: fixed; top: 14px; right: 16px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--safe-dim); }
.hint { position: fixed; left: 50%; bottom: 6.5%; transform: translateX(-50%); font: 400 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--safe-dim); white-space: nowrap; transition: opacity .4s ease; }
.hint.quiet { opacity: 0; }
.tongs { position: fixed; right: 6%; bottom: 8%; display: flex; gap: 10px; }
.fix, .sheet, .skip { padding: 12px 18px; border: 1px solid var(--safe-line); border-radius: 999px; background: rgba(20,8,6,.55); color: #ffb08a; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: border-color .3s, color .3s, box-shadow .3s, opacity .3s; }
.fix:disabled { opacity: .35; cursor: default; }
.fix.ready { border-color: var(--safe); color: #ffd2b8; box-shadow: 0 0 22px rgba(255,106,58,.35); animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 34px rgba(255,106,58,.6); } }
.skip { position: fixed; left: 6%; bottom: 8%; opacity: .55; }
.skip:hover, .skip:focus-visible { opacity: 1; }
.fix:focus-visible, .sheet:focus-visible, .skip:focus-visible { outline: 2px solid var(--safe); outline-offset: 3px; }

/* ---------- the light table ---------- */
html[data-lights="on"] { background: var(--table); }
html[data-lights="on"] body { background: radial-gradient(ellipse at 50% 30%, #f4efe6 0%, var(--table) 55%, var(--table-deep) 100%); color: var(--ink); }
html[data-lights="on"] #tray { opacity: 0; pointer-events: none; }
html[data-lights="on"] .dark { display: none; }
html[data-lights="on"] .back { color: var(--pencil); }
.table { position: relative; z-index: 3; width: min(100%, 1180px); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 110px; }
.table[hidden] { display: none; }
.table.in { animation: room-light .9s ease both; }
@keyframes room-light { from { opacity: 0; } to { opacity: 1; } }

/* the drying line: a string with clothespins, every pin a print */
.line { position: relative; height: 150px; margin: 0 -8px; color: #7a6f63; }
.string { position: absolute; top: 12px; left: 0; width: 100%; height: 40px; }
#pins { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-evenly; list-style: none; }
#pins li { position: relative; padding-top: 30px; }
#pins li:nth-child(odd) { padding-top: 40px; }
#pins button { position: relative; display: block; width: 74px; padding: 0; background: var(--paper); border: 1px solid var(--paper-edge); box-shadow: 0 6px 14px rgba(40,30,20,.18); transform: rotate(var(--tilt, -2deg)); transform-origin: 50% 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s; }
#pins button::before { content: ""; position: absolute; top: -18px; left: 50%; width: 10px; height: 22px; margin-left: -5px; background: linear-gradient(#b9a690, #8f7d67); border-radius: 2px; box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
#pins button:hover, #pins button:focus-visible { transform: rotate(var(--tilt, -2deg)) translateY(4px); box-shadow: 0 12px 22px rgba(40,30,20,.24); outline: none; }
#pins button:focus-visible { outline: 2px solid var(--grease); outline-offset: 3px; }
#pins button[aria-current="true"] { opacity: .35; transform: rotate(var(--tilt, -2deg)) scale(.92); }
#pins .thumb { display: block; height: 52px; margin: 6px; background: #2a2521; overflow: hidden; }
#pins .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
#pins .thumb.text { display: grid; align-content: start; gap: 4px; padding: 7px 8px; background: #fff; }
#pins .thumb.text i { display: block; height: 2px; background: #9c9389; }
#pins .thumb.text i:first-child { width: 60%; height: 3px; background: var(--ink); }
#pins .thumb.text i:nth-child(3) { width: 80%; }
#pins .thumb.text i:nth-child(4) { width: 45%; }
#pins .tag { display: block; padding: 0 6px 6px; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pencil); text-align: left; }

/* the print on the table */
.print { position: relative; width: min(100%, 760px); margin: 12px auto 0; padding: clamp(22px, 4vw, 40px) clamp(22px, 4vw, 44px) clamp(28px, 4vw, 44px); background: var(--paper); border: 1px solid var(--paper-edge); box-shadow: 0 30px 60px rgba(50,38,26,.22), 0 2px 0 rgba(255,255,255,.6) inset; color: var(--ink); transform: rotate(-.6deg); outline: none; }
.print.down { animation: come-down .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes come-down { from { opacity: 0; transform: translateY(-40px) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(-.6deg); } }
.print .eyebrow { margin: 0 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grease); }
.print h1 { margin: 0 0 22px; font: 400 clamp(34px, 4.6vw, 54px)/1.02 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.print p { margin: 0 0 16px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: #2a2622; text-wrap: pretty; }
.print p:last-child { margin-bottom: 0; }
.print figure { margin: 0 0 18px; }
.print figure img { display: block; width: 100%; height: auto; background: #0e0c0b; filter: grayscale(1) contrast(1.12) sepia(.08); }
.print figcaption { padding: 10px 2px 0; font: 400 12px/1.5 var(--mono); color: var(--ink-soft); }
.print ol { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: step; }
.print ol li { position: relative; padding: 12px 0 12px 64px; border-top: 1px solid #e6dfd3; counter-increment: step; }
.print ol li:last-child { border-bottom: 1px solid #e6dfd3; }
.print ol li::before { content: "0" counter(step); position: absolute; left: 0; top: 14px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--grease); }
.print ol b { display: block; margin-bottom: 2px; font: 400 clamp(19px, 1.5vw, 22px)/1.2 var(--display); }
.print ol span { font-size: 15px; color: #3b3632; }
.print .develop { animation: develop 1.1s ease both; }
@keyframes develop { from { filter: contrast(.05) brightness(1.6); } 60% { filter: contrast(.6) brightness(1.15); } to { filter: none; } }
.backnote { width: min(100%, 760px); margin: 18px auto 0; padding-left: 8px; font: 400 13px/1.5 var(--mono); color: var(--pencil); transform: rotate(-1.4deg); }
.backnote::before { content: "on the back: "; color: #9a9188; }

.controls { display: flex; justify-content: center; gap: 12px; margin-top: 44px; }
.controls button, .contact button { padding: 11px 16px; border: 1px solid #b9ae9f; border-radius: 999px; color: var(--ink-soft); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.35); transition: border-color .2s, color .2s; }
.controls button:hover, .controls button:focus-visible, .contact button:hover, .contact button:focus-visible { border-color: var(--ink); color: var(--ink); outline: none; }
.controls button:focus-visible, .contact button:focus-visible, .contact li button:focus-visible { outline: 2px solid var(--grease); outline-offset: 3px; }

/* the contact sheet: every print, the chosen one circled in grease pencil */
.contact { position: fixed; inset: 0; z-index: 8; display: grid; place-content: center; gap: 22px; padding: 24px; background: rgba(24,20,17,.92); }
.contact[hidden] { display: none; }
.contact ol { display: grid; grid-template-columns: repeat(4, minmax(120px, 190px)); gap: 18px; list-style: none; }
.contact li button { position: relative; display: block; width: 100%; padding: 8px 8px 10px; border: 0; border-radius: 0; background: #f3efe8; color: var(--ink); text-align: left; transform: none; }
.contact .frame { display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; background: #1a1614; overflow: hidden; }
.contact .frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.contact .frame.text { display: grid; align-content: center; padding: 12px; background: #fff; color: #1a1614; font: 400 15px/1.2 var(--display); }
.contact .num { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--pencil); }
.contact .name { display: block; margin-top: 3px; font: 400 14px/1.3 var(--sans); }
.contact li button[aria-current="true"]::after { content: ""; position: absolute; inset: -10px -8px -6px -10px; border: 3px solid var(--grease); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-3deg); opacity: .9; pointer-events: none; }
.contact > button { justify-self: center; color: #d9d1c3; border-color: #7a6f63; background: transparent; }

@media (max-width: 700px) {
  .table { padding-bottom: 80px; }
  .line { height: 120px; margin: 0 -4px; }
  #pins button { width: 56px; }
  #pins .thumb { height: 38px; margin: 5px; }
  #pins .tag { display: none; }
  #pins li:nth-child(odd) { padding-top: 34px; }
  .print { padding: 22px 18px 26px; transform: none; }
  .print.down { animation-name: come-down-flat; }
  @keyframes come-down-flat { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
  .tongs { right: 14px; bottom: 16px; }
  .skip { left: 14px; bottom: 16px; }
  .hint { bottom: 76px; }
  .contact ol { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #tray, .hint, .fix, .sheet, .skip, #pins button, .controls button { transition: none; }
  .fix.ready, .table.in, .print.down, .print .develop { animation: none; }
}