/* Amidol site, on Skiff's frame. Two halves: words on white in one mono, and a collage of
   phones and prints on the grey, like a desk after a roll comes back. Each section is a row,
   its pictures level with its words.

   ┌──────────── row ────────────┬──────────────────────────────┐
   │ .txt   mono, lists, tags    │ .pics  stacked .pic cards     │
   │                             │        --w --x --y --r --z    │
   └─────────────────────────────┴──────────────────────────────┘ */

@font-face {
  font-family: "DWS Mono";
  src: url("fonts/dwsmono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DWS Mono";
  src: url("fonts/dwsmono-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --side: #f2efe8;
  --ink: #161616;
  --mute: #8f8c86;
  --rule: #c9c6bf;
  --hair: #e8e6e1;
  --shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 22px 40px -22px rgb(20 20 20 / 0.35);

  /* The icon's ink and its red bar. */
  --brown: #1f0e09;
  --red: #a8331f;
  --cream: #f9f3df;

  --mono: "DWS Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(20px, 2.6vw, 36px);
  /* Gaps shrink on short screens too, so a sideways phone isn't mostly margin. */
  --gap: clamp(40px, min(8vw, 11vh), 112px);
  /* A collage never grows past about one screen tall: phones and prints run ~0.9-1.05× their width. */
  --collage: 82vh;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  background: linear-gradient(90deg, var(--paper) 50%, var(--side) 50%);
  color: var(--ink);
  /* Type grows with the window: 15px on a sideways phone, ~20px on a laptop, 26px on a big monitor,
     so the words keep their share of the half instead of shrinking into a corner. */
  font: 400 clamp(15px, 0.9vw + 6.5px, 26px)/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--rule);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
pre {
  margin: 0 0 1.4em;
}

h1,
h2,
h3 {
  font: inherit;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus {
  top: 12px;
}

/* ── Rows: words left, pictures right ────────────────────── */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.txt {
  padding: var(--gap) var(--pad) 0;
}

.txt > * {
  max-width: 54ch;
}

.txt > .filter,
.txt > .topbar {
  max-width: 66ch;
}

.pics {
  padding: var(--gap) var(--pad) 0;
}

.foot .txt {
  padding-bottom: var(--gap);
}

/* ── Top: name and nav, the first thing in the left column ─ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  max-width: none !important;
  margin: calc(var(--pad) - var(--gap)) 0 clamp(40px, min(9vw, 10vh), 120px);
}

.topbar .name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.topbar .name img {
  width: 1.45em;
  height: 1.45em;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 22px;
  color: var(--mute);
}

.topbar nav a {
  text-decoration: none;
}

.topbar nav a:hover,
.topbar nav a[aria-current] {
  color: var(--ink);
}

/* ── Text pieces ─────────────────────────────────────────── */

.lede {
  font-size: 1.12em;
  line-height: 1.6;
}

h2 .n,
.mute {
  color: var(--mute);
}

h2 .n {
  margin-right: 1ch;
}

.txt ul {
  padding-left: 0;
  list-style: none;
}

.txt ul li {
  position: relative;
  padding-left: 2.6ch;
}

.txt ul li::before {
  content: "•";
  position: absolute;
  left: 1ch;
}

.txt ol {
  padding-left: 3ch;
}

.txt li {
  margin-bottom: 0.2em;
}

code,
kbd {
  font: inherit;
}

kbd {
  padding: 0 0.35em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.9em;
}

code {
  padding: 0 0.3em;
  background: var(--side);
  border-radius: 3px;
}

pre {
  overflow-x: auto;
  padding: 0;
  font: inherit;
  font-size: 0.92em;
  line-height: 1.55;
}

pre.box {
  padding: 16px 18px;
  background: var(--side);
  border-radius: 6px;
}

/* Inline accents: a coloured tag, a tiny picture in the line. */
.tag {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: 4px;
  font-size: 0.86em;
  line-height: 1.7;
  white-space: nowrap;
}

/* One per kind of film. */
.tag.neg { background: #fdebd6; color: #9a4a10; }
.tag.slide { background: #dfe8ff; color: #2f4fc0; }
.tag.bw { background: #e9e7e2; color: #3b3a37; }
.tag.cine { background: #fde3e2; color: var(--red); }
.tag.grey { background: var(--side); color: var(--mute); }

.ico {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.15em;
  vertical-align: -0.38em;
  border-radius: 4px;
  object-fit: cover;
}

/* "Now playing" style: a square picture and three short lines. */
.card-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 1.4em;
}

.card-row img {
  width: 112px;
  height: 112px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.card-row p {
  margin: 0;
}

/* The project-list table: name, what, and a tag or a number. */
.table {
  margin: 0 0 1.6em;
}

.table a,
.table > div {
  display: grid;
  grid-template-columns: 15ch minmax(0, 1fr) auto;
  gap: 2ch;
  padding: 0.28em 0;
  text-decoration: none;
}

.table a:hover .what {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

.table .end {
  color: var(--mute);
  text-align: right;
}

/* Tabs over the table: plain radios, rows filtered by :has(). */
.tabs {
  display: flex;
  gap: 4ch;
  margin: 0 0 1.2em;
  padding: 0 0 0.6em;
  border: 0;
  border-bottom: 2px solid var(--rule);
}

.tabs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tabs label {
  position: relative;
  color: var(--mute);
  cursor: pointer;
}

.tabs label:hover,
.tabs label:has(:checked) {
  color: var(--ink);
}

.tabs label:has(:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter:has([value="neg"]:checked) .table > :not(.neg),
.filter:has([value="slide"]:checked) .table > :not(.slide),
.filter:has([value="bw"]:checked) .table > :not(.bw),
.filter:has([value="cine"]:checked) .table > :not(.cine) {
  display: none;
}

/* Spec list: label left, value right. */
.spec {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: 0.25em 2ch;
}

.spec dt {
  color: var(--mute);
}

.spec dd {
  margin: 0;
}

/* Buttons: one black, one quiet. */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 1.4em;
}

.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgb(20 20 20 / 0.5);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

.button.ghost {
  background: transparent;
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: not-allowed;
}

.button.ghost:hover {
  transform: none;
}

.fine {
  color: var(--mute);
  font-size: 0.86em;
}

/* Doc pages: contents list, tables, sub-heads. */
.toc {
  columns: 2;
  column-gap: 3ch;
}

.toc li {
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

.txt h3 {
  margin: 1.6em 0 0.4em;
  color: var(--mute);
}

.tbl {
  overflow-x: auto;
  margin: 0 0 1.4em;
}

.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.tbl th,
.tbl td {
  padding: 0.45em 1.5ch 0.45em 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}

.tbl th {
  color: var(--mute);
  font-weight: 400;
}

.txt > .tbl {
  max-width: 66ch;
}

/* ── The collage ─────────────────────────────────────────── */

/* Every card sits in one grid cell; size, offset, tilt and depth come from classes
   (inline styles are blocked by the CSP). Offsets are % of the column, so phones scale too. */
.pics {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, min(100%, var(--collage)));
  justify-content: center;
}

/* Contact sheets are meant to scroll; they keep the whole column. */
.pics:has(.sheet) {
  grid-template-columns: minmax(0, 1fr);
}

.pic {
  grid-area: 1 / 1;
  width: var(--w, 80%);
  margin: var(--y, 0) 0 0 var(--x, 0);
  rotate: var(--r, 0deg);
  z-index: var(--z, 1);
  transition: rotate 0.35s ease, translate 0.35s ease;
}

.pic:hover {
  rotate: 0deg;
  translate: 0 -4px;
  z-index: 30;
}

/* Clips and photos sit in a thin white mat with a hairline edge, like a print:
   the clips' backdrop matches this column, so a bare shadow reads as a floating smudge. */
.pic > img,
.pic > video {
  width: 100%;
  padding: 5px;
  border: 1px solid rgb(20 20 20 / 0.1);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.pic > .card {
  width: 100%;
  border: 1px solid rgb(20 20 20 / 0.1);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: var(--side);
}

.pic.bare > img {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  filter: drop-shadow(0 26px 30px rgb(20 20 20 / 0.25));
}

/* Collage utilities: width, x, y (both % of the column), tilt, depth. */
.w15 { --w: 15%; }
.w16 { --w: 16%; }
.w17 { --w: 17%; }
.w18 { --w: 18%; }
.w19 { --w: 19%; }
.w20 { --w: 20%; }
.w21 { --w: 21%; }
.w22 { --w: 22%; }
.w23 { --w: 23%; }
.w24 { --w: 24%; }
.w25 { --w: 25%; }
.w26 { --w: 26%; }
.w27 { --w: 27%; }
.w28 { --w: 28%; }
.w29 { --w: 29%; }
.w30 { --w: 30%; }
.w31 { --w: 31%; }
.w32 { --w: 32%; }
.w33 { --w: 33%; }
.w34 { --w: 34%; }
.w35 { --w: 35%; }
.w36 { --w: 36%; }
.w37 { --w: 37%; }
.w38 { --w: 38%; }
.w39 { --w: 39%; }
.w40 { --w: 40%; }
.w41 { --w: 41%; }
.w42 { --w: 42%; }
.w43 { --w: 43%; }
.w44 { --w: 44%; }
.w45 { --w: 45%; }
.w46 { --w: 46%; }
.w47 { --w: 47%; }
.w48 { --w: 48%; }
.w49 { --w: 49%; }
.w50 { --w: 50%; }
.w51 { --w: 51%; }
.w52 { --w: 52%; }
.w53 { --w: 53%; }
.w54 { --w: 54%; }
.w55 { --w: 55%; }
.w56 { --w: 56%; }
.w57 { --w: 57%; }
.w58 { --w: 58%; }
.w59 { --w: 59%; }
.w60 { --w: 60%; }
.w61 { --w: 61%; }
.w62 { --w: 62%; }
.w63 { --w: 63%; }
.w64 { --w: 64%; }
.w65 { --w: 65%; }
.w66 { --w: 66%; }
.w67 { --w: 67%; }
.w68 { --w: 68%; }
.w69 { --w: 69%; }
.w70 { --w: 70%; }
.w71 { --w: 71%; }
.w72 { --w: 72%; }
.w73 { --w: 73%; }
.w74 { --w: 74%; }
.w75 { --w: 75%; }
.w76 { --w: 76%; }
.w77 { --w: 77%; }
.w78 { --w: 78%; }
.w79 { --w: 79%; }
.w80 { --w: 80%; }
.w81 { --w: 81%; }
.w82 { --w: 82%; }
.w83 { --w: 83%; }
.w84 { --w: 84%; }
.w85 { --w: 85%; }
.w86 { --w: 86%; }
.w87 { --w: 87%; }
.w88 { --w: 88%; }
.w89 { --w: 89%; }
.w90 { --w: 90%; }
.w91 { --w: 91%; }
.w92 { --w: 92%; }
.w93 { --w: 93%; }
.w94 { --w: 94%; }
.w95 { --w: 95%; }
.w96 { --w: 96%; }
.w97 { --w: 97%; }
.w98 { --w: 98%; }
.w99 { --w: 99%; }
.w100 { --w: 100%; }
.x0 { --x: 0%; }
.x1 { --x: 1%; }
.x2 { --x: 2%; }
.x3 { --x: 3%; }
.x4 { --x: 4%; }
.x5 { --x: 5%; }
.x6 { --x: 6%; }
.x7 { --x: 7%; }
.x8 { --x: 8%; }
.x9 { --x: 9%; }
.x10 { --x: 10%; }
.x11 { --x: 11%; }
.x12 { --x: 12%; }
.x13 { --x: 13%; }
.x14 { --x: 14%; }
.x15 { --x: 15%; }
.x16 { --x: 16%; }
.x17 { --x: 17%; }
.x18 { --x: 18%; }
.x19 { --x: 19%; }
.x20 { --x: 20%; }
.x21 { --x: 21%; }
.x22 { --x: 22%; }
.x23 { --x: 23%; }
.x24 { --x: 24%; }
.x25 { --x: 25%; }
.x26 { --x: 26%; }
.x27 { --x: 27%; }
.x28 { --x: 28%; }
.x29 { --x: 29%; }
.x30 { --x: 30%; }
.x31 { --x: 31%; }
.x32 { --x: 32%; }
.x33 { --x: 33%; }
.x34 { --x: 34%; }
.x35 { --x: 35%; }
.x36 { --x: 36%; }
.x37 { --x: 37%; }
.x38 { --x: 38%; }
.x39 { --x: 39%; }
.x40 { --x: 40%; }
.x41 { --x: 41%; }
.x42 { --x: 42%; }
.x43 { --x: 43%; }
.x44 { --x: 44%; }
.x45 { --x: 45%; }
.x46 { --x: 46%; }
.x47 { --x: 47%; }
.x48 { --x: 48%; }
.x49 { --x: 49%; }
.x50 { --x: 50%; }
.x51 { --x: 51%; }
.x52 { --x: 52%; }
.x53 { --x: 53%; }
.x54 { --x: 54%; }
.x55 { --x: 55%; }
.x56 { --x: 56%; }
.x57 { --x: 57%; }
.x58 { --x: 58%; }
.x59 { --x: 59%; }
.x60 { --x: 60%; }
.x61 { --x: 61%; }
.x62 { --x: 62%; }
.x63 { --x: 63%; }
.x64 { --x: 64%; }
.x65 { --x: 65%; }
.x66 { --x: 66%; }
.x67 { --x: 67%; }
.x68 { --x: 68%; }
.x69 { --x: 69%; }
.x70 { --x: 70%; }
.x71 { --x: 71%; }
.x72 { --x: 72%; }
.x73 { --x: 73%; }
.x74 { --x: 74%; }
.x75 { --x: 75%; }
.x76 { --x: 76%; }
.x77 { --x: 77%; }
.x78 { --x: 78%; }
.x79 { --x: 79%; }
.x80 { --x: 80%; }
.y0 { --y: 0%; }
.y1 { --y: 1%; }
.y2 { --y: 2%; }
.y3 { --y: 3%; }
.y4 { --y: 4%; }
.y5 { --y: 5%; }
.y6 { --y: 6%; }
.y7 { --y: 7%; }
.y8 { --y: 8%; }
.y9 { --y: 9%; }
.y10 { --y: 10%; }
.y11 { --y: 11%; }
.y12 { --y: 12%; }
.y13 { --y: 13%; }
.y14 { --y: 14%; }
.y15 { --y: 15%; }
.y16 { --y: 16%; }
.y17 { --y: 17%; }
.y18 { --y: 18%; }
.y19 { --y: 19%; }
.y20 { --y: 20%; }
.y21 { --y: 21%; }
.y22 { --y: 22%; }
.y23 { --y: 23%; }
.y24 { --y: 24%; }
.y25 { --y: 25%; }
.y26 { --y: 26%; }
.y27 { --y: 27%; }
.y28 { --y: 28%; }
.y29 { --y: 29%; }
.y30 { --y: 30%; }
.y31 { --y: 31%; }
.y32 { --y: 32%; }
.y33 { --y: 33%; }
.y34 { --y: 34%; }
.y35 { --y: 35%; }
.y36 { --y: 36%; }
.y37 { --y: 37%; }
.y38 { --y: 38%; }
.y39 { --y: 39%; }
.y40 { --y: 40%; }
.y41 { --y: 41%; }
.y42 { --y: 42%; }
.y43 { --y: 43%; }
.y44 { --y: 44%; }
.y45 { --y: 45%; }
.y46 { --y: 46%; }
.y47 { --y: 47%; }
.y48 { --y: 48%; }
.y49 { --y: 49%; }
.y50 { --y: 50%; }
.y51 { --y: 51%; }
.y52 { --y: 52%; }
.y53 { --y: 53%; }
.y54 { --y: 54%; }
.y55 { --y: 55%; }
.y56 { --y: 56%; }
.y57 { --y: 57%; }
.y58 { --y: 58%; }
.y59 { --y: 59%; }
.y60 { --y: 60%; }
.y61 { --y: 61%; }
.y62 { --y: 62%; }
.y63 { --y: 63%; }
.y64 { --y: 64%; }
.y65 { --y: 65%; }
.y66 { --y: 66%; }
.y67 { --y: 67%; }
.y68 { --y: 68%; }
.y69 { --y: 69%; }
.y70 { --y: 70%; }
.y71 { --y: 71%; }
.y72 { --y: 72%; }
.y73 { --y: 73%; }
.y74 { --y: 74%; }
.y75 { --y: 75%; }
.y76 { --y: 76%; }
.y77 { --y: 77%; }
.y78 { --y: 78%; }
.y79 { --y: 79%; }
.y80 { --y: 80%; }
.y81 { --y: 81%; }
.y82 { --y: 82%; }
.y83 { --y: 83%; }
.y84 { --y: 84%; }
.y85 { --y: 85%; }
.y86 { --y: 86%; }
.y87 { --y: 87%; }
.y88 { --y: 88%; }
.y89 { --y: 89%; }
.y90 { --y: 90%; }
.y91 { --y: 91%; }
.y92 { --y: 92%; }
.y93 { --y: 93%; }
.y94 { --y: 94%; }
.y95 { --y: 95%; }
.y96 { --y: 96%; }
.y97 { --y: 97%; }
.y98 { --y: 98%; }
.y99 { --y: 99%; }
.y100 { --y: 100%; }
.y101 { --y: 101%; }
.y102 { --y: 102%; }
.y103 { --y: 103%; }
.y104 { --y: 104%; }
.y105 { --y: 105%; }
.y106 { --y: 106%; }
.y107 { --y: 107%; }
.y108 { --y: 108%; }
.y109 { --y: 109%; }
.y110 { --y: 110%; }
.y111 { --y: 111%; }
.y112 { --y: 112%; }
.y113 { --y: 113%; }
.y114 { --y: 114%; }
.y115 { --y: 115%; }
.y116 { --y: 116%; }
.y117 { --y: 117%; }
.y118 { --y: 118%; }
.y119 { --y: 119%; }
.y120 { --y: 120%; }
.y121 { --y: 121%; }
.y122 { --y: 122%; }
.y123 { --y: 123%; }
.y124 { --y: 124%; }
.y125 { --y: 125%; }
.y126 { --y: 126%; }
.y127 { --y: 127%; }
.y128 { --y: 128%; }
.y129 { --y: 129%; }
.y130 { --y: 130%; }
.y131 { --y: 131%; }
.y132 { --y: 132%; }
.y133 { --y: 133%; }
.y134 { --y: 134%; }
.y135 { --y: 135%; }
.y136 { --y: 136%; }
.y137 { --y: 137%; }
.y138 { --y: 138%; }
.y139 { --y: 139%; }
.y140 { --y: 140%; }
.y141 { --y: 141%; }
.y142 { --y: 142%; }
.y143 { --y: 143%; }
.y144 { --y: 144%; }
.y145 { --y: 145%; }
.y146 { --y: 146%; }
.y147 { --y: 147%; }
.y148 { --y: 148%; }
.y149 { --y: 149%; }
.y150 { --y: 150%; }
.y151 { --y: 151%; }
.y152 { --y: 152%; }
.y153 { --y: 153%; }
.y154 { --y: 154%; }
.y155 { --y: 155%; }
.y156 { --y: 156%; }
.y157 { --y: 157%; }
.y158 { --y: 158%; }
.y159 { --y: 159%; }
.y160 { --y: 160%; }
.r1 { --r: 1deg; }
.rn1 { --r: -1deg; }
.r2 { --r: 2deg; }
.rn2 { --r: -2deg; }
.r3 { --r: 3deg; }
.rn3 { --r: -3deg; }
.r4 { --r: 4deg; }
.rn4 { --r: -4deg; }
.r5 { --r: 5deg; }
.rn5 { --r: -5deg; }
.r6 { --r: 6deg; }
.rn6 { --r: -6deg; }
.r8 { --r: 8deg; }
.rn8 { --r: -8deg; }
.z1 { --z: 1; }
.z2 { --z: 2; }
.z3 { --z: 3; }
.z4 { --z: 4; }
.z5 { --z: 5; }
.z6 { --z: 6; }
.z7 { --z: 7; }
.z8 { --z: 8; }

/* A postage stamp. Holes everywhere, then the content box filled back in: only the 7px edge is perforated. */
.stamp {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px;
  background: var(--cream);
  rotate: 3deg;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px, #0000 98%, #000) 50% 50% / 12px 12px;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px, #0000 98%, #000) 50% 50% / 12px 12px;
  transition: rotate 0.2s ease;
}

.stamp-face {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 16px 8px;
  border: 1px solid #efe6d2;
}

.letter-side .stamp-wrap {
  filter: drop-shadow(0 6px 10px rgb(20 20 20 / 0.15));
}

.stamp:hover {
  rotate: 0deg;
}

.stamp img {
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
}

.stamp .price {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 1;
}

.stamp .mono {
  color: var(--mute);
}

/* ── Amidol: phones, prints, body colors, contact sheets ─ */

/* A phone: the screenshot inside a thin black bezel. */
.pic.phone > img {
  padding: 0;
  border: 0;
  border-radius: 12% / 5.5%;
  background: #111;
  box-shadow: 0 0 0 5px #141210, 0 0 0 6px rgb(20 20 20 / 0.25), var(--shadow);
}

/* A print: a 4×6-ish white border, square corners. */
.pic.print > img {
  padding: 5%;
  border-radius: 2px;
  background: #fbfaf6;
}

.pic.app > img {
  border-radius: 22.4%;
}

/* Pencil on the back of the print. */
.pic figcaption {
  margin-top: 10px;
  color: var(--mute);
  font-size: 0.8em;
  text-align: center;
}

.pic.phone figcaption {
  margin-top: 16px;
}

/* Body colors: the leatherette, the A dial and the dot. */
.finishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8ch, 1fr));
  gap: 14px 12px;
  padding: 0;
  list-style: none;
}

.txt .finishes li {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--mute);
  font-size: 0.8em;
}

.txt .finishes li::before {
  content: none;
}

.chip {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  background: var(--g);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

.chip b {
  position: absolute;
  left: 14%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--d);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.12);
  color: var(--i);
  font: 11px/1 var(--mono);
}

.chip::after {
  content: "";
  position: absolute;
  right: 16%;
  top: 50%;
  width: 12%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--l);
}

/* --g leatherette, --l dot, --d dial, --i dial ink. */
.f-graphite { --g: #1b1b1d; --l: #6e6e73; --d: #26262a; --i: #bfbfc3; }
.f-carbon   { --g: #1f1f21; --l: #d4141c; --d: #2b2b2d; --i: #f2f2f2; }
.f-tarnish  { --g: #20201f; --l: #9c8e6b; --d: #33312f; --i: #e5e1d8; }
.f-indigo   { --g: #1f3a5c; --l: #7f9bbf; --d: #162a44; --i: #d8e0ea; }
.f-crimson  { --g: #c1121f; --l: #111113; --d: #232325; --i: #f5f5f5; }
.f-moss     { --g: #565b47; --l: #b5b398; --d: #3a3e31; --i: #e4e2cf; }
.f-olive    { --g: #6e7050; --l: #d6d0b5; --d: #5a5c41; --i: #f3eedb; }
.f-gilt     { --g: #c9a24a; --l: #e8d7a0; --d: #b28f3c; --i: #2a2216; }
.f-saddle   { --g: #c5c8cc; --l: #b8763a; --d: #b0b4b9; --i: #1c1c1e; }
.f-chrome   { --g: #c6c9cd; --l: #d4141c; --d: #b0b4b9; --i: #1b1b1d; }
.f-chalk    { --g: #ececea; --l: #8e8e93; --d: #d8d8d6; --i: #1c1c1e; }

/* Film page: a roll's prints laid out two across, each a little crooked.
   Long rows keep their words on screen while the prints scroll past. */
.sheet {
  columns: 2;
  column-gap: var(--pad);
}

.sheet .pic {
  grid-area: auto;
  break-inside: avoid;
  width: 100%;
  margin: 0 0 var(--pad);
}

.sheet .pic:nth-child(4n + 1) { --r: -1.5deg; }
.sheet .pic:nth-child(4n + 2) { --r: 1deg; }
.sheet .pic:nth-child(4n + 3) { --r: 2deg; }
.sheet .pic:nth-child(4n + 4) { --r: -1deg; }

/* Sheet captions stay one line: frame, camera, year. */
.sheet figcaption {
  overflow: hidden;
  font-size: 0.7em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet.even {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pad);
  columns: auto;
}

.sheet.even .pic {
  margin: 0;
}

/* Big monitors: three prints across, the comparison four across, so a roll fits a screen or two. */
@media (min-width: 1600px) {
  .sheet {
    columns: 3;
  }

  .sheet.even {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stick {
  position: sticky;
  top: var(--pad);
}

.frames {
  color: var(--mute);
  font-size: 0.86em;
}

.frames li {
  margin: 0;
}

/* Legal shouting, kept small. */
.caps {
  font-size: 0.82em;
  text-transform: uppercase;
}

/* ── Footer ──────────────────────────────────────────────── */

.foot .txt {
  color: var(--mute);
  font-size: 0.86em;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 1em;
  color: var(--ink);
}

.foot nav a {
  text-decoration: none;
}

.foot nav a:hover {
  text-decoration: underline;
}

/* ── Phones and narrow windows: one column, pictures under their words ── */

@media (max-width: 900px) {
  body {
    background: var(--paper);
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
  }

  .txt {
    padding-top: 56px;
  }

  .topbar {
    margin-top: calc(var(--pad) - 56px);
    margin-bottom: 56px;
  }

  .pics {
    margin-top: 28px;
    padding: 32px var(--pad) 40px;
    background: var(--side);
  }


  .pics:empty {
    display: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 14.5px;
  }

  .topbar nav .wide {
    display: none;
  }

  .table a,
  .table > div {
    grid-template-columns: 12ch minmax(0, 1fr);
  }

  .table .end {
    display: none;
  }

  .card-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
  }

  .card-row img {
    width: 84px;
    height: 84px;
  }

  .spec {
    grid-template-columns: 11ch minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}