/* ==========================================================================
   mycoffeetales — the site
   --------------------------------------------------------------------------
   Every colour and type role here is taken from the app's own design system
   (AppColor.swift, AppTypography.swift) rather than invented, so the site and
   the app are the same object. Change a value here and it moves both.
   ========================================================================== */

:root {
  /* AppColor: the page wash, sampled top and bottom from the design. */
  --paper-top: #f7f5f1;
  --paper: #f2e8d7;
  --surface: #fdfbf4;

  /* AppColor: the two browns and the second ink. */
  --espresso: #976b5a;      /* primary brand brown */
  --heading: #5c3a2e;       /* deeper brown, all headings */
  --rust: #9c4a38;          /* the letter's second ink */
  --id-card: #914738;       /* the coffee ID and the collections */

  /* AppColor: the letter's papers. */
  --cover-paper: #f0e4d0;
  --recap-page: #fffcf6;
  --peach-card: #f6e3ce;
  --pill-tan: #ead8b6;
  --tape: #e5c3b4;

  /* AppColor: ink that reads on the browns. */
  --id-ink: #f7ebdc;
  --id-ink-soft: #dca795;

  /* AppColor: the coffee illustration drawn on a day's stamp. */
  --coffee-art: #c9ae8e;

  --muted: #9b9087;
  --line: #eae2d8;

  /* AppTypography: .serif designs to New York on Apple platforms, which the
     first two entries reach for; Georgia is the cross-platform stand-in. */
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --rounded: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --measure: 68ch;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* The page wash: the app's own backgroundGradient, lighter and cooler at the
   top and warming towards the cream at the foot.
   It spans the document rather than the viewport. Sized to the viewport it
   would need `background-attachment: fixed`, which iOS Safari repaints badly
   and sometimes ignores outright, and a fixed pseudo-element cannot be used
   here because a negative z-index child paints *behind* its parent's own
   background. Across a long page the longer fade reads better anyway. */
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--paper-top), var(--paper)) no-repeat var(--paper);
  /* The wash finishes within roughly the opening screen and a half, as it does
     in the app. Left to span the whole document it fades so slowly that the
     page reads as flat. The gradient ends on the same value as the colour
     behind it, so where it stops is not visible. */
  background-size: 100% 1600px;
  color: var(--heading);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--rust); text-underline-offset: 3px; }
a:hover { color: var(--heading); }

/* --- the letter's own label: small, monospaced, letterspaced, uppercase --- */
.imprint {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.imprint--rust { color: var(--rust); }

/* --- numbered section rule, the letter's "02 · Somewhere in the coffee world" -- */
.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}

.wrap { width: min(100% - var(--pad) * 2, 1080px); margin-inline: auto; }
.narrow { width: min(100% - var(--pad) * 2, 720px); margin-inline: auto; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: color-mix(in srgb, var(--paper-top) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgb(0 0 0 / 0.06);
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--heading);
}
/* The app's own icon, not a redrawing of it. The site already borrows the
   app's colours and type; the mark people will actually see on their Home
   Screen is the one thing worth showing as itself. */
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  box-shadow: 0 1px 3px rgb(92 58 46 / 0.28);
}
.brand__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.nav-links { display: none; gap: 26px; font-family: var(--rounded); font-size: 14px; }
.nav-links a { color: color-mix(in srgb, var(--heading) 78%, transparent); text-decoration: none; }
.nav-links a:hover { color: var(--heading); }
@media (min-width: 860px) { .nav-links { display: flex; } }

/* ==========================================================================
   Buttons — the app's capsule buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rounded);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--id-card); color: var(--id-ink); }
.btn--primary:hover { background: #7d3b2e; color: var(--id-ink); }

.btn--ghost { background: var(--surface); color: var(--heading); border-color: color-mix(in srgb, var(--heading) 22%, transparent); }
.btn--ghost:hover { background: #fff; color: var(--heading); }

.btn--sm { padding: 9px 18px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 900px) { .btn-row--start { justify-content: flex-start; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: 128px 0 72px; }
@media (min-width: 900px) { .hero { padding: 168px 0 96px; } }

.hero__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.hero__copy { text-align: center; }
@media (min-width: 900px) { .hero__copy { text-align: left; } }

.hero__icon {
  width: 84px; height: 84px; border-radius: 20px;
  display: block;
  margin: 0 auto 24px;
  box-shadow: 0 10px 30px rgb(92 58 46 / 0.22);
}
@media (min-width: 900px) { .hero__icon { margin-inline: 0; } }

.hero h1 {
  font-size: clamp(44px, 9vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  font-weight: 700;
}
.hero__tagline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}
.hero__slogan {
  font-size: clamp(24px, 4.4vw, 33px);
  line-height: 1.24;
  font-style: italic;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 16px;
}
.hero__lede {
  font-size: 17px;
  color: color-mix(in srgb, var(--heading) 82%, transparent);
  max-width: 46ch;
  margin: 0 auto 32px;
}
@media (min-width: 900px) { .hero__lede { margin-inline: 0; } }

.hero__note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 0 0;
}

/* ==========================================================================
   Phone — a drawn app screen, not a screenshot.
   --------------------------------------------------------------------------
   The app is almost entirely type on paper, so it redraws exactly in CSS and
   stays sharp at any size. Nothing here is an image file, which is also why
   it can never go missing from a bundle.
   ========================================================================== */

