/* floristwork.com
   The page is a carbonless order pad: canary copy (hero), white copy (the body),
   pink copy (the closer). Carbon blue is the impression left on the copies below,
   so it marks the time stamps and nothing else. Rules live in README.md. */

:root {
  --canary: oklch(0.925 0.092 96);
  --canary-edge: oklch(0.84 0.1 92);
  --paper: oklch(0.985 0.007 90);
  --paper-2: oklch(0.965 0.012 88);
  --pink: oklch(0.885 0.052 8);
  --ink: oklch(0.24 0.018 65);
  --ink-2: oklch(0.4 0.02 65);
  --carbon: oklch(0.44 0.13 266);
  --rule: oklch(0.24 0.018 65 / 0.14);
  --shadow: 0 1px 2px oklch(0.24 0.018 65 / 0.06), 0 18px 48px -18px oklch(0.24 0.018 65 / 0.28);

  --serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--canary); color: var(--ink); }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ type */
.display {
  font: 400 clamp(3rem, 1.4rem + 6.4vw, 6.75rem)/0.98 var(--serif);
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.display-sm { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); }
.h2 {
  font: 400 clamp(2rem, 1.35rem + 2.6vw, 3.25rem)/1.05 var(--serif);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font: 400 clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem)/1.1 var(--serif);
  letter-spacing: -0.015em;
  margin: 0;
}
.lede { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 34em; }
.fine { font-size: 0.9375rem; color: var(--ink-2); }
.stamp {
  font: 600 0.9375rem/1 var(--sans);
  color: var(--carbon);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------- buttons
   One kind of button, borrowed whole from avanzaprofit.com: on hover the label
   slides right and a disc rides out of the right inset, crosses behind it and
   parks on the left, turning from a diagonal arrow into a horizontal one.

   The geometry is four numbers and every other measurement is derived from
   them, so changing the height or the disc moves the rest in step:

     padding-right = inset + disc + gap        the disc's slot, plus the gap
     label travel  = padding-right - padding-left
     track height  = height - 2 * inset = disc  keeps the disc a circle

   THE DISC'S TRAVEL NEEDS NO KNOWLEDGE OF THE BUTTON'S WIDTH. `.btn-track` is
   the whole interior and moves -100% = -(W - 2*inset); the disc inside it moves
   +100% = +disc of its own box. The sum lands its left edge on `inset` at every
   width, because each percentage resolves against its own element's box. A
   width-dependent slide would need JavaScript, which the CSP forbids anyway.

   Transform only. The 21st.dev original animates padding, which relayouts the
   nav on every hover. */
.btn {
  --btn-h: 48px;
  --btn-disc: 40px;
  --btn-inset: 4px;
  --btn-pad: 24px;
  --btn-gap: 12px;
  --btn-slot: calc(var(--btn-inset) + var(--btn-disc) + var(--btn-gap));
  --ease-btn: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  display: inline-flex; align-items: center;
  height: var(--btn-h);
  padding: 0 var(--btn-slot) 0 var(--btn-pad);
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn-label { position: relative; z-index: 1; transition: transform 0.45s var(--ease-btn); }
.btn:hover .btn-label, .btn:focus-visible .btn-label {
  transform: translateX(calc(var(--btn-slot) - var(--btn-pad)));
}
/* the track is the interior, and it carries the half of the slide that depends
   on the button's width. justify-content parks the disc at the right end. */
.btn-track {
  position: absolute; inset: var(--btn-inset);
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none;
  transition: transform 0.45s var(--ease-btn);
}
.btn:hover .btn-track, .btn:focus-visible .btn-track { transform: translateX(-100%); }
.btn-circle {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: var(--btn-disc); height: var(--btn-disc);
  border-radius: 50%;
  background: var(--paper); color: var(--ink);
  transition: transform 0.45s var(--ease-btn);
}
.btn:hover .btn-circle, .btn:focus-visible .btn-circle { transform: translateX(100%) rotate(45deg); }
.btn-circle svg { display: block; width: 16px; height: 16px; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: oklch(0.32 0.02 65); }
.btn-sm { --btn-h: 44px; --btn-disc: 36px; --btn-pad: 20px; font-size: 0.9375rem; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--rule); transition: text-decoration-color 0.2s; }
.text-link:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 40; background: var(--canary); transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.nav.is-scrolled { background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.nav-in { display: flex; align-items: center; gap: 28px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding: 14px var(--gutter); }
.wordmark { font: 400 1.5rem/1 var(--serif); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-weight: 500; font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } }
@media (max-width: 360px) {
  .nav-in { gap: 12px; }
  .wordmark { font-size: 1.25rem; }
  .nav .btn-sm { padding-inline: 0.9em; }
}

/* ------------------------------------------------------------------ hero */
.hero { background: var(--canary); padding-top: clamp(40px, 7vw, 96px); position: relative; }
.hero::after {             /* the canary sheet ends halfway down the screenshot */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 22vw, 300px); background: var(--paper);
}
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.hero-side { display: grid; gap: 22px; padding-bottom: 8px; }
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-media { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 80px); }

.browser { border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow), 0 0 0 1px var(--rule); }
.browser-bar { display: flex; justify-content: center; padding: 10px 16px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.browser-url { font-size: 0.8125rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 14px; }
.browser img { width: 100%; height: auto; aspect-ratio: 1280 / 800; display: block; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; align-items: start; }
}

/* ---- hero email capture: field and button share one pill, so it never reads
        as a second primary button next to the demo link ---- */
