/* ==========================================================================
   Story chapters
   1. Ticker + intro      (straw)
   2. Campo / livestock   (paper)
   3. Farmácia / pharmacy (pasture green)
   4. Pet                 (straw)
   5. Jardim + piscina    (ink + water)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ticker: two rows of giant product words moving in opposite directions
   -------------------------------------------------------------------------- */
.ticker { overflow: hidden; padding-block: 48px 64px; background: var(--color-straw); color: var(--color-pasture); }
.ticker .stitch-line { margin-bottom: 36px; color: var(--color-pasture); }
.ticker__row {
  display: flex;
  gap: .5em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(48px, calc(8.2 * var(--vw)), 136px); /* ~25% smaller than the first version (64px, calc(11 * var(--vw)), 180px) */
  line-height: .95;
  will-change: transform;
}
.ticker__row--offset { margin-left: -40vw; }
.ticker__row .is-outline { color: transparent; -webkit-text-stroke: 2px var(--color-pasture); }
.ticker__row .is-red { color: var(--color-red); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, calc(5 * var(--vw)), 80px);
  padding: 48px var(--gutter) 0;
}
.intro p { margin: 0; max-width: 52ch; font-size: clamp(18px, calc(1.4 * var(--vw)), 21px); }
.intro .serif { margin: 0; font-style: normal; font-size: clamp(34px, calc(4.2 * var(--vw)), 66px); line-height: 1.02; color: var(--color-pasture); }
.intro .serif em { color: var(--color-red); }
@media (max-width: 760px) { .intro { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   2. Campo — livestock
   -------------------------------------------------------------------------- */
.chapter--field { background: var(--color-paper); color: var(--color-pasture); }

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(20px, calc(3 * var(--vw)), 48px);
  padding: 40px var(--gutter) 0;
}
.field-grid h2 { font-size: clamp(58px, calc(8.4 * var(--vw)), 140px); color: var(--color-pasture); }
.field-grid h2 .highlight { font-size: .82em; }
.field-copy p { max-width: 44ch; color: #2A3527; }

/* Livestock ear tags listing the species served. */
.ear-tags { display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 8px 0 0; margin: 0; list-style: none; }
.ear-tag {
  --tilt: 0deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--color-ink);
  background: #E9C23A;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  transform: rotate(var(--tilt));
  transition: transform .5s var(--ease-spring);
}
/* Punched hole of the tag. */
.ear-tag::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-paper);
}
.ear-tag:hover { transform: rotate(0) scale(1.06); }
.ear-tag:nth-child(3n) { background: var(--color-straw); }
.ear-tag:nth-child(4n) { background: #E8EDE0; }

.video-frame {
  position: relative;
  justify-self: end;
  width: min(100%, 38vh);
  margin: 40px 0 0;
  border: 10px solid var(--color-paper);
  outline: 2px solid var(--color-pasture);
  box-shadow: 14px 16px 0 var(--color-pasture);
  transform: rotate(2.2deg);
}
.video-frame video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #BDA776; }
/* Caption as a paper sticker inside the frame, same as the photo captions. */
.video-frame .hand {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px 2px;
  font-size: 28px;
  line-height: 1;
  color: var(--color-red);
  background: var(--color-paper);
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}

/* Photos are sized by the viewport height as well as its width, so on wide or
   short screens they never grow taller than the window or leave big gaps. */
.field-photos {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(20px, calc(3 * var(--vw)), 48px);
  padding: 32px var(--gutter) 0;
}
.field-photos__truck { width: min(100%, 96vh); aspect-ratio: 16 / 9; }
.field-photos__salt { width: min(100%, 42vh); justify-self: center; aspect-ratio: 4 / 5; rotate: 2deg; }

@media (max-width: 900px) {
  .field-grid, .field-photos { grid-template-columns: minmax(0, 1fr); }
  /* Rooster clip: narrower, pushed right, caption as a sticker inside the frame. */
  .video-frame { width: min(72%, 420px); justify-self: end; margin-top: 12px; }
  .video-frame .hand { left: 10px; bottom: 10px; font-size: 22px; }
  /* Salt photo overlaps the truck photo instead of stacking under it. */
  .field-photos { gap: 0; }
  .field-photos__truck { width: 100%; }
  .field-photos__salt { position: relative; z-index: 2; width: 56%; justify-self: end; margin-top: -18%; }
  .field-photos__truck figcaption { top: 10px; bottom: auto; } /* keep it clear of the salt photo */
}

/* --------------------------------------------------------------------------
   3. Farmácia — veterinary pharmacy
   -------------------------------------------------------------------------- */
.chapter--pharmacy { background: var(--color-pasture); color: var(--color-straw); }

.pharmacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, calc(5 * var(--vw)), 80px);
  padding: 44px var(--gutter) 0;
}
.pharmacy-grid h2 { font-size: clamp(54px, calc(7.4 * var(--vw)), 124px); color: var(--color-paper); }
.pharmacy-grid h2 em { font-style: normal; color: var(--color-red-on-dark); }
.pharmacy-grid .lead { max-width: 44ch; margin: 26px 0 0; font-size: clamp(19px, calc(1.5 * var(--vw)), 22px); }

