/* getaphotographer.com — Napkin Zine */

@font-face {
  font-family: "Shantell Sans";
  src: url("/fonts/shantell-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ground: #FFE15A;          /* highlighter yellow, the page */
  --paper: #FFFFFF;           /* napkin + notepad */
  --ink: #141414;
  --ink-soft: #3D3A33;        /* secondary text on paper and yellow */
  --pencil: #6B665C;          /* empty-slot pencil marks on white */
  --pink: #FF6FA8;
  --pink-soft: #FFB7D3;
  --teal: #22B5AC;
  --teal-ink: #0A7C75;        /* teal dark enough for text on white */

  --font-hand: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wob-a: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --wob-b: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --wob-c: 12px 140px 14px 120px / 120px 14px 140px 12px;

  --stroke: 2.5px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* component display rules must never un-hide hidden elements */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }

/* faint halftone dots across the yellow, like cheap zine stock */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 20, 20, .07) 1px, transparent 1.4px);
  background-size: 14px 14px;
  z-index: 0;
}

main, .masthead, .foot { position: relative; z-index: 1; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

svg { overflow: visible; }

/* every drawn thing shares one marker stroke */
.brand-mark, .mascot, .panel-doodle, .search-doodle, .panel-arrow svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: inherit; }

:focus-visible {
  outline: 3px dashed var(--teal-ink);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- type ---------- */

.display, .section-title, .q, .result-title, .napkin-title, .brand-word, .panel h3 {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.display {
  font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  margin: 0;
}

.section-title {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
  margin: 0 0 .5em;
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 1.1rem 0 0;
}

.underline {
  background: linear-gradient(var(--teal), var(--teal)) 0 92% / 100% .12em no-repeat;
  padding-bottom: .04em;
}
.hero .underline { animation: underline-in .8s .9s var(--ease-out) both; }
@keyframes underline-in { from { background-size: 0 .12em; } }
.spark {
  display: inline-block;
  width: .5em; height: .5em;
  margin-left: .08em;
  vertical-align: top;
  fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: round;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* highlighter swipe behind a word */
.swipe {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.swipe::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.12em; right: -.14em;
  top: .14em; bottom: .02em;
  background: var(--pink);
  border-radius: 6px 14px 4px 18px / 14px 5px 16px 6px;
  transform: rotate(-1.2deg) scaleX(var(--swipe, 1));
  transform-origin: left center;
}
.swipe--teal::before { background: var(--teal); opacity: .55; }
/* multi-line variant: the swipe follows each wrapped line */
.swipe--wrap {
  white-space: normal;
  background: linear-gradient(var(--swipe-color, var(--pink)), var(--swipe-color, var(--pink))) 0 60% / 100% 78% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 6px 14px 4px 18px / 14px 5px 16px 6px;
  padding: 0 .12em;
}
.swipe--wrap::before { display: none; }
.swipe--wrap.swipe--teal { --swipe-color: #9ADBD6; }
.hero .swipe::before { animation: swipe-in .9s .25s var(--ease-out) both; }
@keyframes swipe-in { from { transform: rotate(-1.2deg) scaleX(0); } }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px var(--gutter) 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark { width: 42px; height: 42px; }
.brand-mark rect, .brand-mark circle:not(.pupil) { fill: var(--paper); }
.brand-mark .pupil { fill: var(--ink); stroke: none; }
.brand-word {
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
}
.brand-tld { color: var(--teal-ink); font-weight: 600; }

.nav-short { display: none; }
.masthead-nav { display: flex; gap: clamp(14px, 2.5vw, 28px); }
.masthead-nav a {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) left 100% / 0 2.5px no-repeat;
  transition: background-size .35s var(--ease-out);
  padding-bottom: 2px;
}
.masthead-nav a:hover { background-size: 100% 2.5px; }

/* ---------- hero ---------- */

.hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(56px, 8vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas:
    "copy napkin"
    "pad  napkin";
  column-gap: clamp(28px, 4.5vw, 72px);
  row-gap: clamp(24px, 3vw, 36px);
  align-items: start;
}
.hero-copy { grid-area: copy; }
.napkin-wrap { grid-area: napkin; position: sticky; top: 24px; }
/* a second napkin underneath, outlined in ink: depth from drawing, not blur */
.napkin-wrap::before {
  content: "";
  position: absolute;
  inset: 8px -10px -8px 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  transform: rotate(-1.6deg);
}
.napkin { z-index: 1; }
.napkin-note {
  position: absolute;
  top: calc(100% + 30px);
  left: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 40;
  font-weight: 700;
  font-size: 1.3rem;
  color: #B0124F;
  transform: rotate(-3deg);
}
.napkin-note svg { width: 62px; height: 44px; flex: none; fill: none; stroke: #B0124F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: -10px; }
.napkin-wrap:has(.napkin.is-closed) .napkin-note { visibility: hidden; }
.notepad { grid-area: pad; }

/* ---------- notepad (form) ---------- */

.notepad {
  position: relative;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--wob-c);
  padding: 46px clamp(20px, 3vw, 36px) clamp(22px, 3vw, 32px);
  scroll-margin-top: 16px;
}
/* the second, offset marker outline the zine uses for "this is the thing" */
.notepad::after {
  content: "";
  position: absolute;
  inset: 5px -6px -7px 6px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  z-index: -1;
  background: var(--paper);
  opacity: .9;
}

.spiral {
  position: absolute;
  top: -14px; left: 26px; right: 26px;
  height: 30px;
  background:
    radial-gradient(circle at 50% 70%, var(--ground) 0 5px, var(--ink) 5.5px 7px, transparent 7.5px) 0 0 / 34px 30px repeat-x;
  pointer-events: none;
}
.spiral::before {
  content: "";
  position: absolute;
  inset: 0 0 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 0 / 2.5px 100% no-repeat;
  background-size: 34px 100%;
  background-image: repeating-linear-gradient(90deg, transparent 0 15.75px, var(--ink) 15.75px 18.25px, transparent 18.25px 34px);
  border-radius: 4px;
}

.progress { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.progress-count {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-soft);
}
.progress-dots {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.progress-dots li {
  position: relative;
  width: 16px; height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50% 45% 55% 48%;
  background: var(--paper);
  flex: none;
  transition: background-color .3s, transform .3s var(--ease-out);
}
.progress-dots li + li { margin-left: 26px; }
.progress-dots li + li::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 26px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
  margin-right: 2px;
}
.progress-dots li.is-done { background: var(--teal); }
.progress-dots li.is-done + li::before { background: var(--ink); }
.progress-dots li.is-current { background: var(--pink); transform: scale(1.25) rotate(-8deg); }

.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step[hidden] { display: none; }
.step.is-entering { animation: step-in .45s var(--ease-out) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); filter: blur(2px); } }

.q {
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.12;
  padding: 0;
  margin: 0 0 18px;
}

.hint { margin: -8px 0 16px; color: var(--ink-soft); max-width: 46ch; }

.field { display: grid; gap: 6px; margin-top: 16px; min-width: 0; }
.field:first-child { margin-top: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.field-row .field { margin-top: 0; }
.field-row + .field, .field-row + .check, .field + .field-row { margin-top: 16px; }
.field--inline { max-width: 220px; margin: 0 0 14px; }
.hint--geo { margin: 10px 0 0; font-size: .92rem; }

label, .label {
  font-weight: 600;
  font-size: .95rem;
}
.opt { font-weight: 400; color: var(--ink-soft); font-size: .875rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 50px;
  font: 500 1.05rem/1.3 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob-b);
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
textarea { resize: vertical; min-height: 92px; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9 C 8 12, 10 14, 12 16 C 14 14, 16 12, 19 8.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}
input::placeholder, textarea::placeholder { color: #77726A; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 3px 0 -1px var(--pink);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #B0124F; border-style: dashed; }
input:disabled { opacity: .45; }

.field--reveal { display: none; }
.field--reveal.is-shown { display: grid; animation: step-in .35s var(--ease-out) both; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px 8px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  background: var(--paper);
  cursor: pointer;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  user-select: none;
  transition: transform .2s var(--ease-out), background-color .2s;
}
.chip:nth-child(even) { border-radius: var(--wob-b); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip svg {
  width: 30px; height: 30px; flex: none;
  fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#wobble);
}
.chip--sm { min-height: 44px; padding: 8px 16px; }
.chip:hover { transform: rotate(-1deg) translateY(-1px); background: #FFF6CC; }
.chip:has(input:checked) { background: var(--pink); transform: rotate(-1.5deg); }
.chip:has(input:focus-visible) { outline: 3px dashed var(--teal-ink); outline-offset: 3px; }
.chip--multi:has(input:checked)::after {
  content: "";
  width: 16px; height: 16px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13 C 6 14.5, 8 16.5, 9.5 19 C 12 13, 15.5 8, 20.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* package cards: duration buckets with what's delivered and a price */
.packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.package {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  background: var(--paper);
  cursor: pointer;
  transition: transform .2s var(--ease-out), background-color .2s;
}
.package:nth-child(even) { border-radius: var(--wob-b); }
.package input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.package-time {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 30;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}
.package-what { font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }
.package-price {
  justify-self: start;
  margin-top: 6px;
  padding: 2px 8px;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100;
  font-weight: 800;
  font-size: 1.15rem;
  background: var(--ground);
  border-radius: 6px 12px 5px 10px;
}
.package:hover { transform: rotate(-.8deg) translateY(-1px); background: #FFF6CC; }
.package:has(input:checked) { background: var(--pink); transform: rotate(-1.2deg); }
.package:has(input:checked) .package-what { color: var(--ink); }
.package:has(input:checked) .package-price { background: var(--paper); }
.package:has(input:focus-visible) { outline: 3px dashed var(--teal-ink); outline-offset: 3px; }

.check--prints { margin-top: 14px; }

/* checkbox */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  min-height: 44px;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box {
  width: 26px; height: 26px; flex: none;
  border: 2px solid var(--ink);
  border-radius: 6px 9px 5px 8px;
  display: grid; place-items: center;
  background: var(--paper);
}
.check .box svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset .35s var(--ease-out);
}
.check input:checked + .box { background: var(--teal); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 3px dashed var(--teal-ink); outline-offset: 3px; }
.check--inline { padding-bottom: 3px; }

.error {
  min-height: 0;
  margin: 12px 0 0;
  font-weight: 600;
  color: #B0124F;
  font-size: .95rem;
}
.error:empty { display: none; }

/* buttons */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.nav-row .btn { margin-left: auto; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 24px 12px 26px;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 10;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  background: var(--pink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--wob-a);
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: transform .2s var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 4px -6px -6px 4px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-b);
  z-index: -1;
  transition: inset .2s var(--ease-out);
}
.btn svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease-out);
}
.btn:hover { transform: translate(-1px, -2px) rotate(-.6deg); }
.btn:hover::after { inset: 6px -9px -9px 6px; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translate(2px, 2px); }
.btn:active::after { inset: 1px -2px -2px 1px; }
.btn[disabled] { opacity: .55; cursor: progress; }

.btn--quiet { background: var(--paper); }
.btn--quiet:hover svg { transform: translateX(-3px); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font: 600 1rem var(--font-body);
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--teal);
}
.btn-text svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* searching + result */
.searching { text-align: center; padding: 36px 0 26px; }
.search-doodle { width: 130px; height: 90px; }
.search-doodle g { animation: hunt 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes hunt {
  0%, 100% { transform: translate(-14px, 0) rotate(-6deg); }
  50% { transform: translate(14px, -4px) rotate(6deg); }
}
.searching-text {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 12px 0 0;
}

.result { outline: none; animation: step-in .5s var(--ease-out) both; }
.result-title {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 14px;
}

.result p { margin: 0 0 24px; max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; }

/* ---------- napkin ---------- */

.napkin {
  position: relative;
  background:
    /* fold creases: napkins come folded in quarters */
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(20, 20, 20, .045) 50%, transparent calc(50% + 1px)),
    linear-gradient(transparent calc(50% - 1px), rgba(20, 20, 20, .045) 50%, transparent calc(50% + 1px)),
    var(--paper);
  padding: 30px 30px 38px;
  transform: rotate(1.8deg);
  border-radius: 3px;
  clip-path: polygon(0 1%, 4% 0, 30% .6%, 60% 0, 88% .8%, 100% 0, 99.4% 30%, 100% 62%, 99.2% 100%, 70% 99.3%, 40% 100%, 12% 99.4%, 0 100%, .6% 66%, 0 34%);
}
/* hand-ruled pencil border, the way you'd frame a napkin sketch */
.napkin::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(20, 20, 20, .32);
  border-radius: var(--wob-c);
  pointer-events: none;
}

.napkin-title {
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0 0 12px 6px;
  transform: rotate(-2deg);
}
.napkin-title-line {
  position: absolute;
  left: -4px; right: -10px; bottom: -2px;
  height: 5px;
  background: var(--teal);
  border-radius: 6px 2px 8px 3px;
  transform: rotate(-1deg);
}

.sketch {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(118px, auto);
  gap: 6px 22px;
}

.napkin-arrows {
  position: absolute;
  left: 30px; right: 30px; top: 66px; bottom: 38px;
  width: calc(100% - 60px);
  height: calc(100% - 104px);
  fill: none;
  stroke: var(--ink);
  stroke-width: .55;
  stroke-linecap: round;
  pointer-events: none;
}
.napkin-arrows path { transition: stroke-dashoffset .7s var(--ease-out); stroke-dasharray: 1; stroke-dashoffset: 1; }
.napkin-arrows path.is-drawn { stroke-dashoffset: 0; }

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 6px;
  min-width: 0;
}
.slot[data-slot="occasion"] { grid-area: 1 / 1; }
.slot[data-slot="where"]    { grid-area: 1 / 2; }
.slot[data-slot="when"]     { grid-area: 2 / 2; }
.slot[data-slot="length"]   { grid-area: 2 / 1; }
.slot[data-slot="budget"]   { grid-area: 3 / 1; }
.slot[data-slot="who"]      { grid-area: 3 / 2; }
.slot[data-slot="where"], .slot[data-slot="when"], .slot[data-slot="who"] { align-items: flex-end; text-align: right; }
.slot:nth-child(odd) { transform: rotate(-1.5deg); }
.slot:nth-child(even) { transform: rotate(1.2deg); }