.phone {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, #4a3229, #2c1d17);
  box-shadow:
    0 30px 60px -18px rgb(92 58 46 / 0.45),
    0 2px 0 0 rgb(255 255 255 / 0.12) inset;
}
.phone__screen {
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-top), var(--paper));
  padding: 22px 18px 26px;
}
.phone__notch {
  width: 78px; height: 5px; border-radius: 999px;
  background: rgb(92 58 46 / 0.18);
  margin: 2px auto 18px;
}

/* --- the letter's masthead --- */
.masthead { text-align: center; padding-bottom: 12px; }
.masthead__eyebrow {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.masthead__title {
  font-size: 27px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 2px;
}
.masthead__title em { font-style: italic; color: var(--rust); }
.masthead__rules { border-top: 2px solid var(--heading); border-bottom: 1px solid var(--heading); padding: 5px 0; margin-top: 12px; }
.masthead__imprint {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  color: var(--muted);
}

/* --- the cover: a polaroid taped to a ruled card --- */
.cover {
  position: relative;
  background: var(--cover-paper);
  border-radius: 16px;
  padding: 20px 16px 16px;
  margin-top: 16px;
  background-image: repeating-linear-gradient(
    180deg, transparent 0 17px, rgb(155 144 135 / 0.16) 17px 17.6px
  );
}
.cover__tape {
  position: absolute; top: -9px; left: 50%;
  width: 58px; height: 17px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--tape); opacity: .82;
}
.cover__polaroid {
  width: 118px; margin: 0 auto 14px;
  background: #fff; padding: 7px 7px 4px;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.28);
}
.cover__art {
  height: 104px; border-radius: 2px;
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 42px; color: #c9ae8e;
}
.cover__caption {
  font-family: var(--rounded); font-size: 10px; text-align: center;
  color: var(--heading); padding: 5px 0 2px;
}
.cover__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.cover__note--end { text-align: right; }
.cover__note dt {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.cover__note dd { margin: 0; font-size: 12px; line-height: 1.35; color: var(--heading); }

/* --- a story card, the letter's section 02 --- */
.story { margin-top: 18px; }
.story__pill {
  display: inline-block; background: var(--pill-tan); color: var(--heading);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 9px;
}
.story__headline { font-size: 18px; font-weight: 700; line-height: 1.18; margin: 0 0 8px; }
.story__body { font-size: 12px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--heading) 85%, transparent); }
.story__pull {
  font-size: 12px; font-style: italic; font-weight: 600;
  border-left: 2.5px solid var(--rust); padding-left: 10px; margin: 12px 0 0;
}

/* --- the word of the day, printed on the second ink --- */
.word {
  margin-top: 18px; background: var(--rust); color: var(--id-ink);
  border-radius: 16px; padding: 16px;
}
.word__label {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: .85; margin: 0 0 8px;
}
.word__term { font-size: 21px; font-style: italic; font-weight: 700; margin: 0 0 5px; }
.word__meaning { font-size: 12px; line-height: 1.55; margin: 0; opacity: .95; }

/* A real screenshot, set inside the same bezel the drawn screens use. The app
   is type on paper and redraws faithfully, but the calendar is the screen
   somebody meets on the first day, and it is worth showing as itself. */
.phone__shot {
  display: block;
  width: 100%;
  border-radius: 34px;
}

/* --- the mug shelf --- */
.shelf { margin-top: 4px; }
.shelf__title { font-size: 22px; font-weight: 700; margin: 0 0 3px; }
.shelf__sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 20px; }
.shelf__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border-bottom: 5px solid var(--cover-paper);
  border-radius: 3px; padding-bottom: 6px; margin-bottom: 20px;
}
.mug {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  color: var(--coffee-art);
}
.mug .icon { width: 52%; height: 52%; }
/* a mug you have not earned is the same drawing, nearly faded out */
.mug--ghost { opacity: 0.16; }
.mug--next {
  background: var(--peach-card);
  border: 1.5px dashed var(--espresso);
  color: var(--espresso);
}