/* Prescription pad ("receituário"). */
.prescription {
  position: relative;
  padding: 34px 30px 30px;
  color: var(--color-ink);
  background: var(--color-paper);
  transform: rotate(-2.5deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
/* Torn perforated top edge. */
.prescription::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
  background: radial-gradient(circle at 8px 10px, var(--color-paper) 7px, transparent 7.5px) 0 0 / 16px 10px repeat-x;
}
.prescription header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-ink);
}
.prescription header .display { font-size: 44px; color: var(--color-red); }
.medical-cross { flex: none; width: 64px; height: 64px; will-change: transform; }

.prescription ol { margin: 0; padding: 0; list-style: none; counter-reset: rx; }
.prescription li {
  counter-increment: rx;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  font-size: 17px;
  border-bottom: 1px solid rgba(19, 23, 17, .18);
}
.prescription li::before { content: counter(rx, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--color-red); }
.prescription li .hand { margin-left: auto; font-size: 26px; color: #2D4FA0; white-space: nowrap; }
.prescription footer { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 18px; }
.signature {
  min-width: 170px;
  padding-top: 2px;
  font-family: var(--font-hand);
  font-size: 34px;
  text-align: center;
  color: #2D4FA0;
  border-top: 1px solid var(--color-ink);
}

.pharmacy-photo { margin: 56px var(--gutter) 0; aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .pharmacy-photo { aspect-ratio: 4 / 3; } }
@media (max-width: 420px) {
  /* Keep the longest words ("VETERINÁRIA", "CONVERSA") inside small phones. */
  .field-grid h2, .chapter--pet .pet-grid__title { font-size: calc(14 * var(--vw)); }
  .pharmacy-grid h2 { font-size: calc(12.5 * var(--vw)); }
}
@media (max-width: 600px) {
  /* Narrow prescription: handwritten dosage drops below each item. */
  .prescription { padding: 28px 18px 22px; transform: rotate(-1.5deg); }
  .prescription header .display { font-size: 36px; }
  .medical-cross { width: 48px; height: 48px; }
  .prescription li { flex-wrap: wrap; row-gap: 2px; }
  .prescription li .hand { flex-basis: 100%; margin-left: 30px; font-size: 24px; white-space: normal; }
}
@media (max-width: 900px) { .pharmacy-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   4. Pet — small animals
   -------------------------------------------------------------------------- */
.chapter--pet { background: var(--color-straw); color: var(--color-red-dark); }

.pet-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "title title title title title title title cat   cat   cat   cat   cat"
    "dog   dog   dog   dog   dog   aisle aisle aisle aisle aisle aisle aisle"
    "dog   dog   dog   dog   dog   copy  copy  copy  copy  note  note  note";
  align-items: start;
  gap: 40px clamp(16px, calc(2.2 * var(--vw)), 36px);
  padding: 40px var(--gutter) 0;
}
.pet-grid__title { grid-area: title; align-self: center; position: relative; z-index: 2; font-size: clamp(58px, calc(8.6 * var(--vw)), 150px); color: var(--color-red); }
.pet-grid__title small {
  display: block;
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .34em;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-pasture);
}

/* Photos (each floats at its own speed via data-speed). */
.pet-grid .photo { will-change: transform; }
.pet-grid__cat   { grid-area: cat;   aspect-ratio: 1;     rotate: 2deg; }
.pet-grid__dog   { grid-area: dog;   aspect-ratio: 3 / 4; rotate: -3deg; margin-top: 20px; }
.pet-grid__aisle { grid-area: aisle; aspect-ratio: 3 / 2; rotate: -1deg; }

