/* Rasoma public site.
   Heirloom archive: deep-green bookplate, warm cream paper, clay marginalia.
   Type roles mirror the app exactly:
     Playfair Display -> wordmark + numerals only (display, used with restraint)
     Fraunces         -> headings, recipe titles, pull quotes
     system sans      -> body, labels, eyebrows */

:root {
  --green: #223527;
  --green-deep: #1b2a1e;
  --green-lift: #2c4433;
  --ink: #223527;
  --ink-soft: #46584a;
  --muted: #6b7a6e;
  --cream: #faf5ec;
  --cream-deep: #f3ecdd;
  --cream-dim: rgba(250, 245, 236, 0.72);
  --rule: #e4dccb;
  --clay: #8c5b33;
  --clay-tint: #f0e4d8;
  --gold: #c99a3f;

  /* Taken from the app's recipe screen so the card reads as the same surface. */
  --terracotta: #c0562e;
  --paper: #f7edda;
  --pill: #ede0cd;
  --chip: #f4d9c8;
  --story: #ecdfc9;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --display: "Playfair Display", Georgia, serif;

  --measure: 720px;
  --wide: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--clay); }
strong { color: var(--ink); }

:where(a, button):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Eyebrow: the small uppercase label used throughout, as in the app. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---------------------------------------------------------------- bookplate
   The green masthead. Every page wears it; the landing page's is taller.
   The contour wash echoes the region outlines the app draws behind its hero. */

.bookplate {
  position: relative;
  overflow: hidden;
  background: var(--green);
  background-image:
    radial-gradient(120% 90% at 78% 8%, var(--green-lift) 0%, transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'><path d='M-20 60C40 20 90 96 160 70s110-40 180-4'/><path d='M-20 104C44 66 96 140 164 114s108-38 176-2'/><path d='M-20 150C48 112 100 186 168 160s104-36 172 0'/><path d='M-20 196C52 158 104 232 172 206s100-34 168 2'/><path d='M-20 242C56 204 108 278 176 252s96-32 164 4'/><path d='M-20 288C60 250 112 324 180 298s92-30 160 6'/></g></svg>");
  color: var(--cream);
}

.bookplate .wrap-wide { position: relative; }

/* Compact masthead (legal pages) */
.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
}

.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.42));
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 4px;
  color: var(--cream);
  line-height: 1;
}

.descriptor {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.62);
  margin-top: 4px;
}

.masthead nav { margin-left: auto; display: flex; gap: 22px; }

.masthead nav a {
  font-size: 13px;
  color: var(--cream-dim);
  text-decoration: none;
}

.masthead nav a:hover { color: var(--cream); text-decoration: underline; }

/* ------------------------------------------------------------------- hero */

.hero { padding: 18px 0 76px; text-align: center; }

.hero .lockup { justify-content: center; margin-bottom: 34px; }
.hero .mark { width: 56px; height: 56px; }
.hero .wordmark { font-size: 27px; letter-spacing: 6px; }

/* The rule with a gold lozenge, lifted from the Play feature graphic. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 30px;
  max-width: 220px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(250, 245, 236, 0.24);
}
.divider span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  max-width: 19ch;
  margin: 0 auto;
}

.hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 46ch;
  margin: 20px auto 0;
}

.cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--green);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
}

.badge:hover { background: #fff; }

.cta .note { font-size: 13px; color: rgba(250, 245, 236, 0.55); }

/* -------------------------------------------------------------- specimen
   The signature. One recipe card, annotated like a museum specimen label:
   each callout names a part of the card that is unique to Rasoma. */

.specimen { padding: 76px 0 84px; }

.specimen-head { text-align: center; max-width: 52ch; margin: 0 auto 56px; }
.specimen-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; margin: 10px 0 0; }
.specimen-head .sub { color: var(--ink-soft); margin-top: 14px; }

/* Before and after, with the mark doing the crossing. */
.transform {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 180px 330px;
  justify-content: center;
  align-items: center;
}