.doodle {
  width: 58px; height: 58px;
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.2;
  stroke-dasharray: .035 .05;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#wobble);
}
.slot.is-filled .doodle {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 1;
  animation: draw 1s var(--ease-out) both;
}
.slot[data-slot="occasion"].is-filled .doodle { stroke: #D81B6A; }
.slot[data-slot="where"].is-filled .doodle, .slot[data-slot="when"].is-filled .doodle { stroke: var(--teal-ink); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.slot-text {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 70;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: break-word;
}
.slot-empty { color: var(--pencil); font-weight: 400; font-size: 1.1rem; }
.slot-value {
  display: none;
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--ink);
}
.slot-value small { display: block; font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.slot.is-filled .slot-empty { display: none; }
.slot.is-filled .slot-value { display: block; animation: write .8s .15s var(--ease-out) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* highlighter mark under the occasion, the headline of the sketch */
.slot[data-slot="occasion"].is-filled .slot-value {
  background: linear-gradient(transparent 55%, var(--pink-soft) 55% 92%, transparent 92%);
  padding: 0 4px;
}

.stamp {
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  padding: 10px 18px;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 0;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  text-align: center;
  color: #D81B6A;
  border: 4px solid #D81B6A;
  border-radius: 10px 16px 9px 14px;
  background: rgba(255, 255, 255, .82);
  transform: translate(-50%, -50%) rotate(-12deg) scale(1.6);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.napkin.is-closed .stamp { animation: stamp .45s var(--ease-out) forwards; }
@keyframes stamp-sm {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.6); }
  60% { opacity: 1; transform: rotate(-4deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); }
  60% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
.napkin.is-closed .sketch { opacity: .55; transition: opacity .4s; }

/* mascot */
.mascot {
  position: absolute;
  right: -34px; bottom: -46px;
  width: 112px; height: 122px;
  z-index: 2;
  transform: rotate(-4deg);
}
.mascot-swipe { fill: var(--teal); stroke: none; opacity: .28; }
.mascot-body { fill: var(--paper); }
.ink-fill { fill: var(--ink); stroke: none; }
.paper-fill { fill: var(--paper); stroke: none; }
.cheek { fill: var(--pink); stroke: none; opacity: .8; }
.sweat { fill: #9FE3DD; stroke-width: 2; display: none; }
.brow-sad, .mouth-sad { display: none; }
.mascot-pupil { transition: transform .5s var(--ease-out); }
.mascot-arm-r { transform-origin: 100px 62px; }
.mascot[data-mood="happy"] .mascot-arm-r { animation: wave 2.6s 1s ease-in-out 2; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(8deg); } }
.mascot[data-mood="look-l"] .mascot-pupil { transform: translate(-6px, 2px); }
.mascot[data-mood="look-r"] .mascot-pupil { transform: translate(6px, 2px); }
.mascot[data-mood="look-u"] .mascot-pupil { transform: translate(-3px, -5px); }
.mascot[data-mood="search"] .mascot-pupil { animation: scan 1.2s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translate(-6px, 0); } 50% { transform: translate(6px, -2px); } }
.mascot[data-mood="sad"] .mascot-pupil { transform: translate(0, 5px); }
.mascot[data-mood="sad"] .brow-happy, .mascot[data-mood="sad"] .mouth-happy, .mascot[data-mood="sad"] .sparks { display: none; }
.mascot[data-mood="sad"] .brow-sad, .mascot[data-mood="sad"] .mouth-sad, .mascot[data-mood="sad"] .sweat { display: inline; }
.mascot[data-mood="sad"] .mascot-arm-r { transform: rotate(78deg); }

/* ---------- holiday shoots: taped prints ---------- */

.trips {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) var(--gutter) 0;
}
.trips .section-title { max-width: 16ch; }
.trips-sub { margin: -6px 0 0; color: var(--ink-soft); max-width: 48ch; font-size: 1.08rem; }

.prints {
  list-style: none;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(18px, 2.4vw, 32px);
}

.print {
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s var(--ease-out);
  z-index: 0;
}
.print:nth-child(even) { margin-top: 24px; }
.print:hover, .print:focus-within { transform: rotate(0deg) translateY(-8px) scale(1.04); z-index: 2; }

.print-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 10px 0;
  border: 0;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  /* instant-print paper: a drawn ink edge, depth from the outline, not blur */
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-radius: 2px;
}
.print-btn:focus-visible { outline: 3px dashed var(--teal-ink); outline-offset: 4px; }
.print-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ground-shade, #F2D24A);
  filter: saturate(1.08) contrast(1.02);
}
.print-caption {
  display: block;
  padding: 10px 2px 14px;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 60;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  min-height: 3.2em;
}

