/* Pulang (the design's display font) is not on Google Fonts, so it is served
   from the fonts folder. Chewy is the Google Fonts fallback while it loads. */
@font-face {
  font-family: "Pulang";
  src: local("Pulang"), local("Pulang Regular"), local("Pulang-Regular"),
    url("fonts/Pulang.otf") format("opentype"),
    url("fonts/Pulang.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  /* Named --color-body-text (not --color-text) on purpose: styles.css
     defines its own --color-text for the shared nav/footer components,
     and this page's body copy is a lighter gray than that shared value —
     a shared name here would leak this gray into the shared components. */
  --color-body-text: #3d3d3d;
  --color-heading: #3d3d3d;
  --color-subtitle: #636363;
  --color-black: #3d3d3d; /* despite the name, this is the site's standard text color, not literal black */
  --color-white: #ffffff;
  --color-off-white: #fffdfd;
  --color-hero-eyebrow: #f5f5f5;
  --color-muted: #919191;
  --color-footer-text: #1e1e1e;
  --color-header-bg: #f9fff7;
  --color-discord: #7289da;
  --color-instagram: #ff4c5b;
  --color-green-border: #649d35;
  --color-green-dark: #4b7d22;
  --color-green-link: #6ec313;
  --color-grass: #acd87d;
  --color-grass-dark: #76b730;
  --color-yellow: #f2e35d;
  --color-highlight-teal: #deffff;
  --color-highlight-pink: #ffe4ef;
  --color-highlight-yellow: #fffacf;
  --color-note-teal: #deffff;
  --color-note-teal-dark: #a7ecec;
  --color-note-yellow: #fffacf;
  --color-note-yellow-dark: #f5ec9e;
  --color-note-pink: #ffe4ef;
  --color-note-pink-dark: #f8c9dc;
  --color-note-blue: #e3e9ff;
  --color-note-blue-dark: #c3cff5;
  --color-paper: #faf7ef;
  --color-paper-border: #b4b1ac;
  --color-card-border: #b9b6b6;
  --color-card-rule-red: #e4a9a1;
  --color-card-rule-blue: rgba(77, 170, 212, 0.5);
  --color-calendar-border: rgba(61, 61, 61, 0.08);
  --color-footer-top: #d8f5ff;
  --color-footer-bottom: #e6f0ff;
  --color-footer-flat: #def3ff;
  --color-track: #dcdcdc;
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-overlay-strong: rgba(0, 0, 0, 0.25);
  --color-scrim: rgba(0, 0, 0, 0.6);

  /* Fonts */
  --font-display: "Pulang", "Nunito", sans-serif;
  --font-body: "Nunito", sans-serif;

  --text-title: 64px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-subtitle-lg: 24px;
  --text-body: 20px;
  --text-button: 18px;
  --text-small: 16px;
  --text-caption: 12px;

  --leading-display: 1.2;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --leading-small: 1.25;

  --tracking: 0.02em;
  --tracking-button: 0.05em;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-10: 40px;
  --space-12: 48px;
  --page-gutter: 48px;
  --section-top: 69px;
  --content-max: 1440px;
  --header-height: 104px;

  /* Shapes and shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --shadow-gallery: drop-shadow(-1.462px 4.386px 0.439px rgba(0, 0, 0, 0.12));
  --shadow-note: drop-shadow(-1.741px 3.482px 1.741px rgba(0, 0, 0, 0.1));
  --shadow-sticker: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  --shadow-text: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Matches the rest of the site's side margin (shared --grid-margin) at
   laptop widths (e.g. MacBook, ~1512px) — 84px. --content-max is also
   disabled here (raised high enough to never cap anything) since it
   would otherwise combine with margin-inline:auto on sections below to
   add extra margin beyond --page-gutter; desktop monitor widths
   (>1800px) are intentionally left on the original --content-max: 1440px
   centering behavior above. Placed before the narrower mobile overrides
   below so those still win at their own widths. */
@media (max-width: 1800px) {
  :root {
    --page-gutter: 84px;
    --content-max: 5000px;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  /* styles.css makes body a column flexbox so the shared footer can stick
     to the bottom of short pages; home's own layout isn't built around
     that (and flex-shrinking a tall .page was squashing the hero), so
     it goes back to plain block flow here. */
  display: block;
  min-height: 0;
  margin: 0;
  background: var(--color-off-white);
  color: var(--color-body-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
}

h1,
h2,
h3,
p,
ul,
figure,
blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-discord);
  outline-offset: 3px;
}

section[id] {
  scroll-margin-top: var(--header-height);
}

.page {
  overflow-x: clip;
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  color: var(--color-black);
}

.skip-link:focus {
  top: var(--space-4);
}

.text-link {
  color: var(--color-green-link);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.15s ease;
}

.text-link:hover {
  color: #649D35;
}

/* Scroll reveal: content fades and rises into place as it is scrolled to, the
   same as on the other pages (reveal.js adds .js and .is-visible). Without the
   script everything is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-button);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-button);
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.btn:hover {
  filter: brightness(0.94);
}

.btn--discord {
  background: var(--color-discord);
  color: var(--color-off-white);
}

.btn--shadow {
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
}

.btn--shadow:hover {
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25)) brightness(0.94);
}

.btn--secondary {
  padding-inline: var(--space-6);
  border: 1px solid var(--color-green-border);
  background: var(--color-off-white);
  color: var(--color-green-dark);
  /* Same hover treatment as DinoDex's Open Catalog Sheet (.btn-secondary in
     styles.css — same border/text colors under different variable names),
     instead of the generic .btn:hover brightness dim: a background-color
     swap plus an inset box-shadow that "thickens" the border, both eased
     over 300ms so neither one snaps. */
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.btn--secondary:hover {
  filter: none;
  background: #f2fff5;
  box-shadow: inset 0 0 0 1px var(--color-green-border);
}

.btn--tertiary {
  padding-inline: var(--space-6);
  background: var(--color-off-white);
  color: var(--color-green-link);
  text-decoration: underline;
  text-decoration-thickness: 8%;
}

.btn--instagram {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--color-instagram);
  color: var(--color-off-white);
}

.btn--instagram__gradient {
  position: absolute;
  max-width: none;
}

.btn--instagram__gradient--1 {
  left: 88px;
  top: -70px;
}

.btn--instagram__gradient--2 {
  left: -52px;
  top: -29px;
}

.btn--instagram__gradient--3 {
  left: -48px;
  top: 9px;
}

.btn--instagram__gradient--4 {
  left: -112px;
  top: -47px;
  width: 266.59px;
  height: 111.909px;
  display: grid;
  place-items: center;
}

.btn--instagram__gradient--4 img {
  max-width: none;
  rotate: -2.4deg;
}

.btn--instagram__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

/* Stickers: an outline layer and a face layer sharing one centre */
.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sticker img {
  grid-area: 1 / 1;
  max-width: none;
}

/* Some stickers swap artwork on phones through a <picture> */
.sticker picture {
  display: contents;
}

/* Section headers */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.section-header__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-header__heading img {
  flex: none;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: var(--leading-display);
}

.section-header__subtitle {
  font-weight: 600;
  line-height: var(--leading-heading);
}

/* Hero */
.hero {
  /* styles.css's shared .hero (a flat placeholder banner used by pages
     like About/Rules) sets height/display/align-items for that simpler
     layout; this page's hero is sized by its own content, so those get
     reset back to normal block flow here. */
  display: block;
  width: auto;
  height: auto;
  position: relative;
  overflow: hidden;
  color: var(--color-off-white);
}

/* The artwork starts 28px above the section, tucked under the header */
.hero__image,
.hero::after {
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  height: calc(100% + 28px);
}

.hero__image {
  object-fit: cover;
  object-position: 27% 50%;
}

/* At very wide (desktop monitor) widths, the hero's fixed-height box gets
   proportionally much wider than the artwork, so cover has to crop it
   vertically to fill the box. Centered (50%) trims evenly off the top and
   bottom; anchoring to the bottom instead crops only from the top (sky)
   so nothing is lost off the bottom. No effect at laptop widths and
   narrower, where the box never needs a vertical crop. */
@media (min-width: 1801px) {
  .hero__image {
    object-position: 27% 100%;
  }
}

.hero::after {
  content: "";
  background: linear-gradient(to bottom, var(--color-overlay) 20%, rgba(102, 102, 102, 0) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  height: 920px;
  margin-inline: auto;
  padding: 52px var(--page-gutter) 0;
}

.hero__title {
  max-width: 812px;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: var(--leading-display);
  text-shadow: var(--shadow-text);
}

.hero__eyebrow {
  font-size: var(--text-h2);
  color: var(--color-hero-eyebrow);
}

.hero__subtitle {
  margin-top: var(--space-4);
  font-size: var(--text-subtitle-lg);
  font-weight: 500;
  line-height: var(--leading-heading);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.hero__cta-note {
  font-weight: 600;
  line-height: var(--leading-heading);
}

/* Decorations of the green card the CTA becomes on phones */
.hero__cta-decor {
  display: none;
}

.hero__sticker-dino {
  top: 32px;
  right: 64.77px;
  width: 176.234px;
  height: 162.018px;
  filter: var(--shadow-sticker);
}

.hero__sticker-dino img {
  rotate: 12.6deg;
}

.hero__sticker-flower {
  top: 197px;
  right: 1.58%;
  width: 145.313px;
  height: 144.685px;
}

.hero__sticker-flower img {
  rotate: -14.6deg;
}

/* Fixed to the viewport: sits near the bottom of the screen, but never lower
   than its spot in the design (802px down the hero). */
.hero__scroll {
  position: fixed;
  top: min(calc(100vh - 118px), calc(var(--header-height) + 802px));
  right: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
  width: 28px;
  height: 20px;
  scale: 1 -1;
  animation: hero-scroll-float 2.4s ease-in-out infinite;
}

/* Fades out slowly once the page is scrolled; with no transition on the base
   state it snaps back as soon as the class is removed at the top. */
.hero__scroll.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, visibility 0s 1.5s;
}

@keyframes hero-scroll-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 10px;
  }
}

