/* =========================================================
   The Postcard Project — styles
   ========================================================= */

:root {
  --page: #f3ead7;
  --page-deep: #e9dcc0;
  --ink: #3b4a50;
  --ink-soft: #6b7a7d;
  --rose: #b4625d;
  --rose-soft: #e8c4be;
  --sage: #6c8a76;
  --blue: #5c7f8d;
  --mat: #f6f0e2;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(60, 40, 20, .18), 0 14px 30px -10px rgba(60, 40, 20, .45);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --stains: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='900'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .15  0 0 0 1.4 -.72'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--noise), var(--stains);
  background-size: 220px, 900px;
  opacity: .28;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Airmail stripe ---------- */
.airmail-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg,
    #b4625d 0 14px, var(--page) 14px 22px, #5c7f8d 22px 36px, var(--page) 36px 44px);
  background-size: 200% 100%;
  animation: stripe 12s linear infinite;
}
@keyframes stripe { to { background-position: -62px 0; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(243, 234, 215, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 6px 20px -12px rgba(60, 40, 20, .5); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-stamp {
  display: grid; place-items: center;
  width: 36px; height: 42px;
  padding: 4px;
  background: linear-gradient(var(--rose), var(--rose)) content-box, radial-gradient(circle, transparent 3px, var(--rose) 3.5px) -5px -5px / 10px 10px;
  color: #fff; font-size: 16px;
  transform: rotate(-6deg);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.logo:hover .logo-stamp { transform: rotate(8deg) scale(1.1); }
.logo-text { font-family: 'Pinyon Script', cursive; font-size: 1.7rem; line-height: 1; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-links a {
  font-family: 'IM Fell English SC', serif; letter-spacing: .08em;
  text-decoration: none; position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { padding: 6px 16px; border: 1.5px solid var(--rose); color: var(--rose); border-radius: 999px; transition: background .25s, color .25s; }
.nav-cta:hover { background: var(--rose); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--ink); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'IM Fell English SC', serif; font-size: 1.05rem; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(60, 40, 20, .6); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn-primary:hover { background: #a2544f; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--page); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 24px;
  min-height: calc(100svh - 80px);
  padding: 32px clamp(16px, 5vw, 72px) 48px;
  max-width: 1320px; margin: 0 auto;
}
.eyebrow { font-family: 'IM Fell English SC', serif; letter-spacing: .14em; color: var(--ink-soft); margin: 0 0 8px; font-size: .9rem; }
.hero-title { margin: 0; line-height: .9; font-weight: normal; }
.hero-title span { display: block; opacity: 0; transform: translateY(20px); animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.t-the { font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-left: .4em; animation-delay: .15s !important; }
.t-script {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(4.4rem, 11vw, 8.6rem);
  color: var(--rose);
  margin: -.05em 0 .05em -.04em;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, .5);
  animation-delay: .3s !important;
}
.t-project { font-family: 'IM Fell English SC', serif; font-size: clamp(1.3rem, 2.8vw, 2.1rem); letter-spacing: .32em; color: var(--blue); animation-delay: .45s !important; }
@keyframes rise { to { opacity: 1; transform: none; } }

.flourish { width: min(300px, 80%); margin: 18px 0 10px; opacity: 0; animation: rise .8s .6s forwards; }
.flourish svg { width: 100%; overflow: visible; }
.flourish path { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.flourish .fill { fill: var(--rose); stroke: none; }

.hand-quote { font-family: 'Caveat', cursive; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; max-width: 30ch; margin: 6px 0 28px; color: var(--ink); min-height: 2.5em; }
.hand-quote .ch { opacity: 0; filter: blur(3px); display: inline-block; transform: translateY(3px); transition: opacity .3s, filter .3s, transform .3s; white-space: pre; }
.hand-quote .ch.on { opacity: 1; filter: none; transform: none; }
.hero-info { display: grid; gap: 2px; margin: -14px 0 26px; opacity: 0; animation: rise .8s 1s forwards; }
.hero-count { font-family: 'IM Fell English SC', serif; letter-spacing: .1em; font-size: 1.05rem; color: var(--rose); }
.hero-count b { font-family: 'Pinyon Script', cursive; font-weight: normal; font-size: 2rem; color: var(--rose); letter-spacing: 0; margin-right: 4px; vertical-align: -.12em; }
.hero-cats { font-style: italic; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: rise .8s 1.1s forwards; }

.hero-stack { position: relative; height: min(640px, 70vw); min-height: 460px; }
.hero-card {
  position: absolute;
  width: 44%;
  opacity: 0;
  transition: translate .35s ease-out;
}
.hero-card.landed { animation: dropIn 1s cubic-bezier(.2, .9, .25, 1.15) forwards; }
@keyframes dropIn {
  0%   { opacity: 0; transform: translate(var(--fx, 0), -120vh) rotate(calc(var(--r) * 4)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
}
.hero-card .bob { animation: bob 6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(.6deg); } }
.hero-card .postcard.swap-out { animation: swapOut .45s ease-in forwards; }
.hero-card .postcard.swap-in { animation: swapIn .6s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes swapOut { to { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.92); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(-70px) rotate(-7deg) scale(1.04); } }
.hero-stack.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translate(2px, 3px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(1px, 2px); } }

.rubber-stamp {
  position: absolute;
  right: clamp(16px, 6vw, 90px); bottom: 7%;
  width: 150px; height: 150px; border-radius: 50%;
  border: 4px double rgba(180, 98, 93, .85);
  color: rgba(180, 98, 93, .9);
  display: grid; place-content: center; text-align: center;
  font-family: 'IM Fell English SC', serif; letter-spacing: .12em; line-height: 1.1;
  transform: rotate(-16deg) scale(3); opacity: 0;
  mix-blend-mode: multiply;
  -webkit-mask: var(--noise) 0 0 / 90px, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-out;
  mask: var(--noise) 0 0 / 90px exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 3;
}
.rubber-stamp strong { font-size: 2.4rem; letter-spacing: .05em; }
.rubber-stamp span { font-size: .8rem; }
.rubber-stamp.thump { animation: thump .45s cubic-bezier(.5, 0, .7, 1.4) forwards; }
@keyframes thump { to { transform: rotate(-16deg) scale(1); opacity: 1; } }

/* ---------- Ribbon ---------- */
.ribbon {
  background: var(--ink);
  color: var(--page);
  overflow: hidden;
  padding: 12px 0;
  transform: rotate(-1.2deg);
  margin: 20px -20px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}
.ribbon-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ribbon-track span { font-family: 'IM Fell English SC', serif; letter-spacing: .25em; white-space: nowrap; padding: 0 22px; }
.ribbon-track span.heart { color: var(--rose-soft); padding: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 96px clamp(16px, 5vw, 72px); max-width: 1320px; margin: 0 auto; }
.section-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: 'Pinyon Script', cursive; font-weight: normal;
  font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0; text-align: center; line-height: 1.1;
}
.section-title::before, .section-title::after { content: ""; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--ink-soft)); }
.section-title::after { transform: scaleX(-1); }
.section-sub { text-align: center; font-style: italic; color: var(--ink-soft); margin: 4px auto 40px; max-width: 46ch; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- How it works ---------- */
.invite { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.invite-eyebrow { font-family: 'IM Fell English SC', serif; letter-spacing: .14em; color: var(--ink); margin: 0 0 6px; font-size: .95rem; }
.invite-title { font-family: 'Pinyon Script', cursive; font-weight: normal; color: var(--rose); font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 1.1; margin: 0 0 12px; }
.invite-text { font-style: italic; color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.invite-btn { margin-top: 22px; }
.invite-arrow { width: 26px; margin: 18px auto 0; color: var(--ink-soft); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.step { text-align: center; padding: 0 12px; }
.step:nth-child(2) { --d: .12s; }
.step:nth-child(3) { --d: .24s; }
.step-stamp {
  width: 112px; height: 132px; margin: 0 auto 18px;
  padding: 8px;
  background: radial-gradient(circle, transparent 4px, var(--mat) 4.5px) -6px -6px / 12px 12px;
  filter: drop-shadow(0 6px 10px rgba(60, 40, 20, .25));
  transform: rotate(-4deg);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.step:nth-child(2) .step-stamp { transform: rotate(3deg); }
.step:hover .step-stamp { transform: rotate(0) scale(1.08); }
.step-stamp span {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: 'Pinyon Script', cursive; font-size: 4.2rem; color: #fff;
  background: var(--blue);
}
.step:nth-child(2) .step-stamp span { background: var(--rose); }
.step:nth-child(3) .step-stamp span { background: var(--sage); }
.step h3 { font-family: 'IM Fell English SC', serif; font-weight: normal; letter-spacing: .1em; font-size: 1.35rem; margin: 0 0 6px; }
.step p { margin: 0 auto; max-width: 28ch; color: var(--ink-soft); font-style: italic; }

/* ---------- Gallery search ---------- */
.search-wrap { overflow-anchor: none; margin-top: 64px; padding-top: 36px; border-top: 1px dashed rgba(59, 74, 80, .3); text-align: center; }
.search-lead { font-family: 'Pinyon Script', cursive; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--rose); margin: 0 0 14px; }
.search { position: relative; max-width: 460px; margin: 0 auto 12px; }
.search input {
  width: 100%; padding: 12px 44px 10px 44px;
  font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--ink);
  background: rgba(251, 246, 234, .7); border: 1.5px solid rgba(59, 74, 80, .3); border-radius: 999px;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--ink-soft); opacity: .7; }
.search input:focus { border-color: var(--rose); background: #fbf6ea; box-shadow: 0 6px 18px -10px rgba(180, 98, 93, .6); }
.search-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1rem; cursor: pointer; }
.search-clear:hover { background: rgba(59, 74, 80, .1); color: var(--ink); }
.search-try { text-align: center; margin: 0; font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.search-try button { font-family: 'Caveat', cursive; font-size: 1.25rem; color: var(--rose); background: none; border: 0; padding: 0 6px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.search-try button:hover { color: var(--ink); }
/* order form: business category chips */
.cat-field { border: 0; padding: 0; margin: 0; }
.cat-field legend { display: block; margin-bottom: 8px; }
.cat-field legend small { font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; text-transform: none; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { position: relative; display: inline-block !important; cursor: pointer; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat-chip span { display: inline-block; padding: 4px 12px; border: 1.5px dashed rgba(59, 74, 80, .35); border-radius: 999px; font-family: 'IM Fell English', serif; letter-spacing: 0; font-size: .9rem; color: var(--ink); transition: all .2s; }
.cat-chip:hover span { border-color: var(--ink-soft); }
.cat-chip input:checked + span { background: var(--rose); border: 1.5px solid var(--rose); color: #fff; }
.cat-chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.search-found { margin-top: 14px; font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.search-found:hover { color: var(--rose); }
.no-results { text-align: center; font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--ink-soft); margin: 10px 0 0; }

/* ---------- Gallery ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 48px 36px; }
.g-item { cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.g-item:hover { transform: rotate(0) translateY(-6px); z-index: 2; }
.g-item.hide { display: none; }
.g-item.pop { animation: popIn .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d, 0s); }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.9) rotate(var(--r)); } }
.g-cap { text-align: center; margin-top: 14px; }
.g-cap b { display: block; font-family: 'IM Fell English SC', serif; font-weight: normal; letter-spacing: .06em; }
.g-cap span { font-style: italic; color: var(--ink-soft); font-size: .92rem; }
/* "this spot could be yours" placeholder */
.g-slot { display: block; text-decoration: none; color: inherit; }
.slot-card {
  aspect-ratio: 2 / 3; border-radius: var(--radius);
  border: 2px dashed rgba(59, 74, 80, .35); background: rgba(251, 246, 234, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; transition: background .3s, border-color .3s, transform .3s;
}
.g-slot:hover .slot-card { background: #fbf6ea; border-color: var(--rose); }
.slot-stamp {
  width: 64px; height: 76px; display: grid; place-items: center; font-size: 1.6rem; color: var(--rose);
  border: 2px dashed rgba(180, 98, 93, .5); border-radius: 4px; transform: rotate(-6deg);
}
.slot-title { font-family: 'Pinyon Script', cursive; font-size: 2rem; line-height: 1.1; color: var(--ink); }
.slot-text { font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.slot-cta { font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--rose); text-decoration: underline dotted; text-underline-offset: 4px; }
.g-new { position: absolute; top: -10px; right: -10px; z-index: 5; background: var(--rose); color: #fff; font-family: 'Caveat', cursive; font-size: 1.2rem; padding: 2px 12px; border-radius: 999px; transform: rotate(10deg); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }

/* tilt + glare */
.tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s ease-out; transform-style: preserve-3d; }
.tilt.active { transition: transform .08s linear; }
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), transparent 55%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.tilt.active::after { opacity: 1; }

/* ---------- Style rail ---------- */
.style-rail {
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 24px 8px 36px; margin: 0 -8px;
  scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent;
}
.style-item { flex: 0 0 220px; scroll-snap-align: center; text-align: center; }
.style-item .postcard { transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.style-item:hover .postcard { transform: translateY(-8px) rotate(-1.5deg); }
.style-item h4 { font-family: 'IM Fell English SC', serif; font-weight: normal; letter-spacing: .08em; margin: 16px 0 8px; font-size: 1.1rem; }
.style-item button { font-size: .9rem; padding: 6px 16px; }
.rail-hint { text-align: center; font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--ink-soft); }

/* ---------- Request ---------- */
.request-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.letter {
  background:
    linear-gradient(90deg, transparent 52px, rgba(180, 98, 93, .35) 52px 53.5px, transparent 53.5px),
    repeating-linear-gradient(transparent 0 35px, rgba(92, 127, 141, .22) 35px 36px),
    #fbf6ea;
  padding: 36px 36px 36px 74px;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  transform: rotate(-.6deg);
  display: grid; gap: 18px;
}
.letter-head { display: flex; justify-content: space-between; font-family: 'IM Fell English SC', serif; letter-spacing: .08em; color: var(--ink-soft); font-size: .9rem; }
.letter label, .letter legend { display: grid; gap: 2px; font-family: 'IM Fell English SC', serif; letter-spacing: .06em; font-size: .92rem; color: var(--ink-soft); }
.letter input, .letter select {
  font-family: 'Caveat', cursive; font-size: 1.55rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px dashed rgba(59, 74, 80, .35);
  padding: 2px 4px; outline: none; width: 100%; transition: border-color .2s;
}
.letter select { cursor: pointer; }
.letter textarea {
  overflow: hidden; /* grows instead of scrolling */
  font-family: 'Caveat', cursive; font-size: 1.45rem; line-height: 1.25; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px dashed rgba(59, 74, 80, .35);
  padding: 2px 4px; outline: none; width: 100%; resize: none;
}
.letter textarea:focus { border-bottom: 1.5px solid var(--rose); }
.letter textarea::placeholder, .letter input::placeholder { color: var(--ink-soft); opacity: .6; }
.optional { font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; text-transform: none; }
.field-note { font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; font-size: .8rem; line-height: 1.3; margin-top: 4px; }
.letter label[hidden] { display: none; }
.check-row { display: flex !important; align-items: center; gap: 10px !important; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { flex: 0 0 22px; height: 22px; border: 1.5px solid var(--ink-soft); border-radius: 4px; background: #fffaf0; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check-row input:checked + .check-box { background: var(--rose); border-color: var(--rose); }
.check-row input:checked + .check-box::after { content: "✓"; color: #fff; font-size: 15px; line-height: 1; }
.check-row input:focus-visible + .check-box { outline: 2px solid var(--rose); outline-offset: 2px; }
.check-text { font-family: 'Caveat', cursive; font-size: 1.45rem; letter-spacing: 0; color: var(--ink); }
.check-text small { display: block; font-size: .8rem; }
.char-count { justify-self: end; font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; font-size: .8rem; }
.flip-preview { display: block; margin: 14px auto 0; font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--rose); background: none; border: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.flip-preview:hover { color: var(--ink); }
.letter input:focus, .letter select:focus { border-bottom: 1.5px solid var(--rose); }
.prices-field { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.price-row { display: grid; grid-template-columns: 1fr 90px; gap: 16px; }
.item-rows { display: grid; gap: 4px; }
.item-row { grid-template-columns: 1fr 80px 28px; gap: 12px; align-items: end; }
.row-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; font-size: .9rem; }
.row-x:hover { background: rgba(59, 74, 80, .1); color: var(--rose); }
.add-item { justify-self: start; margin-top: 8px; padding: 4px 14px; border: 1.5px dashed rgba(59, 74, 80, .4); border-radius: 999px; background: none; font-family: 'Caveat', cursive; font-size: 1.25rem; color: var(--rose); cursor: pointer; }
.add-item:hover { background: rgba(255, 255, 255, .6); border-color: var(--rose); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.file-label { position: relative; }
.file-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-btn { display: inline-block; width: max-content; margin-top: 6px; padding: 6px 16px; border: 1.5px dashed var(--ink-soft); border-radius: 999px; cursor: pointer; color: var(--ink); font-family: 'IM Fell English', serif; letter-spacing: 0; transition: background .2s; }
.file-btn:hover { background: rgba(255, 255, 255, .6); }
.file-label input:focus-visible + .file-btn { outline: 2px solid var(--rose); }
.file-name { font-family: 'Caveat', cursive; font-size: 1.2rem; letter-spacing: 0; }
/* photo picker */
.pro-tip {
  position: relative; margin: 0 0 4px; padding: 10px 14px 10px 16px;
  background: #fdf3e6; border-left: 3px solid var(--rose); border-radius: 4px;
  font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.25; color: var(--ink);
  box-shadow: 0 4px 10px -8px rgba(60, 40, 20, .5); transform: rotate(-.6deg);
  transition: background .3s, border-color .3s;
}
.pro-tip b { font-weight: 700; color: var(--rose); }
.pro-tip.nudge { animation: nudgeTip .6s; }
@keyframes nudgeTip { 20%, 60% { transform: rotate(-.6deg) translateX(-6px); } 40%, 80% { transform: rotate(-.6deg) translateX(6px); } }
.pro-tip.done { background: #eef3ea; border-left-color: var(--sage); }
.pro-tip.done b { color: var(--sage); }
.photo-field { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.photo-field legend { display: block; margin-bottom: 8px; }
.place-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  position: relative; display: grid !important; justify-items: center; gap: 6px !important;
  padding: 10px 6px 8px; border: 1.5px dashed rgba(59, 74, 80, .35); border-radius: 10px;
  cursor: pointer; text-align: center; font-size: .8rem !important; line-height: 1.1;
  transition: border-color .2s, background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile svg { width: 38px; height: 57px; fill: rgba(59, 74, 80, .4); }
.tile svg .t-card { fill: #f3ead7; stroke: rgba(59, 74, 80, .45); stroke-width: 1.2; }
.tile svg .t-photo { fill: rgba(92, 127, 141, .55); }
.tile:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.tile:has(input:checked) { border: 1.5px solid var(--rose); background: #fff; color: var(--rose); }
.tile:has(input:checked) svg .t-photo { fill: var(--rose); }
.tile:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.photo-controls { display: grid; gap: 10px; transition: opacity .3s; }
.photo-controls.off { opacity: .35; pointer-events: none; }
.zoom-label { grid-template-columns: auto 1fr; align-items: center; gap: 12px !important; }
.zoom-label input[type=range] { accent-color: var(--rose); border: 0; padding: 0; }
.zoom-label:has(input:disabled) { opacity: .5; }
.photo-hint { margin: 0; font-family: 'Caveat', cursive; font-size: 1.2rem; color: var(--ink-soft); }
.live-card.can-drag .pc-photo-in img { cursor: grab; touch-action: none; }
.live-card.dragging .pc-photo-in img { cursor: grabbing; }
.live-card.can-drag .pc-photo-in { outline: 2px dashed transparent; transition: outline-color .2s; }
.live-card.can-drag .pc-photo-in:hover { outline-color: var(--rose); }

.pay-note { padding: 14px 18px; border: 1.5px dashed var(--rose); border-radius: 8px; background: rgba(253, 243, 230, .75); font-size: .95rem; line-height: 1.45; display: grid; gap: 6px; }
.pay-note p { margin: 0; }
.pay-note b { color: var(--rose); }
.pay-title { font-family: 'IM Fell English SC', serif; letter-spacing: .08em; color: var(--rose); }
.pcl-venmo { margin-top: 2cqw !important; font-family: 'IM Fell English SC', serif; font-size: 3.6cqw; letter-spacing: .05em; }
.pcl-venmo b { font-family: 'Caveat', cursive; font-size: 5.4cqw; color: #8e3b3b; letter-spacing: 0; }
.fine-print { font-size: .85rem; font-style: italic; color: var(--ink-soft); margin: 0; }
.btn-send { justify-self: start; font-size: 1.15rem; }

.live-preview { position: sticky; top: 100px; }
.live-label { text-align: center; font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--rose); margin-bottom: 10px; }
.live-label::after { content: " ↓"; }
.live-card { max-width: 380px; margin: 0 auto; }
.live-card .postcard { animation: none; }
.live-card.bump .postcard { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.02) rotate(.5deg); } }

/* floating mini preview — phones only */
.mini-preview { display: none; }
@media (max-width: 860px) {
  .mini-preview {
    display: block;
    position: fixed; top: 78px; right: 12px; z-index: 45;
    width: 112px;
    opacity: 0; transform: translateY(-16px) scale(.9); pointer-events: none;
    transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1), width .35s ease;
    filter: drop-shadow(0 10px 16px rgba(60, 40, 20, .35));
  }
  .mini-preview.show { opacity: 1; transform: none; pointer-events: auto; }
  .mini-preview.big { width: 210px; }
  .mini-card { max-width: none; margin: 0; transform: rotate(2deg); }
  .mini-toggle {
    position: absolute; left: -12px; bottom: -12px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: var(--rose); color: #fff; font-size: 1rem; cursor: pointer;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5);
  }
}

/* ---------- About ---------- */
/* letter is the same tall 2:3 shape and size as the postcards */
.about-letter {
  position: relative;
  width: min(440px, 100%); aspect-ratio: 4 / 5; margin: 0 auto; /* a bit shorter than the 2:3 postcards now that the letter is shorter */
  display: flex; flex-direction: column;
  background: repeating-linear-gradient(transparent 0 31px, rgba(92, 127, 141, .2) 31px 32px), #fbf6ea;
  background-position: 0 12px; /* puts a paper line just under each line of text */
  padding: 128px 34px 34px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transform: rotate(.8deg);
  font-size: 18px; line-height: 32px;
}
.about-letter p { margin: 0 0 32px; }
.about-greeting, .about-sign { font-family: 'Caveat', cursive; font-size: 1.9rem; }
.about-sign { text-align: right; color: #8e3b3b; margin: 0 !important; }
/* thin swash under the signature that ends in a tiny flower bud */
.sign-wrap { position: relative; display: inline-block; padding-right: 26px; }
.sign-swash { position: absolute; right: -12px; bottom: -15px; width: 200px; height: 31px; overflow: visible; }
.about-stamp {
  position: absolute; top: 20px; right: 26px; z-index: 2;
  width: 72px; padding: 4px;
  background: radial-gradient(circle, transparent 2.5px, #f4ecd9 3px) -4px -4px / 8px 8px;
  transform: rotate(4deg); filter: drop-shadow(0 3px 6px rgba(60, 40, 20, .3));
}
.about-stamp svg { display: block; width: 100%; height: auto; }
.about-postmark { position: absolute; top: 34px; right: 74px; z-index: 3; width: 156px; opacity: .5; transform: rotate(-6deg); mix-blend-mode: multiply; pointer-events: none; }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 40px 16px 60px; color: var(--ink-soft); font-family: 'IM Fell English SC', serif; letter-spacing: .14em; font-size: .9rem; }
.postmark-big { width: 110px; margin: 0 auto 10px; opacity: .6; animation: spin 40s linear infinite; }
.postmark-big circle { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.postmark-big text { fill: var(--ink-soft); font-size: 12px; letter-spacing: .1em; font-family: 'IM Fell English SC', serif; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; visibility: hidden; }
.modal.open { visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40, 34, 28, .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.modal.open .modal-backdrop { opacity: 1; }
.modal-body { position: relative; display: grid; gap: 20px; justify-items: center; opacity: 0; transform: translateY(40px) scale(.92); transition: all .45s cubic-bezier(.3, 1.4, .5, 1); }
.modal.open .modal-body { opacity: 1; transform: none; }
.modal-actions { display: flex; gap: 12px; }
.modal-actions .btn { background: var(--page); }
.flip { width: min(380px, 78vw, calc((100svh - 140px) * 2 / 3)); perspective: 1600px; cursor: pointer; }
.flip-inner { position: relative; transition: transform .9s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* ---------- Envelope ---------- */
.env-stage { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(40, 34, 28, .5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.env-stage.show { opacity: 1; visibility: visible; }
.envelope { position: relative; width: 360px; height: 230px; perspective: 900px; transition: transform 1s cubic-bezier(.6, -.2, .7, .6), opacity 1s; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; }
.env-back { background: #e9dcc0; border-radius: 6px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); }
.env-card { position: absolute; left: 50%; width: 136px; bottom: 6px; translate: -50% -340px; transition: translate .9s cubic-bezier(.5, 0, .3, 1); z-index: 2; }
.env-card.in { translate: -50% 0; }
/* cream envelope: front pocket with the classic V fold */
.env-front {
  z-index: 3;
  background: linear-gradient(165deg, #f8f1e2, #efe5cf);
  clip-path: polygon(0 6%, 50% 66%, 100% 6%, 100% 100%, 0 100%);
  border-radius: 6px;
}
.env-front::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .3; mix-blend-mode: multiply; }
/* faint fold lines from the bottom corners */
.env-front::after { content: ""; position: absolute; inset: 0; opacity: .7;
  background: linear-gradient(to top right, transparent 49.6%, rgba(90, 70, 40, .14) 50%, transparent 50.4%) left bottom / 50% 100% no-repeat,
              linear-gradient(to top left, transparent 49.6%, rgba(90, 70, 40, .14) 50%, transparent 50.4%) right bottom / 50% 100% no-repeat; }
.env-flap {
  height: 70%; z-index: 1;
  background: #efe4cc;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; transform: rotateX(180deg);
  /* the flap swaps in front of the card exactly when it passes straight up (halfway) */
  transition: transform .8s cubic-bezier(.45, 0, .25, 1), z-index 0s .4s, background-color .8s;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12));
  backface-visibility: visible;
}
.envelope:not(.closed) .env-flap { background-color: #e3d6ba; } /* inside of the flap is a touch darker */
.envelope.closed .env-flap { transform: rotateX(0); z-index: 4; }
/* deep red wax seal pressed with a P */
.env-seal {
  position: absolute; left: 50%; top: 68%; z-index: 5;
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
  transform: scale(0);
}
.env-seal svg { display: block; width: 100%; height: 100%; }
/* wax shades are mixed from one color so the seal can match any postcard style */
.envelope { --wax: #8e3b3b; }
.env-seal .wax-light { stop-color: color-mix(in srgb, var(--wax) 62%, white); }
.env-seal .wax-mid { stop-color: var(--wax); }
.env-seal .wax-dark { stop-color: color-mix(in srgb, var(--wax) 62%, black); }
.env-seal .wax-dark-stroke { stroke: color-mix(in srgb, var(--wax) 62%, black); }
.env-seal .wax-light-stroke { stroke: color-mix(in srgb, var(--wax) 62%, white); }
.env-seal .wax-dark-fill { fill: color-mix(in srgb, var(--wax) 55%, black); }
.env-seal .wax-light-fill { fill: color-mix(in srgb, var(--wax) 55%, white); }
.envelope.sealed .env-seal { animation: sealPop .4s cubic-bezier(.3, 1.8, .5, 1) forwards; }
@keyframes sealPop { to { transform: scale(1) rotate(-12deg); } }
.envelope.fly { transform: translate(70vw, -80vh) rotate(-25deg) scale(.3); opacity: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 130;
  translate: -50% 140px;
  background: var(--ink); color: var(--page);
  padding: 14px 24px; border-radius: 12px; max-width: min(92vw, 520px);
  font-style: italic; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
  transition: translate .5s cubic-bezier(.3, 1.4, .5, 1);
}
.toast.show { translate: -50% 0; }

/* =========================================================
   POSTCARD COMPONENT
   Everything sizes off the card's width (cqw) so it scales anywhere.
   ========================================================= */
.postcard {
  --paper: #efe4c9; --ink-c: #4b5c63; --accent: var(--ink-c); --title-font: 'Pinyon Script', cursive;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--paper);
  color: var(--ink-c);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-family: 'IM Fell English', serif;
  user-select: none;
}
.postcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--noise), var(--stains);
  background-size: 160px, 140% 140%;
  background-position: 0 0, var(--stain-pos, 30% 20%);
  mix-blend-mode: multiply;
  opacity: var(--wear, .7);
}
.postcard::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 5cqw rgba(110, 80, 40, calc(var(--wear, .7) * .45)), inset 0 0 1cqw rgba(110, 80, 40, .25);
}
.pc-inner { position: absolute; inset: 6cqw 7cqw 5cqw; z-index: 1; display: flex; flex-direction: column; }

.pc-top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 13cqw; }
.pc-hwl { font-family: 'IM Fell English SC', serif; font-size: 3.4cqw; letter-spacing: .06em; line-height: 1.15; text-align: center; }
.pc-hwl i { display: block; font-style: normal; font-size: 3cqw; margin-top: .6cqw; color: var(--accent); }
.pc-airmail { background: #1d1d1d; color: #f2f0ea; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 3.2cqw; letter-spacing: .08em; padding: .8cqw 2cqw; }
.pc-seal {
  width: 15cqw; height: 15cqw; border-radius: 47% 53% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #eab1b6, var(--accent) 75%);
  box-shadow: inset 0 0 0 1.4cqw rgba(255, 255, 255, .15), 0 .6cqw 1cqw rgba(0, 0, 0, .2);
  display: grid; place-items: center; color: rgba(255, 255, 255, .75); font-size: 7cqw; transform: rotate(-10deg);
}

.pc-by-corner { font-family: 'Caveat', cursive; font-size: 6cqw; line-height: 1; transform: rotate(-7deg) translateY(1cqw); white-space: nowrap; color: var(--accent); }
.pc-by-stamp, .pc-place-stamp {
  border: .5cqw solid currentColor; outline: .3cqw solid currentColor; outline-offset: .8cqw;
  margin: .8cqw .8cqw 0 0;
  padding: 1.2cqw 1.6cqw; text-align: center;
  font-family: 'IM Fell English SC', serif; font-size: 3cqw; line-height: 1.15; letter-spacing: .04em;
  max-width: 26cqw;
}
.pc-by-stamp i { display: block; font-style: normal; font-size: 2.6cqw; color: var(--accent); }
.pc-place-stamp { outline: none; border-width: .35cqw; font-size: 2.4cqw; padding: 2cqw 1.6cqw; min-width: 17cqw; }

.pc-title {
  font-family: var(--title-font); font-weight: normal;
  font-size: var(--title-size, 16cqw);
  line-height: .98; text-align: center;
  margin: 0 0 2.5cqw;
  text-shadow: .25cqw .25cqw 0 rgba(255, 255, 255, .35);
  overflow-wrap: anywhere;
}

.pc-mid { position: relative; flex: 1; display: grid; grid-template-columns: 58% 1fr; align-items: center; gap: 2cqw; min-height: 0; }
.pc-photo {
  --rot: -5deg;
  position: relative;
  transform: rotate(var(--rot));
  filter: drop-shadow(0 .8cqw 1.2cqw rgba(60, 40, 20, .3));
}
.pc-photo-in { aspect-ratio: 1 / 1.08; overflow: hidden; background: linear-gradient(160deg, #e9dfcc, #cdbb9b); display: grid; place-items: center; color: var(--ink-c); }
.pc-photo-in img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.92) contrast(.96); }
.pc-photo-in svg { width: 62%; height: 62%; opacity: .8; }
.pc-side { display: grid; justify-items: center; gap: 2cqw; text-align: center; }
.pc-tag { font-family: 'Caveat', cursive; font-size: 6.4cqw; line-height: 1.02; transform: rotate(-9deg); color: var(--accent); }
.pc-side .d-small { width: 7cqw; height: 7cqw; }
.pc-side .d-med { width: 17cqw; height: 17cqw; }

/* ---------- photo borders: one per style ---------- */
.pc-mid.right .pc-photo { --rot: 5deg; }

/* 1. stamp — the original perforated edge (Dusty Blue) */
.pc-photo.stamp {
  padding: 2.6cqw;
  background: radial-gradient(circle, transparent 1.15cqw, var(--mat) 1.25cqw) -2cqw -2cqw / 4cqw 4cqw;
}

/* 2. scrapbook photo corners (Rose Garden) */
.pc-photo.corners { --rot: -3deg; background: var(--mat); padding: 2.2cqw; }
.pc-mid.right .pc-photo.corners { --rot: 3deg; }
.pc-photo.corners::after {
  content: ""; position: absolute; inset: -1cqw; pointer-events: none;
  --c: color-mix(in srgb, var(--ink-c) 85%, black);
  background:
    linear-gradient(135deg, var(--c) 50%, transparent 50%) top left / 8cqw 8cqw no-repeat,
    linear-gradient(225deg, var(--c) 50%, transparent 50%) top right / 8cqw 8cqw no-repeat,
    linear-gradient(45deg, var(--c) 50%, transparent 50%) bottom left / 8cqw 8cqw no-repeat,
    linear-gradient(315deg, var(--c) 50%, transparent 50%) bottom right / 8cqw 8cqw no-repeat;
  opacity: .9;
}

/* 3. ornate double frame with flower corners (Aged Cream) */
.pc-photo.ornate { --rot: 0deg; padding: 1.4cqw; border: .5cqw double currentColor; filter: none; }
.pc-photo.ornate::before, .pc-photo.ornate::after { content: "✿"; position: absolute; top: -3.4cqw; font-size: 4cqw; line-height: 1.2; background: var(--paper-solid, var(--paper)); padding: 0 1cqw; }
.pc-photo.ornate::before { left: -2.8cqw; }
.pc-photo.ornate::after { right: -2.8cqw; }

/* 4. clean edges with a torn bottom-right corner (Red Ink) */
.pc-photo.deckle {
  --rot: -4deg; padding: 2.4cqw;
  background: #f8f1e1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 98.36% 81.78%, 96.43% 83.26%, 93.81% 84.02%, 93.04% 86.71%, 91.23% 88.32%, 89.39% 89.89%, 88.45% 92.4%, 85.99% 93.32%, 83.96% 94.7%, 82.14% 96.29%, 81.65% 99.27%, 79% 100%, 0% 100%);
}
.pc-photo.deckle .pc-photo-in { clip-path: polygon(0% 0%, 100% 0%, 100% 74%, 96.57% 74.98%, 94.7% 77.65%, 91.99% 79.41%, 91.26% 83.3%, 88.1% 84.58%, 86.11% 87.12%, 83.59% 89.08%, 81.86% 91.9%, 79.8% 94.36%, 76.75% 95.75%, 75.05% 98.61%, 72% 100%, 0% 100%); }
.pc-mid.right .pc-photo.deckle { --rot: 4deg; }

/* 5. instant-camera print in deep sea blue with a heart caption (Seaside Sage) */
.pc-photo.polaroid { --rot: -6deg; background: color-mix(in srgb, var(--ink-c) 78%, #10222a); padding: 2cqw 2cqw 8.5cqw; }
/* "fading tide": three rows of waves, each fainter than the last */
.pc-photo.polaroid::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 1cqw; height: 7cqw;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'><path d='M0 6q5-5 10 0t10 0' fill='none' stroke='%237c9ba0' stroke-opacity='1' stroke-width='1.4'/></svg>") 0 0 / 4.4cqw 2.2cqw repeat-x,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'><path d='M0 6q5-5 10 0t10 0' fill='none' stroke='%237c9ba0' stroke-opacity='0.6' stroke-width='1.4'/></svg>") 2.2cqw 2.4cqw / 4.4cqw 2.2cqw repeat-x,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'><path d='M0 6q5-5 10 0t10 0' fill='none' stroke='%237c9ba0' stroke-opacity='0.3' stroke-width='1.4'/></svg>") 0 4.8cqw / 4.4cqw 2.2cqw repeat-x;
}
.pc-photo.polaroid .pc-photo-in { aspect-ratio: 1; box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .25); }
.pc-mid.right .pc-photo.polaroid { --rot: 6deg; }

/* 6. washi tape at the top corners (Faded Sky) */
.pc-photo.tape { --rot: -2deg; background: var(--mat); padding: 1.6cqw; }
.pc-photo.tape::before, .pc-photo.tape::after {
  content: ""; position: absolute; top: -1.6cqw; width: 15cqw; height: 4.6cqw;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, #e9d7a8 70%, var(--accent)) 0 1.4cqw, color-mix(in srgb, #f3e6c2 75%, var(--accent)) 1.4cqw 2.8cqw);
  opacity: .9; box-shadow: 0 .3cqw .6cqw rgba(60, 40, 20, .15);
}
.pc-photo.tape::before { left: -5cqw; transform: rotate(-38deg); }
.pc-photo.tape::after { right: -5cqw; transform: rotate(38deg); }
.pc-mid.right .pc-photo.tape { --rot: 2deg; }

/* 7. arched window (Lovely Days) */
.pc-photo.arch {
  --rot: 0deg; padding: 1.6cqw; background: var(--mat);
  border: .35cqw solid var(--accent);
  border-radius: 50% 50% .6cqw .6cqw / 32% 32% .6cqw .6cqw;
  outline: .25cqw solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1cqw;
}
.pc-photo.arch .pc-photo-in { border-radius: 50% 50% 0 0 / 30% 30% 0 0; aspect-ratio: 1 / 1.2; }

/* 8. oval cameo (Antique Parlor) */
.pc-photo.oval { --rot: 0deg; padding: 1.8cqw; border-radius: 50%; border: .7cqw double currentColor; background: var(--mat); }
.pc-photo.oval .pc-photo-in { border-radius: 50%; aspect-ratio: 1 / 1.2; }

/* 9. tied with a ribbon bow (Blush Letter) */
.pc-photo.tied { --rot: -2deg; background: var(--mat); padding: 1.8cqw; border: .3cqw solid color-mix(in srgb, var(--accent) 60%, transparent); }
.pc-bow { position: absolute; z-index: 2; left: 50%; top: -9cqw; width: 21cqw; height: 21cqw; transform: translateX(-50%); color: var(--accent); }
.pc-bow svg { width: 100%; height: 100%; display: block; fill: color-mix(in srgb, var(--accent) 30%, var(--paper-solid, #fff)); }
.pc-mid.right .pc-photo.tied { --rot: 2deg; }

/* 10. pinned to the board (Spring Green) */
.pc-photo.pin { --rot: 3deg; background: var(--mat); padding: 1.8cqw; }
.pc-pin {
  position: absolute; z-index: 2; left: 50%; top: -1.8cqw; width: 5.6cqw; height: 5.6cqw; margin-left: -2.8cqw; border-radius: 50%;
  /* matte pin: soft shading, no bright glare */
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 80%, white) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 75%, black) 100%);
  box-shadow: .4cqw .7cqw .8cqw rgba(0, 0, 0, .25);
}
.pc-mid.right .pc-photo.pin { --rot: -3deg; }

/* 11. airmail envelope stripes (By Air Mail) */
.pc-photo.airmail {
  --rot: -3deg; padding: 2.2cqw;
  background: repeating-linear-gradient(-45deg, #b8443a 0 2.2cqw, #f6f3ee 2.2cqw 3.6cqw, #2d4f86 3.6cqw 5.8cqw, #f6f3ee 5.8cqw 7.2cqw);
}
.pc-photo.airmail .pc-photo-in { outline: .9cqw solid #f6f3ee; }
.pc-mid.right .pc-photo.airmail { --rot: 3deg; }

/* 12. ticket stub with notched sides (Midnight Navy) */
.pc-photo.ticket {
  --rot: -3deg; padding: 2.4cqw; background: #f3e9d2;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.6cqw, #000 2.7cqw) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 2.6cqw, #000 2.7cqw) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 2.6cqw, #000 2.7cqw) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 2.6cqw, #000 2.7cqw) right / 51% 100% no-repeat;
}
.pc-photo.ticket::after { content: ""; position: absolute; inset: 1.1cqw; border: .35cqw dashed var(--accent); pointer-events: none; }
.pc-mid.right .pc-photo.ticket { --rot: 3deg; }

/* 13. thick badge frame with corner rivets (Forest Ranger) */
.pc-photo.badge { --rot: 0deg; padding: 1.4cqw; background: #f1e6cc; border: 1cqw solid var(--accent); }
.pc-photo.badge::after {
  content: ""; position: absolute; inset: -.4cqw; pointer-events: none;
  background:
    radial-gradient(circle, var(--photo-ink) 0 1cqw, color-mix(in srgb, var(--accent) 60%, white) 1.05cqw 1.3cqw, transparent 1.35cqw) 0 0 / 3cqw 3cqw no-repeat,
    radial-gradient(circle, var(--photo-ink) 0 1cqw, color-mix(in srgb, var(--accent) 60%, white) 1.05cqw 1.3cqw, transparent 1.35cqw) 100% 0 / 3cqw 3cqw no-repeat,
    radial-gradient(circle, var(--photo-ink) 0 1cqw, color-mix(in srgb, var(--accent) 60%, white) 1.05cqw 1.3cqw, transparent 1.35cqw) 0 100% / 3cqw 3cqw no-repeat,
    radial-gradient(circle, var(--photo-ink) 0 1cqw, color-mix(in srgb, var(--accent) 60%, white) 1.05cqw 1.3cqw, transparent 1.35cqw) 100% 100% / 3cqw 3cqw no-repeat;
}

/* 14. two-stripe varsity trim (Varsity) */
.pc-photo.varsity { --rot: -3deg; padding: .9cqw; background: var(--ink-c); border: 1.3cqw solid var(--accent); }
.pc-mid.right .pc-photo.varsity { --rot: 3deg; }

/* dark papers: lighter wear, darker title shadow, light photo placeholder */
.postcard.dark .pc-title { text-shadow: .3cqw .3cqw 0 rgba(0, 0, 0, .35); }
.postcard.dark::after { box-shadow: inset 0 0 5cqw rgba(0, 0, 0, .35), inset 0 0 1cqw rgba(0, 0, 0, .3); }
/* aged look for dark paper: the normal stains darken, which disappears on navy/green,
   so lighten instead with faded blotches, speckles and sun-worn edges */
.postcard.dark::before {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(236, 222, 190, .16), transparent 45%),
    radial-gradient(ellipse at 80% 72%, rgba(236, 222, 190, .12), transparent 50%),
    var(--stains), var(--noise);
  background-size: auto, auto, 140% 140%, 160px;
  background-position: 0 0, 0 0, var(--stain-pos, 30% 20%), 0 0;
  mix-blend-mode: screen;
  opacity: .42;
}
.postcard.dark .pc-inner::before {
  content: ""; position: absolute; inset: -7cqw; pointer-events: none; z-index: -1;
  box-shadow: inset 0 0 3.5cqw rgba(225, 205, 165, .22);   /* faded, rubbed edges */
}
.pc-photo-in { color: var(--photo-ink, var(--ink-c)); }

/* ---------- "pre-orders available" mark (matches each style) ---------- */
.pc-photo-wrap { position: relative; min-width: 0; }
.po { position: absolute; z-index: 4; right: -5cqw; bottom: -4cqw; pointer-events: none; text-align: center; line-height: 1.05; }
.pc-mid.right .po { right: auto; left: -5cqw; }
.pc-mid.framed .po { right: 4cqw; bottom: -5cqw; }
.pc-mid.nophoto .po { right: 0; top: 0; bottom: auto; }
/* rubber ink stamp */
.po-stamp {
  width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-content: center; gap: .6cqw;
  border: .6cqw double var(--accent); color: var(--accent); background: color-mix(in srgb, var(--paper-solid, #f4ecd9) 70%, transparent);
  font-family: 'IM Fell English SC', serif; transform: rotate(-14deg);
  box-shadow: inset 0 0 0 .3cqw color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: .92;
}
.po-stamp span { font-size: 2.5cqw; letter-spacing: .06em; }
.po-stamp b { font-family: 'Caveat', cursive; font-size: 4.6cqw; font-weight: 700; }
/* airmail label */
.po-label { padding: 1cqw 2.4cqw; background: #1d1d1d; color: #f2f0ea; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.8cqw; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .25); }
/* varsity pennant */
.po-pennant { width: 40cqw; height: 14cqw; background: var(--accent); border-left: 1.4cqw solid var(--ink-c); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: rotate(-12deg); display: flex; align-items: center; padding-left: 2cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .25)); }
.po-pennant span { font-family: 'Graduate', serif; font-size: 3cqw; color: #f4ecd9; white-space: nowrap; }
/* round badge (dark styles + Lovely Days) */
.po-badge {
  width: 21cqw; height: 21cqw; border-radius: 50%; display: grid; place-content: center; gap: .4cqw;
  background: var(--accent); color: var(--photo-ink, #fff); box-shadow: inset 0 0 0 1cqw var(--accent), inset 0 0 0 1.3cqw rgba(255, 255, 255, .55), 0 .8cqw 1.4cqw rgba(0, 0, 0, .3);
  font-family: 'IM Fell English SC', serif; transform: rotate(-10deg);
}
.po-badge span { font-size: 2.6cqw; letter-spacing: .06em; }
.po-badge b { font-family: 'Caveat', cursive; font-size: 4.4cqw; font-weight: 700; }
.t-linen .po-badge { color: #fff; }

/* photo on the right */
.pc-mid.right { grid-template-columns: 1fr 58%; }
.pc-mid.right .pc-tag { transform: rotate(7deg); }

/* no photo: tagline takes center stage */
.pc-mid.nophoto { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; gap: 3cqw; }
.pc-mid.nophoto .pc-tag { font-size: 10cqw; line-height: 1.05; transform: rotate(-4deg); max-width: 78cqw; }
.np-rule { font-size: 3.4cqw; letter-spacing: 1.4em; padding-left: 1.4em; color: var(--accent); opacity: .7; }
.np-deco svg { width: 20cqw; height: 20cqw; display: block; color: var(--accent); }

/* big & centered photo (keeps each style's own border) */
.pc-mid.framed { grid-template-columns: 1fr; gap: 2.4cqw; align-content: center; }
.pc-mid.framed .pc-photo { margin: 0 11cqw; --rot: -1.5deg; }
.pc-mid.framed .pc-photo.ornate, .pc-mid.framed .pc-photo.arch, .pc-mid.framed .pc-photo.oval { --rot: 0deg; }
.pc-mid.framed .pc-photo-in { aspect-ratio: 1.5; }
.pc-mid.framed .pc-photo.oval { margin: 0 16cqw; }
.pc-mid.framed .pc-photo.oval .pc-photo-in, .pc-mid.framed .pc-photo.arch .pc-photo-in { aspect-ratio: 1.25; }
.pc-mid.framed .pc-tag { transform: none; font-family: 'IM Fell English', serif; font-style: italic; font-size: 4.6cqw; }

.pc-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; margin-top: 3cqw; }
.pc-prices h4 { font-family: 'IM Fell English SC', serif; font-weight: normal; font-size: 5cqw; letter-spacing: .08em; margin: 0 0 .8cqw; }
.pc-prices ul { list-style: none; margin: 0; padding: 0; }
.pc-prices li { font-style: italic; font-size: 4.3cqw; line-height: 1.38; white-space: nowrap; }
/* more items: slightly smaller lines so they still fit */
.pc-prices[data-n="4"] li { font-size: 3.9cqw; line-height: 1.3; }
.pc-prices[data-n="5"] li { font-size: 3.6cqw; line-height: 1.25; }
.pc-prices[data-n="4"] h4, .pc-prices[data-n="5"] h4 { font-size: 4.4cqw; margin-bottom: .4cqw; }
.pc-prices li::before { content: "♥"; font-style: normal; margin-right: 1.6cqw; font-size: 3.4cqw; color: var(--accent); }
.pc-deco { flex: 0 0 auto; }
.pc-deco svg { width: 19cqw; height: 19cqw; display: block; }

.pc-foot { margin-top: 2.6cqw; text-align: center; }
.pc-rule { height: .3cqw; background: currentColor; opacity: .5; position: relative; margin: 0 2cqw 2cqw; }
.pc-rule::after { content: "◆"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: 2.4cqw; background: transparent; color: var(--accent); }
.pc-words { font-family: 'IM Fell English SC', serif; font-size: 3.3cqw; letter-spacing: .2em; white-space: nowrap; }
.pc-by-banner { display: inline-block; margin-top: 2cqw; border: .35cqw solid currentColor; border-radius: 99px; padding: .4cqw 4cqw; font-family: 'Caveat', cursive; font-size: 5cqw; color: var(--accent); }
.pc-by-sig { font-family: 'Caveat', cursive; font-size: 7cqw; transform: rotate(-9deg); transform-origin: left; color: var(--accent); margin: 1cqw 0 -1cqw 1cqw; text-align: left; }

.pc-corner { position: absolute; z-index: 0; pointer-events: none; color: var(--ink-c); opacity: .75; }
.pc-corner svg { width: 100%; height: 100%; display: block; }
.pc-corner.flower { left: 0; bottom: 1cqw; width: 12cqw; height: 18cqw; opacity: .5; }
.pc-corner.sprigs { left: 0; right: 0; bottom: 0; height: 14cqw; }
.pc-corner.waves { right: 4cqw; top: 4cqw; width: 26cqw; height: 10cqw; opacity: .55; }
.pc-support { font-family: 'Caveat', cursive; font-size: 4.6cqw; line-height: 1.05; text-align: center; transform: rotate(-10deg); color: var(--accent); padding-bottom: 1cqw; } /* sits where the compass would go on Aged Cream */

/* airmail border */
.pc-airborder {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 2.6cqw;
  background: repeating-linear-gradient(-45deg, #b8443a 0 3cqw, transparent 3cqw 5cqw, #2d4f86 5cqw 8cqw, transparent 8cqw 10cqw);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .85;
}

/* ---------- Letter-style card (Madi's own ad, matches the letter at the bottom) ---------- */
.pc-letter {
  background: repeating-linear-gradient(transparent 0 calc(7cqw - 1px), rgba(92, 127, 141, .22) calc(7cqw - 1px) 7cqw), #fbf6ea;
  background-position: 0 4.6cqw;
}
.pc-letter::before { opacity: .25; }
.pc-letter::after { box-shadow: inset 0 0 4cqw rgba(110, 80, 40, .18); }
.pcl-stamp { position: absolute; top: 5cqw; right: 6cqw; z-index: 2; width: 17cqw; padding: 1cqw;
  background: radial-gradient(circle, transparent .7cqw, #f4ecd9 .8cqw) -1cqw -1cqw / 2cqw 2cqw;
  transform: rotate(4deg); filter: drop-shadow(0 .8cqw 1.4cqw rgba(60, 40, 20, .3)); }
.pcl-stamp svg { display: block; width: 100%; height: auto; }
.pcl-postmark { position: absolute; top: 8.5cqw; right: 18cqw; z-index: 3; width: 38cqw; opacity: .5; transform: rotate(-6deg); mix-blend-mode: multiply; pointer-events: none; }
.pcl-body { position: absolute; inset: 35cqw 8cqw 7cqw; z-index: 1; display: flex; flex-direction: column; color: var(--ink); text-align: left;
  font-size: 4.3cqw; line-height: 7cqw; }
.pcl-body p { margin: 0; }
.pcl-head { font-family: 'Caveat', cursive; font-size: 7.6cqw; line-height: 7cqw; margin-bottom: 7cqw !important; }
.pcl-blurb { margin-bottom: 3.5cqw !important; }
.pcl-prices { list-style: none; margin: 0; padding: 0; font-style: italic; }
.pcl-prices li::before { content: "♥"; font-style: normal; color: #8e3b3b; margin-right: 1.6cqw; font-size: 3.4cqw; }
.pcl-sign { margin-top: auto !important; text-align: right; font-family: 'Caveat', cursive; font-size: 7cqw; color: #8e3b3b; }
.pcl-sign .sign-wrap { padding-right: 6cqw; }
.pcl-sign .sign-swash { right: -3cqw; bottom: -3.4cqw; width: 50cqw; height: 7.8cqw; }

/* ---------- Postcard back ---------- */
.pc-back .pc-inner { inset: 7cqw; }
.pcb-head { text-align: center; }
.pcb-title { font-family: var(--title-font); font-size: 15cqw; line-height: 1; }
.pcb-sub { font-family: 'IM Fell English SC', serif; font-size: 3cqw; letter-spacing: .14em; display: flex; justify-content: space-between; border-top: .3cqw solid currentColor; padding-top: 1.6cqw; margin-top: 1cqw; }
.pcb-msg { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; font-family: 'Caveat', cursive; font-size: 6.4cqw; line-height: 1.2; color: var(--accent); padding: 4cqw 2cqw; }
/* pre-order contact: a bold little tag so it stands out */
.pcb-preorder {
  align-self: flex-start; display: inline-flex; align-items: baseline; gap: 2cqw;
  padding: 1.2cqw 3.4cqw; border: .5cqw solid var(--accent); border-radius: 2cqw;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: 'IM Fell English SC', serif; font-size: 4.2cqw; letter-spacing: .08em; color: var(--ink-c);
  text-shadow: .15cqw 0 0 currentColor;            /* thicker letters */
  transform: rotate(-2deg);
}
.pcb-preorder b { font-family: 'Caveat', cursive; font-weight: 700; font-size: 7cqw; letter-spacing: 0; color: var(--accent); text-shadow: none; }
.pcb-divider { height: .3cqw; background: currentColor; opacity: .6; margin: 0 -1cqw; }
.pcb-addr { flex: 1; position: relative; padding-top: 4cqw; }
.pcb-addr .pc-place-stamp { position: absolute; right: 0; top: 4cqw; }
.pcb-to { font-family: 'IM Fell English SC', serif; font-size: 5cqw; }
.pcb-line { border-bottom: .3cqw solid currentColor; opacity: .55; height: 9cqw; margin-right: 30cqw; }
.pcb-line:nth-of-type(n+3) { margin-right: 0; }
.pcb-line span { font-family: 'Caveat', cursive; font-size: 6cqw; color: var(--accent); }
.pcb-foot { font-family: 'IM Fell English SC', serif; font-size: 2.6cqw; letter-spacing: .14em; text-align: center; opacity: .7; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 24px; }
  .hero-copy { display: grid; justify-items: center; }
  .flourish { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stack { height: 118vw; min-height: 0; max-height: 620px; width: 100%; max-width: 520px; margin: 0 auto; }
  .rubber-stamp { width: 110px; height: 110px; right: 12px; bottom: 2%; }
  .rubber-stamp strong { font-size: 1.7rem; }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .request-wrap { grid-template-columns: 1fr; }
  .live-preview { position: static; order: -1; }
  .live-card { max-width: 300px; }
  .letter { padding: 28px 22px 28px 60px; transform: none; }
  .letter { background: linear-gradient(90deg, transparent 42px, rgba(180, 98, 93, .35) 42px 43.5px, transparent 43.5px), repeating-linear-gradient(transparent 0 35px, rgba(92, 127, 141, .22) 35px 36px), #fbf6ea; }
  .split { grid-template-columns: 1fr; }
  .place-tiles { gap: 8px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 18px; padding: 20px;
    background: var(--page); box-shadow: 0 14px 20px -14px rgba(0, 0, 0, .4);
    clip-path: inset(0 0 100% 0); transition: clip-path .35s ease;
  }
  .nav-links.open { clip-path: inset(0 0 0 0); }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
}

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

/* =========================================================
   APPROVAL DESK (admin.html)
   ========================================================= */
.gate { min-height: calc(100svh - 8px); display: grid; place-items: center; padding: 24px 16px; }
.gate[hidden], .desk[hidden] { display: none; }
.gate-card {
  width: min(380px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: 40px 30px; background: #fbf6ea; box-shadow: var(--shadow-card); border-radius: 6px;
}
.gate-card h1 { font-family: 'Pinyon Script', cursive; font-weight: normal; font-size: 3rem; margin: 0; line-height: 1; }
.gate-card p { margin: 0; font-style: italic; color: var(--ink-soft); }
.gate-card input { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(59, 74, 80, .3); border-radius: 999px; background: #fffaf0; font-family: 'IM Fell English', serif; font-size: 1rem; text-align: center; outline: none; }
.gate-card input:focus { border-color: var(--rose); }
.gate-stamp { width: 56px; height: 66px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; padding: 4px; background: linear-gradient(var(--rose), var(--rose)) content-box, radial-gradient(circle, transparent 3px, var(--rose) 3.5px) -5px -5px / 10px 10px; transform: rotate(-6deg); }
.gate-error { color: var(--rose) !important; font-style: normal !important; }

.desk { max-width: 1100px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 80px; }
.desk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.desk-head h1 { font-family: 'Pinyon Script', cursive; font-weight: normal; font-size: clamp(2.6rem, 6vw, 3.6rem); margin: 0; line-height: 1; }
.desk-head .eyebrow { margin: 0; }
.desk-links { display: flex; gap: 10px; flex-wrap: wrap; }
.desk-links .btn { font-size: .9rem; padding: 8px 16px; }
.desk-note { margin: 20px 0; padding: 12px 16px; border-left: 3px solid var(--rose); background: #fdf3e6; font-size: .92rem; border-radius: 4px; }
.desk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 26px; }
.stat { background: #fbf6ea; box-shadow: var(--shadow-card); border-radius: 6px; padding: 14px; text-align: center; display: grid; }
.stat b { font-family: 'Pinyon Script', cursive; font-weight: normal; font-size: 2.6rem; line-height: 1; color: var(--rose); }
.stat span { font-family: 'IM Fell English SC', serif; letter-spacing: .06em; font-size: .85rem; color: var(--ink-soft); }
.desk-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.desk-tabs .chip[data-count]::after { content: attr(data-count); margin-left: 4px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(59, 74, 80, .12); font-size: .8rem; }
.desk-tabs .chip.active[data-count]::after { background: rgba(255, 255, 255, .25); }

.orders { display: grid; gap: 28px; }
.orders-empty { text-align: center; font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--ink-soft); padding: 40px 0; }
.order { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; padding: 22px; background: rgba(251, 246, 234, .7); border-radius: 8px; box-shadow: 0 10px 26px -18px rgba(60, 40, 20, .6); }
.order-card .flip-preview { margin-top: 10px; }
.order-no { margin: 0; font-family: 'IM Fell English SC', serif; letter-spacing: .08em; font-size: .85rem; color: var(--ink-soft); }
.order-info h2 { margin: 2px 0 0; font-family: 'Pinyon Script', cursive; font-weight: normal; font-size: 2.4rem; line-height: 1.1; }
.order-by { margin: 0 0 12px; font-style: italic; color: var(--ink-soft); }
.order-info dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0 0 18px; font-size: .95rem; }
.order-info dt { font-family: 'IM Fell English SC', serif; letter-spacing: .06em; color: var(--ink-soft); }
.order-info dd { margin: 0; }
.order-info dd b { color: var(--rose); }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-actions .btn { font-size: .95rem; padding: 9px 18px; }
.btn.danger { color: #9b2f2f; border-color: #9b2f2f; }
.btn.danger:hover { background: #9b2f2f; color: #fff; }
@media (max-width: 700px) {
  .order { grid-template-columns: 1fr; }
  .order-card { max-width: 280px; margin: 0 auto; }
  .desk-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stat b { font-size: 2rem; }
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid rgba(59, 74, 80, .35); background: rgba(255, 255, 255, .35);
  font-family: 'IM Fell English SC', serif; font-size: .95rem; letter-spacing: .05em; color: var(--ink);
  cursor: pointer; transition: all .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--page); border-color: var(--ink); }

/* phones: smaller writing so the letter keeps the postcard shape */
@media (max-width: 480px) {
  .about-letter { font-size: 14.5px; line-height: 25px; padding: 96px 24px 26px;
    background-image: repeating-linear-gradient(transparent 0 24px, rgba(92, 127, 141, .2) 24px 25px); background-position: 0 9px; }
  .about-letter p { margin-bottom: 25px; }
  .about-greeting, .about-sign { font-size: 1.55rem; }
  .about-sign { margin-top: auto !important; } /* signature sits at the bottom of the card */
  .about-stamp { width: 58px; top: 14px; right: 18px; }
  .about-postmark { width: 124px; top: 24px; right: 56px; }
  .about-letter .sign-swash { width: 170px; height: 26px; bottom: -12px; }
}

/* ---------- order form: optional item descriptions ---------- */
.item-row .desc-toggle, .item-row .item-desc { grid-column: 1 / -1; }
.desc-toggle { justify-self: start; margin: -2px 0 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: 'Caveat', cursive; font-size: 1.1rem; color: var(--ink-soft); text-decoration: underline dotted; text-underline-offset: 3px; }
.desc-toggle:hover { color: var(--rose); }
.letter input.item-desc { font-size: 1.2rem; margin: -2px 0 8px; }
.item-desc[hidden], .desc-toggle[hidden] { display: none; }
.desk-desc { color: var(--ink-soft); font-size: .88rem; }

/* ---------- "More details" page in the postcard viewer ---------- */
.details { width: min(440px, 88vw); max-height: calc(100svh - 140px); overflow-y: auto; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.details[hidden], .modal-actions .btn[hidden], .flip[hidden] { display: none; }
.dt-card {
  position: relative; container-type: inline-size; padding: 9cqw 8cqw 8cqw;
  background: var(--paper); color: var(--ink-c); text-align: center; font-family: 'IM Fell English', serif;
}
.dt-card::before { content: ""; position: absolute; inset: 0; background: var(--noise), var(--stains); background-size: 160px, 140% 140%; mix-blend-mode: multiply; opacity: var(--wear, .7); pointer-events: none; }
.dt-card.dark::before { mix-blend-mode: screen; opacity: .35; }
.dt-card::after { content: ""; position: absolute; inset: 3cqw; border: .4cqw double currentColor; opacity: .55; pointer-events: none; }
.dt-card > * { position: relative; }
.dt-eyebrow { margin: 0; font-family: 'IM Fell English SC', serif; font-size: 3.2cqw; letter-spacing: .14em; opacity: .8; }
.dt-title { margin: 1cqw 0 0; font-family: var(--title-font); font-weight: normal; font-size: 12cqw; line-height: 1.05; }
.dt-by { margin: 0; font-family: 'Caveat', cursive; font-size: 6cqw; color: var(--accent); }
.dt-tag { margin: 2cqw 0 0; font-style: italic; font-size: 4.4cqw; }
.dt-section { margin-top: 6cqw; }
.dt-section h4 { display: flex; align-items: center; gap: 3cqw; margin: 0 0 3cqw; font-family: 'IM Fell English SC', serif; font-weight: normal; font-size: 4.6cqw; letter-spacing: .14em; }
.dt-section h4::before, .dt-section h4::after { content: ""; flex: 1; height: .3cqw; background: currentColor; opacity: .4; }
.dt-about { margin: 0; font-size: 4.4cqw; line-height: 1.5; text-align: left; }
.dt-items { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 3.4cqw; }
.dt-line { display: flex; align-items: baseline; gap: 2cqw; font-size: 4.8cqw; }
.dt-name { font-style: italic; }
.dt-dots { flex: 1; border-bottom: .4cqw dotted currentColor; opacity: .5; transform: translateY(-1cqw); }
.dt-price { font-family: 'Caveat', cursive; font-weight: 700; font-size: 6cqw; color: var(--accent); }
.dt-desc { margin: .6cqw 0 0 3cqw; font-size: 3.8cqw; line-height: 1.4; opacity: .85; }
.dt-pre { padding: 3cqw; border: .5cqw solid var(--accent); border-radius: 2cqw; font-family: 'IM Fell English SC', serif; font-size: 4cqw; letter-spacing: .06em; }
.dt-pre span { display: block; margin-top: 1cqw; font-family: 'Caveat', cursive; font-size: 6cqw; letter-spacing: 0; color: var(--accent); }
.dt-note { margin: 5cqw 0 0; font-family: 'Caveat', cursive; font-size: 6cqw; color: var(--accent); }
.dt-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw; margin-top: 5cqw; }
.dt-tags span { padding: .8cqw 3cqw; border: .3cqw solid currentColor; border-radius: 99px; font-family: 'IM Fell English SC', serif; font-size: 3.2cqw; opacity: .8; }

/* "+ N more inside" line on the postcard front */
.pc-prices li.pc-more { font-family: 'Caveat', cursive; font-style: normal; color: var(--accent); }
.pc-prices li.pc-more::before { content: none; }
.dt-extras .dt-name { font-style: normal; }
/* postcard viewer buttons: keep each label on one line, wrap to a second row on narrow phones */
.modal-actions { flex-wrap: wrap; justify-content: center; max-width: 92vw; }
.modal-actions .btn { white-space: nowrap; }
@media (max-width: 480px) { .modal-actions .btn { padding: 9px 16px; font-size: .95rem; } }

/* =========================================================
   SHOP MODE (hameconfair.com/shop): the customers' link — just browse & order
   ========================================================= */
.shop #how, .shop #styles, .shop #request, .shop #about, .shop #miniPreview,
.shop .hero-actions .btn-ghost,
.shop .nav-links li:not(:first-child) { display: none !important; }