/* washi tape holding each print to the page */
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 74px;
  height: 24px;
  transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) * -2 + 2deg));
  opacity: .82;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px));
}
.tape--pink { background: repeating-linear-gradient(45deg, var(--pink) 0 8px, var(--pink-soft) 8px 12px); }
.tape--teal { background: repeating-linear-gradient(45deg, var(--teal) 0 8px, #8FDDD7 8px 12px); }

/* ---------- kind words: pinned review notes ---------- */

.reviews {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 150px) var(--gutter) 0;
}
.reviews-sub { margin: -6px 0 0; color: var(--ink-soft); max-width: 52ch; font-size: 1.08rem; }

.notes {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
  align-items: start;
}
.note {
  position: relative;
  display: inline-block; /* unbreakable in columns, so each pin stays on its note */
  width: 100%;
  break-inside: avoid;
  margin: 14px 0 clamp(18px, 2vw, 26px);
  padding: 26px 20px 18px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-c);
  background: var(--paper);
  transform: rotate(var(--tilt, 0deg));
}
.note:nth-child(even) { border-radius: var(--wob-b); }
.note--pink { background: #FFE0EC; }
.note--teal { background: #D6F3F0; }

/* a doodled push-pin holding each note */
.pin {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 2.5px, transparent 3px), var(--pink);
}
.note--pink .pin { background: radial-gradient(circle at 35% 35%, #fff 0 2.5px, transparent 3px), var(--teal); }

.stars { display: flex; gap: 3px; margin: 0 0 10px; }
.stars svg {
  width: 18px; height: 18px;
  fill: var(--ground); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round;
}
.note-title {
  margin: 0 0 6px;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 30;
  font-weight: 800;
  font-size: 1.14rem;
  line-height: 1.2;
}
.note blockquote { margin: 0; }
.note blockquote p {
  margin: 0;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 70, "BNCE" 20;
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.45;
  color: var(--ink);
}
.note-by { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }
.note-by strong { color: var(--ink); font-weight: 700; }
.note-by span { display: block; margin-top: 2px; font-size: .8rem; }
.note-by a { color: inherit; }

/* ---------- how it works ---------- */

.how, .occasions, .faq {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) 0;
}

.how {
  position: relative;
}
.how::before {
  /* a torn strip of white paper behind the comic panels */
  content: "";
  position: absolute;
  inset: clamp(28px, 5vw, 64px) 0 -40px;
  background: var(--paper);
  transform: rotate(-.8deg);
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 34% .5%, 52% 2.4%, 70% .3%, 86% 2%, 100% 0, 100% 97%, 92% 100%, 76% 98%, 58% 99.6%, 40% 97.6%, 22% 99.5%, 8% 97.8%, 0 100%);
  z-index: -1;
}
.how .section-title { padding-top: 20px; }

.panels {
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 56px minmax(0, 1fr) 56px minmax(0, .95fr);
  align-items: stretch;
}
.panel {
  position: relative;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--wob-a);
  padding: 22px 22px 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.panel:nth-child(3) { border-radius: var(--wob-b); transform: translateY(18px) rotate(.6deg); }
.panel:nth-child(5) { transform: rotate(-.8deg); }
.panel-num {
  position: absolute;
  top: -20px; left: 18px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100;
  font-weight: 800;
  font-size: 1.4rem;
  background: var(--teal);
  border: var(--stroke) solid var(--ink);
  border-radius: 52% 48% 55% 45%;
}
.panel h3 {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 10px 0 8px;
}
.panel p { margin: 0 0 14px; color: var(--ink-soft); max-width: 32ch; }
.panel-doodle { width: 100%; max-width: 220px; height: auto; margin-top: auto; align-self: center; }
.panel-doodle .pink-stroke { stroke: var(--ink); fill: var(--pink); }
.panel-doodle .teal-stroke { fill: var(--teal); }
.panel-doodle .yellow-fill { fill: var(--ground); }
.panel-arrow { display: grid; place-items: center; }
.panel-arrow svg { width: 52px; height: 26px; }

/* ---------- occasions wall ---------- */

.occasions { text-align: center; padding-top: clamp(96px, 12vw, 150px); }
.occasions .section-title { max-width: 18ch; margin-inline: auto; }
.occasions-hint { margin: -6px 0 28px; color: var(--ink-soft); }
.wall {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.wall button {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 60;
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--ink);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--wob-a);
  padding: 6px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease-out);
}
.wall li:nth-child(3n+1) button { transform: rotate(-2deg); }
.wall li:nth-child(3n+2) button { transform: rotate(1.5deg); font-size: clamp(1.35rem, 2.6vw, 2rem); }
.wall li:nth-child(4n) button { font-weight: 800; }
.wall button:hover { background: var(--paper); border-color: var(--ink); transform: rotate(0) scale(1.05); }
.wall li:nth-child(5n+2) button:hover { background: var(--pink); }
.wall li:nth-child(5n+4) button:hover { background: var(--teal); }

