@font-face { font-family: 'Barlow SC'; src: url('fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow SC'; src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Edge'; src: url('fonts/share-tech-mono-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pencil'; src: url('fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --base: #16130f;      /* film base */
  --strip: #2a231d;     /* film margin */
  --hole: #0b0907;      /* sprocket hole */
  --exposed: #3b302a;   /* a frame used on an earlier visit */
  --ivory: #efe7dc;
  --ivory-dim: #cdc2b4;
  --rose: #d9a3a8;      /* grease pencil */
  --sage: #a9bb9c;      /* edge print */
  --gutter: 20px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='6' y='3' width='10' height='8' rx='2' fill='%230b0907'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--base);
  color: var(--ivory);
  font: 400 1.0625rem/1.45 'Barlow SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  scrollbar-color: var(--strip) var(--base);
}
::selection { background: var(--rose); color: var(--base); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
h1:focus { outline: none; }
p, h1, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.defs { position: absolute; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- screens ---- */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-b);
}
.screen--center { justify-content: flex-start; align-items: center; gap: 28px; }
.screen--center > .advance { margin-top: 30vh; }

/* film edge: sprocket rail with the edge print beside it */
.edge {
  width: 100%;
  padding-top: calc(var(--safe-t) + 18px);
  background: var(--sprocket) repeat-x 0 calc(var(--safe-t) + 2px) / 22px 14px, var(--strip);
}
.edge__code {
  display: block;
  padding: 4px var(--gutter) 6px;
  font: 1rem/1.2 'Edge', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- film strip ---- */
.strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 20px 10px 32px;
  background:
    var(--sprocket) repeat-x 0 3px / 22px 14px,
    var(--sprocket) repeat-x 0 calc(100% - 3px) / 22px 14px,
    var(--strip);
}
.frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #0f0d0b;
  box-shadow: inset 0 0 0 1px rgb(239 231 220 / 0.07);
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame--used { background: var(--exposed); }
.frame__brackets { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); stroke-width: 3px; }
.frame__n {
  position: absolute;
  left: 0;
  bottom: -17px;
  font: 0.75rem/1 'Edge', ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: var(--sage);
}
/* grease pencil: wax-roughened stroke plus a lighter offset second pass */
.pencil {
  fill: none;
  stroke: var(--rose);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
}
.pencil use { vector-effect: non-scaling-stroke; filter: url(#wax); }
.pencil .pass2 { opacity: 0.28; transform: translate(0.6px, 0.5px); }
.frame__loop {
  position: absolute;
  inset: -7px -6px;
  width: calc(100% + 12px);
  height: calc(100% + 14px);
  stroke-width: 3.5px;
}

/* ---- welcome ---- */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px 0 8px;
}
.welcome__title, .welcome .lede { padding-inline: var(--gutter); }
.welcome__title {
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.marker {
  display: block;
  margin-top: 0.12em;
  font: 400 1.32em/1.05 'Pencil', 'Barlow SC', cursive;
  color: var(--rose);
  transform: rotate(-2.5deg);
  transform-origin: left center;
}
.lede { color: var(--ivory-dim); font-size: 1.125rem; max-width: 34ch; text-wrap: pretty; }
.strip--welcome { margin-top: 18px; }

/* ---- buttons ---- */
.actions {
  display: grid;
  gap: 12px;
  padding: 16px var(--gutter) 20px;
}
.actions--pair { grid-template-columns: 1fr 1fr; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out), background-color 160ms;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
/* primary: ivory label on film umber with an ivory hairline, underlined in grease pencil; rose stays a mark, never a fill */
.btn--primary {
  position: relative;
  background: #3a3029;
  color: var(--ivory);
  box-shadow: inset 0 0 0 1.5px var(--ivory);
}
.btn--primary:hover { background: #433830; }
.btn__line {
  position: absolute;
  left: 25%;
  bottom: 11px;
  width: 50%;
  height: 10px;
  stroke-width: 3.5px;
  transition: transform 260ms var(--ease-out);
}
.btn--primary:hover .btn__line { transform: scaleX(1.15); }
.btn--primary:active .btn__line { transform: scaleX(1.3); }
.btn--ghost { background: transparent; color: var(--ivory-dim); box-shadow: inset 0 0 0 1px rgb(239 231 220 / 0.22); }
.btn--ghost:hover { color: var(--ivory); box-shadow: inset 0 0 0 1px rgb(239 231 220 / 0.5); }
.fine { color: var(--sage); text-align: center; font-size: 1rem; }

/* guest name: a label strip with a ruled writing line, like the edge of a negative sleeve */
.field { display: grid; gap: 6px; margin-bottom: 6px; }
.field__label { font: 1rem/1.2 'Edge', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1.5px solid rgb(239 231 220 / 0.5);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font: 600 1.375rem/1.2 'Barlow SC', system-ui, sans-serif;
  caret-color: var(--rose);
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: rgb(205 194 180 / 0.55); font-weight: 400; font-size: 1.0625rem; }
.field__input:focus { outline: none; border-bottom-color: var(--rose); }
.field__input:focus-visible { outline: none; }
.field__error { min-height: 1.4em; color: var(--rose); font-size: 1rem; }
.field__error:empty { min-height: 0; }
.quiet { color: var(--ivory-dim); }

/* ---- camera ---- */
.screen--camera {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #000;
  padding-bottom: 0;
}
.viewfinder { position: relative; overflow: hidden; min-height: 0; }
.viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder video.mirrored { transform: scaleX(-1); }

/* registration crosshairs: a plus with a ring, at each corner of the frame */
.reg {
  position: absolute;
  width: 26px;
  height: 26px;
  background:
    linear-gradient(var(--ivory), var(--ivory)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) center / 1.5px 100% no-repeat;
  opacity: 0.75;
  pointer-events: none;
}
.reg::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--ivory);
  border-radius: 50%;
}
.viewfinder .reg--tl { top: calc(var(--safe-t) + 12px); left: 12px; }
.viewfinder .reg--tr { top: calc(var(--safe-t) + 12px); right: 12px; }
.viewfinder .reg--bl { bottom: 12px; left: 12px; }
.viewfinder .reg--br { bottom: 12px; right: 12px; }

.count {
  position: absolute;
  top: calc(var(--safe-t) + 46px);
  left: var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.55);
}
.count__n { font: 5.5rem/0.82 'Edge', ui-monospace, monospace; letter-spacing: -0.04em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.count__label { font: 1rem/1 'Edge', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); }
.frame-code {
  position: absolute;
  top: calc(var(--safe-t) + 50px);
  right: var(--gutter);
  font: 1rem/1 'Edge', ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: var(--sage);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.flash { position: absolute; inset: 0; background: var(--ivory); opacity: 0; pointer-events: none; }
.flash--on { animation: flash 260ms var(--ease-out); }
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }

