/* Public pages — the stationery the customer sees: approval links, sign in,
   password reset. Faces and colours come from tokens.css (IBM Plex Sans, the
   stone ground, white paper, ink, the brand red on the logo and the one
   button). Direction: "the page is the object" (.taste-skill/public). */

:root {
  --ground: #f3f3f1;                /* stone, the shop floor: the frame's tint, a step less yellow */
  --paper: #ffffff;
  --ink: var(--text);
  --ink-soft: #55555a;              /* secondary notes, 7.3:1 on paper */
  --action: #d32f2f;                /* the brand red, one step deeper so white text reads at 5:1 */
  --action-strong: var(--accent-ink);
  --field-line: var(--control-border);

  /* Five sizes, no more */
  --fs-display: clamp(2.25rem, 1.35rem + 2.9vw, 3.75rem);
  --fs-head: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem);
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --m: 24px;                        /* the page margin */
  --gap: 12px;                      /* the hero's gap and frame */
  --section: 160px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* Paper edges, drawn as filled shapes in the paper colour */
  --scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 12a20 12 0 0 1 40 0z' fill='%23ffffff'/%3E%3C/svg%3E");
  --scallop-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 0a20 12 0 0 0 40 0z' fill='%23ffffff'/%3E%3C/svg%3E");
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 0h24L12 12z' fill='%23ffffff'/%3E%3C/svg%3E");
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4' viewBox='0 0 10 4'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23b9b9b4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.paper-page {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
:where(.paper-page) :where(h1, h2, h3, p, figure, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(.paper-page) :where(ul, ol) { list-style: none; }
:where(.paper-page) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.paper-page) :where(a) { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
:where(.paper-page) :where(p) { text-wrap: pretty; }
.paper-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ── Controls: one button shape, square, flat ─────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--action); color: #fff;
  border: 0; border-radius: 0;
  font: 600 var(--fs-body)/1 var(--font-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.button:active { transform: scale(0.97); }
.button:disabled { background: #b8b8b4; cursor: progress; }
.button--ink { background: var(--ink); }
.text-button {
  background: none; border: 0; padding: 12px 4px; min-height: 44px;
  font: 500 var(--fs-body)/1.2 var(--font-sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(23, 23, 26, .35);
  text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; cursor: pointer;
  transition: text-decoration-color 180ms ease, transform 140ms var(--ease-out);
}
.text-button:active { transform: scale(0.97); }
.text-button:disabled { color: var(--ink-soft); cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--action-strong); }
  .button--ink:hover { background: #000; }
  .text-button:hover { text-decoration-color: currentColor; }
  :where(.paper-page) a:not(.button):hover { text-decoration-color: currentColor; }
}

.field-label { display: block; font-size: var(--fs-small); font-weight: 600; margin: 0 0 8px; }
.field {
  display: block; width: 100%; min-height: 52px; padding: 13px 14px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: 0; /* taste-skill-ignore: a form field keeps its edge */
  font: 400 var(--fs-body)/1.45 var(--font-sans);
}
.field::placeholder { color: #8a8a8e; }
.field:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
textarea.field { resize: vertical; }

/* ── The wordmark ─────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 44px; height: auto; }
.brand__word { width: 168px; height: auto; }

/* ── The first screen: a paper card beside one photograph ──────────────── */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap); padding: var(--gap); min-height: 100svh;
}
.stage__card { display: flex; }
.card {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 2 * var(--gap));
  background: var(--paper);
  padding: 0 clamp(28px, 4.4vw, 72px) 56px;
}
/* The van's stripe: the brand red across the top of the card */
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--accent); }
.card__head { padding-top: 48px; display: flex; flex-direction: column; gap: 14px; }
.card__from { font-size: var(--fs-small); color: var(--ink-soft); }
.card__body { margin-block: auto; padding-top: 56px; max-width: 36rem; }
.card__title {
  font-size: var(--fs-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em;
  max-width: 15ch; text-wrap: balance;
}
.card__line { margin-top: 32px; font-size: var(--fs-lead); line-height: 1.45; max-width: 38ch; }
.card__actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.card__actions:empty { display: none; }
.card__note { margin-top: 40px; display: grid; gap: 0; max-width: 32rem; }
.card__note .button { margin-top: 16px; justify-self: start; }
.card__sign { margin-top: 40px; color: var(--ink-soft); }
.card__sign a { color: var(--ink); text-decoration-color: rgba(23, 23, 26, .35); }
.card__status { margin-top: 24px; font-size: var(--fs-small); font-weight: 500; }
.card__status--error { color: var(--bad); }
.card__status--ok { color: var(--ok); }
.stage__picture { position: relative; overflow: hidden; background: #d9dbdc; min-height: 320px; }
.stage__picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── The visit, printed as an itinerary slip ───────────────────────────── */
.visit {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  max-width: 1440px; margin: var(--section) auto 0; padding: 0 var(--m);
  align-items: start;
}
.visit__intro { grid-column: 1 / span 5; padding-left: 36px; } /* text on the same inset as the paper's text */
.section-title { font-size: var(--fs-head); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; }
.lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.45; max-width: 30ch; }
.visit__picture { margin-top: 48px; }
.visit__picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.visit__picture figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; }
.slip {
  grid-column: 7 / span 6; position: relative;
  background: var(--paper); padding: 40px 36px 48px; margin-bottom: 12px;
}
.slip::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--zigzag) repeat-x left top / 24px 12px; }
.slip__group + .slip__group { margin-top: 28px; }
.slip__when { font-size: var(--fs-body); font-weight: 600; margin-bottom: 10px; }
.slip__row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.slip__what { flex: 0 1 auto; }
.slip__dots { flex: 1 1 24px; min-width: 24px; height: 4px; background: var(--dots) repeat-x left center / 10px 4px; align-self: center; transform: translateY(4px); }
.slip__who { flex: none; color: var(--ink-soft); white-space: nowrap; }
.slip__total {
  margin: 32px -36px 0; min-height: 52px; padding: 12px 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: var(--paper); font-weight: 600;
}