.hero__scroll::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

.hero__scroll img {
  position: absolute;
  left: 0.06px;
  top: 1.18px;
  max-width: none;
}

/* Info */
.info {
  overflow: hidden;
}
/* Matches DinoDex's 110px gap under its hero at laptop widths (e.g.
   MacBook, ~1512px) — Home has no gap here otherwise. */
@media (max-width: 1800px) {
  .info { margin-top: 110px; }
}

.info__inner {
  position: relative;
  max-width: var(--content-max);
  height: 1024px;
  margin-inline: auto;
}

.info__flower,
.info__cloud-pink,
.info__cloud-teal,
.info__arrow {
  position: absolute;
  pointer-events: none;
}

.info__flower {
  left: calc(25% + 78px);
  top: -62px;
}

.info__cloud-pink {
  left: calc(95.83% + 2.5px);
  top: 113px;
  max-width: none;
  translate: -50% 0;
}

.info__cloud-teal {
  left: -85px;
  top: 744px;
  width: 203.993px;
  height: 200.035px;
  display: grid;
  place-items: center;
}

.info__cloud-teal img {
  max-width: none;
  rotate: -30deg;
}

.info__arrow {
  left: calc(83.33% - 24px);
  top: 737px;
  width: 152.194px;
  height: 165.366px;
  display: grid;
  place-items: center;
}

.info__arrow-shape {
  position: relative;
  width: 134.228px;
  height: 98.242px;
  rotate: -120deg;
  scale: 1 -1;
}

.info__arrow-shape img {
  position: absolute;
  left: -3.25px;
  top: -3.26px;
  max-width: none;
}

/* Each feature is a row of art + text with a fixed gap between them, so the
   text keeps its distance from the art at any page width. */
.feature {
  position: absolute;
  display: flex;
  align-items: center;
}

.feature__art,
.feature__text {
  position: relative;
  flex: none;
}

.feature__art img {
  max-width: none;
}

.feature__shape,
.feature__shape-wrap,
.feature__image-crop {
  position: absolute;
}

.feature__text {
  width: 307px;
  isolation: isolate;
}

.feature__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: var(--leading-heading);
}

.feature__body {
  margin-top: var(--space-5);
}

.feature__body strong {
  font-weight: 400;
  color: var(--color-black);
}

.feature__lead {
  font-size: var(--text-button);
}

.feature__highlight {
  position: absolute;
  z-index: -1;
  max-width: none;
}

/* Various events */
.feature--events {
  left: 88px;
  top: 105px;
  gap: var(--space-2);
}

.feature--events .feature__art {
  width: 384.244px;
  height: 271.643px;
}

.feature--events .feature__shape {
  left: 31px;
  top: 28px;
}

.feature--events .feature__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature--events .feature__highlight--1 {
  left: 192px;
  top: 64.5px;
}

.feature--events .feature__highlight--2 {
  left: -3px;
  top: 92.5px;
}

/* Low commitment */
/* Text sits to the left of the art here; anchored from the right so the art
   keeps its place in the design. */
.feature--commitment {
  right: calc(33.33% - 356px);
  top: 333px;
  flex-direction: row-reverse;
  gap: 41px;
}

.feature--commitment .feature__art {
  width: 321px;
  height: 239px;
}

.feature--commitment .feature__shape {
  left: 0;
  top: 0;
}

.feature--commitment .feature__image-crop {
  left: 53px;
  top: 0;
  width: 215.427px;
  height: 237.838px;
  overflow: hidden;
}

.feature--commitment .feature__image {
  width: 493.025px;
  height: 454.711px;
  object-fit: cover;
}

.feature--commitment .feature__highlight {
  left: 71px;
  top: 91.5px;
}

/* Try your luck */
.feature--luck {
  left: 104px;
  top: 484px;
  gap: var(--space-6);
}

.feature--luck .feature__art {
  width: 351.747px;
  height: 351.747px;
}

.feature--luck .feature__shape-wrap {
  left: 15px;
  top: 42px;
  width: 321.001px;
  height: 267.979px;
  display: grid;
  place-items: center;
}

.feature--luck .feature__shape {
  position: static;
  rotate: 90deg;
}

.feature--luck .feature__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature--luck .feature__highlight {
  left: -2.03px;
  top: 93.85px;
  rotate: 1.24deg;
}

.info__ctas {
  position: absolute;
  left: calc(33.33% + 55px);
  top: 855px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Community */
.community__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--section-top) var(--page-gutter) 23px;
}

/* Every gallery measurement is a multiple of --u, one design pixel scaled to
   the gallery's width, so the collage keeps its proportions at any size. */
.gallery {
  container-type: inline-size;
  max-width: 1343.64px;
  margin-top: -6px;
}

.gallery__stage {
  --u: calc(100cqw / 1343.64);
  position: relative;
  height: calc(838 * var(--u));
  font-size: calc(20 * var(--u));
}

.gallery__stage img {
  max-width: none;
}

