/* ==========================================================
   THE LITTLE POST OFFICE OF INDIA — shared design system
   Used by the redesigned pages (home, /postcards/, …).
   Tokens, header/footer, and the postal component set:
   airmail chevron, rack cards, pigeonholes, tiles, steps.
   Fonts (loaded per-page): Fraunces · Kaushan Script ·
   Space Mono · Caveat.
   ========================================================== */
:root {
  --paper: #e9dcbf;
  --paper-deep: #e3d5b4;
  --card: #faf5e8;
  --cream: #f3ead2;
  --ink: #2e2416;
  --ink-body: #33291a;
  --ink-soft: #7a6a48;
  --ink-mute: #9a8a5c;
  --ink-faint: #a2926a;
  --line: #c3b28c;
  --line-soft: #d8c9a4;
  --red: #b23a2e;
  --red-deep: #9a2f24;
  --blue: #35506e;
  --serif: 'Fraunces', Georgia, serif;
  --script: 'Kaushan Script', cursive;
  --mono: 'Space Mono', 'Courier New', monospace;
  --hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink-body);
  font-family: var(--serif); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.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;
}

/* ---------- airmail chevron ---------- */
.air {
  height: 11px;
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 11px, var(--paper) 11px 22px,
    var(--blue) 22px 33px, var(--paper) 33px 44px);
}

/* ---------- header (shared) ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 4vw, 44px);
  border-bottom: 0.5px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.logo { font-size: clamp(17px, 2vw, 20px); font-weight: 500; font-style: italic; white-space: nowrap; }
.logo b { color: var(--red); font-weight: 600; }
.menu {
  display: flex; gap: clamp(14px, 2.4vw, 26px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.menu a { transition: color 150ms ease; }
.menu a:hover, .menu a.active { color: var(--red); }
.send {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--red); color: var(--cream); padding: 9px 16px; border-radius: 5px;
  white-space: nowrap; transition: transform 150ms ease, background 150ms ease;
}
.send:hover { background: var(--red-deep); transform: translateY(-1px); }
@media (max-width: 760px) { .menu { display: none; } }

/* ---------- type roles ---------- */
.kick {
  text-align: center; font-family: var(--mono); font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute);
  margin: clamp(38px, 6vh, 64px) 0 8px;
}
.h1 {
  text-align: center; font-size: clamp(44px, 7.5vw, 92px); line-height: 1.02;
  font-weight: 500; margin: 4px 0 0; color: var(--ink); letter-spacing: -0.01em;
  text-wrap: balance;
}
.h2 {
  text-align: center; font-size: clamp(28px, 4.4vw, 52px); font-weight: 500;
  margin: 4px 0 0; color: var(--ink); letter-spacing: -0.005em; text-wrap: balance;
}
.scr { font-family: var(--script); color: var(--blue); font-size: 1.04em; font-weight: 400; }
.rd { color: var(--red); }
.tag {
  text-align: center; font-style: italic; font-size: clamp(15px, 1.7vw, 19px);
  color: var(--ink-soft); max-width: 34em; margin: 18px auto 0; line-height: 1.55;
}
.hand { font-family: var(--hand); font-size: clamp(20px, 2.6vw, 28px); color: var(--blue); text-align: center; margin: 26px 0 2px; transform: rotate(-1deg); }

/* ---------- buttons & links ---------- */
.cta {
  display: block; width: fit-content; margin: 18px auto 0;
  background: var(--red); color: var(--cream);
  font-family: var(--mono); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 5px; border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(178, 58, 46, 0.35);
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.cta:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(178, 58, 46, 0.4); }
.quiet-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: underline;
}
.quiet-link:hover { color: var(--red); }