/* ------------------------------------------------------------ connector
   Three recipes feed the mark, one book leaves it. Hairlines at the page's
   own weight: anything heavier reads as a flowchart, which this is not. */

.conn {
  position: relative;
  height: 190px;
  display: grid;
  place-items: center;
}

.conn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
}

.conn .ln {
  stroke: rgba(140, 91, 51, 0.36);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.conn .dot { fill: rgba(140, 91, 51, 0.36); stroke: none; }

.conn .head {
  stroke: var(--clay);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conn .disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  box-shadow:
    0 8px 18px -12px rgba(34, 53, 39, 0.5),
    0 0 0 8px var(--cream);
}

.conn .disc img { width: 32px; height: 32px; object-fit: contain; }

.conn .verb {
  position: absolute;
  top: calc(50% + 48px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------------- phone
   A device, not a box: the app card has to read as a screen for the
   before/after to land. */

.phone {
  background: #16231a;
  border-radius: 38px;
  padding: 9px;
  box-shadow:
    0 34px 60px -30px rgba(22, 35, 26, 0.7),
    inset 0 0 0 1px rgba(250, 245, 236, 0.09);
}

.screen {
  position: relative;
  height: 645px;
  background: var(--paper);
  border-radius: 30px;
  overflow: hidden;
  padding: 14px 20px 0;
}

/* The screen keeps going. Fade it rather than pretend the recipe ends here. */
.screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(247, 237, 218, 0), var(--paper));
  pointer-events: none;
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.appbar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The notch. */
.appbar span {
  width: 62px;
  height: 5px;
  border-radius: 3px;
  background: rgba(34, 53, 39, 0.16);
}

/* ------------------------------------------------------------ the pile
   Fabricated, not photographed: paper scraps with real handwriting, tilted,
   because that is how these actually sit in a drawer. */

.pile { position: relative; height: 505px; }

.scrap {
  position: absolute;
  background: #fdfaf1;
  border: 1px solid #e6dcc6;
  border-radius: 2px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 26px -16px rgba(34, 53, 39, 0.45);
}

/* Buried: each card is set low enough that the title of the one above it stays
   readable. A pile gives you titles and nothing else, which is the point. */
.scrap-6 {
  top: 10px; left: 24%; width: 62%; height: 120px;
  transform: rotate(-6.5deg);
  background: #f2ebd6;
}

.scrap-5 {
  top: 50px; left: 2%; width: 60%; height: 120px;
  transform: rotate(3.5deg);
  background: #fbf5e6;
}

.scrap-4 {
  top: 100px; right: 3%; width: 58%; height: 120px;
  transform: rotate(-4.5deg);
  background: #f7f1e0;
}

.scrap-3 {
  top: 150px; left: 5%; width: 62%; height: 130px;
  transform: rotate(4.5deg);
  background: #f6efdc;
}

.scrap-2 {
  top: 200px; right: 4%; width: 60%; height: 130px;
  transform: rotate(-5.5deg);
  background: #fbf6e9;
}

/* The one on top is the one you can actually read. */
.scrap-1 {
  bottom: 0; left: 3%; width: 86%;
  transform: rotate(-1.6deg);
  box-shadow: 0 18px 34px -18px rgba(34, 53, 39, 0.5);
}

/* Feint ruling on the index card, drawn rather than imaged. */
.ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    rgba(80, 120, 150, 0.16) 27px 28px
  );
  background-position: 0 46px;
}

.hand-title {
  display: block;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 600;
  font-size: 25px;
  color: #2f4a63;
  margin-bottom: 8px;
}

.hand {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 21px;
  line-height: 28px;
  color: #35506b;
}

/* The margin note. This is the thing the app turns into the story. */
.hand.aside {
  margin-top: 14px;
  color: #8a6a4a;
  transform: rotate(-1.4deg);
  font-size: 19px;
}