.ask { display: grid; gap: 10px; max-width: 30rem; padding-top: 6px; }
.ask-label { font-size: 0.9375rem; color: var(--ink-2); }
.ask-field {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper); border: 1.5px solid oklch(0.24 0.018 65 / 0.22); border-radius: 999px;
  padding: 5px 5px 5px 18px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ask-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px oklch(0.24 0.018 65 / 0.12); }
.ask-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: 400 1rem/1.2 var(--sans); padding: 10px 0; outline: none;
}
.ask-field input::placeholder { color: oklch(0.4 0.02 65 / 0.8); }
.ask-send {
  flex: none; min-height: 44px; padding: 0 1.2em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper); font: 600 0.9375rem/1 var(--sans);
  transition: background-color 0.2s var(--ease);
}
.ask-send:hover { background: oklch(0.32 0.02 65); }
.ask.is-sending .ask-send { opacity: 0.6; cursor: progress; }
.ask-note { min-height: 1.4em; font-size: 0.9375rem; color: var(--ink-2); }
.ask-note.is-error { color: oklch(0.45 0.15 28); }
.ask-done { display: grid; gap: 4px; max-width: 30rem; padding-top: 6px; }
.ask-done strong { font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- stance */
.stance { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 72px); padding-block: clamp(72px, 11vw, 150px) clamp(48px, 7vw, 96px); align-items: start; }
.stance-body { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.5; max-width: 36em; }
@media (max-width: 900px) { .stance { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- day steps */
.day { padding-bottom: clamp(40px, 6vw, 80px); }
.day-title { max-width: 16ch; margin-bottom: clamp(32px, 5vw, 56px); }
.step {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(40px, 6vw, 80px);
  border-top: 1.5px dashed var(--rule);   /* a tear line between leaves of the pad */
  align-items: start;
}
.step-copy { position: sticky; top: 110px; display: grid; gap: 14px; max-width: 30em; }
.step-copy .stamp { margin-bottom: 0; }
.step-copy p:not(.stamp) { color: var(--ink-2); }
.shot { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--rule); background: var(--paper); justify-self: start; }
.step .shot { max-width: 720px; }
.shot-tall { max-width: 460px !important; }
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; }
  .step-copy { position: static; }
}

/* ---------------------------------------------------------------- tickets */
.tickets { background: var(--paper-2); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.tickets-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.tickets-copy { display: grid; gap: 16px; max-width: 30em; }
.tickets-copy .stamp { margin-bottom: 0; }
.tickets-copy p:not(.stamp) { color: var(--ink-2); }
/* Two copies off the same pad: build ticket on top, delivery ticket (pink copy) slid
   out below it far enough to read its card message and payment boxes. */
.copies { display: grid; padding-block: 2% 4%; }
.copy { grid-area: 1 / 1; width: 74%; border-radius: 3px; box-shadow: var(--shadow); }
.copy img { border-radius: 3px; width: 100%; }
.copy-back { justify-self: end; margin-top: 30%; background: var(--pink); transform: rotate(2deg); }
.copy-back img { mix-blend-mode: multiply; }          /* white paper takes the pink copy's tint */
.copy-front { justify-self: start; align-self: start; background: var(--paper); transform: rotate(-1.6deg); z-index: 1; transition: transform 0.5s var(--ease); }
.copies:hover .copy-front { transform: rotate(-1.6deg) translate(-2%, -3%); }
@media (max-width: 860px) {
  .tickets-in { grid-template-columns: 1fr; }
  .copy { width: 86%; }
  .copy-back { margin-top: 42%; }
}

/* ---------------------------------------------------------------- numbers */
.numbers { padding-block: clamp(72px, 10vw, 140px) clamp(40px, 6vw, 80px); }
.numbers-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 5vw, 80px); row-gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); align-items: end; }
.numbers-head .stamp { grid-column: 1 / -1; margin-bottom: 0; }
.numbers-head p:not(.stamp) { color: var(--ink-2); max-width: 36em; }
.shot-wide { justify-self: stretch; }
@media (max-width: 860px) { .numbers-head { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- also */
.also { padding-block: clamp(56px, 9vw, 120px) clamp(80px, 12vw, 160px); }
.also-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phone { justify-self: center; width: min(100%, 320px); border-radius: 36px; padding: 10px; background: var(--ink); box-shadow: var(--shadow); }
.phone img { border-radius: 27px; }
.also-copy .h2 { margin-bottom: clamp(24px, 4vw, 40px); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.facts div { padding-block: 18px; border-top: 1px solid var(--rule); }
.facts dt { font-weight: 600; margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) {
  .also-in { grid-template-columns: 1fr; }
  .phone { width: min(70%, 300px); }
}
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- closer */
.closer { background: var(--pink); padding-block: clamp(72px, 11vw, 150px); }
.closer-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.closer-side { display: grid; gap: 26px; justify-items: start; }
@media (max-width: 900px) { .closer-in { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--pink); border-top: 1.5px dashed oklch(0.24 0.018 65 / 0.22); }
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding: 22px var(--gutter) 28px; font-size: 0.875rem; color: var(--ink-2); }
.foot a { color: var(--ink); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ 404 */
.lost { background: var(--canary); min-height: 70vh; display: grid; align-content: center; padding-block: 80px; }
.lost .wrap { display: grid; gap: 24px; justify-items: start; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .hero .display, .hero-side, .hero-media { animation: rise 0.9s var(--ease) both; }
  .hero-side { animation-delay: 0.08s; }
  .hero-media { animation-delay: 0.16s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* killing the transition alone would still snap the disc across on hover */
  .btn-label, .btn-track, .btn-circle { transform: none !important; }
}