/* Postcarder: printed-postcard look. Card stock, ink, one postbox red. */

:root {
  --paper: oklch(96.5% 0.014 85);
  --paper-deep: oklch(92.5% 0.02 82);
  --rule: oklch(84% 0.025 80);
  --ink: oklch(24% 0.025 255);
  --ink-soft: oklch(42% 0.025 255);
  --red: oklch(53% 0.19 28);
  --red-ink: oklch(46% 0.17 28);
  --serif: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --type: "American Typewriter", ui-monospace, "Courier Prime", "Courier New", monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --max: 1080px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.label {
  font: 400 13px/1.3 var(--type);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 18px; }
.wordmark { font: italic 600 24px/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: 22px; }
.nav a { font: 400 13px var(--type); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Hero: headline left, one real postcard right */
.hero { padding: 64px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.hero h1 {
  font: 600 clamp(42px, 6.2vw, 76px)/1.02 var(--serif);
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 9.5em;
}
.hero .lead { font-size: 21px; color: var(--ink-soft); margin: 0 0 30px; max-width: 24em; }
.status { display: inline-flex; align-items: center; gap: 10px; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }

.print {
  position: relative;
  margin: 0;
  padding: 14px 14px 52px;
  background: oklch(99% 0.004 85);
  box-shadow: 0 1px 2px oklch(30% 0.02 60 / 0.18), 0 18px 40px -18px oklch(30% 0.03 60 / 0.45);
  transform: rotate(2.2deg);
  transition: transform 220ms var(--ease);
}
.print:hover { transform: rotate(0.8deg) translateY(-3px); }
.print img { display: block; width: 100%; height: auto; }
.print figcaption { position: absolute; left: 18px; right: 18px; bottom: 14px; font: 400 14px var(--type); color: var(--ink-soft); display: flex; justify-content: space-between; }
.print .postmark { position: absolute; right: -34px; top: -38px; width: 170px; color: var(--red); opacity: 0.85; mix-blend-mode: multiply; transform: rotate(-14deg); pointer-events: none; }

/* The back of a postcard: message on the left, stamp and address on the right */
.back { padding: 24px 0 96px; }
.back h2, .section h2 { font: 600 clamp(30px, 4vw, 44px)/1.1 var(--serif); letter-spacing: -0.02em; margin: 0 0 12px; }
.back .intro { color: var(--ink-soft); max-width: 30em; margin: 0 0 36px; }

.card-back {
  position: relative;
  display: grid; grid-template-columns: 1.25fr 1fr;
  background: oklch(98.5% 0.008 85);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 40px -24px oklch(30% 0.03 60 / 0.5);
  padding: 34px 36px 38px;
  transform: rotate(-0.6deg);
}
.card-back .message { padding-right: 34px; border-right: 1px solid var(--rule); }
.card-back .message p { font-style: italic; margin: 0 0 22px; font-size: 20px; }
.field { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rule); align-items: baseline; }
.field span:last-child { font-size: 18px; }
.card-back .address { padding-left: 34px; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; }
.stamp-row { display: flex; justify-content: flex-end; align-items: flex-start; position: relative; }
.stamp {
  width: 92px; height: 112px; padding: 9px;
  /* Perforations: card-coloured dots over the border; the picture covers the middle. */
  background:
    radial-gradient(circle, oklch(98.5% 0.008 85) 3.4px, transparent 3.9px) -5px -5px / 10px 10px,
    var(--paper-deep);
  box-shadow: 0 1px 3px oklch(30% 0.02 60 / 0.2);
}
.stamp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stamp-row .postmark { position: absolute; right: 52px; top: 22px; width: 150px; color: var(--ink); opacity: 0.55; transform: rotate(8deg); pointer-events: none; }
.address-lines { display: grid; gap: 22px; }
.address-lines div { border-bottom: 1px solid var(--ink-soft); padding-bottom: 4px; font-style: italic; font-size: 20px; min-height: 1.6em; }

/* Gallery: one tall print beside two wide ones, each at its own slight angle */
.section .intro { color: var(--ink-soft); max-width: 32em; margin: 0 0 40px; }
.gallery { display: grid; grid-template-columns: 4fr 6fr; grid-template-rows: auto auto; gap: 44px 40px; align-items: start; }
.gallery .tall { grid-row: span 2; transform: rotate(-1.6deg); }
.gallery .wide:nth-of-type(2) { transform: rotate(1.2deg); }
.gallery .wide:nth-of-type(3) { transform: rotate(-0.8deg); margin-left: 6%; }
.gallery .print:hover { transform: rotate(0deg) translateY(-3px); }

/* What it adds: a plain numbered list, set like an index */
.section { padding: 80px 0; border-top: 1px solid var(--rule); }
.adds { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.adds .side p { color: var(--ink-soft); margin: 0; }
.adds ol { list-style: none; margin: 0; padding: 0; }
.adds li { display: grid; grid-template-columns: 3.5em 1fr; gap: 8px 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.adds li:first-child { padding-top: 4px; }
.adds .num { font: 400 14px/1.9 var(--type); color: var(--red-ink); }
.adds h3 { font: 600 23px/1.25 var(--serif); margin: 0 0 4px; letter-spacing: -0.01em; }
.adds li p { margin: 0; color: var(--ink-soft); }

/* Price and privacy: just prose */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.terms p { margin: 0 0 14px; }
.price-tag { display: inline-block; font: 400 15px var(--type); letter-spacing: 0.06em; border: 1.5px solid var(--red); color: var(--red-ink); padding: 4px 10px; transform: rotate(-2deg); margin-bottom: 14px; }

/* Long-form pages */
.page { padding: 56px 0 88px; }
.page .wrap { max-width: 720px; }
.page h1 { font: 600 clamp(36px, 5vw, 52px)/1.08 var(--serif); letter-spacing: -0.02em; margin: 0 0 8px; }
.page .updated { margin: 0 0 36px; }
.page h2 { font: 600 23px/1.3 var(--serif); margin: 38px 0 6px; }
.page p, .page li { color: var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 20px; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px var(--type); color: var(--red-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 2px; color: var(--ink-soft); }
.contact { margin-top: 44px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 28px 0 44px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer nav { display: flex; gap: 22px; }

@media (max-width: 860px) {
  .hero { padding: 36px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .print { transform: rotate(1.4deg); margin: 0 6px; }
  .print .postmark { width: 128px; right: -12px; top: -30px; }
  .card-back { grid-template-columns: 1fr; padding: 26px 22px 30px; transform: none; }
  .card-back .message { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 26px; }
  .card-back .address { padding-left: 0; padding-top: 24px; min-height: 0; gap: 28px; }
  .stamp-row { justify-content: flex-start; }
  .stamp-row .postmark { left: 70px; right: auto; }
  .adds, .terms { grid-template-columns: 1fr; gap: 28px; }
  .gallery { grid-template-columns: 1fr; gap: 36px; }
  .gallery .tall { grid-row: auto; width: 78%; justify-self: center; }
  .gallery .wide:nth-of-type(3) { margin-left: 0; }
  .section { padding: 60px 0; }
}

@media (max-width: 420px) {
  body { font-size: 18px; }
  .nav { gap: 14px; }
  .field { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .print { transition: none; }
}