/* ---------- rack cards (postcards in the hero rack) ---------- */
.rack {
  display: flex; gap: clamp(16px, 2.6vw, 34px); justify-content: center;
  margin: clamp(30px, 5vh, 52px) 0 6px; flex-wrap: wrap;
  perspective: 1200px;
}
.card {
  width: clamp(220px, 24vw, 300px); background: var(--card); border-radius: 5px;
  padding: 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(60, 45, 20, 0.18);
  border: 0.5px solid var(--line-soft);
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 300ms ease;
}
.card.t1 { transform: rotate(-2deg); }
.card.t3 { transform: rotate(2deg); }
.card:hover { transform: translateY(-8px) rotate(0deg); box-shadow: 0 22px 44px rgba(60, 45, 20, 0.24); }
.scene { position: relative; aspect-ratio: 162 / 112; border-radius: 3px; overflow: hidden; }
.scene svg { display: block; width: 100%; height: 100%; }
/* live photo layer, wired by postoffice.js over the SVG fallback */
.scene-photo {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 500ms ease;
}
.scene-photo.is-on { opacity: 1; }
.stamp {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: clamp(26px, 3vw, 34px); aspect-ratio: 23 / 27;
  background: var(--cream); border-radius: 2px; padding: 2.5px;
  box-shadow: 0 2px 5px rgba(40, 28, 10, 0.3);
}
.stamp svg { width: 100%; height: 100%; display: block; }
.meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.loc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.otag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 4px 7px; border-radius: 3px; white-space: nowrap;
}

/* ---------- band + banner + pigeonholes ---------- */
.band {
  background: var(--paper-deep);
  border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line);
  margin-top: clamp(40px, 7vh, 72px);
  padding: clamp(28px, 5vh, 52px) clamp(18px, 4vw, 44px);
}
.banner {
  max-width: 720px; margin: 0 auto 30px;
  border: 1px dashed var(--red); border-radius: 8px; padding: 14px 20px;
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center;
  background: color-mix(in srgb, var(--card) 45%, transparent);
}
.bpill {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 5px 12px; white-space: nowrap;
}
.bsub { font-style: italic; font-size: 14px; color: var(--ink-soft); }
.blink {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); text-decoration: underline; white-space: nowrap;
}
.blink:hover { color: var(--red-deep); }

.holes {
  display: flex; gap: clamp(14px, 2.2vw, 26px); justify-content: center;
  flex-wrap: wrap; margin-top: clamp(24px, 4vh, 40px);
}
.hole {
  width: clamp(140px, 16vw, 186px); background: var(--card);
  border: 0.5px solid var(--line-soft); border-radius: 9px;
  padding: 18px 12px 14px; text-align: center;
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms ease;
}
.hole:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(60, 45, 20, 0.18); }
.thumb {
  width: clamp(78px, 9vw, 104px); margin: 0 auto; border-radius: 4px 4px 0 0; overflow: hidden;
  box-shadow: 0 5px 12px rgba(60, 45, 20, 0.22); display: block;
}
.thumb svg { display: block; width: 100%; height: auto; aspect-ratio: 70 / 92; }
.hpill {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 4px 10px; border-radius: 3px;
}
.hcount { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 7px; }

/* ---------- view tiles (live catalogue grids) ---------- */
.po-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  width: min(1040px, 94vw); margin: clamp(24px, 4vh, 40px) auto 0;
}
@media (max-width: 860px) { .po-grid { grid-template-columns: repeat(2, 1fr); } }
/* Polaroid mount — the image + its caption sit inside a cream photo print. */
.tile {
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  background: var(--card); padding: 8px 8px 9px; border-radius: 7px;
  box-shadow: 0 0 0 0.5px var(--line-soft), 0 12px 26px rgba(60, 45, 20, 0.16);
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms ease;
}
.tile-img {
  display: block; aspect-ratio: 4 / 5; border-radius: 3px;
  background-size: cover; background-position: center; background-color: var(--paper-deep);
  position: relative; overflow: hidden;
}
.tile-img svg { display: block; width: 100%; height: 100%; }
.tile:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 0 0 0.5px var(--line-soft), 0 20px 36px rgba(60, 45, 20, 0.24); }
.tile-loc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.tile-img--card { aspect-ratio: 3 / 4; }

/* ---------- generic content sections ---------- */
.section { padding: clamp(44px, 7vh, 84px) clamp(18px, 4vw, 44px); }
.prose { max-width: 42em; margin: 0 auto; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7; color: var(--ink-body); }
.prose h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 500; color: var(--ink); margin: 1.6em 0 0.5em; }
.prose p { margin: 0 0 1em; }

