/* 潛影沖洗所 — the darkroom's materials: safelight, film base, fibre paper, kraft, grease pencil. */
:root {
  --dark: #0d0907;
  --dark-2: #1a120d;
  --paper: #ece6da;
  --paper-2: #f5f1e8;
  --table: #d8d4cb;
  --ink: #171310;
  --ink-2: #4a423b;
  --kraft: #c4a173;
  --base: #8e8478;          /* clear film base, seen in the dark */
  --red: #e0371d;           /* grease pencil: the frame you chose / look here */
  --amber: #f39a4a;
  --disp: "Anton", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --text: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --chrome-ink: var(--paper);
  --chrome-ground: var(--ink);
  --pad: clamp(16px, 4vw, 64px);
  color-scheme: dark;
}
html[data-ground="light"] { --chrome-ink: var(--ink); --chrome-ground: var(--paper); }

html { background: var(--dark); }
body { margin: 0; background: var(--dark); color: var(--paper); font: 400 17px/1.85 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--red); color: var(--paper-2); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: .5em 1em; font: 700 14px/1.4 var(--zh); }
.skip:focus { top: 12px; }
h1, h2, h3, p { margin: 0; }

/* ---------------- grease pencil: the one switch device ---------------- */
em.gp { font-style: normal; position: relative; white-space: nowrap; margin-inline: .22em; text-decoration: underline wavy var(--red) 1.5px; text-underline-offset: .32em; }
.js em.gp { text-decoration: none; }
.gp-svg { position: absolute; pointer-events: none; overflow: visible; }
.gp-svg path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }

/* ---------------- the film leader: every primary control ---------------- */
.leader { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5em; padding: .78em 2.4em .78em 1.15em; color: var(--chrome-ground); background: none; border: 0; text-decoration: none; font: 700 15px/1.2 var(--zh); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.leader::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--chrome-ink); clip-path: polygon(0 0, 74% 0, 100% 46%, 100% 100%, 0 100%); }
.leader::after { content: ""; position: absolute; left: 10px; right: 26%; height: 4px; top: 3px; z-index: -1; background: repeating-linear-gradient(90deg, var(--chrome-ground) 0 5px, transparent 5px 12px); opacity: .55; box-shadow: 0 calc(100% + 0px) 0 0 transparent; }
.leader > span { position: relative; }
.leader:hover::before { transform: translateX(6px); }
.leader:active::before { transform: translateX(2px) scale(.985); }
.leader.big { font-size: 18px; padding: 1em 3em 1em 1.4em; }

/* ---------------- chrome ---------------- */
.chrome { position: fixed; z-index: 40; color: var(--chrome-ink); }
.top { left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2rem; padding: 18px var(--pad); pointer-events: none; }
.top > * { pointer-events: auto; }
/* the safelight shadow: a band of the chrome's own ground behind the header, so it reads over any frame (bright negative, grain) */
.top::before { content: ""; position: absolute; inset: 0 0 -56px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--chrome-ground) 88%, transparent) 0%, color-mix(in srgb, var(--chrome-ground) 62%, transparent) 55%, transparent 100%); }
.id { display: grid; text-decoration: none; line-height: 1.05; }
.id-zh { font: 900 18px/1.1 var(--zh); letter-spacing: .14em; }
.id-en { font: 400 10.5px/1.2 var(--disp); letter-spacing: .32em; opacity: .75; margin-top: 4px; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; font: 700 13px/1 var(--zh); letter-spacing: .16em; }
.nav a { text-decoration: none; opacity: .9; padding: .5em 0; }
.nav a:hover { opacity: 1; text-decoration: underline wavy var(--red) 1.5px; text-underline-offset: .45em; }
.top .leader { margin-left: .5rem; }

.rail { left: var(--pad); bottom: calc(22px + var(--safe-bottom)); display: grid; gap: 8px; }
.rail-frames { list-style: none; margin: 0; padding: 5px 6px; display: flex; gap: 3px; background: currentColor; border-radius: 1px; position: relative; }
.rail-frames::before, .rail-frames::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: repeating-linear-gradient(90deg, var(--chrome-ground) 0 3px, transparent 3px 7px); opacity: .7; }
.rail-frames::before { top: 1px; } .rail-frames::after { bottom: 1px; }
.rail-frames button { display: block; width: 18px; height: 13px; padding: 0; border: 0; background: var(--chrome-ground); opacity: .38; cursor: pointer; }
.rail-frames button[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--red); }
.rail-frames button:hover { opacity: .8; }
.rail-label { font: 400 12px/1 var(--disp); letter-spacing: .22em; }
.rail-label .rail-t { font: 700 12px/1 var(--zh); letter-spacing: .2em; margin-left: .4em; }

/* =====================================================================================
   THE DARKROOM
   ===================================================================================== */