.gallery__background {
  position: absolute;
  left: calc(70.94 * var(--u));
  top: calc(78.02 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(657 * var(--u));
}

/* Clips the slides to the stage while they travel in and out */
.gallery__slides {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.gallery__slide.is-active {
  visibility: visible;
}

/* The left arrow sends the current slide out to the right and brings the new
   one in from the left; the right arrow does the reverse. */
.gallery[data-direction="prev"] {
  --slide-in-from: -100%;
  --slide-out-to: 100%;
}

.gallery[data-direction="next"] {
  --slide-in-from: 100%;
  --slide-out-to: -100%;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery__slide.is-entering {
    animation: gallery-slide-in 0.6s ease both;
  }

  .gallery__slide.is-leaving {
    visibility: visible;
    animation: gallery-slide-out 0.6s ease both;
  }
}

@keyframes gallery-slide-in {
  from {
    translate: var(--slide-in-from) 0;
  }
}

@keyframes gallery-slide-out {
  to {
    translate: var(--slide-out-to) 0;
  }
}

.index-card,
.polaroid,
.photo-strip {
  position: absolute;
  border-radius: var(--radius-sm);
  filter: var(--shadow-gallery);
}

.index-card {
  left: calc(447.19 * var(--u));
  top: calc(396.16 * var(--u));
  width: calc(524.1 * var(--u));
  height: calc(314.6 * var(--u));
  border: 1px solid var(--color-card-border);
  rotate: -2.03deg;
  background-color: var(--color-off-white);
  background-image:
    linear-gradient(var(--color-card-rule-red), var(--color-card-rule-red)),
    repeating-linear-gradient(to bottom, var(--color-card-rule-blue) 0 1px, transparent 1px calc(26.6 * var(--u)));
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% calc(214 * var(--u));
  background-position: 0 calc(42.4 * var(--u)), 0 calc(72 * var(--u));
}

.index-card__quote {
  position: absolute;
  top: calc(76.6 * var(--u));
  left: calc(19.4 * var(--u));
  right: calc(12.5 * var(--u));
  /* The body's default 1.5 line-height (30u at this 20u font-size) is taller
     than the card's ruled-line spacing (26.6u), so each successive line
     drifted further down and crossed the blue rules instead of sitting
     between them. 1.33 (26.6/20) matches the rule spacing exactly. */
  line-height: 1.33;
}

.index-card__author {
  color: var(--color-muted);
}

.polaroid {
  left: calc(102.89 * var(--u));
  top: calc(23.67 * var(--u));
  width: calc(530 * var(--u));
  height: calc(432 * var(--u));
  border: 1px solid var(--color-paper-border);
  background: var(--color-paper);
  rotate: -5.33deg;
}

.polaroid__photo {
  position: absolute;
  inset: 4.4% 3.96% 17.82%;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.polaroid__photo img,
.photo-strip__photo img {
  position: absolute;
}

.polaroid__caption {
  position: absolute;
  top: 88.43%;
  left: 0;
  right: 0;
  font-weight: 600;
  line-height: var(--leading-heading);
  text-align: center;
  white-space: nowrap;
}

.polaroid__date {
  color: var(--color-muted);
}

.photo-strip {
  left: calc(988.42 * var(--u));
  top: calc(16.76 * var(--u));
  width: calc(237.96 * var(--u));
  height: calc(734.07 * var(--u));
  border: 1px solid var(--color-paper-border);
  background: var(--color-paper);
  rotate: 3.21deg;
}

.photo-strip__photo {
  position: absolute;
  left: 10.33%;
  right: 10.8%;
  height: 28.92%;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.photo-strip__photo--1 {
  top: 3.2%;
}

.photo-strip__photo--2 {
  top: 35.46%;
}

.photo-strip__photo--3 {
  top: 67.73%;
}

/* Photo crops, as framed in the design */
.crop--bonding {
  left: -9.51%;
  top: -15.34%;
  width: 120%;
  height: 115.55%;
}

.crop--strip-1 {
  left: -64.28%;
  top: -90.83%;
  width: 225.62%;
  height: 266%;
}

.crop--strip-2 {
  left: -11.15%;
  top: -31.41%;
  width: 133.17%;
  height: 157%;
}

.crop--strip-3 {
  left: -50.97%;
  top: -0.23%;
  width: 150.79%;
  height: 100%;
}

.gallery__sticker {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gallery__sticker--blue {
  left: calc(585.02 * var(--u));
  top: 0;
  width: calc(158.15 * var(--u));
  height: calc(144.81 * var(--u));
}

.gallery__sticker--blue img {
  width: calc(139.741 * var(--u));
  height: calc(125.597 * var(--u));
  transform: rotate(11.22deg) translate(calc(-1.16 * var(--u)), calc(2.6 * var(--u)));
}

.gallery__sticker--yellow {
  left: calc(264.97 * var(--u));
  top: calc(576.96 * var(--u));
  width: calc(150.49 * var(--u));
  height: calc(138.52 * var(--u));
}

.gallery__sticker--yellow img {
  width: calc(130.736 * var(--u));
  height: calc(117.709 * var(--u));
  transform: rotate(-13.01deg) translate(calc(-1.2 * var(--u)), calc(2.6 * var(--u)));
}

.gallery__grass {
  position: absolute;
  width: calc(16.0004 * var(--u));
  height: calc(15.75 * var(--u));
}

/* Slide 2: two polaroids over the index card */
.gallery__slide--2 .gallery__background,
.gallery__slide--3 .gallery__background {
  left: calc(72.02 * var(--u));
}

.gallery__slide--2 .index-card {
  left: calc(284.57 * var(--u));
  top: calc(382.71 * var(--u));
  rotate: -1.7deg;
}

.gallery__slide--2 .index-card__quote {
  top: calc(98.7 * var(--u));
  left: calc(22.1 * var(--u));
  right: calc(145.7 * var(--u));
}

.polaroid--big-drop {
  left: calc(130.14 * var(--u));
  top: calc(24.11 * var(--u));
  width: calc(370 * var(--u));
  rotate: -3.57deg;
}

.polaroid--big-drop .polaroid__photo {
  inset-inline: 5.95%;
}

.polaroid--sleepover {
  left: calc(678.93 * var(--u));
  top: calc(226.58 * var(--u));
  rotate: 1.89deg;
}

.crop--big-drop {
  left: -6.08%;
  top: -29.76%;
  width: 118.27%;
  height: 153%;
}

.crop--sleepover {
  left: -1.1%;
  top: -5.88%;
  width: 110.16%;
  height: 120%;
}

.gallery__sticker--yellow-2 {
  left: calc(1111.06 * var(--u));
  top: calc(587.02 * var(--u));
  width: calc(160.03 * var(--u));
  height: calc(146.48 * var(--u));
}

.gallery__sticker--yellow-2 img {
  width: calc(141.353 * var(--u));
  height: calc(127.007 * var(--u));
  transform: rotate(11.22deg) translate(calc(-1.17 * var(--u)), calc(2.63 * var(--u)));
}

.gallery__sticker--purple {
  left: calc(517.03 * var(--u));
  top: calc(53.97 * var(--u));
  width: calc(125.36 * var(--u));
  height: calc(112.54 * var(--u));
}

.gallery__sticker--purple img {
  width: calc(118.354 * var(--u));
  height: calc(106.867 * var(--u));
  transform: rotate(5.62deg) translate(calc(-1.17 * var(--u)), calc(2.63 * var(--u)));
}

.gallery__slide--2 .gallery__grass--1 {
  left: calc(686 * var(--u));
  top: calc(107.76 * var(--u));
}

.gallery__slide--2 .gallery__grass--2 {
  left: calc(105.01 * var(--u));
  top: calc(203.71 * var(--u));
}

/* Slide 3: two portrait polaroids beside the index card */
.gallery__slide--3 .index-card {
  left: calc(709.04 * var(--u));
  top: calc(383.97 * var(--u));
  rotate: none;
}

.gallery__slide--3 .index-card__quote {
  top: calc(73 * var(--u));
  left: calc(39 * var(--u));
  right: calc(39 * var(--u));
}

.polaroid--yarn,
.polaroid--picnic {
  width: calc(280 * var(--u));
  height: calc(434 * var(--u));
}

.polaroid--yarn {
  left: calc(124.73 * var(--u));
  top: calc(43.4 * var(--u));
  rotate: -4.53deg;
}

.polaroid--picnic {
  left: calc(409.88 * var(--u));
  top: calc(150.38 * var(--u));
  rotate: 1.84deg;
}

.polaroid--yarn .polaroid__photo,
.polaroid--picnic .polaroid__photo {
  inset: 4.38% 7.5% 18.2% 7.86%;
}

.polaroid--yarn .polaroid__photo img,
.polaroid--picnic .polaroid__photo img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid--picnic .polaroid__photo img {
  object-position: bottom;
}

.polaroid--yarn .polaroid__caption,
.polaroid--picnic .polaroid__caption {
  top: 88.02%;
}

.gallery__sticker--blue-3 {
  left: calc(1078 * var(--u));
  top: calc(269 * var(--u));
  width: calc(158.15 * var(--u));
  height: calc(144.81 * var(--u));
}

.gallery__sticker--blue-3 img {
  width: calc(139.741 * var(--u));
  height: calc(125.597 * var(--u));
  transform: rotate(11.22deg) translate(calc(-1.16 * var(--u)), calc(2.6 * var(--u)));
}

.gallery__sticker--pink {
  left: calc(108.03 * var(--u));
  top: calc(456.96 * var(--u));
  width: calc(121.73 * var(--u));
  height: calc(108.6 * var(--u));
}

.gallery__sticker--pink img {
  width: calc(117.26 * var(--u));
  height: calc(105.907 * var(--u));
  transform: rotate(-4.07deg) translate(calc(-1.17 * var(--u)), calc(2.63 * var(--u)));
}

.gallery__slide--3 .gallery__grass--1 {
  left: calc(1131.96 * var(--u));
  top: calc(194.74 * var(--u));
}

.gallery__slide--3 .gallery__grass--2 {
  left: calc(141.02 * var(--u));
  top: calc(202.7 * var(--u));
}

.gallery__arrow {
  position: absolute;
  top: calc(385 * var(--u));
  width: calc(46.62 * var(--u));
  height: calc(68.05 * var(--u));
  transition: scale 0.15s ease;
}

.gallery__arrow:hover {
  scale: 1.08;
}

.gallery__arrow--prev {
  left: 0;
}

.gallery__arrow--next {
  left: calc(1295 * var(--u));
}

.gallery__arrow img {
  position: absolute;
  left: calc(-2.34 * var(--u));
  top: 0;
  width: calc(48.9787 * var(--u));
  height: calc(73.3226 * var(--u));
}

.gallery__pagination {
  position: absolute;
  left: calc(641 * var(--u));
  top: calc(751 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.gallery__dot {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: url("images/gallery-dot.svg") center / 100% 100% no-repeat;
  transition: width 0.2s ease;
}

.gallery__dot.is-active {
  width: calc(36 * var(--u));
  background: var(--color-yellow);
}

/* Swipeable row of polaroids: the gallery on phones */
.reel {
  display: none;
}

/* Polaroids and the photo strip straighten on hover and open in the lightbox on click */
.gallery .polaroid,
.gallery .photo-strip {
  cursor: zoom-in;
  transition: rotate 0.3s ease;
}

.gallery .polaroid:hover,
.gallery .polaroid:focus-visible,
.gallery .photo-strip:hover,
.gallery .photo-strip:focus-visible {
  rotate: 0deg;
}

/* Hidden while its enlarged copy is showing in the lightbox */
.gallery .polaroid.is-inspected,
.gallery .photo-strip.is-inspected {
  visibility: hidden;
}

/* Lightbox: script.js copies the clicked polaroid or photo strip in here, enlarged, and
   animates it to and from its place in the gallery. */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
  color: var(--color-body-text);
  touch-action: none;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: none;
}

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
  cursor: zoom-out;
}

.lightbox .polaroid,
.lightbox .photo-strip {
  position: relative;
  left: auto;
  top: auto;
  rotate: none;
}

.lightbox img {
  max-width: none;
}

/* Mobile community carousel — hidden until the 640px breakpoint swaps it in
   for the desktop collage above (script.js builds its content). */
.gallery-mobile {
  display: none;
}

/* Events */
.events__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--section-top) var(--page-gutter) 168px;
}

.events__sticker-dino {
  top: 31px;
  right: 59.2px;
  width: 177.797px;
  height: 163.449px;
  filter: var(--shadow-sticker);
}

.events__sticker-dino img {
  rotate: 12.59deg;
}

.events__sticker-flower {
  position: absolute;
  top: 88px;
  right: 249.7px;
  pointer-events: none;
}

.events__layout {
  display: grid;
  grid-template-columns: 903fr 425fr;
  gap: var(--space-4);
  margin-top: 62px;
}

.events__calendar {
  position: relative;
  aspect-ratio: 903 / 625.03;
  /* Set in script.js: grows the frame when the notes wrap onto more lines, so
     the fourth sticky note still peeks out at the bottom as in the design. */
  min-height: var(--events-peek-height, 0px);
  width: 100%; /* keeps that min-height from widening the box via the aspect ratio */
  min-width: 0;
  overflow: hidden;
  border: 1.596px solid var(--color-calendar-border);
  border-radius: 7.062px;
  box-shadow: 0 3.191px 4.787px rgba(0, 0, 0, 0.1);
}

.events__calendar iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.events__calendar-link {
  position: absolute;
  inset: 0;
}

.events__calendar-link:focus-visible {
  outline-offset: -4px;
}

.events__notes {
  position: relative;
}

/* Scrolls inside the calendar's height; the extra 4px on the left keeps the
   notes' drop shadow from being clipped by the scroll container. */
.events__notes-list {
  position: absolute;
  inset: 0 0 0 -4px;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  /* Bottom room lets the last note scroll clear of the fade */
  padding: 0 0 40px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.events__notes-list::-webkit-scrollbar {
  display: none;
}

.events__notes-fade {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 40px;
  pointer-events: none;
}

/* The same fade flipped onto the top edge; script.js shows it once the notes
   have been scrolled */
.events__notes-fade--top {
  top: -1px;
  bottom: auto;
  scale: 1 -1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.events__notes.is-scrolled .events__notes-fade--top {
  opacity: 1;
}

.sticky-note {
  position: relative;
  padding: var(--space-4) var(--space-4) 32px 14px;
  border: 0.9px solid var(--note-dark);
  border-radius: 2px 2px 2px 24px;
  background: var(--note);
  filter: var(--shadow-note);
}

.sticky-note::after {
  content: "";
  position: absolute;
  left: -0.9px;
  bottom: 0;
  width: 27px;
  height: 28px;
  border-radius: 0 2px 0 24px;
  background: var(--note-dark);
}

.sticky-note--teal {
  --note: var(--color-note-teal);
  --note-dark: var(--color-note-teal-dark);
}

.sticky-note--yellow {
  --note: var(--color-note-yellow);
  --note-dark: var(--color-note-yellow-dark);
}

.sticky-note--pink {
  --note: var(--color-note-pink);
  --note-dark: var(--color-note-pink-dark);
}

.sticky-note--blue {
  --note: var(--color-note-blue);
  --note-dark: var(--color-note-blue-dark);
}

/* Each note is a <details> so phones can use it as an accordion; here it is
   always open (script.js) and its summary is just a heading. */
.sticky-note__summary {
  list-style: none;
  pointer-events: none;
}

.sticky-note__summary::-webkit-details-marker {
  display: none;
}

.sticky-note__icon {
  display: none;
}

.sticky-note__title {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-heading);
}

.sticky-note__body {
  margin-top: var(--space-3);
}

/* Sprouts between Events and Heatmap */
.sprouts {
  position: relative;
  max-width: var(--content-max);
  height: 133px;
  margin-inline: auto;
}

.sprouts img {
  position: absolute;
  bottom: 0;
}

.sprouts__large {
  right: 48px;
}

.sprouts__small {
  right: 184px;
  scale: -1 1;
}

/* Heatmap */
.heatmap {
  background: var(--color-grass);
}

.heatmap__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--section-top) var(--page-gutter) 58px;
}

.heatmap__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.heatmap__decor img {
  max-width: none;
}

/* One drawing of every decoration, used on phones in place of the pieces below */
.heatmap__accessories {
  display: none;
}

.heatmap__flower-sticker {
  position: absolute;
  left: 90.49%;
  top: 5.95%;
}

.heatmap__flower {
  position: absolute;
  width: 55.01px;
  height: 54.6px;
  display: grid;
  place-items: center;
}

.heatmap__flower img {
  transform: rotate(-30deg) translate(-1.17px, 2.63px);
}

.heatmap__flower--yellow {
  left: 53.06%;
  top: -2.24%;
}

.heatmap__flower--white {
  left: -1.39%;
  top: 42.31%;
}

.heatmap__flower--white img {
  transform: rotate(30deg) translate(-1.17px, 2.63px);
}

/* Originally top:96.18%, which overlapped the next section (overflow:hidden)
   by ~20px. Crossing that seam got the sticker clipped by Chromium's layer
   squashing against the next section's overflow box, so it's nudged up to
   stay fully inside .heatmap instead. The rotation is also baked into the
   asset rather than applied as a CSS transform, since a transform here would
   re-promote the image to its own layer and risk the same clipping. */
.heatmap__flower--pink {
  left: 73.89%;
  top: calc(93.3% - 20px);
}

.heatmap__flower--pink img {
  transform: none;
}

/* Hidden on desktop/laptop per request; mobile already hides it via
   .heatmap__decor > :not(picture) in the max-width: 640px block. */
@media (min-width: 641px) {
  .heatmap__flower--pink {
    display: none;
  }
}

.heatmap__grass {
  position: absolute;
}

.heatmap__grass--1 {
  left: calc(87.78% - 1px);
  top: calc(19.98% - 3.28px);
}

.heatmap__grass--2 {
  left: calc(10.69% - 1px);
  top: calc(96.52% - 3.28px);
}

.heatmap__grass--3 {
  left: calc(30.76% - 1px);
  top: calc(5.84% - 3.28px);
}

/* Single grass blades */
.blade {
  position: absolute;
  width: 3.57px;
  height: 16.94px;
  border-radius: 104px;
  background: var(--color-grass-dark);
  translate: -50% -50%;
  rotate: -15deg;
}

.blade--1 {
  left: 99.37%;
  top: 40.93%;
}

.blade--2 {
  left: 34.16%;
  top: 94.12%;
}

.blade--3 {
  left: 72.15%;
  top: 23.75%;
}

.blade--4 {
  left: 0.83%;
  top: 5.57%;
}

/* Pairs of small blades */
.tuft {
  position: absolute;
  width: 0;
  height: 0;
}

.tuft::before,
.tuft::after {
  content: "";
  position: absolute;
  border-radius: 104px;
  background: var(--color-grass-dark);
  rotate: -15deg;
}

.tuft::before {
  left: -0.795px;
  top: -3.77px;
  width: 1.59px;
  height: 7.54px;
}

.tuft::after {
  left: 2.655px;
  top: -0.8px;
  width: 1.03px;
  height: 3.56px;
}

.tuft--1 {
  left: 55.885%;
  top: 17.38%;
}

.tuft--2 {
  left: 3.04%;
  top: 3.015%;
}

.tuft--3 {
  left: 1.86%;
  top: 38.93%;
}

.tuft--4 {
  left: 97.69%;
  top: 91.68%;
}

.tuft--5 {
  left: 74.08%;
  top: 9.075%;
}

.heatmap__map {
  position: relative;
  aspect-ratio: 1344 / 620;
  margin-top: 44px;
  overflow: hidden;
  isolation: isolate; /* keeps the map's own layers under the sticky header */
  border: 2px solid var(--color-off-white);
  border-radius: var(--radius-md);
}

/* Static picture of the map: shown until script.js swaps in the live one */
.heatmap__image {
  position: absolute;
  left: -0.149%;
  top: -3.571%;
  width: 101.567%;
  height: 106.981%;
  max-width: none;
  object-fit: contain;
}

.heatmap__map.is-interactive .heatmap__image {
  display: none;
}

.heatmap__map.maplibregl-map {
  font-family: inherit;
}

/* The map's "how to zoom" hint: the library shows its touch wording in any
   narrow window, so a narrowed desktop window would be told to use two fingers.
   Choose by input instead: a mouse always gets the Ctrl/Cmd + scroll wording. */
@media (hover: hover) {
  .heatmap__map .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message {
    display: block;
  }

  .heatmap__map .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
    display: none;
  }
}

/* Closing */
.closing {
  position: relative;
  height: 850px;
  overflow: hidden;
  color: var(--color-white);
}

.closing__image,
.closing::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.closing__image {
  object-fit: cover;
  object-position: left top;
}

.closing::after {
  content: "";
  background: var(--color-overlay);
}

.closing__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  height: 100%;
  margin-inline: auto;
  padding: 199px var(--page-gutter) 0;
}