/* ---------- faq ---------- */

.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.faq-list { display: grid; gap: 12px; }
details {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob-c);
}
details:nth-child(even) { border-radius: var(--wob-b); }
summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 1.08rem;
  min-height: 56px;
}
summary::-webkit-details-marker { display: none; }
summary svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; transition: transform .3s var(--ease-out); }
details[open] summary svg { transform: rotate(45deg); }
details p { margin: 0; padding: 0 20px 18px; color: var(--ink-soft); max-width: 60ch; }

/* ---------- close ---------- */

.close {
  margin-top: clamp(72px, 10vw, 128px);
  background: var(--ink);
  color: var(--ground);
  padding: clamp(64px, 9vw, 112px) var(--gutter);
  text-align: center;
  clip-path: polygon(0 6%, 12% 2%, 30% 5%, 48% 1%, 66% 4.5%, 84% 1.5%, 100% 4%, 100% 100%, 0 100%);
}
.display--close { color: var(--ground); margin-bottom: 30px; }
.btn--on-ink { background: var(--ground); }
.btn--on-ink::after { border-color: var(--pink); }

.foot {
  margin-top: -1px;
  background: var(--ink);
  color: #CFC7AE;
  text-align: center;
  padding: 0 var(--gutter) 28px;
  font-size: .9rem;
}
.foot p { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "napkin" "pad";
  }
  .napkin-wrap { position: relative; top: 0; }
  .napkin { transform: rotate(1deg); padding: 20px 18px 24px; }
  .napkin::before { inset: 6px; border-width: 4px; }
  .napkin-title { font-size: 1.25rem; margin-bottom: 4px; }
  .sketch { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 4px 10px; }
  .napkin-note { display: none; }
  /* on phones the sketch fills the napkin, so the stamp lands beside the title instead of over the answers */
  .napkin.is-closed { padding-bottom: 70px; }
  .stamp { left: 22px; top: auto; bottom: 22px; font-size: .9rem; padding: 5px 10px; border-width: 3px; transform: rotate(-4deg); }
  .napkin.is-closed .stamp { animation-name: stamp-sm; }
  .napkin.is-closed .sketch { opacity: .8; }
  .napkin-wrap::before { inset: 6px -6px -6px 6px; }
  .slot[data-slot] { grid-area: auto; }
  .slot, .slot[data-slot="where"], .slot[data-slot="when"], .slot[data-slot="who"] { align-items: center; text-align: center; padding: 4px 2px; }
  .doodle { width: 40px; height: 40px; }
  .slot-empty { font-size: .95rem; }
  .slot-value { font-size: .9rem; }
  .slot-value small { font-size: .75rem; }
  .napkin-arrows { display: none; }
  .mascot { width: 74px; height: 82px; right: -8px; bottom: -34px; }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .prints {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 22px 6px 14px;
    margin: 0 calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .prints::-webkit-scrollbar { display: none; }
  .print { flex: 0 0 min(62vw, 260px); scroll-snap-align: center; }
  .print:nth-child(even) { margin-top: 0; }
  .notes { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px var(--gutter) 10px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
  .notes::-webkit-scrollbar { display: none; }
  .note { flex: 0 0 min(78vw, 300px); width: auto; scroll-snap-align: center; margin: 0; }
  .panel-arrow { display: none; }
  .panel:nth-child(3), .panel:nth-child(5) { transform: none; }
  .faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .panel-doodle { max-width: 170px; }
  .brand-word { font-size: 1.12rem; }
  .brand-mark { width: 34px; height: 34px; }
  .lede { font-size: 1.05rem; }
  .notepad { padding: 40px 16px 20px; }
  .notepad::after { inset: 4px -4px -5px 4px; }
  .spiral { left: 14px; right: 14px; }
  .chips--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chips--icons .chip { padding: 8px 10px 8px 8px; font-size: .92rem; gap: 8px; }
  .chips--icons .chip svg { width: 26px; height: 26px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .packages { gap: 10px; }
  .package { padding: 12px 12px 14px; }
  .package-time { font-size: 1.08rem; }
  .package-what { font-size: .82rem; }
  .progress-dots li + li { margin-left: 18px; }
  .progress-dots li + li::before { width: 18px; }
  .nav-row .btn { padding: 12px 18px 12px 20px; font-size: 1.08rem; }
  .napkin-title { margin-left: 2px; }
}

@media (max-width: 440px) {
  .brand-word { font-size: 1rem; }
  .brand { gap: 7px; }
  .masthead-nav a { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .search-doodle g { animation: none; }
}

/* ---------- legal pages + small print ---------- */

.legal-note { margin: 14px 0 0; font-size: .85rem; color: var(--ink-soft); }
.legal-note a, .foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.doc { max-width: 860px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) var(--gutter) clamp(56px, 8vw, 96px); position: relative; z-index: 1; }
.doc-sheet {
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--wob-c);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
}
.doc-title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; }
.doc-date { margin: 8px 0 28px; color: var(--ink-soft); font-size: .92rem; }
.doc h2 {
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 100, "BNCE" 12;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 36px 0 10px;
}
.doc h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.doc p, .doc li { line-height: 1.65; max-width: 68ch; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc a { color: var(--teal-ink); }
.foot--doc { padding-top: 24px; }

/* ---------- cookie notice ---------- */

.cookie-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob-c);
  transform: rotate(-1deg);
  animation: step-in .45s var(--ease-out) both;
}
.cookie-note p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.cookie-note a { color: var(--ink); }
.btn--small { min-height: 42px; padding: 8px 16px; font-size: 1rem; flex: none; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
@media (max-width: 560px) {
  .cookie-note { left: 12px; right: 12px; max-width: none; transform: none; flex-wrap: wrap; }
}