/* ---------- steps strip ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
  width: min(980px, 94vw); margin: clamp(24px, 4vh, 40px) auto 0;
}
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card); border: 0.5px solid var(--line-soft); border-radius: 9px;
  padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.step-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border-radius: 3px; padding: 4px 11px;
}
.step h3 { font-size: 20px; font-weight: 500; margin: 0; color: var(--ink); }
.step p { margin: 0; font-size: 14.5px; font-style: italic; color: var(--ink-soft); }

/* ---------- footer (shared) ---------- */
.foot {
  text-align: center; font-family: var(--mono); font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  padding: clamp(26px, 4vh, 40px) 20px 14px;
}
.foot-links {
  display: flex; gap: 18px 26px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); padding: 0 20px clamp(24px, 4vh, 36px);
}
.foot-links a:hover { color: var(--red); }

/* ---------- reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.card.reveal.is-in.t1 { transform: rotate(-2deg); }
.card.reveal.is-in.t3 { transform: rotate(2deg); }
.card.reveal.is-in:hover { transform: translateY(-8px) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card.reveal.t1 { transform: rotate(-2deg); }
  .card.reveal.t3 { transform: rotate(2deg); }
  * { transition: none !important; }
}

/* ---------- footer social icons ---------- */
.foot-social {
  display: flex; justify-content: center; gap: 22px;
  padding: clamp(26px, 4vh, 40px) 20px 0;
}
.foot-social + .foot { padding-top: 14px; }
.foot-ico { display: inline-flex; align-items: center; color: var(--ink-soft); }
.foot-ico svg { display: block; }
.foot-ico:hover { color: var(--red); }

/* ---------- pigeonhole live art ---------- */
.thumb { position: relative; }
.thumb-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 400ms ease;
}
.thumb-photo.is-on { opacity: 1; }

/* ==========================================================
   Mobile: racks become swipeable shelves (scroll-snap).
   Desktop layouts are untouched — everything below only
   applies under 760px.
   ========================================================== */
@media (max-width: 760px) {
  /* tighter hero entrance */
  .kick { margin: 26px 0 8px; }

  /* the postcard rack: one card + a peek of the next, swipe to riffle */
  .rack {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * clamp(18px, 4vw, 44px));
    margin-right: calc(-1 * clamp(18px, 4vw, 44px));
    padding: 12px clamp(18px, 4vw, 44px) 16px;
    gap: 16px;
  }
  .rack::-webkit-scrollbar { display: none; }
  .rack .card {
    flex: 0 0 auto;
    width: min(76vw, 320px);
    scroll-snap-align: center;
  }

  /* view/design grids: one swipeable row instead of a long column */
  .po-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 6px clamp(18px, 4vw, 44px) 12px;
    gap: 14px;
  }
  .po-grid::-webkit-scrollbar { display: none; }
  .po-grid .tile {
    flex: 0 0 auto;
    width: min(58vw, 240px);
    scroll-snap-align: center;
  }
}

/* swipe hint under mobile shelves — hidden on desktop */
.swipe-hint {
  display: none;
  text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 2px 0 0;
}
@media (max-width: 760px) { .swipe-hint { display: block; } }

/* ---------- mobile menu ---------- */
.nav-right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); }
.burger { display: none; }
@media (max-width: 760px) {
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 7px;
    background: none; border: 0.5px solid var(--line); border-radius: 5px; cursor: pointer;
  }
  .burger span { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.menu-open, .menu-open body { overflow: hidden; }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 0.5px solid var(--line);
}
.mobile-menu-close {
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink-soft); padding: 4px 8px;
}
.mobile-menu-links { display: flex; flex-direction: column; padding: 10px 18px; overflow-y: auto; }
.mobile-menu-links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 17px 2px; border-bottom: 0.5px dashed var(--line);
  text-decoration: none;
}
.mobile-menu-links a:active { color: var(--red); }
.mobile-menu-send { margin: auto 18px 26px; text-align: center; padding: 15px 20px !important; }