.deck { background: var(--base); padding-bottom: var(--safe-b); }
/* filter chips: edge-print labels; the chosen one is circled in grease pencil */
.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px max(12px, calc((100% - 520px) / 2)) 4px;
}
.chip {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: 1rem/1 'Edge', ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  cursor: pointer;
  touch-action: manipulation;
}
.chip[aria-pressed='true'] { color: var(--ivory); }
.chip__loop { position: absolute; inset: 4px 2px; width: calc(100% - 4px); height: calc(100% - 8px); stroke-width: 2.5px; stroke-dasharray: 1; animation: draw 360ms var(--ease-out) both; }
.chip:focus-visible { outline-offset: -2px; }
.strip--deck { padding: 18px max(12px, calc((100% - 520px) / 2)) 30px; }
.strip--deck .frame { aspect-ratio: 4 / 3; }
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px 18px;
}
.shutter {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid var(--base);
  background: var(--ivory);
  box-shadow: 0 0 0 3px var(--ivory);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out);
}
.shutter:active { transform: scale(0.92); }
.shutter:disabled { opacity: 0.6; }
.shutter__ring { position: absolute; inset: -20px -24px; width: calc(100% + 48px); height: calc(100% + 40px); stroke-width: 3.5px; transform: rotate(-8deg); }
.icon-btn {
  justify-self: end;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgb(239 231 220 / 0.4);
  cursor: pointer;
}
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--ivory); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---- review / uploading / error ---- */
.screen--review { gap: 8px; }
.print {
  position: relative;
  width: fit-content;
  margin: auto;
  padding: 18px;
}
.print img {
  display: block;
  max-width: calc(100vw - 2 * var(--gutter) - 36px);
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 250px);
  object-fit: contain;
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.55);
  transition: opacity 240ms;
}
.print .reg--tl { top: 0; left: 0; }
.print .reg--tr { top: 0; right: 0; }
.print .reg--bl { bottom: 0; left: 0; }
.print .reg--br { bottom: 0; right: 0; }
.print__loop {
  position: absolute;
  inset: -6px -10px;
  width: calc(100% + 20px);
  height: calc(100% + 12px);
  stroke-width: 4.5px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0; /* the round cap would otherwise leave a dot before the line is drawn */
  pointer-events: none;
}
[data-mode='uploading'] .print__loop { opacity: 1; animation: breathe 1.4s ease-in-out 700ms infinite; }
@keyframes breathe { 50% { opacity: 0.45; } }
.print__strike {
  position: absolute;
  left: 4%;
  top: 50%;
  width: 92%;
  height: 22%;
  transform: translateY(-50%) rotate(-6deg);
  stroke-width: 6px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
[data-mode='retake'] .print__strike { opacity: 1; animation: draw 300ms var(--ease-out) forwards; }
[data-mode='uploading'] .print__loop,
[data-mode='error'] .print__loop { stroke-dashoffset: 0; transition: stroke-dashoffset 560ms var(--ease-out); }
[data-mode='error'] .print__loop { opacity: 0; } /* not kept yet */
[data-mode='uploading'] .print img { opacity: 0.4; }
.print__status {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 1rem/1 'Edge', ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
}
[data-mode='uploading'] .print__status { display: flex; text-shadow: 0 1px 10px rgb(0 0 0 / 0.75); }
.error { min-height: 1.45em; padding: 0 var(--gutter); text-align: center; color: var(--rose); font-size: 1.125rem; text-wrap: balance; }

/* ---- done / messages / blocked ---- */
.done, .message, .blocked {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px var(--gutter);
}
.done, .message { padding-inline: 0; }
.done > :not(.strip), .message > :not(.strip-wrap) { padding-inline: var(--gutter); }
.strip-wrap { position: relative; margin-bottom: 18px; }
.strike {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 94%;
  height: 46px;
  transform: translateY(-50%) rotate(-5deg);
  stroke-width: 4.5px;
  stroke-dasharray: 1;
  animation: draw 700ms var(--ease-out) 200ms both;
}
.strip-wrap:not(.is-struck) .strike { display: none; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.marker-title { font: 400 clamp(2.4rem, 11vw, 3.2rem)/1.05 'Pencil', 'Barlow SC', cursive; color: var(--rose); transform: rotate(-2deg); margin-top: 22px; }
.message__time { font: clamp(3.5rem, 18vw, 5.5rem)/0.9 'Edge', ui-monospace, monospace; letter-spacing: -0.03em; color: var(--ivory); }
.message__text { font-weight: 600; font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.steps { padding-left: 0; list-style: none; display: grid; gap: 18px; color: var(--ivory-dim); }
.steps li { display: grid; gap: 4px; }
.steps__os { font: 1rem/1.2 'Edge', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }

/* ---- loading ---- */
.advance { display: flex; gap: 6px; padding: 14px 10px; background: var(--strip); }
.advance span { width: 30px; height: 40px; background: #0f0d0b; animation: wind 1.2s var(--ease-out) infinite; }
.advance span:nth-child(2) { animation-delay: 0.12s; }
.advance span:nth-child(3) { animation-delay: 0.24s; }
.advance span:nth-child(4) { animation-delay: 0.36s; }
.advance span:nth-child(5) { animation-delay: 0.48s; }
@keyframes wind { 40% { background: var(--exposed); } }

@media (min-width: 640px) {
  .welcome, .done, .message, .blocked, .actions { width: min(100%, 520px); margin-inline: auto; }
  .print img { max-width: min(560px, calc(100vw - 80px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-mode='retake'] .print__strike { stroke-dashoffset: 0; }
}