.darkroom { --length: 600; }   /* the opening: 500vh pinned — develop 70 · push + pull-back 160 · H1 120 · flash 50 · sheet 50 · lever hold 50 */
.darkroom > .frame { background: var(--dark); }
.stage { position: absolute; inset: 0; overflow: clip; touch-action: pan-y; outline: none; }
.stage > * { position: absolute; }
.room { inset: 0; background: var(--dark); }
.tint { inset: 0; background: var(--amber); mix-blend-mode: multiply; pointer-events: none; opacity: 0; z-index: 8; }
.flash { inset: 0; background: #fffdf6; opacity: 0; pointer-events: none; z-index: 9; }

/* shot 0 */
.loader { inset: 0; display: grid; place-items: center; z-index: 2; }
.title { position: relative; font: 900 min(36vw, 62svh)/1 var(--zh); margin-top: -8svh; letter-spacing: 0; transform-origin: 50% 52%; }
.title span { display: block; }
.t-base { color: var(--base); opacity: .55; }
.t-img { position: absolute; inset: 0; color: transparent; background: url(../assets/roll/f06-s.webp) 42% 40% / cover; -webkit-background-clip: text; background-clip: text; filter: invert(1) contrast(1.05); }
.fullneg { inset: 0; z-index: 3; opacity: 0; transform-origin: 0 0; }
.fullneg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: invert(1); }