/* ---------- rack tile silhouettes: folded card + phone ---------- */
.gc-mini {
  position: relative; aspect-ratio: 162 / 112;
  display: flex; align-items: center; justify-content: center;
  perspective: 900px;
}
.gc-mini-inside {
  position: absolute; width: 128px; height: 178px;
  background: #f7f0dd; border-radius: 3px;
  transform: translateX(30px) rotateY(-16deg); transform-origin: left center;
  box-shadow: inset 0 0 0 1px rgba(60, 45, 20, 0.1), 3px 4px 10px rgba(60, 45, 20, 0.18);
}
.gc-mini-front {
  position: relative; width: 132px; height: 184px;
  border-radius: 6px 3px 3px 6px; overflow: hidden;
  transform: translateX(-16px) rotateY(17deg); transform-origin: right center;
  box-shadow: 7px 9px 18px rgba(60, 45, 20, 0.32);
  background: #8f2d23;
}
.gc-mini-front svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gc-mini-front .gc-art { z-index: 1; }
.gc-mini-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #8e2a26; color: #f4ead2;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
  padding: 2px 5px; border-radius: 3px;
}
.gc-mini-seal {
  position: absolute; left: 50%; top: 50%; margin: -11px 0 0 44px;
  width: 22px; height: 22px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #c25264, #8e2c3a 60%, #5e1c28);
  box-shadow: 0 2px 4px rgba(40, 20, 10, 0.4);
}

.ph-mini {
  position: relative; aspect-ratio: 162 / 112;
  display: flex; align-items: center; justify-content: center;
}
.ph-mini-frame {
  position: relative; width: 102px; height: 196px;
  border-radius: 18px; border: 3px solid var(--ink); background: var(--ink);
  box-shadow: 0 9px 18px rgba(60, 45, 20, 0.3); overflow: hidden;
}
.ph-mini-screen { position: absolute; inset: 2px; border-radius: 13px; overflow: hidden; aspect-ratio: auto; }
.ph-mini-screen svg { width: 100%; height: 100%; display: block; }
.ph-mini-island {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 7px; border-radius: 100px; background: #17110a; z-index: 3;
}

/* ---------- sticker treatment: gc + phone tiles lose the mat ---------- */
.card.card-gc, .card.card-ph { background: none; border: none; box-shadow: none; padding: 10px 2px 12px; }
.card.card-gc:hover, .card.card-ph:hover { box-shadow: none; }
/* die-cut white edge + soft lift on each object */
.card-gc .gc-mini-front { box-shadow: 0 0 0 6px #ffffff, 8px 12px 22px rgba(60, 45, 20, 0.35); }
.card-gc .gc-mini-inside { box-shadow: 0 0 0 6px #ffffff, 4px 7px 14px rgba(60, 45, 20, 0.22); }
.card-ph .ph-mini-frame { box-shadow: 0 0 0 6px #ffffff, 0 12px 24px rgba(60, 45, 20, 0.35); }

/* ---------- rack tile: sealed love letter (sticker) ---------- */
.card.card-lv { background: none; border: none; box-shadow: none; padding: 10px 2px 12px; }
.card.card-lv:hover { box-shadow: none; }
.lv-mini { position: relative; aspect-ratio: 162 / 112; display: flex; align-items: center; justify-content: center; }
.lv-mini-env {
  position: relative; width: 190px; height: 126px; background: #f2e4d8; border-radius: 5px;
  box-shadow: 0 0 0 6px #ffffff, 0 12px 24px rgba(60, 45, 20, 0.32); transform: rotate(-2deg);
}
.lv-mini-flap { position: absolute; inset: 0 0 auto 0; height: 55%; background: #e9d6c6; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 5px 5px 0 0; }
.lv-mini-seal {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-6deg);
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c25264, #8e2c3a 60%, #5e1c28);
  box-shadow: 0 3px 5px rgba(40, 20, 10, 0.4);
}
.lv-mini-addr { position: absolute; left: 12px; bottom: 8px; font-family: var(--hand); font-size: 17px; color: var(--blue); }