/* Our Tour Story on the web. Ink on a near-white ground, with four soft colors
   (peach, butter, mint, sky) that always show up together; none of them leads.
   Buttons stay ink. Headlines are Fraunces, the rest is the system font. Light only.
   Values mirror apps/mobile/theme/tokens.ts so the page and the app read as one design. */

@font-face {
  font-family: 'Fraunces';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fraunces-600.ttf') format('truetype');
}

:root {
  --ink: #111111;
  --ground: #fcfbf9;
  --muted: #6f6f6e;
  --quiet: #b6b5b3;
  --tint: rgba(17, 17, 17, 0.06);
  --border: rgba(17, 17, 17, 0.08);
  --placeholder: rgba(17, 17, 17, 0.04);
  --danger: #9f1239;
  --peach: #f4a68a;
  --butter: #f6d060;
  --mint: #8bcfa2;
  --sky: #86c8ec;
  --peach-wash: #fbe4da;
  --outline: #e0ded9;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font:
    400 17px/22px -apple-system,
    system-ui,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
ul {
  margin: 0;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

h1:focus {
  outline: none;
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 20px 0;
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 44px;
  margin: 0 -12px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 12px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.title {
  padding-top: 8px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.footer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  padding: 14px 0 max(16px, env(safe-area-inset-bottom));
}

.footer.sticky {
  position: sticky;
  bottom: 0;
  gap: 8px;
  padding-top: 16px;
  background: var(--ground);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 28px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out;
}

.btn:active {
  opacity: 0.8;
  transform: scale(0.985);
}

.btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.btn-primary {
  background: var(--ink);
  color: #ffffff;
}

.btn-outline {
  border: 1px solid var(--outline);
  background: #ffffff;
  color: var(--ink);
}

.btn-plain {
  height: 52px;
  background: none;
  color: var(--ink);
}

.link {
  align-self: center;
  margin-bottom: 8px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

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

.muted {
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
}

.headline {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.consent {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-wrap: balance;
}

.caption {
  padding: 0 4px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
  text-wrap: balance;
}

.caption.small {
  padding-top: 8px;
  font-size: 13px;
  line-height: 18px;
}

.note {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-wrap: balance;
}

.note:empty {
  display: none;
}

/* ── Join ──────────────────────────────────────────────────────────────── */

.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 20px;
}

.invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.invite-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* The invite: the prints at the top, the walk's name in the serif, the buttons at the bottom. */

.view.join {
  margin: calc(-1 * env(safe-area-inset-top)) -20px 0;
}

.scene {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 390 / 452;
  max-height: 52vh;
  max-height: 52dvh;
  padding-top: env(safe-area-inset-top);
  background: var(--ground) url('/prints-scene.png') top center / cover no-repeat;
}

.scene .lockup {
  padding-top: 14px;
}

.join-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 24px max(16px, env(safe-area-inset-bottom));
}

.display {
  padding-top: 6px;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display:focus {
  outline: none;
}

.lede {
  padding-top: 12px;
  color: var(--muted);
  line-height: 26px;
}

.grow {
  flex: 1;
  min-height: 20px;
}

.tile {
  display: none;
}

.stack {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.join-body .stack {
  gap: 0;
  padding-top: 0;
}

.stack .muted {
  padding-bottom: 14px;
  text-wrap: balance;
}

/* ── The stage: the selfie in a print, the group gathering, the painting in its frame ─── */

.canvas {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 240px;
  padding: 12px 0;
}

/* A hand-drawn instant print. The drawn edge sits over the photo. */
.print {
  position: relative;
  width: min(286px, 72vw, 38dvh);
  aspect-ratio: 145 / 174;
  transform: rotate(-2deg);
}

.print .win {
  position: absolute;
  left: 8%;
  top: 6.6%;
  width: 84%;
  aspect-ratio: 1;
  background: var(--peach-wash);
  overflow: hidden;
}

/* A hand-drawn frame with a 3 by 2 window: wide, the painting's own shape. */
.frame {
  position: relative;
  width: min(350px, 100%, 52dvh);
  aspect-ratio: 205 / 150;
  transform: rotate(1deg);
}

.frame.waiting {
  transform: rotate(-1deg);
}

.frame .win {
  position: absolute;
  left: 9.6%;
  top: 13%;
  width: 81%;
  height: 74.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.win .fill,
.win .painting {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 300px;
}

/* Each guest is a small print. They lean their own way, like photos on a table. */
.face {
  width: 58px;
  height: 70px;
  padding: 4px 4px 15px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: #ffffff;
  object-fit: cover;
  animation: arrive 220ms ease-out both;
  rotate: -4deg;
}

.face:nth-child(3n + 2) {
  rotate: 3deg;
}

.face:nth-child(3n) {
  rotate: -2deg;
}

.face.me {
  scale: 1.1;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.count {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

/* Progress fills in the four colors, one after the other. */
.progress {
  flex-shrink: 0;
  align-self: center;
  width: min(280px, 100%);
  height: 8px;
  background: var(--tint);
  container-type: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0 23.5%,
    transparent 23.5% 25.5%,
    #000 25.5% 49%,
    transparent 49% 51%,
    #000 51% 74.5%,
    transparent 74.5% 76.5%,
    #000 76.5%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0 23.5%,
    transparent 23.5% 25.5%,
    #000 25.5% 49%,
    transparent 49% 51%,
    #000 51% 74.5%,
    transparent 74.5% 76.5%,
    #000 76.5%
  );
}

.bar {
  width: 0;
  height: 100%;
  background: linear-gradient(
      90deg,
      var(--peach) 0 25%,
      var(--butter) 25% 50%,
      var(--mint) 50% 75%,
      var(--sky) 75%
    )
    left / 100cqw 100% no-repeat;
  transition: width 1s linear;
}

.caption.small {
  text-align: center;
}

.spacer {
  flex-shrink: 0;
  height: 24px;
}

/* ── How your photo is handled ─────────────────────────────────────────── */

dialog {
  width: min(340px, calc(100vw - 40px));
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: var(--ink);
}

dialog::backdrop {
  background: rgba(17, 17, 17, 0.32);
}

dialog h2 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

dialog p {
  padding: 10px 0 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 21px;
}

/* ── Host (private) ────────────────────────────────────────────────────── */

.lockup.left {
  justify-content: flex-start;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.field input,
.field select {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--outline);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  font-size: 17px;
  appearance: none;
}

.groups {
  display: flex;
  flex-direction: column;
  padding: 28px 0 32px;
  list-style: none;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.group-name {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.group-meta {
  margin-top: -8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
}

.row {
  display: flex;
  gap: 8px;
}

.row .btn {
  height: 44px;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .face {
    animation: none;
  }
  .btn,
  .bar {
    transition: none;
  }
}