/* Ruled lines standing in for handwriting on the buried scraps. */
.hand-line {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(47, 74, 99, 0.18);
  margin: 14px 0;
}
.hand-line.short { width: 55%; }

/* ---------------------------------------------------------- the connector */


/* Many recipes feed the mark; one book leaves it. Hairlines, not lightning:
   the page is paper and patience, and a spark reads as the wrong product. */








/* ------------------------------------------------------------------ kept */

.kept {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.kept .eyebrow { display: block; margin-bottom: 5px; }
.kept p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* The face of the card reproduces the app's recipe screen; the sheets behind it
   say "booklet" without needing a caption. */

/* Inside the phone it IS the screen, so it carries no card chrome of its own. */
.card {
  position: relative;
  z-index: 0;
  padding: 0 0 40px;
}

.card .cuisine { color: var(--terracotta); }

.card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.2;
  margin: 6px 0 10px;
}

/* Attribution pair, exactly as the app stacks it: who it came from, then who recorded it. */
.card .from {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--green);
  margin: 0;
}

.card .by { font-size: 14px; color: var(--muted); margin: 2px 0 0; }

.card .pills, .card .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.card .pills { margin-top: 13px; }
.card .chips { margin-top: 8px; }

.card .pills li, .card .chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 13px;
  padding: 6px 12px;
  white-space: nowrap;
}

.card .pills li { background: var(--pill); color: var(--ink); }
.card .chips li { background: var(--chip); color: var(--terracotta); }

.card svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card .sec-head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  margin: 18px 0 0;
}

/* The short terracotta rule the app draws under a section heading. */
.card .sec-head::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--terracotta);
  margin-top: 6px;
}

/* The story is the reason the app exists, so it gets the most care on the card. */
.card .story {
  position: relative;
  background: var(--story);
  border-radius: 14px;
  padding: 15px 16px 13px;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-soft);
}

.card .dropcap {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 0.84;
  color: var(--terracotta);
  padding: 3px 7px 0 0;
}

.card .story cite {
  display: block;
  clear: both;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(34, 53, 39, 0.1);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--muted);
}

/* Ingredients heading and its action sit on one line, as in the app. */
.card .ing-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.card .to-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0 0 3px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--green);
  cursor: pointer;
  white-space: nowrap;
}

.card .to-list:hover { text-decoration: underline; }
.card .to-list svg { stroke: var(--green); width: 16px; height: 16px; }

.card .measures { list-style: none; margin-top: 12px; }

.card .measures li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.card .measures li:last-child { border-bottom: 0; }

.card .measures .qty {
  color: var(--terracotta);
  font-variant-numeric: tabular-nums;
}

.card .measures .what { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.card .measures em { font-style: normal; font-family: var(--sans); font-weight: 400; color: var(--muted); }


/* ---------------------------------------------------------------- numbers
   Playfair numerals, exactly as the app's stat strip sets them. */

.numbers {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--cream-deep);
  padding: 40px 0;
}

.numbers .wrap-wide {
  display: flex;
  justify-content: center;
  column-gap: clamp(32px, 8vw, 96px);
  row-gap: 20px;
  flex-wrap: wrap;
  text-align: center;
}

.numbers .n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--green);
}

.numbers .l { font-size: 13px; color: var(--muted); margin-top: 8px; }

.numbers .caption {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---------------------------------------------------------------- promise */

.promise { padding: 72px 0; text-align: center; }

.promise h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.25;
  max-width: 20ch;
  margin: 10px auto 0;
}

.promise .lead { color: var(--cream-dim); max-width: 52ch; margin: 18px auto 0; }

.promise ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 56px);
  flex-wrap: wrap;
  margin-top: 34px;
}

.promise li {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 9px;
}

.promise li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* ----------------------------------------------------------------- shots */

.shots { padding: 76px 0 84px; text-align: center; }

.shots h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); margin: 10px 0 44px; }

.shots .row { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }

.shots figure { width: 230px; }

