/* ───────────────────────────────────────────────────────────────────────────
   The pages. base.css holds the system; this holds the compositions.
   ─────────────────────────────────────────────────────────────────────────── */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark-fill { fill: var(--mark); }
.mark-rings { stroke: var(--rings); stroke-width: 14; fill: none; }
.mark { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.link {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
}
.link:hover { text-decoration-color: currentColor; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.footnote {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* ── Hero ────────────────────────────────────────────────────────────────
   The app's own front door, widened: the mark, "Design your own Postcards"
   with the accented word italic and in the deeper green, and one action.
   ────────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.hero-copy .lede { margin-top: 1.5rem; }
.hero-theatre { --reveal-max: 37rem; }
/* The stage reserves room above the envelope for the flap to stand in when
   it is folded fully back, and for the pile to fan up into once the cards are
   out. At rest that room is empty, so the theatre is pulled up a little into
   it rather than paying for it twice. Not far: pull harder and the fanned
   cards slide under the sticky masthead, which is what happened the first
   time this was tuned against an empty stage. */
.hero-theatre .reveal { margin-block: -8% -6%; }
@media (max-width: 899px) { .hero-theatre .reveal { margin-block: -4% -3%; } }

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.steps li { max-width: 22rem; }
.step-no {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--word);
  margin-bottom: 0.6rem;
}
.steps h3 { margin-bottom: 0.5rem; }
.steps p { color: var(--ink-muted); }

/* ── Strips ──────────────────────────────────────────────────────────────
   Rows of the real thing. Cards carry no drop shadow — a mounted print gets
   a hairline — so the tile is a hairline and nothing else.
   ────────────────────────────────────────────────────────────────────── */
.strip-title {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
}
.strip-title:first-child { margin-top: 0; }
/* A section that changes subject inside itself still has to breathe: two
   .wrap blocks running together put a heading hard against the paragraph
   above it. */
section > .wrap + .wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.strip-note { max-width: 34rem; margin-bottom: 1.75rem; font-size: 0.9375rem; }

.strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
}
.strip-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .strip-6, .strip-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .strip-6, .strip-3, .strip-5 { grid-template-columns: minmax(0, 1fr); }
}
.strip img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  /* Not a shadow: context.ink is whatever the app is printed with, and a
     hairline is what a mounted print gets. */
  box-shadow: 0 0 0 1px var(--hairline);
}
.strip span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
}

/* ── Split and two-up ────────────────────────────────────────────────── */
.split, .two-up {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.split p, .two-up p { color: var(--ink-muted); max-width: 34rem; }
.split h2, .two-up h2 { margin-bottom: 1.25rem; }

.envelope-figure { margin: 0; }
.envelope-figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  /* The envelope keeps a soft shadow: it is an object lying on a surface,
     drawn in the app as a blurred offset sheet rather than a hard skirt. */
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.10));
}
.envelope-figure figcaption {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  max-width: 26rem;
}

.claims { display: grid; gap: 1.5rem; }
.claim {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--page);
}
.claim h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.claim p { margin: 0; font-size: 0.9375rem; }

/* ── Closing ─────────────────────────────────────────────────────────── */
.closing { text-align: center; }
.closing .lede { margin-inline: auto; margin-top: 1.25rem; }
.closing .cta-row { justify-content: center; }

.footer-blurb { margin-top: 1rem; font-size: 0.875rem; max-width: 18rem; }

/* ── Interior page headers ───────────────────────────────────────────── */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 18ch; }
.page-head .lede { margin-top: 1.5rem; }

/* ── Designs page ────────────────────────────────────────────────────── */
.gallery-note {
  max-width: 34rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin-bottom: 1.75rem;
}
.pair {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--hairline); }

/* ── Demo page ───────────────────────────────────────────────────────── */
.theatre-page { padding-block: clamp(2rem, 5vw, 4rem); }
.theatre-page .reveal { --reveal-max: 33rem; }
.deck-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}
.icon-button:hover { border-color: var(--ink); }
/* Cupertino, not Material: the thin stroke sits with the editorial type. */
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }