/* Rice landing — built from Figma "Rice Landing" (2465:10790), a 1440x1057 frame.
   Desktop reproduces the frame 1:1 by expressing every design pixel as a
   multiple of --u, a length that equals 1px when the page is 1440px wide.
   Below 860px the composition is re-laid out as a normal flow document. */

@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat var";
  src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #241519;
  --ink-soft: #3c3c3c;
  --ink-mute: #6e6e6e;
  --ink-hand: #878787;
  --paper: #fffefc;
  --ghost: #dcdcdb;

  --sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", HelveticaNeue, Helvetica, "Inter var", Inter, Arial, sans-serif;
  --hand: "Caveat var", Caveat, "Bradley Hand", "Segoe Script", cursive;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis-weight: none;
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  /* 1px of design space, capped so the poster neither shrinks to nothing on a
     narrow laptop nor blows up on an ultrawide display. */
  --u: clamp(0.6px, calc(100cqw / 1440), 1.15px);
}

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

a { color: inherit; }

/* ---------- stage ---------- */

.stage {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(1057 * var(--u));
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- logo ---------- */

.logo {
  position: absolute;
  z-index: 3;
  left: calc(40 * var(--u));
  top: calc(40 * var(--u));
  width: calc(14.9638 * var(--u));
  height: calc(22.0168 * var(--u));
}

.logo img { width: 100%; height: 100%; }

/* ---------- copy ---------- */

.headline {
  position: absolute;
  z-index: 3;
  left: calc(40 * var(--u));
  top: calc(160 * var(--u));
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(50 * var(--u));
  line-height: 1.22;
  letter-spacing: -0.05em;
  color: var(--ink);
  white-space: nowrap;
}

.lede {
  position: absolute;
  z-index: 3;
  left: calc(40 * var(--u));
  top: calc(241 * var(--u));
  /* Narrower than the Figma box (628) so the browser breaks the lines where
     the frame does; Inter renders a little tighter here than in Figma. */
  width: calc(555 * var(--u));
  margin: 0;
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: -0.05em;
  color: var(--ink-mute);
}

.lede--strong {
  top: calc(305 * var(--u));
  width: calc(545 * var(--u));
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- store badges ---------- */

.badges {
  position: absolute;
  z-index: 3;
  left: calc(40 * var(--u));
  top: calc(409 * var(--u));
  display: flex;
  gap: calc(7 * var(--u));
}

.badge {
  position: relative;
  display: block;
  height: calc(67 * var(--u));
  border: 1px solid #a6a6a6;
  text-decoration: none;
  transition: transform 120ms ease, opacity 120ms ease;
}

.badge:hover { transform: translateY(-1px); }
.badge:active { transform: translateY(0); opacity: 0.85; }

.badge:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Each piece is placed and sized as a percentage of the badge, so the badge
   stays correct at any scale (an absolutely positioned <img> with auto width
   falls back to its intrinsic size, which only happens to be right at 1:1). */
.badge img { position: absolute; }

.badge--apple {
  width: calc(200 * var(--u));
  background: #0c0d10;
  border-radius: calc(7 * var(--u));
}

.badge--apple .badge__mark     { left: 8.31%;  top: 21.80%; width: 14.764%; height: 54.440%; }
.badge--apple .badge__eyebrow  { left: 29.71%; top: 21.04%; width: 57.626%; height: 15.927%; }
.badge--apple .badge__wordmark { left: 28.71%; top: 44.43%; width: 62.564%; height: 39.302%; }

.badge--play {
  width: calc(227 * var(--u));
  background: #000;
  border-radius: calc(5 * var(--u));
  overflow: hidden;
}

/* Figma exports this badge's pieces flipped on the Y axis; undo that. */
.badge--play img { transform: scaleY(-1); }

.badge--play .badge__mark     { left: 7.39%;  top: 17.85%; width: 17.047%; height: 64.301%; }
.badge--play .badge__eyebrow  { left: 30.56%; top: 16.87%; width: 28.937%; height: 16.219%; }
.badge--play .badge__wordmark { left: 30.40%; top: 42.62%; width: 62.797%; height: 42.572%; }

/* ---------- phone mockups ---------- */

.phone {
  position: absolute;
  top: calc(186 * var(--u));
  width: calc(340 * var(--u));
  height: calc(686 * var(--u));
  object-fit: cover;
}

/* The right phone sits behind the recipe names; the left one covers them. */
.phone--week { left: calc(1059 * var(--u)); z-index: 0; }
.phone--home { left: calc(755 * var(--u)); z-index: 2; }

/* ---------- recipe name cloud ---------- */

.cloud {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.cloud li {
  position: absolute;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  /* Figma measured these names ~11% wider than the browser draws Inter at the
     designed -0.05em, so the tracking is relaxed to match the frame's extents. */
  letter-spacing: -0.005em;
  color: var(--ghost);
  opacity: 0.8;
  white-space: nowrap;
}

.c1  { left: calc(32 * var(--u));  top: calc(590 * var(--u)); }
.c2  { left: calc(467 * var(--u)); top: calc(629 * var(--u)); }
.c3  { left: calc(148 * var(--u)); top: calc(662 * var(--u)); }
.c4  { left: calc(387 * var(--u)); top: calc(668 * var(--u)); }
.c5  { left: calc(13 * var(--u));  top: calc(710 * var(--u)); }
.c6  { left: calc(362 * var(--u)); top: calc(742 * var(--u)); }
.c7  { left: calc(63 * var(--u));  top: calc(757 * var(--u)); }
.c8  { left: calc(13 * var(--u));  top: calc(794 * var(--u)); }
.c9  { left: calc(476 * var(--u)); top: calc(799 * var(--u)); }
.c10 { left: calc(62 * var(--u));  top: calc(847 * var(--u)); }
.c11 { left: calc(317 * var(--u)); top: calc(871 * var(--u)); }
.c12 { left: calc(922 * var(--u)); top: calc(873 * var(--u)); }
.c13 { left: calc(63 * var(--u));  top: calc(894 * var(--u)); }
.c14 { left: calc(800 * var(--u)); top: calc(918 * var(--u)); }
.c15 { left: calc(933 * var(--u)); top: calc(934 * var(--u)); }

/* ---------- handwritten note ---------- */

.note {
  position: absolute;
  z-index: 3;
  left: calc(47 * var(--u));
  top: calc(1002 * var(--u));
  margin: 0;
  width: calc(800 * var(--u));
  height: calc(38 * var(--u));
}

.note__text {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--u));
  font-family: var(--hand);
  font-weight: 400;
  font-size: calc(24.7 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-hand);
  white-space: nowrap;
}

.note__arrow {
  position: absolute;
  left: calc(726 * var(--u));
  top: calc(8 * var(--u));
  width: calc(66 * var(--u));
  height: calc(22 * var(--u));
}

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  body { --u: 1px; }

  .stage {
    width: auto;
    height: auto;
    overflow: visible;
    padding: 30px 22px 44px;
  }

  .logo,
  .headline,
  .lede,
  .badges,
  .phone,
  .cloud,
  .cloud li,
  .note,
  .note__text,
  .note__arrow {
    position: static;
    inset: auto;
  }

  .logo { display: block; width: 15px; height: 22px; margin-bottom: 42px; }

  .headline {
    font-size: clamp(30px, 8.4vw, 46px);
    line-height: 1.1;
    white-space: normal;
    max-width: 12ch;
    margin-bottom: 20px;
  }

  .lede {
    width: auto;
    max-width: 32em;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
  }

  .badges { margin: 26px 0 36px; flex-wrap: wrap; gap: 10px; }
  .badge { height: 52px; }
  .badge--apple { width: 155px; border-radius: 6px; }
  .badge--play { width: 176px; border-radius: 5px; }

  .phones {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 -22px;
  }

  .phone {
    width: 48%;
    max-width: 260px;
    height: auto;
  }

  .phone--home { order: 0; position: relative; z-index: 2; }
  .phone--week { order: 1; margin-left: -4%; z-index: 0; }

  .cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    margin: 40px -8px 0;
  }

  .cloud li {
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 1.3;
    letter-spacing: -0.04em;
  }

  .note {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 34px 0 4px;
    text-align: center;
  }

  .note__text {
    font-size: 21px;
    white-space: normal;
    max-width: 24em;
  }

  .note__arrow { width: 52px; height: 18px; flex: none; }

}

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