.closing__title {
  max-width: 390px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--leading-display);
}

.closing__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: 261px;
  margin-top: var(--space-10);
}

.closing__discord {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.closing__note {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  text-shadow: var(--shadow-text);
}

.closing__sticker {
  top: 64px;
  right: 56.76px;
  width: 172.237px;
  height: 156.823px;
  filter: var(--shadow-sticker);
}

.closing__sticker img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Footer — matches the shared footer used on About/DinoDex/Flash Sales/
   Getting Started/Rules exactly (same markup, assets and positions),
   rather than this page's own one-off illustrations. */
.site-footer {
  width: 100%;
  color: var(--color-black);
  /* Overlaps the grass into the closing photo above it instead of sitting
     on its own white strip, so the blades read as growing out of the
     photo rather than leaving a flat band behind them. */
  margin-top: -145px;
}

/* The grass art is a single ~657px-wide clump, not a seamless tile — built
   from 3 overlapping copies 452px apart, repeated enough to cover very
   wide screens via stacked background layers. */
.footer-grass {
  width: 100%;
  height: 152px;
  /* Transparent (not --color-off-white) so the gaps between blades show
     the closing photo behind them, not a flat color. */
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 657px 152px;
  background-image:
    url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'),
    url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'),
    url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'),
    url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg');
  background-position:
    -226px bottom, 226px bottom, 678px bottom, 1130px bottom, 1582px bottom, 2034px bottom,
    2486px bottom, 2938px bottom, 3390px bottom, 3842px bottom, 4294px bottom, 4746px bottom;
  transform: translateZ(0);
}

.footer-deco {
  position: absolute;
  pointer-events: none;
}

.footer-deco--flower-tl    { left: 0px;   top: 0px;   width: 40px; height: 40px; }
.footer-deco--flower-mid   { left: 478px; top: 226px; width: 40px; height: 40px; }

.footer-deco--cloud1-back  { right: 294px; top: 61px;   width: 65px; height: 34px; }
.footer-deco--cloud1-front { right: 292px; top: 59px;   width: 64px; height: 34px; }
.footer-deco--cloud2-back  { right: 165px; top: 20px;   width: 85px; height: 45px; }
.footer-deco--cloud2-front { right: 162px; top: 18px;   width: 84px; height: 45px; }
.footer-deco--cloud3-back  { right: 65px;  top: 78px;   width: 61px; height: 33px; }
.footer-deco--cloud3-front { right: 62px;  top: 77px;   width: 61px; height: 33px; }
/* Positioned from the bottom (not top: 173px) because Home's footer content
   is a different height than the other pages', so a fixed top offset left
   it short of the bottom edge instead of flush like the green dino. */
.footer-deco--dino-single  { right: 213px; top: auto; bottom: 0; width: 85px; height: 132px; }

@media (max-width: 1800px) {
  .footer-deco--cloud1-back  { top: 111px; }
  .footer-deco--cloud1-front { top: 109px; }
}
/* bottom: 0 (not 9px) so the green dino's feet sit flush with the
   footer's bottom edge, matching the blue dino (dino-single) above. */
.footer-deco--dino-duo     { right: 126px; bottom: 0; width: 81px; height: 107px; }
/* bottom: 0 (not 7px) to sit flush with the footer's bottom edge, matching
   the dinos above instead of floating above it. */
.footer-deco--flower-small-1 { right: 28px; bottom: 0; width: 39px; height: 43px; }
.footer-deco--flower-small-2 { right: 70px; bottom: 0; width: 29px; height: 32px; }

.footer-deco-m { display: none; position: absolute; pointer-events: none; }

.footer-column__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-body);
  color: var(--color-black);
}