/* shot 1: strip (laid out by JS) */
.strip { z-index: 1; left: 0; top: 0; transform-origin: 50% 50%; }
.film { position: absolute; background: var(--base); }
.film .holes { position: absolute; left: 0; right: 0; height: 9%; background: repeating-linear-gradient(90deg, transparent 0 18%, var(--dark) 18% 30%, transparent 30% 50%); background-size: var(--hole) 100%; }
.cellimg { position: absolute; overflow: hidden; background: #2b2520; }
.cellimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip .cellimg img { filter: invert(1) brightness(.92) contrast(1.05); }
.film .edge { position: absolute; font: 400 var(--edge, 11px)/1 var(--disp); letter-spacing: .18em; white-space: nowrap; }
.film.neg .edge { color: #2a201a; opacity: .7; }

/* shot 2: contact sheet on the light table */
.table { inset: 0; z-index: 1; }
.sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--paper-2); box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 30px 60px -30px rgba(40,30,20,.45); }
.sheet .film { background: #0b0908; }
.sheet .film .holes { background: repeating-linear-gradient(90deg, transparent 0 18%, #262019 18% 30%, transparent 30% 50%); }
.sheet .film .edge { color: #d9d2c4; opacity: .8; }
.cell { position: absolute; padding: 0; border: 0; background: #2b2520; cursor: zoom-in; overflow: visible; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04); }
.cell:not(.pick) { cursor: default; }
.cell .dot { position: absolute; right: -2px; top: -9px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); transform: rotate(-12deg) scaleX(1.25); }
.cell .ring { position: absolute; inset: -16% -12%; width: 124%; height: 132%; overflow: visible; pointer-events: none; }
.cell .ring path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cell:focus-visible { outline-offset: 6px; }
.loupe { position: absolute; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; opacity: 0; background-repeat: no-repeat; background-color: #2b2520; box-shadow: 0 0 0 7px #1b1714, 0 0 0 8px rgba(255,255,255,.25), 0 24px 40px -12px rgba(0,0,0,.6); z-index: 5; }
.loupe.on { opacity: 1; }
.loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 22px rgba(0,0,0,.45); }

/* shots 3–6 */
.viewer { margin: 0; z-index: 4; left: 0; top: 0; width: 100px; height: 100px; transform-origin: 50% 0; }
.viewer .paper { position: absolute; inset: 0; background: var(--paper-2); box-shadow: 0 30px 50px -28px rgba(0,0,0,.75); }
.viewer .win { position: absolute; overflow: hidden; inset: 0; background: #1b1714; }
.viewer .print { position: absolute; left: 0; top: 0; max-width: none; display: block; filter: contrast(1.06); }
.viewer .grain { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0; pointer-events: none; }
.viewer .find { position: absolute; left: 0; top: 0; width: 100px; height: 100px; overflow: visible; pointer-events: none; }
.viewer .find path { fill: none; stroke: var(--red); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.line { z-index: 3; left: 0; right: 0; height: 1.5px; background: #5b5148; opacity: 0; }
.peg { position: absolute; top: -7px; width: 11px; height: 30px; background: #b9ab98; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.numeral { z-index: 5; right: calc(var(--pad) - .04em); bottom: calc(13svh + var(--safe-bottom)); font: 400 min(24vw, 46svh)/.8 var(--disp); letter-spacing: -.02em; color: var(--paper); opacity: 0; pointer-events: none; }

/* captions */
.cap { z-index: 10; display: none; color: var(--paper); }
.cap.on { display: block; }
.ln { display: block; overflow: clip; overflow-clip-margin: .3em; }
.ln > span { display: inline-block; }
.cap p { font-size: clamp(15px, 1.05vw + 4px, 18px); line-height: 1.85; }
.h1, .cap .h { font: 600 clamp(22px, 2.15vw + 6px, 46px)/1.36 var(--text); letter-spacing: .02em; text-wrap: balance; margin-bottom: .7em; }
.cap .meta, .cap .lab, .cap .how { font: 400 11px/1.6 var(--disp); letter-spacing: .2em; opacity: .7; text-transform: uppercase; margin-top: .9em; }
.cap .lab { margin: 0 0 1.1em; }
.cap .meta span { font-family: var(--disp), var(--zh); }
.cap .lab, .cap .lab span { font: 700 11px/1.6 var(--zh); letter-spacing: .18em; }
.cap .how span { font: 700 12px/1.6 var(--zh); letter-spacing: .14em; }
.cap .chosen { font: 700 13px/1.6 var(--zh); letter-spacing: .14em; margin-top: .6em; }
.cap .chosen b { font: 400 18px/1 var(--disp); color: var(--red); letter-spacing: .04em; }

.c0 { left: 50%; bottom: calc(7svh + var(--safe-bottom)); transform: translateX(-50%); text-align: center; width: min(40rem, 86vw); }
.c0 .def { font-size: clamp(15px, 1vw + 6px, 19px); letter-spacing: .08em; }
.c0 .timer { margin-top: 1.2em; font: 400 12px/1 var(--disp); letter-spacing: .3em; opacity: .7; }
.c0 .timer span { font: 700 12px/1 var(--zh); }
.c0 .cue { margin-top: 1.4em; font: 700 12px/1 var(--zh); letter-spacing: .3em; opacity: 0; }
.c0 .cue span::after { content: ""; display: block; width: 1.5px; height: 4svh; margin: 1em auto 0; background: var(--red); }
.c1 { left: var(--pad); bottom: calc(15svh + var(--safe-bottom)); width: min(46rem, 58vw); }
.c1 .h1 { font-size: clamp(24px, 2.4vw + 6px, 48px); }
.c2 { left: 67vw; top: 22svh; width: 27vw; color: var(--ink); }
.c3, .c6 { left: 64vw; top: 20svh; width: 30vw; }
.c6 { color: var(--ink); top: 36svh; }
.c6 .go { margin-top: 1.6em; overflow: visible; }
.c3 .h { font-size: clamp(20px, 1.5vw + 8px, 34px); }
.c4, .c5 { left: var(--pad); bottom: calc(15svh + var(--safe-bottom)); }
.tag { position: relative; background: var(--paper-2); color: var(--ink); padding: 22px 30px 22px 46px; max-width: min(34rem, 80vw); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 18px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--dark); }
.tag .lab { font: 700 11px/1.4 var(--zh); letter-spacing: .2em; opacity: .65; margin: 0 0 .5em; }
.tag .lb, .tag .lc { font: 600 clamp(20px, 1.4vw + 8px, 32px)/1.4 var(--text); letter-spacing: .02em; }
.tag.big .lc { font-size: clamp(22px, 1.8vw + 8px, 40px); }
.tag .note { font-size: 13px; line-height: 1.7; opacity: .7; margin-top: .6em; }

.lever { position: absolute; z-index: 20; right: var(--pad); bottom: calc(22px + var(--safe-bottom)); display: flex; align-items: center; gap: 10px; color: var(--chrome-ink); }
.count { font: 700 12px/1 var(--zh); letter-spacing: .18em; margin-right: 10px; white-space: nowrap; }
.count b { font: 400 22px/1 var(--disp); letter-spacing: .02em; color: var(--red); margin: 0 .1em; }
.count .cnt-x { font: 400 13px/1 var(--disp); letter-spacing: .14em; margin-left: .6em; }
.btn.prev { width: 44px; height: 44px; border: 1.5px solid currentColor; background: none; color: inherit; font: 400 22px/1 var(--disp); cursor: pointer; border-radius: 50%; }
.btn.prev:disabled { opacity: .25; cursor: default; }
.lever .leader { min-height: 44px; }

/* =====================================================================================
   DOCUMENTS — calm, paper, read at the reader's pace
   ===================================================================================== */
.doc { background: var(--paper) var(--grain-url, none) repeat; background-size: 220px; color: var(--ink); color-scheme: light; }
.doc > .frame { max-width: 74rem; margin: 0 auto; padding: 16svh var(--pad) 12svh; box-sizing: border-box; }
.doc-head { display: grid; gap: 14px; margin-bottom: 7svh; max-width: 40rem; }
.kicker { font: 400 12px/1 var(--disp); letter-spacing: .3em; color: var(--ink-2); }
.doc .h { font: 600 clamp(24px, 2vw + 8px, 42px)/1.36 var(--text); letter-spacing: .02em; }
.lede { color: var(--ink-2); }
.sheetlist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); counter-reset: s; }
.sheetlist li { display: grid; grid-template-columns: 9rem 14rem 1fr; gap: 1.5rem 3rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid rgba(23,19,16,.22); }
.day { font: 400 15px/1 var(--disp); letter-spacing: .14em; justify-self: start; padding: .5em .7em; border: 1.5px solid var(--ink); }
.sheetlist h3, .steps h3 { font: 700 19px/1.4 var(--zh); letter-spacing: .08em; }
.sheetlist p { max-width: 32em; }

.prices { background-color: #e3ddcf; }
.envelope { position: relative; max-width: 50rem; margin: 110px auto 0; background: var(--kraft); background-image: var(--grain-url, none); background-size: 180px; padding: 56px clamp(20px, 5vw, 64px) 40px; box-shadow: 0 40px 70px -40px rgba(60,40,20,.55); color: #24190f; }
.envelope::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, rgba(0,0,0,.12), transparent); }
.env-title { font: 900 20px/1.3 var(--zh); letter-spacing: .2em; margin-bottom: 26px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.env-title span { font: 400 14px/1.3 var(--disp); letter-spacing: .2em; opacity: .7; }
.pricelist { width: 100%; border-collapse: collapse; font-size: 16px; }
.pricelist th, .pricelist td { text-align: left; padding: .85em .6em .85em 0; border-bottom: 1px solid rgba(36,25,15,.35); vertical-align: baseline; }
.pricelist thead th { font: 400 11px/1 var(--disp); letter-spacing: .26em; opacity: .7; border-bottom: 1.5px solid #24190f; }
.pricelist tbody th { font: 700 16px/1.5 var(--zh); letter-spacing: .04em; }
.pricelist td:last-child { font: 400 20px/1 var(--disp); letter-spacing: .04em; text-align: right; white-space: nowrap; }
.pricelist .mine b { font: 400 20px/1 var(--disp); color: var(--red); }
.env-foot { margin-top: 20px; font: 700 12px/1.6 var(--zh); letter-spacing: .14em; opacity: .7; }
.clip { position: absolute; right: clamp(14px, 3vw, 40px); top: -96px; width: clamp(120px, 16vw, 190px); transform: rotate(3deg); background: var(--paper-2); padding: 8px 8px 26px; box-shadow: 0 16px 28px -14px rgba(0,0,0,.5); }
.clip::before { content: ""; position: absolute; left: 50%; top: -14px; width: 18px; height: 46px; margin-left: -9px; border: 2.5px solid #8d8a85; border-radius: 9px; border-bottom-color: transparent; }
.clip-img { display: block; width: 100%; height: auto; }
.clip-n { position: absolute; left: 10px; bottom: 4px; font: 400 15px/1 var(--disp); color: var(--red); letter-spacing: .06em; }

/* 寄送: one object, the 沖洗單 torn off the pad — the address printed on it, the three steps ticked down its margin */
.slip { position: relative; box-sizing: border-box; width: min(100%, 46rem); margin: 0 auto; background: var(--paper-2) var(--grain-url, none) repeat; background-size: 200px; color: var(--ink); padding: 34px clamp(20px, 4vw, 48px) 30px; box-shadow: 0 34px 56px -34px rgba(40,30,20,.6), 0 1px 0 rgba(0,0,0,.04); transform: rotate(-.4deg); }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(circle at 7px 6px, var(--paper) 3.2px, transparent 3.8px) 0 0 / 14px 12px repeat-x; }   /* the perforation it was torn along */
.slip-title { font: 900 15px/1.3 var(--zh); letter-spacing: .24em; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); margin-bottom: 24px; }
.slip-to { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.2rem 2rem; padding-bottom: 26px; border-bottom: 1.5px solid var(--ink); }
.label { font-style: normal; display: grid; gap: 4px; }
.label-k { display: block; font: 400 11px/1 var(--disp); letter-spacing: .3em; margin-bottom: 8px; opacity: .65; }
.label-a { font: 600 clamp(22px, .6vw + 17px, 28px)/1.5 var(--text); letter-spacing: .04em; }
.label-h { font: 700 14px/1.6 var(--zh); letter-spacing: .1em; color: var(--ink-2); margin-top: 6px; }
.copy { display: grid; justify-items: end; gap: 6px; }
.slip .leader { --chrome-ink: var(--ink); --chrome-ground: var(--paper-2); min-height: 44px; box-sizing: border-box; }
.copy-status { font: 700 13px/1.6 var(--zh); letter-spacing: .14em; color: var(--red); min-height: 1.6em; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 50px; top: 0; bottom: 0; width: 1.5px; background: var(--red); opacity: .45; }   /* the form's margin rule */
.steps li { display: grid; grid-template-columns: 34px 2.6rem 1fr; gap: 0 1rem; align-items: start; padding: 20px 0; border-bottom: 1px solid rgba(23,19,16,.22); }
.steps li:last-child { border-bottom: 0; padding-bottom: 4px; }
.steps h3 label { cursor: pointer; }
.sn { font: 400 34px/.9 var(--disp); letter-spacing: -.01em; padding-left: 14px; }
.steps p { margin-top: 6px; text-wrap: pretty; }
/* grease-pencil checkboxes (real inputs: Space ticks, the label ticks) */
.tick { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 3px 0 0; border: 2px solid var(--ink); border-radius: 3px 6px 2px 5px; transform: rotate(-3deg); background: transparent no-repeat 40% 30% / 135%; cursor: pointer; }
.tick:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5c2 1.6 3.6 3.6 5 6.2C11.4 11.6 15.6 6.3 22 1.8' fill='none' stroke='%23e0371d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tick:focus-visible { outline-offset: 3px; }

.faq > .frame { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 3rem 5rem; align-items: start; }
.faq .doc-head { position: sticky; top: 16svh; margin: 0; }
.qa details { border-top: 1px solid rgba(23,19,16,.28); padding: 1.1rem 0; }
.qa details:last-child { border-bottom: 1px solid rgba(23,19,16,.28); }
.qa summary { cursor: pointer; font: 700 18px/1.5 var(--zh); letter-spacing: .06em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 22px/1 var(--disp); color: var(--ink-2); }
.qa details[open] summary::after { content: "–"; }
.qa p { margin-top: .6em; max-width: 34em; color: #2c251f; }

/* =====================================================================================
   CODA + CREDITS
   ===================================================================================== */
.coda > .frame { background: var(--dark); display: grid; place-items: center; padding: 0 var(--pad); box-sizing: border-box; }
/* the last frame of the roll: unexposed film base (not a missing picture), edge-printed, the CTA inside it */
.blank { position: relative; aspect-ratio: 1.5 / 1.28; width: min(100%, 74rem, calc(80svh * 1.5 / 1.28)); background: #2a2622; }
.blank .rebate { position: absolute; left: 0; right: 0; height: 14%; background: repeating-linear-gradient(90deg, transparent 0 3.2%, var(--dark) 3.2% 6.4%, transparent 6.4% 8%) 0 50% / 100% 34% no-repeat, #2a2622; }
.blank .r-top { top: 0; } .blank .r-bot { bottom: 0; }
.blank .r-bot span { position: absolute; bottom: 8%; font: 400 12px/1 var(--disp); letter-spacing: .2em; color: #6b5a4a; }
.blank .r-bot span:first-child { left: 30%; } .blank .r-bot span:last-child { left: 62%; }
.blank .edge-print { position: absolute; left: 9%; bottom: 7%; font: 400 11px/1 var(--disp); letter-spacing: .24em; color: #e6dccb; opacity: .35; white-space: nowrap; }
.blank::after { content: ""; position: absolute; left: 5%; right: 5%; top: 16%; bottom: 16%; background: linear-gradient(172deg, #2a2622 0%, #3a332d 100%); box-shadow: inset 0 0 0 1px rgba(236,230,218,.05); }
.blank .ghost, .blank .gone { position: absolute; left: 5%; top: 16%; width: 90%; height: 68%; object-fit: cover; }
.blank .ghost { z-index: 1; opacity: .035; mix-blend-mode: screen; filter: grayscale(1) contrast(1.1); }   /* still a latent image: 3-4 % of the chosen frame */
.blank .gone { z-index: 2; opacity: 0; filter: contrast(1.05); }
.coda-copy { position: absolute; z-index: 3; left: 5%; right: 5%; top: 16%; bottom: 16%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: 0 6%; }
.coda-h { font: 600 clamp(26px, 2.4vw + 6px, 52px)/1.3 var(--text); letter-spacing: .02em; }
.coda-p { opacity: .85; }
.coda-go { margin-top: 10px; }
.coda .leader { --chrome-ink: var(--paper); --chrome-ground: var(--ink); }
.coda-small { font: 700 12px/1.6 var(--zh); letter-spacing: .14em; opacity: .55; }

.credits { background: var(--dark); color: #b9ad9d; padding: 0 var(--pad) calc(90px + var(--safe-bottom)); font-size: 14px; line-height: 1.9; }
.end { font: 400 clamp(44px, 9vw, 150px)/1 var(--disp); letter-spacing: .02em; color: #2c221b; padding: 8svh 0 4svh; border-top: 1px solid #2c221b; }
.end span { color: var(--red); font-size: .4em; vertical-align: .9em; letter-spacing: .2em; margin-left: .3em; }
.cr { display: grid; gap: 1em; max-width: 52rem; }
.cr a { color: var(--paper); text-decoration-color: rgba(236,230,218,.4); text-underline-offset: .2em; }
.cr .dir { font: 400 11px/1.4 var(--disp); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

/* =====================================================================================
   NO JAVASCRIPT: the darkroom becomes a printed sequence; every word present
   ===================================================================================== */
html:not(.js) .darkroom > .frame { position: relative; height: auto; }
html:not(.js) .stage { position: relative; display: grid; gap: 40px; padding: 120px var(--pad) 80px; }
html:not(.js) .stage > * { position: relative; inset: auto; left: auto; top: auto; bottom: auto; right: auto; transform: none; width: auto; }
html:not(.js) .loader, html:not(.js) .fullneg, html:not(.js) .strip, html:not(.js) .table, html:not(.js) .tint, html:not(.js) .flash, html:not(.js) .line, html:not(.js) .numeral, html:not(.js) .lever, html:not(.js) .room, html:not(.js) .c0 .timer, html:not(.js) .c0 .cue, html:not(.js) .rail { display: none; }
html:not(.js) .cap { display: block; color: var(--paper); }
html:not(.js) .viewer { width: min(60rem, 100%); height: auto; }
html:not(.js) .viewer .win { position: relative; }
html:not(.js) .viewer .print { position: relative; width: 100%; }
html:not(.js) .tag { color: var(--ink); }

/* =====================================================================================
   PHONE CUT (portrait)
   ===================================================================================== */
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  body { font-size: 17px; }
  .nav { display: none; }
  .top { padding: 14px 16px; }
  .top .leader { margin-left: auto; font-size: 14px; }
  .rail { left: 84px; right: 12px; bottom: calc(10px + var(--safe-bottom)); top: auto; display: block; }
  .title { font-size: min(44svh, 80vw); writing-mode: vertical-rl; }
  .darkroom { --length: 520; }
  .c0 { bottom: calc(14svh + var(--safe-bottom)); }
  .c1, .c2, .c3, .c6 { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(92px + var(--safe-bottom)); }
  .c2 { bottom: calc(86px + var(--safe-bottom)); }
  .c2 p { font-size: 15px; line-height: 1.7; }
  .c2 .how { display: none; }
  .c4, .c5 { left: 12px; right: 12px; bottom: calc(92px + var(--safe-bottom)); }
  .tag { padding: 16px 20px 16px 38px; }
  .numeral { font-size: 30vw; bottom: auto; top: 60svh; }
  .lever { left: 16px; right: 16px; justify-content: flex-end; bottom: calc(18px + var(--safe-bottom)); }
  .count { margin-right: auto; }
  .loupe { display: none; }
  .sheetlist li { grid-template-columns: 1fr; gap: .4rem; }
  .slip { transform: none; padding: 28px 18px 22px; }
  .slip-to { grid-template-columns: 1fr; }
  .label-a { font-size: 20px; }
  .copy { justify-items: start; }
  .steps::before { left: 40px; }
  .steps li { grid-template-columns: 26px 1.6rem 1fr; gap: 0 .8rem; }
  .sn { font-size: 26px; padding-left: 8px; }
  .faq > .frame { grid-template-columns: 1fr; }
  .faq .doc-head { position: static; }
  .blank { width: 92vw; aspect-ratio: 1 / 1.58; max-height: calc(100svh - 150px); }
  .blank .rebate { height: 7.5%; }
  .blank::after, .blank .ghost, .blank .gone { top: 7.5%; bottom: 7.5%; height: 85%; }
  .coda-copy { top: 7.5%; bottom: 7.5%; align-content: end; gap: 10px; padding: 0 5% 7%; }
  .coda-h { font-size: 26px; }
  .coda-p { font-size: 15px; }
  .blank .edge-print { left: 6%; bottom: 6%; font-size: 10px; }
  .clip { top: -60px; }
  .envelope { padding-top: 90px; }
  .pricelist thead { display: none; }
  .pricelist tr { display: grid; grid-template-columns: 1fr auto; padding: .6em 0; border-bottom: 1px solid rgba(36,25,15,.35); }
  .pricelist th, .pricelist td { border: 0; padding: .15em 0; }
  .pricelist td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; opacity: .8; }
  .pricelist td:last-child { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .c2, .c3, .c6 { top: 16svh; }
  .cap p { line-height: 1.7; }
}

.times { font-family: var(--zh); font-weight: 400; margin-right: .05em; }
.cap .h .br { display: block; }

/* past the darkroom, the fixed chrome carries its own ground so reading copy never runs under it */
html.past .top { background: color-mix(in srgb, var(--chrome-ground) 94%, transparent); padding-block: 12px; }
html.past .rail { background: var(--chrome-ground); padding: 8px 10px; }
/* documents keep a gutter for the rail: reading copy never runs under the slate */
@media (min-width: 1100px) { .doc > .frame { padding-left: max(var(--pad), calc(var(--pad) + 300px - max(0px, (100vw - 74rem) / 2))); } }
/* narrower than that a 300 px gutter would crush the three-column worksheet, so once the worksheet is on screen the rail turns
   upright against the left edge (a strip of film, frame over frame) and the documents keep a slim gutter for it */
@media (min-width: 761px) and (max-width: 1099.98px), (max-width: 1099.98px) and (min-aspect-ratio: 5/4) {
  html.docs-in .rail { background: var(--chrome-ground); left: 12px; padding: 6px; justify-items: center; }
  html.docs-in .rail-frames { flex-direction: column; padding: 6px 5px; }
  html.docs-in .rail-frames::before, html.docs-in .rail-frames::after { top: 6px; bottom: 6px; left: auto; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--chrome-ground) 0 3px, transparent 3px 7px); }
  html.docs-in .rail-frames::before { left: 1px; } html.docs-in .rail-frames::after { right: 1px; }
  html.docs-in .rail-frames button { width: 13px; height: 18px; }
  html.docs-in .rail-label { writing-mode: vertical-rl; letter-spacing: .1em; }
  html.docs-in .rail-label .rail-n { text-combine-upright: all; }
  html.docs-in .rail-label .rail-t { margin: .4em 0 0; }
  .doc > .frame, .doc .slip-head { padding-left: max(var(--pad), 72px); }
}

/* the worksheet's top edge: the seam out of the darkroom is the 沖洗單 sliding up under the contact sheet */
.slip-head { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 var(--pad); background: var(--paper-2); border-top: 1.5px solid var(--ink); border-bottom: 1px dashed rgba(23,19,16,.4); font: 900 13px/1 var(--zh); letter-spacing: .3em; color: var(--ink); box-shadow: 0 -12px 26px -16px rgba(40,30,20,.4); }
.slip-head span:last-child { font: 400 11px/1 var(--disp); letter-spacing: .3em; opacity: .7; }

/* 目次: phones only (a disclosure in the thumb zone) */
.toc-nav { display: none; }
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  .loader { place-items: start center; padding-top: 14svh; box-sizing: border-box; }
  .title { font-size: min(25svh, 56vw); margin-top: 0; }
  .c0 { bottom: calc(5svh + var(--safe-bottom)); }
  .c0 .cue { margin-top: 1.1em; }
  .c0 .cue span::after { height: 2.6svh; margin-top: .8em; }
}
@media (max-height: 760px) and (min-width: 761px) { .c1 { bottom: calc(11svh + var(--safe-bottom)); } .c1 .h1 { margin-bottom: .45em; } }

.vig { inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(10,7,5,.62) 0, rgba(10,7,5,0) 120px), linear-gradient(0deg, rgba(10,7,5,.66) 0, rgba(10,7,5,0) 150px); }
@media (max-height: 520px) { html.past .rail { display: none; } .rail-label { display: none; } }

/* =====================================================================================
   REVISION 2 — the type department and the other triggers
   ===================================================================================== */
/* the lever's frame counter: a camera's frame-counter window (slot-roll on a click) */
.count b.cnt-n .tfx-stage { padding: 0 !important; gap: 0 !important; line-height: 1.2 !important; vertical-align: -.36em; }
.count b.cnt-n .tfx-stage > span { width: .52em !important; }

/* the lab's voice on the light table (idle → typewriter) */
.cap .voice { margin-top: .9em; font: 700 14px/1.6 var(--zh); letter-spacing: .04em; color: var(--ink); display: flex; gap: .7em; align-items: baseline; }
.cap .voice[hidden] { display: none; }
.voice-k { font: 400 11px/1 var(--disp), var(--zh); letter-spacing: .22em; color: var(--paper-2); background: var(--ink); padding: .35em .5em .3em; flex: none; }
.voice-fx .tfx-stage span { white-space: normal !important; }

/* the worksheet's thermometer (odometer, played on entry) */
.sheetlist .rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; margin-top: .9rem; }
.thermo { font: 400 40px/1 var(--disp); color: var(--ink); letter-spacing: .02em; }
.rec-t { font: 400 13px/1.4 var(--disp), var(--zh); letter-spacing: .16em; color: var(--ink-2); }

/* the test strip (drag / arrow keys) */
.test { margin: 12svh 0 0; display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.7fr); gap: 2rem 4rem; align-items: center; }
.test-copy { display: grid; gap: 14px; align-content: start; }
.test h3 { font: 600 clamp(21px, 1.2vw + 10px, 30px)/1.4 var(--text); letter-spacing: .02em; }
.test-how { font: 700 13px/1.6 var(--zh); letter-spacing: .12em; color: var(--ink-2); }
.test-read { font: 700 15px/1.6 var(--zh); letter-spacing: .06em; border-top: 1.5px solid var(--ink); padding-top: 12px; min-height: 3.2em; }
.test-read b { font: 400 22px/1 var(--disp); color: var(--red); margin: 0 .08em; }
.test-strip { position: relative; padding: 14px 14px 46px; background: var(--paper-2); box-shadow: 0 30px 50px -32px rgba(40,30,20,.55); --src: url(../assets/roll/f06.webp); --sel: 2; }
.bands { position: relative; aspect-ratio: 3 / 2; background: #1b1714; }
.band { position: absolute; top: 0; bottom: 0; left: calc(var(--k) * 100% / 6); width: calc(100% / 6 + .5px); background: var(--src) calc(var(--k) * 20%) 50% / 600% 100% no-repeat; }
.band:nth-child(1) { filter: brightness(1.7) contrast(.72); }
.band:nth-child(2) { filter: brightness(1.32) contrast(.86); }
.band:nth-child(3) { filter: contrast(1.04); }
.band:nth-child(4) { filter: brightness(.74) contrast(1.12); }
.band:nth-child(5) { filter: brightness(.5) contrast(1.22); }
.band:nth-child(6) { filter: brightness(.3) contrast(1.3); }
.secs { list-style: none; margin: 0; padding: 0; position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; grid-template-columns: repeat(6, 1fr); font: 700 12px/1 var(--zh); letter-spacing: .1em; color: var(--ink-2); text-align: center; }
.secs li[aria-current="true"] { color: var(--red); }
.test-strip .gp-svg { z-index: 2; }
.test-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; touch-action: pan-y; }
.test-strip:has(.test-in:focus-visible) { outline: 2px solid var(--red); outline-offset: 6px; }
html:not(.js) .test-in, html:not(.js) .test-how { display: none; }

/* the questions (highlighter answers hover / focus / open) */
.qa summary .q { position: relative; }

@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  .test { grid-template-columns: 1fr; margin-top: 8svh; }
  .test-strip { padding: 10px 10px 40px; }
  .secs { left: 10px; right: 10px; font-size: 11px; letter-spacing: 0; }
  .thermo { font-size: 34px; }
  .cap .voice { font-size: 13px; }
}

/* =====================================================================================
   PHONES — wayfinding in the thumb zone: 目次 + the roll rail along the bottom (44 px targets)
   ===================================================================================== */
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  :root { --bar: 54px; }
  .toc-nav { display: block; left: 12px; bottom: calc(10px + var(--safe-bottom)); }
  .toc-btn { display: grid; place-items: center; width: 64px; height: 44px; padding: 0; border: 0; background: var(--chrome-ink); color: var(--chrome-ground); font: 700 14px/1 var(--zh); letter-spacing: .2em; text-indent: .2em; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .toc-btn[aria-expanded="true"] { background: var(--red); color: var(--paper-2); }
  .toc { position: absolute; left: 0; bottom: 52px; width: calc(100vw - 24px); margin: 0; padding: 6px 18px; list-style: none; border-top: 3px solid var(--ink); background: var(--paper-2); color: var(--ink); box-shadow: 0 -18px 40px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(23,19,16,.12); box-sizing: border-box; }
  .toc[hidden] { display: none; }
  .toc a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; text-decoration: none; font: 700 17px/1.2 var(--zh); letter-spacing: .16em; border-bottom: 1px solid rgba(23,19,16,.2); }
  .toc li:last-child a { border-bottom: 0; }
  .toc a b { font: 400 18px/1 var(--disp); letter-spacing: .06em; color: var(--ink-2); }
  .toc a:focus-visible { outline-offset: -2px; }
  .rail-frames { padding: 0 5px; gap: 2px; height: 44px; align-items: center; box-sizing: border-box; }
  .rail-frames li { flex: 1; }
  .rail-frames button { position: relative; width: 100%; height: 44px; background: none; opacity: 1; }
  .rail-frames button::before { content: ""; position: absolute; left: 1px; right: 1px; top: 11px; bottom: 11px; background: var(--chrome-ground); opacity: .38; }
  .rail-frames button[aria-current="true"] { box-shadow: none; }
  .rail-frames button[aria-current="true"]::before { opacity: 1; box-shadow: inset 0 0 0 2px var(--red); }
  .rail-frames button:focus-visible { outline-offset: 0; }
  .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.past .rail { padding: 0; background: none; }
  /* a band of the chrome's own ground under the bar (as the header's safelight shadow), so copy never shows between the controls */
  .rail::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(70px + var(--safe-bottom)); z-index: -1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--chrome-ground) 92%, transparent) 72%, transparent); }
  /* the darkroom's own controls and words sit above the bar */
  .lever { bottom: calc(18px + var(--safe-bottom) + var(--bar)); }
  .c0 { bottom: calc(5svh + var(--safe-bottom) + var(--bar)); }
  .c1, .c3, .c6 { bottom: calc(92px + var(--safe-bottom) + var(--bar)); }
  .c2 { bottom: calc(86px + var(--safe-bottom) + var(--bar)); }
  .c4, .c5 { bottom: calc(92px + var(--safe-bottom) + var(--bar)); }
  .credits { padding-bottom: calc(90px + var(--safe-bottom) + var(--bar)); }
}