/* Lantern Grove: palette, type and shapes from the game (godot/scripts/UiKit.cs, Sheets.cs). */
@font-face { font-family: "Lora"; src: url("/assets/fonts/lora-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; src: url("/assets/fonts/lora-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tone-a: #1f4032;
  --tone-b: #132a20;
  --cream: #e7e7d4;
  --cream-bright: #f4efdc;
  --title: #f0e6c8;
  --sage: #a3b8a1;
  --honey: #d4b77c;
  --moss-1: #3c5340;
  --moss-2: #2e4736;
  --ink: #1d2e22;
  --hair: rgba(231, 231, 212, 0.14);
  --gutter: clamp(16px, 5vw, 40px);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nav-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tone-b); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tone-b);
  color: var(--cream);
  font: 400 1.0625rem/1.65 var(--sans);
  font-synthesis: none;
  overflow-wrap: break-word;
}
main { flex: 1; overflow-x: clip; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--cream-bright); margin: 0; text-wrap: balance; }
strong { font-weight: 400; color: #f0d9a0; }
em { font-style: normal; color: var(--sage); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--honey); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: #e9d097; }
:focus-visible { outline: 2px solid var(--cream-bright); outline-offset: 3px; border-radius: 4px; }
ul, ol { margin: 0; padding: 0; }

/* The pill: parchment gold for an action, as on the game's primary card. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #e4cf9b, #cfb377);
  box-shadow: 0 10px 26px rgba(6, 16, 11, 0.4), inset 0 1px 0 rgba(255, 248, 224, 0.5);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pill:hover { color: var(--ink); background: linear-gradient(180deg, #ecdaaa, #d8bd82); }

/* ---- Navigation ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(14, 33, 27, 0.92), rgba(14, 33, 27, 0.66));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(231, 231, 212, 0.07);
}
.nav-in { max-width: 1160px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-family: var(--serif); font-size: 1.15rem; color: var(--title); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--cream-bright); }
.brand img { width: 18px; height: 22px; }
.nav ul { list-style: none; display: flex; gap: clamp(10px, 3vw, 28px); }
.nav li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.nav li a:hover { color: var(--honey); }
@media (max-width: 459px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav li a { font-size: 0.875rem; }
}

/* ---- Canvas motes: above the garden and its shade, below every word ---- */
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---- Hero: the web game's home screen. Garden behind, edge shade, title and interface on top ---- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(16px, 3vh, 56px)) var(--gutter) 0;
  min-height: 100svh;
  overflow: hidden;
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: -3; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* src/styles.css .start-menu and .atmosphere, adapted to a long hero. */
  background:
    radial-gradient(ellipse 130% 60% at 50% 34%, rgba(12, 33, 28, 0.52) 0%, rgba(12, 33, 28, 0.36) 52%, rgba(12, 33, 28, 0) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 40%, #10292380 100%),
    linear-gradient(180deg, #122923d8 0%, #12292380 26%, #12292300 58%, #12292300 88%, #12292360 100%);
}
.hero-in { position: relative; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(20px, 5vw, 44px); text-align: center; }
.lockup { display: grid; justify-items: center; min-width: 0; }
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 17vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  color: var(--title);
  text-shadow: 0 2px 24px #0a1e18aa, 0 0 46px rgba(255, 213, 138, 0.22);
}
.wordmark span { display: block; }
.hero .wordmark { font-size: clamp(2.5rem, 13vw, 5.6rem); white-space: nowrap; }
.hero .wordmark span { display: inline; }
.wordmark span + span::after {
  content: "";
  display: inline-block;
  width: 0.26em;
  height: 0.26em;
  margin-left: 0.14em;
  vertical-align: 0.06em;
  background: url("/assets/spark.svg") center / contain no-repeat;
}
.lockup h1 { margin-top: 18px; font-size: clamp(1.32rem, 5.6vw, 1.75rem); line-height: 1.25; color: var(--cream-bright); text-shadow: 0 1px 14px #0a1e18cc; }
.tagline { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(1.05rem, 4.4vw, 1.25rem); line-height: 1.35; color: #e3d5ad; text-shadow: 0 1px 12px #0a1e18cc; }
.perks { list-style: none; margin-top: 14px; display: none; gap: 7px; max-width: 25rem; text-align: left; font-size: 1rem; line-height: 1.4; text-shadow: 0 1px 10px #0a1e18; }
.perks li { position: relative; padding-left: 21px; }
.perks li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10px 3px rgba(255, 213, 120, 0.6); }
.stores { list-style: none; margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
/* A store row. Today it is a span with this class; when a listing is live, make it <a class="store" href="…">. */
.store {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.42rem 1.05rem;
  border: 1px solid rgba(212, 183, 124, 0.55);
  border-radius: 999px;
  color: var(--cream-bright);
  font-size: 0.95rem;
  line-height: 1.3;
  background: rgba(16, 36, 27, 0.62);
  text-decoration: none;
}
a.store { background: linear-gradient(180deg, #e4cf9b, #cfb377); color: var(--ink); border-color: transparent; }
.ghost { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: #f0d9a0; text-shadow: 0 1px 8px #0a1e18; }

/* ---- Phones ---- */
/* The supplied device frame (1008 x 2000) with the shot behind its opening (79, 79 to 928, 1920). The wrapper's width is
   the device's own width (924 of the 1008, the rest is the file's clear margin), which is what the margins take away. */
.phone-wrap { position: relative; width: min(66vw, 270px); flex: none; }
.phone {
  position: relative;
  width: 109.09%;
  margin: -4.98% -4.545%;
  aspect-ratio: 1008 / 2000;
  filter: drop-shadow(0 0 0.6px rgba(231, 231, 212, 0.5)) drop-shadow(0 20px 24px rgba(4, 12, 8, 0.55));
}
/* The shot reaches 5 frame pixels under the bezel; its corners stay inside the bezel's own curve. */
.phone-screen { position: absolute; left: 7.341%; top: 3.7%; width: 85.317%; height: 92.6%; max-width: none; object-fit: cover; border-radius: 12.79% / 5.94%; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prop { position: absolute; pointer-events: none; }
.hero-phone { width: min(88%, 400px); margin-bottom: 44px; }
.prop-base-l { left: -30%; bottom: -4%; width: 66%; filter: drop-shadow(0 8px 10px rgba(4, 12, 8, 0.55)); }
.prop-base-r { right: -28%; bottom: -5%; width: 62%; filter: drop-shadow(0 8px 10px rgba(4, 12, 8, 0.55)); }
.hero-phone .prop-base-l { left: -10%; bottom: -6%; width: 38%; }
.hero-phone .prop-base-r { right: -8%; bottom: -6%; width: 34%; }

/* ---- Sections: two flat greens, so you can see where one stops and the next starts ---- */
.scene { position: relative; isolation: isolate; padding: clamp(64px, 11vw, 112px) var(--gutter); }
.tone-a { background: var(--tone-a); }
.tone-b { background: var(--tone-b); }
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.wrap { position: relative; }
.wrap { max-width: 1160px; margin: 0 auto; }
.scene h2 { font-size: clamp(1.85rem, 7vw, 2.75rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--title); }
.lead { max-width: 34rem; margin: 12px 0 0; }
.more { margin: clamp(30px, 6vw, 48px) 0 0; text-align: center; }
.small { color: var(--sage); font-size: 0.93rem; }

/* Screenshot strips: a finger-sized walk sideways on a phone. */
.scene-shots h2 { text-align: center; }
.strip, .families {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 30px calc(var(--gutter) * -1) 0;
  padding: 8px var(--gutter) 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 183, 124, 0.45) transparent;
}
.shot { flex: none; width: min(62vw, 230px); scroll-snap-align: start; }
.shot .phone-wrap { width: 100%; }
figure { margin: 0; }
figcaption { margin-top: 12px; font-size: 0.95rem; line-height: 1.4; color: var(--cream); text-align: center; }

/* How to play: stepping stones. */
.scene-how h2 { text-align: center; }
.path { list-style: none; margin-top: clamp(26px, 5vw, 44px); display: grid; gap: 44px; justify-items: center; }
.step { position: relative; max-width: 22rem; display: grid; justify-items: center; text-align: center; }
.stone { position: relative; width: 92px; margin-bottom: -18px; z-index: 1; filter: drop-shadow(0 6px 8px rgba(4, 12, 8, 0.6)); }
.stone img { width: 100%; }
.stone span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--ink); }
.board { width: 100%; max-width: 264px; border-radius: 12px; background: rgba(9, 22, 16, 0.6); box-shadow: 0 18px 44px rgba(4, 12, 8, 0.55); }
.step h3 { margin-top: 18px; font-size: 1.42rem; line-height: 1.22; }
.step p { margin: 8px 0 0; }

/* Why: a window, a few friends, and the honest slab of parchment. */
.scene-why h2 { text-align: center; }
.reasons { margin-top: clamp(28px, 5vw, 44px); display: grid; gap: 22px; max-width: 26rem; margin-inline: auto; }
.reason { position: relative; padding: 0 22px 24px; border: 1px solid rgba(201, 185, 133, 0.28); border-radius: 22px; background: linear-gradient(170deg, var(--moss-1), var(--moss-2)); }
.reason h3 { margin-top: 18px; font-size: 1.42rem; line-height: 1.22; }
.reason p { margin: 8px 0 0; }
.arch { display: block; overflow: hidden; border-radius: 999px 999px 14px 14px; border: 1px solid rgba(212, 183, 124, 0.45); box-shadow: 0 12px 28px rgba(4, 12, 8, 0.45); background: var(--moss-2); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.reason { margin-top: 26px; }
.reason-ads { padding-top: 26px; border-color: transparent; background: linear-gradient(170deg, #ecdcae, #d9c084); color: var(--ink); box-shadow: 0 18px 44px rgba(4, 12, 8, 0.5), inset 0 1px 0 rgba(255, 248, 224, 0.6); }
.reason-ads h3 { margin-top: 0; color: var(--ink); font-size: 1.6rem; padding-right: 76px; }
.reason-ads p { margin-top: 10px; }
.prop-ads { right: -8px; top: -34px; width: 118px; filter: drop-shadow(0 6px 6px rgba(29, 46, 34, 0.45)); }

/* Guides: doorways in the hedge. */
.scene-guides h2, .scene-guides .lead { text-align: center; margin-inline: auto; }
.gates { list-style: none; margin-top: clamp(24px, 5vw, 40px); display: grid; gap: 12px; max-width: 36rem; margin-inline: auto; }
.gate a { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 14px 10px 10px; min-height: 44px; border-radius: 20px; color: var(--cream); text-decoration: none; background: rgba(60, 83, 64, 0.38); border: 1px solid transparent; }
.gate a:hover { color: var(--cream); background: rgba(46, 71, 54, 0.82); border-color: rgba(212, 183, 124, 0.4); }
.gate .arch { width: 76px; height: 94px; }
.gate-text { display: grid; gap: 3px; }
.gate h3, .gate h2 { font-size: 1.2rem; line-height: 1.24; color: var(--title); }
.gate-text span { font-size: 0.95rem; line-height: 1.4; }

/* The eight families. */
.wander-head { max-width: 34rem; margin-inline: auto; text-align: center; }
.wander-head p { margin: 12px 0 0; }
.family { flex: none; width: 128px; scroll-snap-align: start; text-align: center; }
.family .arch { height: 160px; }
.family-name { display: block; margin-top: 10px; font-family: var(--serif); font-size: 0.97rem; line-height: 1.28; color: var(--cream-bright); }

/* Daily and weekly. */
.days { display: grid; gap: clamp(56px, 10vw, 96px); max-width: 880px; }
.day { display: grid; gap: 26px; justify-items: center; }
.day-text { max-width: 26rem; }
.day-text h2 { font-size: clamp(1.7rem, 6.6vw, 2.2rem); }
.day-text p { margin: 0.75em 0 0; }

/* ---- Decorations: cutouts at the corners, some leaning over the line between two sections ---- */
.p { z-index: 0; filter: drop-shadow(0 8px 9px rgba(4, 12, 8, 0.5)); }
.p-shots-a { left: 6px; top: -22px; width: 104px; }
.p-shots-b { display: none; }
.p-how-a { right: -8px; top: -30px; width: 118px; }
.p-how-b, .p-how-c { display: none; }
.p-why-a { display: none; }
.p-why-b { left: 10px; top: -22px; width: 84px; }
.p-guides-a { right: 8px; top: -36px; width: 74px; filter: none; }
.p-guides-b { display: none; }
.p-wander-a { left: -8px; top: -24px; width: 100px; }
.p-wander-b { display: none; }
.p-days-a { display: none; }
.p-days-b { right: 8px; top: -20px; width: 80px; }
@media (min-width: 900px) {
  .p-shots-a { left: 3%; top: -40px; width: 190px; }
  .p-shots-b { display: block; left: 3%; bottom: 22px; width: 150px; }
  .p-how-a { right: 2%; top: -60px; width: 240px; }
  .p-how-b { display: block; left: 3.5%; bottom: 44px; width: 104px; filter: none; }
  .p-how-c { display: block; left: 8%; bottom: 22px; width: 120px; }
  .p-why-a { display: block; right: -84px; top: -120px; width: 300px; }
  .p-why-b { left: 5%; top: -34px; width: 140px; }
  .p-guides-a { right: 6%; top: -56px; width: 116px; }
  .p-guides-b { display: block; left: 2%; bottom: 16px; width: 210px; }
  .p-wander-a { left: 4%; top: -48px; width: 196px; }
  .p-wander-b { display: block; right: 3%; bottom: 30px; width: 180px; }
  .p-days-a { display: block; left: -96px; top: -110px; width: 290px; }
  .p-days-b { right: 7%; top: -34px; width: 130px; }
}

/* ---- The ending: the garden again, with the title, the labels and the footer sitting in it ---- */
.ending { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: clamp(60px, 11vw, 110px); padding: clamp(84px, 15vw, 140px) var(--gutter) 18px; color: var(--cream); font-size: 0.95rem; text-align: center; }
.ending::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 50% at 50% 42%, rgba(12, 33, 28, 0.72) 0%, rgba(12, 33, 28, 0.3) 70%, rgba(12, 33, 28, 0) 100%), linear-gradient(180deg, rgba(14, 33, 27, 0) 58%, rgba(14, 33, 27, 0.9) 84%, rgba(14, 33, 27, 0.96) 100%); }
.close { display: grid; justify-items: center; font-size: 1.0625rem; }
.close-lantern { width: 118px; margin-bottom: 8px; }
.close .wordmark { font-size: clamp(2.9rem, 13vw, 4.4rem); }
.close .tagline { margin-top: 14px; }
.ending .foot-in { width: 100%; text-align: left; }

/* ---- Footer ---- */
.foot { padding: 18px var(--gutter) 28px; color: var(--sage); font-size: 0.95rem; }
.foot-in { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
.foot-in p { margin: 0; }
.foot-in ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-in li a { display: inline-block; padding: 11px 0; }

/* ---- Inner pages: a small garden above the words ---- */
.page-head, .page-band { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(var(--nav-h) * -1); }
.page-head { padding: calc(var(--nav-h) + clamp(44px, 10vw, 84px)) var(--gutter) clamp(30px, 6vw, 50px); }
.page-band { height: calc(var(--nav-h) + clamp(120px, 24vw, 200px)); }
.page-head::before, .page-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #122923d0 0%, #12292340 36%, #132a20a8 68%, var(--tone-b) 100%); }
.page-head-in { max-width: 38rem; margin: 0 auto; }
.page-head h1 { font-size: clamp(2.05rem, 8.4vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--title); text-shadow: 0 2px 22px #0a1e18; }
.page-head .lede { text-shadow: 0 1px 12px #0a1e18; }
.crumb { margin: 0 0 8px; }
.crumb a { display: inline-flex; align-items: center; min-height: 32px; color: #f0d9a0; text-shadow: 0 1px 8px #0a1e18; }
.guides-index { padding: 8px var(--gutter) 40px; }
.gates-page { margin-top: 6px; }

/* ---- Long text ---- */
.prose { max-width: 38rem; margin: 0 auto; padding: 8px var(--gutter) clamp(36px, 7vw, 64px); box-sizing: content-box; }
main > .page-band + .prose { padding-top: 0; margin-top: -8px; position: relative; }
.prose h1 { font-size: clamp(2.05rem, 8.4vw, 2.75rem); line-height: 1.14; color: var(--title); }
.prose h2 { margin-top: 2.1em; font-size: 1.6rem; line-height: 1.25; color: var(--title); clear: both; }
.prose h3 { margin-top: 1.9em; font-size: 1.2rem; line-height: 1.3; color: #e9d7a8; }
.prose p, .prose ul, .prose dl { margin: 0.9em 0 0; }
.prose h2 + p, .prose h3 + p { margin-top: 0.55em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-top: 0.5em; }
.prose li::marker { color: var(--honey); }
.prose a { overflow-wrap: anywhere; }
.prose table { width: 100%; margin-top: 1.1em; border-collapse: collapse; font-size: 0.98rem; }
.prose th, .prose td { padding: 0.7em 0.8em 0.7em 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); font-weight: 400; }
.prose th { color: var(--sage); }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--cream); }
.contact { margin-top: 1.4em; padding: 22px clamp(20px, 5vw, 28px); border: 1px solid rgba(201, 185, 133, 0.28); border-radius: 18px; background: linear-gradient(170deg, var(--moss-1), var(--moss-2)); }
.contact p { margin: 0 0 14px; }
.lost { max-width: 30rem; margin: 0 auto; padding: clamp(8px, 3vw, 28px) var(--gutter) clamp(64px, 12vw, 110px); text-align: center; }
.lost h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.16; margin-top: 22px; color: var(--title); }
.lost p { margin: 0.9em 0 1.8em; }
.mark { width: 60px; height: 74px; padding: 16px 16px; margin: 0 auto; border: 1px solid rgba(212, 183, 124, 0.38); border-radius: 22px 22px 12px 12px; background: rgba(212, 183, 124, 0.08); box-shadow: 0 0 34px rgba(255, 213, 138, 0.14); }
.mark img { width: 100%; height: 100%; }

/* Guide furniture. */
.page-head-in { position: relative; }
.page-head:has(.friend) .page-head-in { padding-right: 96px; }
.friend { position: absolute; right: -6px; bottom: -26px; width: 104px; filter: drop-shadow(0 8px 10px rgba(4, 12, 8, 0.55)); }
.margin-prop { display: none; }
.garden-foot { position: relative; isolation: isolate; height: clamp(150px, 26vw, 260px); overflow: hidden; }
.garden-foot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--tone-b) 0%, rgba(19, 42, 32, 0) 56%, rgba(19, 42, 32, 0) 76%, var(--tone-b) 100%); }

.guide .lede { margin-top: 0.9em; }
.bfig { margin: 1.5em auto 0; max-width: 290px; }
.bfig figcaption { color: var(--sage); }
.side { margin: 1.4em auto 0; width: min(62vw, 210px); }
.side .phone-wrap { width: 100%; }
.side figcaption { color: var(--sage); }
.gestures { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.gestures li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 14px 16px; border-radius: 18px; background: linear-gradient(170deg, rgba(60, 83, 64, 0.7), rgba(46, 71, 54, 0.7)); }
.gestures img { width: 44px; height: 44px; padding: 8px; border-radius: 13px 13px 9px 9px; border: 1px solid rgba(212, 183, 124, 0.4); background: rgba(212, 183, 124, 0.08); }
.gestures h3 { margin: 0; }
.gestures p { margin: 0.2em 0 0; }
.trails { clear: both; margin-top: 2.6em; padding-top: 1.2em; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 18px; }
.trail { display: grid; min-height: 44px; text-decoration: none; font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; }
.trail small { font-family: var(--sans); font-size: 0.87rem; color: var(--sage); }
.trail-next { text-align: right; margin-left: auto; }

@media (max-width: 559px) {
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tr { padding: 0.7em 0; border-bottom: 1px solid var(--hair); }
  .prose td { padding: 0.15em 0; border: 0; }
  .prose td[data-h]::before { content: attr(data-h) ": "; color: var(--sage); }
}

@media (min-width: 760px) {
  .side { float: right; width: 190px; margin: 0.4em 0 1em 28px; }
  .side-left { float: left; margin: 0.4em 28px 1em 0; }
  .day { grid-template-columns: 270px minmax(0, 1fr); gap: clamp(40px, 8vw, 88px); align-items: center; justify-items: start; }
  .day-flip { grid-template-columns: minmax(0, 1fr) 270px; }
  .day-flip .phone-wrap { order: 2; }
  .path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 44px); align-items: start; }
  .step:nth-child(2) { margin-top: 44px; }
  .step:nth-child(3) { margin-top: 12px; }
  .reasons { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.4vw, 28px); }
  .reason-friends { margin-top: 62px; }
  .reason-ads { margin-top: 26px; }
  .gates { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); align-items: start; }
  .gate a { display: block; padding: 0; background: none; border: 0; text-align: center; }
  .gate a:hover { background: none; }
  .gate a:hover .arch { border-color: rgba(255, 227, 154, 0.9); }
  .gate .arch { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .gate-text { margin-top: 14px; }
  .gates-page { max-width: 1160px; margin-inline: auto; }
  .strip { justify-content: safe center; }
  .families { justify-content: safe center; }
  .family { width: 124px; }
}
@media (min-width: 1040px) {
  .guide { position: relative; }
  .margin-prop { display: block; width: 190px; opacity: 0.92; filter: drop-shadow(0 8px 10px rgba(4, 12, 8, 0.55)); }
  .margin-l { margin-left: -232px; margin-top: 8px; }
  .margin-r { right: -224px; margin-top: 8px; }
}
/* Stacked hero: no bullets, and everything tight, so the board shows as high as it can. */
@media (max-width: 939px) {
  .hero-in { gap: 8px; }
  .lockup h1 { margin-top: 10px; }
  .hero .tagline { margin-top: 6px; font-size: clamp(0.97rem, 4.1vw, 1.25rem); }
  .hero .stores { margin-top: 12px; gap: 6px 10px; }
  .hero .store { min-height: 38px; padding-block: 0.3rem; font-size: 0.92rem; }
  .hero .ghost { margin-top: 0; }
}
@media (min-width: 940px) {
  .friend { width: 148px; right: -40px; bottom: -44px; }
  .hero { display: grid; align-items: center; padding-bottom: clamp(16px, 3vh, 40px); }
  .hero::before {
    background:
      radial-gradient(ellipse 58% 74% at 26% 48%, rgba(12, 33, 28, 0.74) 0%, rgba(12, 33, 28, 0.42) 56%, rgba(12, 33, 28, 0) 100%),
      radial-gradient(ellipse at 50% 49%, transparent 45%, #10292388 100%),
      linear-gradient(180deg, #142c28b0 0%, #142c2800 26%, transparent 86%, #12292360 100%);
  }
  .hero-in { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; gap: clamp(32px, 4vw, 72px); }
  .lockup { justify-items: start; }
  .hero .wordmark { font-size: clamp(4.4rem, 7vw, 5.8rem); white-space: nowrap; }
  .stores { justify-content: flex-start; }
  /* The phone is the hero's lead, sized from the screen's height too: its body takes 84% of the viewport (height is 2.065 x width). */
  .hero-phone { width: min(40.7svh, 30vw, 460px); margin-bottom: 0; }
  .hero-phone .prop-base-l { left: -34%; bottom: 7%; width: 42%; }
  .hero-phone .prop-base-r { right: -30%; bottom: 6%; width: 38%; }
  .perks { display: grid; max-width: 30rem; }
  .close .wordmark span { display: inline; }
}
@media (min-width: 1200px) {
  .shot { width: 212px; }
  .strip { gap: 22px; }
  .shot:nth-child(even) { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}