/* ── A visiting card on a photograph of a press floor ──────────────────── */
.call-wrap { position: relative; margin-top: var(--section); min-height: 100svh; display: flex; justify-content: flex-end; align-items: flex-start; }
.call__picture { position: absolute; inset: 0; overflow: hidden; background: #c9c7c0; }
.call__picture img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.call {
  position: relative; width: 400px; margin: 60px var(--m);
  background: var(--paper); padding: 36px 36px 0;
  display: flex; flex-direction: column;
}
.call__title { font-size: var(--fs-head); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.call p { margin-top: 20px; }
.call__rows { margin-top: 24px; display: grid; gap: 10px; }
.call__rows div { display: flex; justify-content: space-between; gap: 16px; }
.call__rows dt { color: var(--ink-soft); }
.call__rows dd { text-align: right; overflow-wrap: anywhere; }
.call__button { margin: 32px -36px 0; min-height: 60px; }

/* ── The back of the card ──────────────────────────────────────────────── */
.back { padding: 96px var(--m) var(--m); }
.back__card {
  position: relative; max-width: 1180px; margin: 0 auto;
  background: var(--paper); padding: 72px clamp(28px, 5vw, 80px) 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 64px;
}
.back__card::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; background: var(--scallop) repeat-x left bottom / 40px 12px; }
.back__signoff { font-size: var(--fs-head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.back__message p { margin-top: 16px; max-width: 36ch; }
.back__address { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.back__address ul { display: grid; gap: 12px; order: -1; min-width: 0; }
.back__address li, .imprint li { overflow-wrap: anywhere; } /* a long email address breaks instead of widening the card */
.back__address a { text-decoration-color: rgba(23, 23, 26, .35); }
.back__stamp { flex: none; width: 140px; padding: 6px; background: var(--ground); }
.back__stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.imprint { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-soft); max-width: 72ch; }
.imprint { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.imprint ul { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.imprint a { color: inherit; }
.back--short { padding-top: 0; }
.back--short .back__card { display: block; padding: 24px clamp(28px, 5vw, 80px); }
.back--short .back__card::before { display: none; }

/* ── Phone and tablet: picture first, the card over its foot ───────────── */
@media (max-width: 899px) {
  :root { --m: 16px; --section: 112px; }
  .stage { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .stage__picture { order: -1; height: 34svh; min-height: 220px; }
  .stage__card { margin-top: -28px; position: relative; z-index: 1; }
  .card { min-height: 0; padding: 0 24px 36px; }
  .card__head { padding-top: 32px; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
  .brand__mark { width: 36px; }
  .brand__word { width: 140px; }
  .card__body { margin-block: 0; padding-top: 36px; }
  .card__line { margin-top: 24px; }
  .card__actions { margin-top: 32px; }
  .card__actions .button { flex: 1 1 100%; }
  .card__actions .text-button { margin-inline: auto; }

  .visit { display: block; }
  .visit__intro { padding-left: 0; }
  .slip { margin-top: 40px; padding: 28px 24px 36px; }
  .slip__total { margin: 28px -24px 0; padding: 12px 24px; flex-wrap: nowrap; }
  .slip__total span:last-child { flex: none; }
  .visit__picture { margin-top: 32px; }

  .call-wrap { min-height: 0; display: flex; flex-direction: column; }
  .call__picture { position: relative; inset: auto; height: 60svh; order: 1; }
  .call { width: auto; margin: 0 var(--m) -80px; padding: 28px 24px 0; z-index: 1; }
  .call__button { margin: 28px -24px 0; }

  .back { padding-top: 88px; }
  .back__card { grid-template-columns: minmax(0, 1fr); padding: 48px 24px 28px; row-gap: 40px; }
  .back__stamp { width: 96px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visit__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .visit__intro .section-title, .visit__intro .lead { grid-column: 1; }
  .visit__intro .visit__picture { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .stage__picture { height: 40svh; }
  .stage { padding: var(--gap) var(--gap) 0; }
  .card__actions .button { flex: 0 1 auto; }
  .card__actions .text-button { margin-inline: 0; }
}

/* ── Motion: arrival on load, one reveal per part, settled by 1.2s ─────── */
@media (prefers-reduced-motion: no-preference) {
  .js .card__head, .js .card__title, .js .card__line, .js .card__actions, .js .card__note:not([hidden]) {
    opacity: 0; transform: translateY(16px);
    animation: pp-rise 600ms var(--ease-out) forwards;
  }
  .js .card__head { animation-delay: 60ms; }
  .js .card__title { animation-delay: 140ms; }
  .js .card__line { animation-delay: 260ms; }
  .js .card__actions, .js .card__note:not([hidden]) { animation-delay: 360ms; }
  .js .stage__picture { clip-path: inset(0 0 100% 0); animation: pp-open 900ms var(--ease-in-out) 80ms forwards; }
  .js .stage__picture img { transform: scale(1.08); animation: pp-settle 1600ms var(--ease-soft) 60ms forwards; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.1); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
}
@keyframes pp-rise { to { opacity: 1; transform: none; } }
@keyframes pp-open { to { clip-path: inset(0); } }
@keyframes pp-settle { to { transform: none; } }