/* The sunset field: the cream ground gives way to a wheat field at sunset (js/sunset-field.js). The reading
   sections float on it in the open (Open sky): the field gathers soft evening light behind their words.
   Each page's title sits on the plain evening sky above the horizon, the page's one quiet zone. No section,
   panel or footer is a block of colour: the words always sit in the evening light, or on paper. */

body.sunset { background: #e8cfa2; --paper: #f6f0e6; --card-max: 1320px; --card-gap: clamp(2.5rem, 5vw, 4.5rem); --card-pad: clamp(1.25rem, 3vw, 3rem); }
.sunset-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }

body.sunset .bar { background: transparent; }
@media (max-width: 760px) { body.sunset .nav { background: var(--paper); } }

/* Every section after the title is a soft paper card floating on the field (the two plans share one card),
   and so is the footer. */
body.sunset main > section:not(.hero):not(.page-hero):not(.plans-section), body.sunset .plans {
  width: min(100% - 2 * var(--margin), var(--card-max));
  margin: var(--card-gap) auto;
}
body.sunset main > section:not(.hero):not(.page-hero):not(.plans-section), body.sunset .plan, body.sunset .footer {
  background: var(--paper);
  transition: background-color 600ms ease;
}
body.sunset main > section:not(.hero):not(.page-hero):not(.plans-section):not(.presences) { padding-inline: var(--card-pad); }
body.sunset main > .plans-section { padding-block: 0; }
body.sunset .intro { padding-block: clamp(5rem, 16vh, 10rem); }
/* inside a card the paper already separates sections, so the space inside can be smaller */
body.sunset main > section.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
body.sunset .field-band { padding-block: clamp(3rem, 6vw, 5.5rem); }
body.sunset main > section.section.plans-section { padding-block: 0; }
body.sunset .footer { margin-top: var(--card-gap); }

/* Open sky: once the filmed field is showing, the paper cards lose their boxes and the field gathers evening
   light behind their words instead (js/sunset-field.js); the form's fields stay as pale slips. Without the
   filmed field, or under reduced motion (the light cannot follow the words), the soft paper cards above stay. */
@media (prefers-reduced-motion: no-preference) {
  body.sunset.field-real main > section:not(.hero):not(.page-hero):not(.plans-section), body.sunset.field-real .footer { background: transparent !important; }
  body.sunset.field-real :is(.plan, .plate) { background: transparent !important; }
  body.sunset.field-real .field { background: rgba(251, 247, 240, 0.92); }
  body.sunset.field-real .card { --card-bg: rgba(250, 245, 236, 0.8); }
  body.sunset.field-real .card:nth-child(3n+2) { --card-bg: rgba(246, 236, 212, 0.8); }
  body.sunset.field-real .card:nth-child(3n+3) { --card-bg: rgba(238, 240, 226, 0.8); }
}

@media (max-width: 760px) {
  body.sunset { --margin: max(0.625rem, env(safe-area-inset-left), env(safe-area-inset-right)); --card-pad: 1rem; --card-gap: 2.75rem; }
  body.sunset .bar, body.sunset .hero__copy, body.sunset .page-hero__copy, body.sunset .footer { padding-inline: 1rem; }
  body.sunset .presences__text { padding-inline: 1rem; }
}

/* the cards drift a little against the field as you scroll, so they seem to float */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.sunset main > section:not(.hero):not(.page-hero):not(.plans-section), body.sunset .plans {
      animation: paper-float linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes paper-float { from { translate: 0 32px; } to { translate: 0 -32px; } }