@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Caveat:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --color-bg: #16130f;
  --color-bg-raised: #1e1a14;
  --color-paper: #f1ead9;
  --color-paper-line: #d9cdb0;
  --color-ink: #221d15;
  --color-ink-soft: #efdec4;
  --color-safelight: #902d1e;
  --color-safelight-dim: #8a2a1a;
  --color-amber: #f3ae4a;
  --color-film: #0b0906;
  --font-display: "Fraunces", georgia, serif;
  --font-mark: "Caveat", cursive;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

@property --rotation-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

@property --mark-scale {
  inherits: false;
  initial-value: 0;
  syntax: "<number>";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-paper);
  font-family: var(--font-body);
  line-height: 1.6;
  padding-block: 2.5rem;
  padding-inline: 1.25rem;
}

a {
  color: var(--color-ink);
}

.sheet {
  background: var(--color-film);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgb(0 0 0 / 45%);
  margin-inline: auto;
  max-width: 56rem;
  overflow: hidden;
}

/* --- Sprocket strips: literal film-perforation motif --- */
.sprocket-strip {
  background-color: var(--color-film);
  background-image: radial-gradient(circle at center, var(--color-bg) 0.22rem, transparent 0.23rem);
  background-position: 0.7rem center;
  background-size: 1.4rem 1.1rem;
  height: 1.1rem;
}

/* --- Header --- */
.masthead {
  background: var(--color-film);
  color: var(--color-paper);
  padding-block: 1.75rem;
  padding-inline: 1.75rem;
  text-align: center;
}

.masthead__eyebrow {
  color: var(--color-amber);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.masthead__title {
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin-block-start: 0.5rem;
}

.masthead__title code {
  color: var(--color-amber);
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-style: normal;
}

.masthead__lede {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin-block-start: 0.75rem;
  margin-inline: auto;
  max-width: 34rem;
}

/* --- Proof sheet body (the paper) --- */
.proof-sheet {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: 2rem;
  padding-inline: 1.75rem;
}

/* --- Toggle: two rubber-stamp buttons --- */
.toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-block-end: 0.75rem;
}

.stamp {
  background: transparent;
  border: 2px solid var(--color-ink);
  border-radius: 3px;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding-block: 0.6rem;
  padding-inline: 1rem;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.stamp:nth-child(2) {
  transform: rotate(1.5deg);
}

.stamp[aria-pressed="true"] {
  border-color: var(--color-safelight);
  border-style: solid;
  box-shadow: 0 0 0 1px var(--color-safelight);
  color: var(--color-safelight);
}

.stamp:focus-visible {
  outline: 3px solid var(--color-safelight);
  outline-offset: 2px;
}

.code-strip {
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-block-end: 1.75rem;
  text-align: center;
}

.code-strip strong {
  color: var(--color-ink);
}

/* --- Frame grid: shared styles, viewport-specific columns below --- */
.gallery {
  display: grid;
  gap: 1.25rem;
}

.frame {
  background: var(--color-bg-raised);
  border-radius: 3px;
  padding: 0.6rem;
  position: relative;
}

.frame__number {
  color: var(--color-amber);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  justify-content: space-between;
}

.frame__stage {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #cfe3ef 0%, #eef5f6 60%, #f7f3e6 100%);
  border-radius: 2px;
  margin-block: 0.5rem;
  overflow: hidden;
  position: relative;
}

.frame__photo {
  display: block;
  height: 100%;
  transform: rotate(var(--rotation-angle));
  transform-origin: center;
  transition: --rotation-angle 500ms cubic-bezier(0.3, 0, 0.2, 1);
  width: 100%;
}

.frame__up-tick {
  background: rgb(241 234 217 / 85%);
  border-radius: 2px;
  color: var(--color-safelight-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  inset-block-start: 0.4rem;
  inset-inline-start: 0.4rem;
  padding-inline: 0.3rem;
  pointer-events: none;
  position: absolute;
}

figcaption.frame__caption {
  color: var(--color-paper-line);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  justify-content: space-between;
}

/* --- Grease-pencil proofing marks (the signature element) --- */
.mark {
  display: grid;
  inset: 0;
  place-items: center;
  pointer-events: none;
  position: absolute;
}

.mark__glyph {
  transform: scale(var(--mark-scale));
  transition: --mark-scale 350ms ease-out;
}

.mark--select .mark__glyph {
  aspect-ratio: 1;
  border: 3px solid var(--color-safelight);
  border-radius: 50%;
  opacity: 0.85;
  width: 62%;
}

.mark--reject .mark__glyph {
  color: var(--color-safelight);
  font-family: var(--font-mark);
  font-size: 2.1rem;
  text-shadow: 0 0 1px var(--color-safelight);
  transform: scale(var(--mark-scale)) rotate(-8deg);
}

.frame[data-needs-correction="true"] .mark--select {
  --mark-scale: 0;
}

.frame[data-needs-correction="false"] .mark--reject {
  --mark-scale: 0;
}

.gallery.is-honoring .frame .mark--select {
  --mark-scale: 1;
}

.gallery.is-honoring .frame .mark--reject {
  --mark-scale: 0;
}

.gallery.is-ignoring .frame[data-needs-correction="true"] .mark--select {
  --mark-scale: 0;
}

.gallery.is-ignoring .frame[data-needs-correction="true"] .mark--reject {
  --mark-scale: 1;
}

.gallery.is-ignoring .frame[data-needs-correction="false"] .mark--select {
  --mark-scale: 1;
}

/* Honoring EXIF (from-image) always renders upright, regardless of the tag. */
.gallery.is-honoring .frame .frame__photo {
  --rotation-angle: 0deg;
}

/* Ignoring EXIF (none) reveals the raw, as-stored rotation for any frame
   that needed a correction in the first place. */
.gallery.is-ignoring .frame[data-needs-correction="true"] .frame__photo {
  --rotation-angle: var(--raw-offset);
}

/* --- Technician's note --- */
.note {
  background: #fbf7ee;
  border: 1px solid var(--color-paper-line);
  border-radius: 2px;
  box-shadow: 0 8px 18px rgb(34 29 21 / 12%);
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.5rem;
  position: relative;
  transform: rotate(-0.4deg);
}

.note::before {
  background: rgb(217 154 63 / 55%);
  content: "";
  height: 1.1rem;
  inset-block-start: -0.6rem;
  inset-inline-start: 1.5rem;
  position: absolute;
  transform: rotate(-3deg);
  width: 2.4rem;
}

.note__label {
  color: var(--color-safelight-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.note h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-block: 0.35rem 0.6rem;
}

.note p {
  color: var(--color-ink);
  font-size: 0.92rem;
  max-width: 42rem;
}

.note p + p {
  margin-block-start: 0.75rem;
}

.note code {
  background: rgb(34 29 21 / 8%);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding-inline: 0.25rem;
}

.note a {
  color: var(--color-safelight-dim);
}

.footer-credit {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding-block-end: 1.5rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .frame__photo,
  .mark__glyph {
    transition-duration: 0.01ms !important;
  }
}

/* --- Shared First: only bounded, viewport-specific rules below --- */
@media (width < 40em) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .masthead__title {
    font-size: 1.6rem;
  }
}

@media (40em <= width < 60em) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 60em) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}