@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/PublicSans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --yellow: #F6D23C;
  --yellow-soft: #FFF4C4;
  --ink: #1A1A1A;
  --ink-2: #4A4434;       /* secondary text, tinted from the yellow world */
  --red: #D7262E;
  --red-dark: #B01D24;
  --pink: #F4A3BF;
  --pink-ink: #5A2335;    /* secondary text on pink */
  --white: #FFFFFF;
  --rule: 2px solid var(--ink);
  --s: 15px;
  --gap: clamp(16px, 2.2vw, 32px);
  --pad: clamp(20px, 2.8vw, 40px);
  --edge: clamp(16px, 4.4vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--yellow);
  color: var(--ink);
  font: 400 var(--s)/1.5 "Public Sans", system-ui, sans-serif;
  caret-color: var(--red);
  scrollbar-color: var(--ink) var(--yellow);
}
::selection { background: var(--ink); color: var(--yellow); }
h1, h2, p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-red:focus-visible, .formats button[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }

.cond {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--s);
}
.muted { color: var(--ink-2); }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Top bar */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 var(--edge); min-height: 72px;
}
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 18px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.mark-dot { width: 14px; height: 14px; background: var(--red); }
.mark-sub { color: var(--red); margin-left: 8px; padding-left: 10px; border-left: 2px solid var(--ink); }
.account { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.account > span { display: inline-flex; align-items: center; gap: 20px; }
.who { color: var(--ink-2); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link {
  font: 600 var(--s) "Public Sans", sans-serif; color: var(--ink);
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.link:hover { color: var(--red); }
.center { align-self: center; }

/* Login panel: drops in under the bar, no modal */
.login {
  display: grid; grid-template-columns: auto minmax(220px, 360px) auto; align-items: center; gap: 12px 16px;
  margin: 0 var(--edge) 16px; padding: 16px 20px; background: var(--white); border: var(--rule);
}
.login input {
  height: 48px; padding: 0 14px; border: var(--rule); font: 400 16px "Public Sans", sans-serif; color: var(--ink); background: var(--white);
}
.login input::placeholder { color: #6B6455; }
.login-note { grid-column: 1 / -1; color: var(--ink-2); }

.notice {
  margin: 0 var(--edge) 16px; padding: 12px 16px; background: var(--ink); color: var(--yellow); font-weight: 600;
}

/* The counter: ticket + stub */
.counter {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 416px);
  margin: 8px var(--edge) 0;
  min-height: min(704px, calc(100vh - 160px));
}
.ticket {
  background: var(--white); padding: var(--pad);
  display: flex; flex-direction: column; gap: 24px; min-width: 0;
}
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.drop {
  flex: 1; min-height: 300px;
  border: var(--rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 24px; cursor: pointer;
  transition: background-color .2s cubic-bezier(.16, 1, .3, 1);
}
.drop:hover { background: #FFFBEA; }
.drop.dragging { background: var(--yellow-soft); border-color: var(--red); }
.drop.loaded { min-height: 0; padding: 24px; }
.drop.loaded .no { font-size: clamp(56px, 6vw, 88px); }
.src img { display: block; max-width: 100%; max-height: 220px; border: var(--rule); background: var(--white); }
.drop.busy { cursor: progress; }
.no {
  font: 700 clamp(96px, 12vw, 168px)/.9 "Barlow Condensed", sans-serif;
  color: var(--red); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.no small { font-size: var(--s); letter-spacing: .1em; vertical-align: top; margin-right: 8px; }
.drop-title { font-size: 18px; }
#drop-file { overflow-wrap: anywhere; }

.formats {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  border-top: var(--rule); border-left: var(--rule);
}
.formats button {
  height: 56px; border: 0; border-right: var(--rule); border-bottom: var(--rule);
  background: var(--white); color: var(--ink);
  font: 700 var(--s) "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.formats button:hover:not(:disabled) { background: var(--yellow-soft); }
.formats button[aria-pressed="true"], .formats button[aria-pressed="true"]:hover { background: var(--red); color: var(--white); }
.formats button:disabled { color: #6E6757; background: #F4F1E8; cursor: not-allowed; }

/* Stub, joined to the ticket by the perforation */
.stub {
  position: relative; background: var(--pink); padding: var(--pad) 32px;
  border-left: 3px dotted var(--ink);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.stub::before, .stub::after {
  content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow);
}
.stub::before { top: -14px; }
.stub::after { bottom: -14px; }
.stub .muted { color: var(--pink-ink); }
.stub-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.stub[data-state="ready"] .stub-body, .stub[data-state="locked"] .stub-body { animation: tear .48s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tear { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.from { overflow-wrap: anywhere; }
.target { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.big { font: 700 clamp(72px, 7.8vw, 112px)/.85 "Barlow Condensed", sans-serif; text-transform: uppercase; }
/* No format yet: an empty ruled slot on the stub, like a blank ticket field. */
.big.empty { display: inline-block; width: 2.4em; height: .85em; border-bottom: 3px solid var(--ink); }

.preview {
  position: relative; height: 220px; background: var(--white); border: var(--rule);
  display: grid; place-items: center; overflow: hidden;
}
/* Ready: the frame takes the image's own shape (no letterbox); locked: the blurred field fills the stub. */
.stub[data-state="ready"] .preview { flex: none; height: auto; aspect-ratio: var(--ratio, 4 / 3); max-height: 420px; }
.stub[data-state="locked"] .preview { flex: 1; min-height: 220px; }
.stub[data-state="locked"] .preview img { object-fit: cover; }
.preview img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.stamp {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; rotate: -7deg;
  padding: 8px 14px; border: 4px double var(--red); color: var(--red);
  background: rgba(255, 255, 255, .7); letter-spacing: .12em; white-space: nowrap;
}
/* Paid: a punched hole replaces the stamp. */
.punch {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}
/* Ready: the stub is torn off along the perforation (a serrated edge replaces the dotted one). */
.torn { display: none; }
.stub[data-state="ready"] { border-left-color: transparent; }
.stub[data-state="ready"] .torn {
  display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2712%27%3E%3Cpath d=%27M0 0 L8 6 L0 12Z%27 fill=%27white%27/%3E%3C/svg%3E") 0 0 / 10px 12px repeat-y;
}
.preview-empty { padding: 16px; text-align: center; }

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.pitch { color: var(--pink-ink); }
.btn {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 18px; border: var(--rule);
  font: 600 var(--s) "Public Sans", sans-serif; color: var(--ink); background: var(--white);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, translate .15s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover { background: var(--yellow-soft); }
.btn:active { translate: 0 1px; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-red { background: var(--red); border-color: var(--red); color: var(--white); justify-content: center; }
.btn-red.plan { justify-content: space-between; }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ink { background: var(--ink); color: var(--yellow); border-color: var(--ink); justify-content: center; }
.btn-ink:hover { background: #333; }
.tag { background: var(--white); color: var(--red); padding: 2px 8px; font-size: 13px; }
.save { color: var(--red); font-weight: 700; }
.stub-msg { color: var(--pink-ink); }
.waitlist { display: grid; gap: 8px; }
/* Free-today meter: one hole per free conversion. Red = still free, punched = used today. */
.free-meter { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }
.holes { display: inline-flex; gap: 6px; }
.hole { width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
.hole.used { background: var(--yellow-soft); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
#free-text { font-variant-numeric: tabular-nums; }
/* Measuring mode: plans are shown but not for sale yet. */
.soon-tag { justify-self: start; align-self: flex-start; margin: 0; padding: 4px 10px; border: 4px double var(--red); color: var(--red); background: var(--white); rotate: -2deg; }
.waitlist input { height: 48px; padding: 0 14px; border: var(--rule); font: 400 16px "Public Sans", sans-serif; color: var(--ink); background: var(--white); }
.waitlist input::placeholder { color: #6B6455; }
.stub-msg:empty { display: none; }
.fine { color: var(--pink-ink); font-size: 13px; border-top: 1px solid var(--pink-ink); padding-top: 10px; }
.stub-msg.error { color: #7A0F14; font-weight: 600; }

.foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 24px var(--edge) 32px;
}
.foot nav { display: flex; gap: 20px; }

/* Plain pages (pricing, legal) share the ticket face */
.page { flex: 1; margin: 8px var(--edge) 0; background: var(--white); padding: var(--pad); }
.page h1 { font: 700 clamp(40px, 6vw, 72px)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; margin-bottom: 24px; }
.page h2 { margin: 32px 0 8px; }
.page p, .page li { max-width: 68ch; }
.page .fill { background: var(--yellow-soft); padding: 0 4px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); margin-top: 24px; }
.plans-grid > div { border-right: var(--rule); border-bottom: var(--rule); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.plans-grid .price { font: 700 56px/.9 "Barlow Condensed", sans-serif; }
.plans-grid .hot { background: var(--pink); }

@media (max-width: 900px) {
  .counter { grid-template-columns: 1fr; min-height: 0; }
  .stub { border-left: 0; border-top: 3px dotted var(--ink); }
  .stub[data-state="ready"] { border-top-color: transparent; }
  .stub[data-state="ready"] .torn {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2710%27%3E%3Cpath d=%27M0 0 L6 8 L12 0Z%27 fill=%27white%27/%3E%3C/svg%3E") 0 0 / 12px 10px repeat-x;
  }
  .stub::before, .stub::after { top: -15px; left: auto; bottom: auto; }
  .stub::before { left: -14px; }
  .stub::after { right: -14px; }
  .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drop { min-height: 260px; }
  .login { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .account { gap: 14px; }
  .who { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}