.shots img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 44px -26px rgba(34, 53, 39, 0.5);
  display: block;
}

.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ------------------------------------------------------------ legal pages */

main.doc { padding: 52px 0 72px; }

.doc h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 40px);
  line-height: 1.15;
  margin-bottom: 10px;
}

.doc-meta {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.doc h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  margin: 42px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* The clay tick that precedes every section heading in the app. */
.doc h2::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--clay);
  transform: rotate(45deg);
  flex: none;
}

.doc h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 28px 0 8px; }

.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 26px; }
.doc li { margin-bottom: 8px; }

.callout-box {
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--clay);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- footer */

footer.site {
  background: var(--green-deep);
  color: rgba(250, 245, 236, 0.6);
  padding: 44px 0 52px;
  font-size: 14px;
}

footer.site .wrap-wide { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }

footer.site .lockup { align-items: center; }
footer.site .mark { width: 28px; height: 28px; }
footer.site .wordmark { font-size: 16px; letter-spacing: 3px; }

footer.site nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
footer.site a { color: var(--cream-dim); text-decoration: none; }
footer.site a:hover { color: var(--cream); text-decoration: underline; }
footer.site .fine { flex-basis: 100%; color: rgba(250, 245, 236, 0.4); font-size: 13px; }

/* -------------------------------------------------------------------- join
   The invite landing page (/join?code=...). Someone arrives here from a
   WhatsApp message, usually on a phone, usually without the app. The code is
   the only thing that matters, so it is set as the specimen of the page: the
   same slab the app's invite sheet uses, at a size that survives a screenshot
   being passed on to a third person. */

.join .lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 30px;
}

.join h1 { margin-top: 6px; }

.code-card {
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-bottom: 26px;
}

.code-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 12px;
}

.code {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 600;
  letter-spacing: 0.16em;
  /* The alphabet excludes O/0 and I/1, so the remaining glyphs never collide;
     the extra tracking is for reading it aloud down a phone line. */
  text-indent: 0.16em;
  color: var(--ink);
  line-height: 1.1;
}

.code-copy {
  margin-top: 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--clay);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
}

.code-copy:hover { background: var(--clay-tint); }

/* A spent or replaced code still gets shown (they may need to read it back to
   whoever sent it), but it stops looking like something to act on. */
.code-card.is-dead .code { color: var(--muted); text-decoration: line-through; }

.join-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

/* The `hidden` attribute only wins by way of the UA stylesheet's
   `[hidden] { display: none }`, which ANY author `display` rule outranks. The
   badges below set `display: inline-flex`, so without this the page's
   `el.hidden = true` calls are silently ignored and a dead invite still offers
   to open the app. Scoped rather than a global !important reset. */
.join [hidden] { display: none; }

/* .badge is drawn for the green bookplate; on cream it has to invert. */
.join .badge {
  background: var(--green);
  color: var(--cream);
}

.join .badge:hover { background: var(--green-lift); }

.join .badge.ghost {
  background: none;
  color: var(--green);
  box-shadow: inset 0 0 0 1.5px var(--green);
}

.join .badge.ghost:hover { background: var(--clay-tint); }

@media (max-width: 620px) {
  /* Thumb-sized targets stacked full width: this page is read on a phone. */
  .join-cta { flex-direction: column; }
  .join .badge { justify-content: center; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  /* The crossing turns vertical: pile above, mark between, phone below. */
  .transform { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .conn { width: 190px; height: 170px; }
  .conn svg { transform: rotate(90deg); }
  .conn .verb { top: 50%; left: calc(50% + 62px); transform: translateY(-50%); }
  .pile { width: 100%; max-width: 420px; }
  .phone { width: 330px; }
        .kept { margin-top: 56px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 8px 0 60px; }
  .masthead nav { display: none; }
  .shots figure { width: 44%; min-width: 150px; }
  .numbers .wrap-wide { gap: 28px 40px; }
}

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