.pet-copy { grid-area: copy; color: var(--color-pasture); }
.pet-copy p { margin: 0; }
.pet-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pet-copy li { padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid var(--color-pasture); }

/* Handwritten counter note, pinned over the aisle photo's corner. */
.pet-grid__note {
  grid-area: note;
  position: relative;
  z-index: 3;
  margin-top: -70px;
  padding: 22px;
  color: var(--color-ink);
  background: var(--color-paper);
  transform: rotate(4deg);
  box-shadow: 6px 6px 0 var(--color-red);
}
.pet-grid__note .hand { font-size: 34px; color: var(--color-red); }
.pet-grid__note p { margin: 10px 0 0; font-size: 15px; }

/* Tablets and phones: one column, text first, then the photos. */
@media (max-width: 820px) {
  .pet-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "copy" "dog" "cat" "aisle" "note";
    gap: 26px;
  }
  /* Overlapping photo pile instead of a plain stack. */
  .pet-grid__dog { width: 66%; justify-self: start; margin-top: 0; }
  .pet-grid__cat { position: relative; z-index: 2; width: 56%; justify-self: end; margin-top: -42%; }
  .pet-grid__dog figcaption { top: 10px; bottom: auto; } /* the cat covers the dog's lower corner */
  .pet-grid__aisle { margin-top: -8px; }
  .pet-grid__note { width: 82%; justify-self: end; margin-top: -54px; }
}

/* --------------------------------------------------------------------------
   5. Jardim + piscina — garden and pool
   -------------------------------------------------------------------------- */
.chapter--garden { padding-bottom: 0; background: var(--color-ink); color: var(--color-straw); }

/* Sparrow video: the clip window opens to full-bleed as you scroll in. */
.garden-video { position: relative; height: 110vh; min-height: 560px; margin-top: 32px; }
.garden-video__window {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  clip-path: inset(12% 14% 12% 14%);
  will-change: clip-path;
}
.garden-video video { width: 100%; height: 100%; object-fit: cover; }
.garden-video h2 {
  position: absolute;
  left: var(--gutter);
  bottom: 12vh;
  max-width: 12ch;
  font-size: clamp(50px, calc(7 * var(--vw)), 120px);
  color: var(--color-paper);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .4);
}

.garden-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 var(--gutter);
  border-top: 2px solid var(--color-straw);
}
.garden-list > div { padding: 26px 22px 30px 0; border-right: 1px solid rgba(237, 227, 201, .25); }
.garden-list > div + div { padding-left: 22px; }
.garden-list > div:last-child { border-right: 0; }
.garden-list h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 34px; text-transform: uppercase; color: var(--color-sprout); }
.garden-list p { margin: 0; font-size: 16px; opacity: .9; }

.pool { position: relative; overflow: hidden; margin-top: 64px; padding: 72px var(--gutter) 88px; color: var(--color-ink); background: var(--color-water); }
.pool__waves { position: absolute; inset: 0; opacity: .45; pointer-events: none; }
.pool-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, calc(4 * var(--vw)), 64px); }
.pool h2 { font-size: clamp(50px, calc(7 * var(--vw)), 116px); color: var(--color-ink); }
.pool .serif { display: block; margin-top: 14px; font-size: clamp(24px, calc(2.2 * var(--vw)), 34px); }
.pool .photo { aspect-ratio: 4 / 3; rotate: 2deg; }

/* Phones: a portrait full-screen crop would cut the sparrow out, so the clip
   becomes a 4:5 window framed on the bird, with the headline on the blurred
   green at the top. */
@media (max-width: 720px) {
  .garden-video { height: auto; min-height: 0; margin: 24px var(--gutter) 0; }
  .garden-video__window { position: relative; height: auto; aspect-ratio: 4 / 5; }
  .garden-video video { object-position: 56% 50%; }
  .garden-video h2 { top: 22px; bottom: auto; left: 18px; right: 18px; font-size: clamp(38px, calc(11 * var(--vw)), 60px); }
  .garden-list { margin-top: 28px; }
}

@media (max-width: 820px) {
  .garden-list { grid-template-columns: minmax(0, 1fr); }
  .garden-list > div { padding-left: 0 !important; border-right: 0; border-bottom: 1px solid rgba(237, 227, 201, .25); }
  .pool-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .garden-video__window { clip-path: none; }
}