.footer-column__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-column__links a {
  font-size: var(--text-body);
  letter-spacing: 0.4px;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 300ms ease;
}
.footer-column__links a:hover {
  border-bottom-color: currentColor;
}

/* A small hover flourish on top of styles.css's shared footer-social__icon. */
.footer-social__icon {
  transition: scale 0.15s ease;
}
.footer-social__icon:hover {
  scale: 1.1;
}
.footer-social__icon img {
  width: 24px;
  height: 24px;
}

/* Footer — mobile. Matches DinoDex's mobile footer exactly (same 2-column
   grid, grass tiling and flat-PNG decorations), breakpoint matching every
   other page. */
@media (max-width: 640px) {
  /* DinoDex's own content ends on a light background, so its footer wants
     64px of breathing room above it; home's "closing" section is a full-
     bleed dark photo right up to the footer, where that margin would just
     show as a stray white gap before the grass. */
  .footer-content { padding-bottom: 155px; }

  /* Overlaps the grass into the closing photo above it instead of sitting
     on its own white strip, so the gaps between blades show the photo
     itself (not a flat color) and the blades read as growing out of it. */
  .site-footer {
    margin-top: -44px;
  }
  .footer-grass {
    height: 45px;
    background-color: transparent;
    background-size: 195px 45px;
    background-image: url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg');
    background-position: -120px bottom, -10px bottom, 100px bottom, 210px bottom, 320px bottom;
  }
  .footer-deco { display: none; }
  .footer-deco-m { display: block; }
  .footer-deco-m--cloud1 { left: -30px; top: 18px; width: 42px; height: 47px; }
  .footer-deco-m--cloud2 { left: 264px; top: 354px; width: 95px; height: 57px; }
  .footer-deco-m--cloud3 { left: 352px; top: 152px; width: 46px; height: 45px; }
  .footer-deco-m--dino-blue { left: 21px; bottom: 0; width: 62px; height: 94px; }
  .footer-deco-m--dino-green { left: 86px; bottom: 0; width: 59px; height: 77px; }
  .footer-deco-m--flower1 { left: 187px; bottom: 0; width: 29px; height: 31px; }
  .footer-deco-m--flower2 { left: 164px; bottom: 0; width: 21px; height: 23px; }

  /* Social icons become the same Discord/Instagram pill CTA buttons used
     in the mobile nav, stacked above the copyright. */
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .footer-social {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .footer-social__icon {
    width: auto;
    height: 48px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    gap: var(--space-2);
    background: var(--color-discord);
    color: var(--color-off-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-small);
    line-height: 1.3;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }
  .footer-social__icon[href*="instagram"] {
    background:
      radial-gradient(circle at 15% 20%, #0c6acf 0%, transparent 42%),
      radial-gradient(circle at 35% 10%, #a139bf 0%, transparent 45%),
      radial-gradient(circle at 55% 35%, #e732b1 0%, transparent 48%),
      radial-gradient(circle at 75% 60%, #ff8f41 0%, transparent 50%),
      radial-gradient(circle at 92% 85%, #ffde46 0%, transparent 55%),
      #ff4c5b;
  }
  .footer-social__icon[href*="discord"]::after { content: "Join Our Discord"; }
  .footer-social__icon[href*="instagram"]::after { content: "Check Our Instagram"; }

  /* Community: the desktop collage gives way to a swipeable photo carousel,
     with the testimonial text swapping to match whichever photo is in view.
     Padding lives on .gallery-mobile itself (not inherited from
     .community__inner) since that parent's own inline padding is zeroed
     out for the full-bleed reel carousel elsewhere in this stylesheet. */
  .gallery { display: none; }
  .gallery-mobile {
    display: block;
    margin-top: 20px;
    padding-inline: var(--page-gutter);
  }

  .gallery-mobile__quote {
    margin: 24px 0 0;
  }

  .gallery-mobile__quote p {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-small);
    line-height: 1.5;
    letter-spacing: 0.32px;
    color: #3d3d3d;
  }

  .gallery-mobile__quote footer {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-small);
    line-height: 1.5;
    letter-spacing: 0.32px;
    color: var(--color-muted);
  }

  .gallery-mobile__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* .gallery-mobile's own padding-inline would otherwise cap the
       scrollable area short of the viewport edge; escape it here so the
       carousel can scroll flush to the right edge of the page. Trailing
       space after the last card comes from a margin on the item itself
       (below) rather than padding here, which some browsers don't
       reliably include in the scrollable area at the end of a flex row. */
    margin-right: calc(-1 * var(--page-gutter));
  }

  .gallery-mobile__track::-webkit-scrollbar {
    display: none;
  }

  .gallery-mobile__list {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* A real flex item (not a margin on the last card) so it reliably counts
     toward the scrollable area; the negative margin cancels the list's own
     gap before it, leaving just this element's own width as the trailing
     space, matching the leading gutter before the first card. */
  .gallery-mobile__spacer {
    flex: 0 0 var(--page-gutter);
    margin-left: -32px;
  }

  .gallery-mobile__item {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  .gallery-mobile__card.polaroid {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: 280px;
    height: 434px;
    rotate: none;
  }

  .gallery-mobile__card .polaroid__caption {
    font-size: 20px;
    letter-spacing: 0.4px;
    color: var(--color-body-text);
  }

  /* The desktop crop--* classes hand-position each photo for that photo's
     desktop frame proportions; the mobile card is a different shape, so
     fall back to a plain cover crop instead of stretching them to fit. */
  .gallery-mobile__card .polaroid__photo img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery-mobile__indicator {
    margin-top: 16px;
    height: 8px;
    border-radius: 16px;
    background: #dcdcdc;
    overflow: hidden;
  }

  .gallery-mobile__indicator-fill {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 16px;
    background: var(--color-yellow);
    transition: width 0.25s ease;
  }

  /* Sprouts between Events and Heatmap: half size, tucked closer to the
     right edge instead of spanning most of the width. */
  .sprouts {
    height: 70px;
  }
  .sprouts__large {
    right: 24px;
    width: 65.5px;
    height: 58px;
  }
  .sprouts__small {
    right: 92px;
    width: 34.5px;
    height: 30.5px;
  }

}

@media (max-width: 1200px) {
  body.menu-open {
    overflow: hidden;
  }

  .info__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    height: auto;
    padding: 96px var(--space-6);
  }

  .info__arrow,
  .info__cloud-teal {
    display: none;
  }

  .feature {
    position: static;
    flex-direction: column;
    gap: var(--space-4);
  }

  .feature__text {
    max-width: 100%;
  }

  .feature__highlight {
    display: none;
  }

  .mark {
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .mark--teal {
    background: var(--color-highlight-teal);
  }

  .mark--pink {
    background: var(--color-highlight-pink);
  }

  .mark--yellow {
    background: var(--color-highlight-yellow);
  }

  .info__ctas {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 960px) {
  :root {
    --page-gutter: 24px;
    --text-title: 44px;
    --text-h1: 36px;
    --text-h2: 30px;
  }

  .hero__inner {
    height: 720px;
  }

  .hero__sticker-dino,
  .hero__sticker-flower,
  .events__sticker-dino,
  .events__sticker-flower,
  .closing__sticker {
    display: none;
  }

  .hero__scroll {
    top: min(calc(100vh - 118px), calc(var(--header-height) + 602px));
  }

  .closing {
    height: 720px;
  }

  .closing__inner {
    padding-top: 120px;
  }
}

/* Phones, held either way. These are the pieces the upright (393px-wide) and
   sideways (852px-wide) designs share, laid out for upright; the two blocks
   after this one hold what is specific to each. */
@media (max-width: 960px) {
  :root {
    --text-title: 40px;
    --text-h1: 34px;
    --text-h2: 26px;
    --text-h3: 20px;
    --text-subtitle-lg: 16px;
    --text-body: 16px;
    --text-button: 16px;
    --section-top: 80px;
    --header-height: 82px;

    /* One design pixel scaled to the screen's width, for pieces that span it */
    --vw-unit: calc(100vw / 393);
    /* The same, but never larger than a real pixel: artwork shrinks to fit
       narrow phones without growing on wide ones */
    --art-unit: min(1px, var(--vw-unit));
  }

  /* Header */
  .site-header,
  .nav {
    background: var(--color-off-white);
  }

  .site-header__inner {
    padding: var(--space-3);
  }

  .site-header__logo img {
    width: 52px;
    height: 52px;
  }

  .site-header__cta {
    display: none;
  }

  /* The icon lines up with the page edge; the button keeps its 48px tap area */
  .nav-toggle {
    margin-left: auto;
    margin-right: calc(-1 * var(--space-2));
  }

  /* Hero: the artwork fills the top 428px and the Discord CTA becomes a green
     card underneath it */
  .hero__image,
  .hero::after {
    top: 0;
    height: 428px;
  }

  .hero__image {
    object-position: 44% 50%;
  }

  .hero::after {
    background: var(--color-overlay-strong);
  }

  /* Ends 80px below the green card, which is where the next section starts */
  .hero__inner {
    height: 731px;
    padding-top: 53px;
  }

  /* Three lines: "Welcome to", "Davis", "Triceratops!" */
  .hero__title br {
    display: none;
  }

  .hero__title-line {
    display: block;
  }

  .hero__eyebrow {
    display: block;
    font-size: var(--text-h3);
    line-height: var(--leading-heading);
  }

  .hero__subtitle {
    margin-top: var(--space-2);
    font-weight: 600;
  }

  .hero__cta {
    position: absolute;
    top: 452px;
    left: var(--page-gutter);
    right: var(--page-gutter);
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-4);
    height: 199px;
    margin-top: 0;
    border-radius: var(--radius-sm);
    background: var(--color-grass);
    color: var(--color-body-text);
  }

  .hero__cta .btn,
  .hero__cta-note {
    position: relative;
    z-index: 1;
  }

  .hero__cta .btn--shadow {
    filter: none;
  }

  .hero__cta .btn--shadow:hover {
    filter: brightness(0.94);
  }

  /* Reads "For the latest events and news," above the button */
  .hero__cta-note {
    white-space: nowrap;
  }

  .hero__cta-note::first-letter {
    text-transform: uppercase;
  }

  .hero__cta-note::after {
    content: ",";
  }

  .hero__cta-decor {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .hero__cta-decor img {
    max-width: none;
  }

  .hero__cta-flower,
  .hero__cta-grass {
    position: absolute;
  }

  .hero__cta-flower {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }

  .hero__cta-flower--white {
    left: 8px;
    top: 2px;
  }

  .hero__cta-flower--white img {
    transform: rotate(30deg) translate(-0.94px, 2.1px);
  }

  .hero__cta-flower--yellow {
    right: 2px;
    top: 80px;
  }

  .hero__cta-flower--yellow img {
    transform: rotate(-30deg) translate(-0.94px, 2.1px);
  }

  .hero__cta-grass--1 {
    left: 106.2px;
    top: 173.3px;
  }

  .hero__cta-grass--2 {
    right: 88px;
    top: 7.2px;
  }

  .hero__cta-blade--1 {
    left: auto;
    right: 47.35px;
    top: 157.35px;
    width: 2.9px;
    height: 13.5px;
    translate: none;
  }

  /* Extra decorations of the sideways card */
  .hero__cta-blade--2,
  .hero__cta-decor .tuft,
  .hero__cta-daisy {
    display: none;
  }

  .hero__cta-sticker {
    left: -19px;
    top: 133px;
    width: 93.084px;
    height: 86.331px;
  }

  .hero__cta-sticker img {
    rotate: -15.39deg;
  }

  .hero__sticker-dino {
    display: grid;
    top: 11px;
    right: 12.2px;
    width: 94.796px;
    height: 86.145px;
    filter: none;
  }

  .hero__sticker-dino img {
    rotate: 9.17deg;
  }

  .hero__sticker-flower {
    display: grid;
    top: 98px;
    right: 0;
    width: 72.6px;
    height: 72.5px;
  }

  /* Sits in the page under the green card instead of following the screen */
  .hero__scroll {
    position: absolute;
    top: 667px;
    left: 50%;
    right: auto;
    width: 20px;
    height: 11.5px;
    margin-left: -10px;
    scale: none;
  }

  .hero__scroll img {
    position: static;
  }

  /* Info: each feature is its artwork with the text centred underneath */
  .info__inner {
    gap: 0;
    padding: 0 var(--page-gutter);
  }

  .info__flower,
  .info__cloud-pink {
    display: none;
  }

  .feature {
    gap: 0;
    text-align: center;
  }

  .feature__text {
    width: 100%;
  }

  .feature__body {
    margin-top: var(--space-3);
  }

  .feature--events .feature__art {
    width: calc(379.5 * var(--art-unit));
    height: calc(268.29 * var(--art-unit));
  }

  .feature--events .feature__shape {
    left: calc(45.88 * var(--art-unit));
    top: calc(36.54 * var(--art-unit));
    width: calc(287.749 * var(--art-unit));
    height: calc(194.522 * var(--art-unit));
  }

  .feature--events .feature__text {
    margin-top: var(--space-2);
  }

  .feature--events .feature__body {
    margin-top: 9px;
  }

  /* Short highlights stay on one line */
  .mark--pink,
  .mark--yellow {
    white-space: nowrap;
  }

  .feature--commitment,
  .feature--luck {
    margin-top: 64px;
  }

  .feature--commitment .feature__art {
    width: calc(288.59 * var(--art-unit));
    height: calc(214.87 * var(--art-unit));
  }

  .feature--commitment .feature__shape {
    width: 100%;
    height: 100%;
  }

  .feature--commitment .feature__image-crop {
    left: calc(53.7 * var(--art-unit));
    top: calc(8.68 * var(--art-unit));
    width: calc(179.52 * var(--art-unit));
    height: calc(198.2 * var(--art-unit));
  }

  .feature--commitment .feature__image {
    width: calc(410.854 * var(--art-unit));
    height: calc(378.926 * var(--art-unit));
  }

  .feature--commitment .feature__text {
    margin-top: var(--space-6);
  }

  .feature--luck .feature__art {
    width: calc(288.59 * var(--art-unit));
    height: calc(246.84 * var(--art-unit));
  }

  .feature--luck .feature__shape-wrap {
    left: 0;
    align-content: center; /* the rotated shape is taller than this box */
    top: calc(3.86 * var(--art-unit));
    width: calc(288.59 * var(--art-unit));
    height: calc(240.92 * var(--art-unit));
  }

  .feature--luck .feature__shape {
    width: calc(240.92 * var(--art-unit));
    height: calc(288.59 * var(--art-unit));
  }

  .feature--luck .feature__image {
    inset: 0 auto auto calc(20.87 * var(--art-unit));
    width: calc(246.84 * var(--art-unit));
    height: calc(246.84 * var(--art-unit));
  }

  .feature--luck .feature__text {
    margin-top: var(--space-6);
  }

  .info__ctas {
    flex-direction: column;
    gap: var(--space-6);
    margin-top: 64px;
  }

  /* Section headers: no bullet, and the title shrinks to stay on one line */
  .section-header {
    gap: var(--space-2);
  }

  .section-header__heading img {
    display: none;
  }

  .section-header__title {
    font-size: min(var(--text-h1), calc(34 * var(--vw-unit)));
    line-height: var(--leading-heading);
    color: var(--color-heading);
  }

  .section-header__subtitle {
    color: var(--color-subtitle);
  }

  /* Community: the collage gives way to a swipeable row of polaroids */
  .community__inner {
    padding: var(--section-top) 0 0;
  }

  .community .section-header {
    padding-inline: var(--page-gutter);
  }

  .gallery {
    display: none;
  }

  .reel {
    display: block;
    margin-top: var(--space-6);
  }

  /* The padding leaves room for the polaroids' drop shadow */
  .reel__track {
    display: flex;
    gap: var(--space-6);
    padding: 3px var(--page-gutter) 27px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter);
    scrollbar-width: none;
  }

  .reel__track::-webkit-scrollbar {
    display: none;
  }

  /* Dragging with a mouse (script.js); touch screens swipe it natively */
  .reel__track {
    cursor: grab;
  }

  .reel__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .reel__track li {
    flex: none;
    scroll-snap-align: start;
  }

  .reel .polaroid {
    position: relative;
    left: auto;
    top: auto;
    width: 280px;
    height: 434px;
    rotate: 1.06deg;
    font-size: var(--text-h3);
    color: var(--color-black);
    transition: rotate 0.3s ease;
  }

  /* The leftmost photo (tracked in script.js) straightens up */
  .reel .is-current .polaroid {
    rotate: none;
  }

  .reel .polaroid__photo {
    inset: 4.38% 7.5% 18.2% 7.86%;
  }

  .reel .polaroid__photo img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .reel .polaroid__caption {
    top: 88.02%;
  }

  .reel .crop--reel-bonding {
    object-position: 71% 50%;
  }

  .reel .crop--reel-picnic {
    object-position: bottom;
  }

  /* The bar fills with yellow as the row is scrolled: --reel-progress (set in
     script.js) is how much of the row has been seen so far, from 0 to 1. */
  .reel__indicator {
    height: 8px;
    margin-inline: var(--page-gutter);
    border-radius: var(--radius-md);
    background: var(--color-track);
  }

  .reel__thumb {
    display: block;
    width: calc(var(--reel-progress, 0.2) * 100%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-yellow);
  }

  .reel__quote {
    margin: var(--space-6) var(--page-gutter) 0;
  }

  .reel__author {
    color: var(--color-muted);
  }

  .events__inner {
    padding-bottom: 80px;
  }

  .sprouts {
    display: none;
  }

  /* Heatmap */
  .heatmap__inner {
    padding: 60px var(--page-gutter) 57px;
  }

  .heatmap__decor > :not(picture) {
    display: none;
  }

  /* Starts above the green, where the sprouts poke out */
  .heatmap__decor .heatmap__accessories {
    display: block;
    position: absolute;
    left: calc(-21 * var(--vw-unit));
    top: calc(-43 * var(--vw-unit));
    width: calc(396.251 * var(--vw-unit));
    height: auto;
  }

  .heatmap .section-header__subtitle {
    text-wrap: balance;
  }

  .heatmap__map {
    aspect-ratio: 345 / 617;
    margin-top: var(--space-6);
    border-width: 1.25px;
    border-radius: 10px;
  }

  .heatmap__image {
    left: -156.88%;
    top: 0;
    width: 369.35%;
    height: 100%;
  }

  /* Closing */
  .closing {
    height: 854px;
  }

  .closing__image {
    object-position: 36.5% 50%;
  }

  .closing__inner {
    padding-top: 68px;
  }

  .closing__title {
    max-width: 286px;
  }

  .closing__ctas {
    width: auto;
    margin-top: var(--space-6);
  }

  .closing__discord {
    gap: var(--space-3);
  }

  .closing__note {
    max-width: 200px;
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: var(--leading-heading);
  }

  .closing__note-line {
    white-space: nowrap;
  }

  .btn--instagram {
    width: 236px;
  }

  /* Footer */
  .grass {
    height: calc(44.924 * var(--vw-unit));
    margin-top: calc(-44.924 * var(--vw-unit));
  }

  .grass__tuft {
    width: calc(165.307 * var(--vw-unit));
    height: calc(44.924 * var(--vw-unit));
  }

  .grass__tuft--right {
    left: calc(227.69 * var(--vw-unit));
  }

  .grass__tuft--left {
    left: 0;
  }

  .grass__tuft--center {
    left: calc(113.72 * var(--vw-unit));
  }

  .site-footer__body {
    background: var(--color-footer-flat);
  }

  .site-footer__inner {
    gap: 80px;
    padding: 61px 16px 131px 21px;
  }

  .site-footer__asterisk {
    display: none;
  }

  .cloud {
    display: block;
  }

  .cloud--1 {
    left: -30px;
    right: auto;
    top: 19px;
  }

  .cloud--2 {
    right: 41px;
    top: 356px;
  }

  .cloud--3 {
    right: -22px;
    top: 153px;
  }

  .site-footer__dino-green {
    left: 21px;
    right: auto;
    top: auto;
    bottom: 0;
    width: 61.2px;
  }

  .site-footer__dino-blue {
    left: 86.5px;
    right: auto;
    bottom: 1.5px;
    width: 58.1px;
  }

  .site-footer__flower-red {
    left: 164px;
    right: auto;
    bottom: 0;
    width: 20.9px;
  }

  .site-footer__flower-blue {
    left: 187px;
    right: auto;
    bottom: 0;
    width: 28px;
  }

  /* Two columns: Home, DinoDex and About Us down the left, the rest down the right */
  .footer-nav {
    display: grid;
    grid-template-columns: minmax(0, 163px) minmax(0, 161px);
    justify-content: space-between;
    gap: 60px 0;
    width: 100%;
  }

  .footer-nav__column {
    width: auto;
  }

  .footer-nav__title {
    font-size: var(--text-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking);
  }

  .footer-nav__column--home .footer-nav__title {
    margin-bottom: var(--space-2);
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-3);
    width: 323px;
  }

  .site-footer__copyright {
    line-height: var(--leading-body);
    letter-spacing: var(--tracking);
  }

  .social-links__link {
    width: 40px;
    height: 40px;
  }
}

/* Phones held upright only */
@media (max-width: 640px) {
  /* Events: calendar on top, the event types as an accordion underneath */
  .events__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
  }

  .events__notes-list {
    position: static;
    padding: 0;
    overflow: visible;
  }

  .events__notes-fade {
    display: none;
  }

  .events__calendar {
    aspect-ratio: 345 / 615;
    min-height: 0;
    border-width: 1px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1.5px 2.5px rgba(0, 0, 0, 0.1);
  }

  .sticky-note {
    padding: 0;
    border-width: 1px;
    border-radius: 2px;
    filter: none;
    /* Scopes layout recalculation to the note that's actually animating
       instead of the whole notes list, so the open/close animation
       doesn't have to re-layout its siblings every frame. */
    contain: layout;
  }

  .sticky-note::after {
    display: none;
  }

  .sticky-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 17px 15px 16px 14px;
    cursor: pointer;
    pointer-events: auto;
  }

  .sticky-note__title {
    color: var(--color-black);
  }

  .sticky-note__icon {
    display: block;
    flex: none;
    transition: rotate 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Tracks open/closed separately from the <details> "open" attribute
     (see script.js) so the icon turns back in sync with the body closing,
     instead of snapping back only once the close animation finishes. */
  .sticky-note__details.is-open .sticky-note__icon {
    rotate: 45deg;
  }

  .sticky-note__body {
    margin-top: 0;
    padding: 0 15px 18px 14px;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
  }

  /* The tablet aspect ratio/crop above (max-width: 960px) also matches phone
     widths and, being written first, loses the cascade tie here. Restate the
     phone-only taller crop so it wins at phone widths. The static image uses
     cover + inset:0 so it always fills this box at any aspect ratio (no
     stretching/gaps); script.js calls the live map's own resize() whenever
     this box's size changes, since MapLibre otherwise keeps the canvas at
     whatever size it was when the map first loaded. */
  .heatmap__map {
    aspect-ratio: 3 / 4;
  }

  .heatmap__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* A bit taller than the shared 720px tablet height above. Placed after
   that 960px block so it wins the tie at mobile widths. Trimmed from the
   original 820px, which left dead space below the CTA card and pushed
   the gap before "Various events" too far down. */
@media (max-width: 640px) {
  .hero__inner {
    height: 705px;
  }

  .info {
    margin-top: 30px;
  }
}

@media (max-width: 560px) {
  .feature__art {
    zoom: 0.75;
  }

  .closing__ctas {
    max-width: 100%;
  }
}

/* Phones on their side, and small tablets: the 852px-wide design */
@media (min-width: 641px) and (max-width: 960px) {
  :root {
    --page-gutter: 56px;
    --vw-unit: calc(100vw / 852);
  }

  /* Hero: a 232px strip of the artwork with the green card underneath */
  .hero__image,
  .hero::after {
    height: 232px;
  }

  .hero__image {
    object-position: 50% 100%;
  }

  /* Ends where the info artwork starts, below the card's dino sticker */
  .hero__inner {
    height: 534px;
    padding-top: 35px;
  }

  .hero__cta {
    top: 256px;
    height: 211px;
  }

  .hero__cta .btn {
    width: 242px;
  }

  /* Left-hand pieces are placed by percentage so they keep clear of the button
     on narrower screens */
  .hero__cta-flower--white {
    left: 16.05%;
    top: 114px;
  }

  .hero__cta-flower--yellow {
    right: 60.2px;
    top: 14px;
  }

  .hero__cta-grass--1 {
    left: 23.54%;
    top: 154.4px;
  }

  .hero__cta-grass--2 {
    right: 14px;
    top: 60.4px;
  }

  .hero__cta-blade--1 {
    right: 118.4px;
    top: 166.2px;
  }

  .hero__cta-blade--2 {
    display: block;
    left: 25.7px;
    top: 21.6px;
    width: 2.9px;
    height: 13.5px;
    translate: none;
  }

  .hero__cta-decor .tuft {
    display: block;
  }

  .hero__cta-decor .tuft--1 {
    left: 18.08%;
    top: 48.5px;
  }

  .hero__cta-decor .tuft--2 {
    left: auto;
    right: 221.2px;
    top: 28.2px;
  }

  .hero__cta-daisy {
    display: block;
    position: absolute;
    right: 13.3px;
    top: 132.1px;
  }

  .hero__cta-sticker {
    left: -28px;
    top: 178.6px;
  }

  .hero__sticker-dino {
    top: 35px;
    right: 39.5px;
  }

  .hero__sticker-flower {
    top: 138px;
    right: 39.3px;
  }

  /* Back inside the artwork, in white */
  .hero__scroll {
    top: 210px;
    filter: brightness(0) invert(1);
  }

  /* Info: the three features side by side, their text lined up on one row */
  .info__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 233px));
    justify-content: space-between;
    align-items: start;
  }

  .feature--commitment,
  .feature--luck {
    margin-top: 0;
  }

  .feature--events .feature__text,
  .feature--commitment .feature__text,
  .feature--luck .feature__text {
    margin-top: 0;
  }

  .feature__body,
  .feature--events .feature__body {
    margin-top: var(--space-2);
  }

  .feature--events .feature__body {
    padding-inline: 9px;
  }

  /* Each artwork's margins add up to the same height, which is what lines the
     three titles up */
  .feature--events .feature__art {
    width: calc(256.16 * var(--art-unit));
    height: calc(181.1 * var(--art-unit));
    margin: calc(18.89 * var(--art-unit)) 0 calc(36.84 * var(--art-unit));
  }

  .feature--events .feature__shape {
    left: calc(24.27 * var(--art-unit));
    top: calc(13.48 * var(--art-unit));
    width: calc(208 * var(--art-unit));
    height: calc(154.97 * var(--art-unit));
  }

  .feature--commitment .feature__art {
    width: calc(208 * var(--art-unit));
    height: calc(170.68 * var(--art-unit));
    margin: calc(25.86 * var(--art-unit)) 0 calc(40.29 * var(--art-unit));
  }

  .feature--commitment .feature__image-crop {
    left: calc(31.45 * var(--art-unit));
    top: calc(5.79 * var(--art-unit));
    width: calc(143.62 * var(--art-unit));
    height: calc(158.56 * var(--art-unit));
  }

  .feature--commitment .feature__image {
    width: calc(328.68 * var(--art-unit));
    height: calc(303.14 * var(--art-unit));
  }

  .feature--luck .feature__art {
    width: calc(234.5 * var(--art-unit));
    height: calc(234.5 * var(--art-unit));
    margin: 0 0 calc(2.33 * var(--art-unit));
  }

  .feature--luck .feature__shape-wrap {
    left: calc(12.8 * var(--art-unit));
    top: calc(27.92 * var(--art-unit));
    width: calc(207.53 * var(--art-unit));
    height: calc(177.46 * var(--art-unit));
  }

  .feature--luck .feature__shape {
    width: calc(177.46 * var(--art-unit));
    height: calc(207.53 * var(--art-unit));
  }

  .feature--luck .feature__image {
    inset: 0 auto auto 0;
    width: calc(234.5 * var(--art-unit));
    height: calc(234.5 * var(--art-unit));
  }

  /* "New To Triceratops?" comes first here */
  .info__ctas {
    grid-column: 1 / -1;
    flex-direction: row-reverse;
    justify-content: center;
  }

  /* Community: smaller, untilted polaroids, most of them on screen at once */
  .reel .polaroid,
  .reel .polaroid__photo {
    border-radius: 4.8px;
  }

  .reel .polaroid {
    width: 168px;
    height: 260.4px;
    rotate: none;
    font-size: var(--text-caption);
  }

  .reel__quote p,
  .reel__author {
    display: inline;
  }

  /* Events: calendar and scrolling sticky notes side by side, as on desktop */
  .events__sticker-dino {
    display: grid;
    top: 48px;
    right: 34.66px;
    width: 106.68px;
    height: 98.07px;
  }

  .events__sticker-dino img:first-child {
    width: 91.43px;
  }

  .events__sticker-dino img:last-child {
    width: 83.11px;
  }

  .events__sticker-flower {
    display: block;
    top: 88.74px;
    right: 166.4px;
    width: 71.6px;
  }

  .events__layout {
    grid-template-columns: 438fr 286fr;
    margin-top: var(--space-6);
  }

  .events__calendar {
    aspect-ratio: 438 / 345;
    min-height: 0;
    border-width: 1px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1.5px 2.5px rgba(0, 0, 0, 0.1);
  }

  .sticky-note {
    padding: 16px 14px 24px 13px;
    border-width: 1px;
    border-radius: 2px 2px 2px 22.7px;
  }

  .sticky-note::after {
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 0 1.5px 0 18px;
  }

  .sticky-note__body {
    margin-top: 7.56px;
  }

  /* Heatmap. The closing section below starts with 42px of clear space, so
     together they keep the usual 80px between sections. */
  .heatmap {
    margin-bottom: 38px;
  }

  .heatmap__inner {
    padding: 20px var(--page-gutter) 37px;
  }

  .heatmap__decor .heatmap__accessories {
    left: calc(-15 * var(--vw-unit));
    width: calc(860.25 * var(--vw-unit));
  }

  .heatmap__map {
    aspect-ratio: 740 / 332;
  }

  .heatmap__image {
    left: 0;
    top: -3.76%;
    width: 114.8%;
    height: 123.9%;
  }

  /* Closing: the top 42px stay clear so the dino sticker can peek over the
     artwork, which is clipped to start below them */
  .closing {
    height: 480px;
  }

  .closing__image {
    top: -168px;
    width: 1174.78px;
    height: 672px;
    max-width: none;
    clip-path: inset(210px 0 0 0);
  }

  .closing::after {
    top: 42px;
    height: 438px;
  }

  .closing__inner {
    padding-top: 92px;
  }

  .closing__sticker {
    display: grid;
    top: 0;
    right: 49.1px;
    width: 106.83px;
    height: 97.56px;
  }

  /* Footer: the phone footer, kept to the left */
  .grass {
    height: 45px;
    margin-top: -45px;
    background:
      url("images/mobile/grass.svg") 0 100% / 165.307px 44.924px repeat-x,
      url("images/mobile/grass.svg") -82px 100% / 165.307px 44.924px repeat-x;
  }

  .grass__inner {
    display: none;
  }

  .cloud--2 {
    left: 264px;
    right: auto;
  }

  .cloud--3 {
    left: 352px;
    right: auto;
  }

  .footer-nav {
    width: 356px;
  }
}

/* Narrower sideways phones: no room for the flower sticker beside the events subtitle */
@media (min-width: 641px) and (max-width: 800px) {
  .events__sticker-flower {
    display: none;
  }
}

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

  * {
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__scroll {
    animation: none;
  }
}