/* --- the receipt, a day's tale --- */
.receipt { background: var(--recap-page); border-radius: 16px; padding: 18px; margin-top: 4px; }
.receipt__head {
  text-align: center; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted, #9b9087);
  padding-bottom: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 12px;
}
.receipt__row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.receipt__label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #9b9087); white-space: nowrap; }
.receipt__dots { flex: 1; border-bottom: 1px dotted rgb(155 144 135 / 0.5); transform: translateY(-3px); }
.receipt__value { font-size: 13px; text-align: right; }
.receipt__value--script { font-family: var(--rounded); font-style: italic; }
.receipt__foot { text-align: center; font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted, #9b9087); padding-top: 12px; border-top: 1px dashed var(--line); margin-top: 10px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 72px 0; }
@media (min-width: 900px) { .section { padding: 104px 0; } }

.section--tint {
  background: color-mix(in srgb, var(--cover-paper) 45%, transparent);
  border-block: 1px solid rgb(0 0 0 / 0.05);
}

.section__head { max-width: 640px; margin-bottom: 44px; }
.section__label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rust); margin: 0 0 14px;
}
.section h2 {
  font-size: clamp(28px, 5vw, 40px); line-height: 1.14;
  letter-spacing: -0.018em; margin: 0 0 14px; font-weight: 700;
}
.section__lede {
  font-size: 18px; color: color-mix(in srgb, var(--heading) 80%, transparent);
  margin: 0;
}

.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split--flip > *:first-child { order: 2; }
}

.cards { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards--three { grid-template-columns: repeat(3, 1fr); } }

/* A row of cards that belongs to the whole page rather than to one half of a
   split, so it can go to three columns without being squeezed. */
.full-cards { display: grid; gap: 18px; margin-top: 52px; }
@media (min-width: 700px) { .full-cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid rgb(0 0 0 / 0.045);
  box-shadow: 0 1px 2px rgb(92 58 46 / 0.05);
}
.card__icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--cover-paper);
  display: grid; place-items: center;
  color: var(--rust);
  margin-bottom: 15px;
}
.card__icon .icon { width: 21px; height: 21px; }

/* Drawn marks, never emoji. The app draws its own line art, so the site does
   too; and an emoji is somebody else's artwork with somebody else's colours. */
.icon {
  display: block;
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 44px; height: 44px; stroke-width: 1.4; }
.icon--sm { width: 19px; height: 19px; stroke-width: 1.9; }
.card h3 { font-size: 18px; margin: 0 0 7px; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--heading) 78%, transparent); }

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.closing { padding: 80px 0 96px; text-align: center; }
.closing__card {
  background: var(--id-card);
  color: var(--id-ink);
  border-radius: 28px;
  padding: 56px 28px;
  position: relative;
  overflow: hidden;
}
/* the punched holes down the notebook spine, run across the head of the card */
.closing__binding { display: flex; justify-content: center; gap: 9px; margin-bottom: 30px; }
.closing__binding i { width: 6px; height: 6px; border-radius: 999px; background: var(--id-ink); opacity: .5; }
.closing h2 {
  font-size: clamp(28px, 5.4vw, 42px); line-height: 1.12;
  margin: 0 0 14px; font-weight: 700; letter-spacing: -0.02em;
}
.closing p { margin: 0 auto 30px; max-width: 46ch; opacity: .92; font-size: 17px; }
.closing .btn--primary { background: var(--id-ink); color: var(--id-card); }
.closing .btn--primary:hover { background: #fff; color: var(--id-card); }
.closing .btn--ghost { background: transparent; color: var(--id-ink); border-color: rgb(247 235 220 / 0.42); }
.closing .btn--ghost:hover { background: rgb(247 235 220 / 0.12); color: var(--id-ink); }
.closing__note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; opacity: .72; margin-top: 20px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid rgb(0 0 0 / 0.07);
  padding: 44px 0 56px;
  font-size: 14px;
}
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; justify-content: space-between; }
.site-footer__tagline { margin: 12px 0 0; font-style: italic; color: var(--muted); font-size: 15px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--rounded); }
.site-footer__links a { color: color-mix(in srgb, var(--heading) 76%, transparent); text-decoration: none; }
.site-footer__links a:hover { color: var(--heading); }
.site-footer__legal {
  margin: 30px 0 0; padding-top: 22px;
  border-top: 1px solid rgb(0 0 0 / 0.06);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.page { padding: 132px 0 80px; }
.page h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 10px; }
.page__updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 40px; }
.page h2 { font-size: 21px; margin: 44px 0 12px; letter-spacing: -0.01em; }
.page h3 { font-size: 17px; margin: 28px 0 8px; }
.page p, .page li { color: color-mix(in srgb, var(--heading) 88%, transparent); }
.page ul { padding-left: 22px; }
.page li { margin: 7px 0; }

.callout {
  background: var(--surface);
  border-left: 3px solid var(--rust);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 26px 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 10px; }

/* The contact form, drawn by Tally. It brings its own height — the embed
   script measures the form and fits the frame to it — so nothing here sizes
   it. Transparent background, so it sits on the callout rather than in a box
   of its own. */
.tally { margin-top: 20px; }
.tally iframe { display: block; width: 100%; border: 0; }

.legal-links { display: grid; gap: 14px; margin-top: 40px; }
.legal-links a {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid rgb(0 0 0 / 0.05);
  border-radius: 14px; padding: 16px 20px; text-decoration: none;
  color: var(--heading); font-weight: 600;
  transition: border-color .15s ease;
}
.legal-links a:hover { border-color: var(--rust); }
.legal-links span { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; }

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--id-card); color: var(--id-ink);
  padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 60;
}
.skip:focus { left: 0; }

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