/* Section layouts. Each section is its own layout family; grids collapse to one column below 768px.
   Desktop grids are 12 columns. Section padding is weighted by the section's role. */

.g12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 768px) {
  .descent__grid, .harmony__grid, .threats__grid, .letters__grid, .coastline__grid, .doors__grid,
  .roles__grid, .day__grid, .cost__grid, .apply__grid,
  .amenities__grid, .wonder__grid, .find__grid,
  .why__grid, .inkind__grid,
  .vision__grid, .centres__grid, .team__grid, .partners__grid, .status__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}

/* =========================================================
   Heroes
   ========================================================= */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }

/* Root: the waterline. Sky above, water below; the photo's waterline sits at about 41% height. */
.hero--waterline { --wl: 41%; }
/* The stage holds the waterline and the words. Static it is just the first viewport;
   the motion layer makes it sticky inside a taller hero so the camera can sink. */
.hero__stage { position: relative; min-height: 100svh; }
.waterline { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--sky-top) 0 var(--wl), var(--water) var(--wl) 100%); }
.waterline__picture, .waterline__picture img { width: 100%; height: 100%; }
.waterline__picture img { object-fit: cover; object-position: 50% 40%; }
.waterline::after {
  /* light, not decoration: the water darkens with depth so the lead reads */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 72%, transparent));
  pointer-events: none;
}
/* phones: the lead sits lower, over the brightest seabed caustics, so the water darkens a
   little earlier (a11y round 1: measured 4.36:1 at the 1st percentile before, 4.5:1 needed) */
@media (max-width: 559.98px) {
  .waterline::after { height: 56%; }
}
.hero--waterline .hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.hero__sky {
  min-height: var(--wl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 6vh, 4.5rem));
  padding-bottom: clamp(14px, 2.2vh, 24px);
}
.hero__title {
  font-size: var(--step-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.025em;
  max-width: 10.5em;
}
.hero--waterline .hero__title { color: var(--ink); }
.hero__lead { font-size: var(--step-1); font-weight: var(--w-lead); line-height: 1.5; max-width: 36ch; }
.hero--waterline .hero__lead {
  margin-top: auto;
  padding-bottom: clamp(2rem, 7vh, 4.5rem);
  color: var(--sand);
}

/* Audience pages: full-bleed photograph, statement in the lower third. */
.hero--page { display: flex; align-items: flex-end; min-height: 92svh; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media .media { width: 100%; height: 100%; border-radius: 0; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--scrim-top-h, 180px);
  z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) var(--scrim-top, 55%), transparent), transparent);
  pointer-events: none;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent var(--scrim-from, 30%), color-mix(in srgb, var(--ink) var(--scrim-mid, 55%), transparent) 62%, color-mix(in srgb, var(--ink) 92%, transparent) 100%);
}
/* Each hero declares how bright its photograph is behind the nav and the headline, and the
   shades above follow (a11y round 1: sand text measured on real pixels, 4.5:1 for the nav,
   3:1 for the headline). The dawn beach behind /volunteer/ is far paler than the others. */
.hero--volunteer { --scrim-top: 76%; --scrim-top-h: 240px; --scrim-from: 18%; --scrim-mid: 74%; }
.hero--page .hero__content { padding-top: calc(var(--nav-h) + var(--s-9)); padding-bottom: clamp(3rem, 9vh, 6.5rem); }
.hero--page .hero__title { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); max-width: 14em; color: var(--sand); }
.hero--page .hero__lead { margin-top: var(--s-5); color: var(--sand); }
.hero--page .hero__action { margin-top: var(--s-6); }
/* Stay: the headline is a chart label pinned to the lit huts of the camp. The pin is a point
   in the photograph (--ix, --iy as fractions of the image), mapped to the screen with the same
   cover maths as object-fit, in container units, so it holds at every size without script. */
.hero--stay {
  --ix: 0.585; --iy: 0.31;            /* the main cluster of lit huts in banner.jpg */
  --ox: 0.5; --oy: 0.5;               /* object-position, as fractions */
  --lead-h: clamp(40px, 7svh, 72px);
  container-type: size;
  height: 92svh;
  min-height: 600px;
}
.hero--stay .hero__media img { object-position: calc(var(--ox) * 100%) calc(var(--oy) * 100%); }
.hero--stay .hero__fix, .hero--stay .hero__label {
  --s: max(calc(100cqw / 1536), calc(100cqh / 1024));
  --px: calc(var(--ix) * 1536 * var(--s) - var(--ox) * (1536 * var(--s) - 100cqw));
  --py: calc(var(--iy) * 1024 * var(--s) - var(--oy) * (1024 * var(--s) - 100cqh));
}
.hero__fix { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--sand); }
.fix__pin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.fix__pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; }
.fix__leader { position: absolute; left: var(--px); top: calc(var(--py) + 10px); width: 1px; height: var(--lead-h); background: currentColor; transform-origin: 50% 0; }
.hero__label {
  position: absolute;
  z-index: 1;
  left: var(--px);
  top: calc(var(--py) + 14px + var(--lead-h));
  max-width: min(34rem, calc(100cqw - var(--px) - var(--gutter) - 96px));
  color: var(--sand);
}
.hero--stay .hero__title { font-size: clamp(2.375rem, 1.4rem + 2.8vw, 4.5rem); max-width: 9.5em; text-wrap: balance; }
.hero__cap { position: absolute; z-index: 1; right: var(--gutter); bottom: var(--s-3); margin: 0; font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--sand-2); opacity: 0.85; text-align: right; max-width: 24ch; }
.hero__coord { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.hero__coord .chart-place { font-size: 1.125rem; }
.hero__coord .mono { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--sand-2); }
@media (max-width: 767.98px) {
  .hero--stay .hero__cap { top: calc(var(--nav-h) + var(--s-3)); bottom: auto; left: var(--gutter); right: auto; text-align: left; max-width: none; }
  .hero--stay { --ox: 0.64; height: 100svh; min-height: 560px; --lead-h: 36px; }
  .hero--stay .hero__label { left: var(--gutter); right: var(--gutter); max-width: none; }
  .hero--stay .hero__title { font-size: clamp(2.125rem, 1.2rem + 4vw, 2.75rem); }
  .hero--stay .hero__content { padding-bottom: clamp(1.75rem, 5vh, 3rem); }
  .hero--stay .hero__lead { font-size: var(--step-0); font-weight: var(--w-body); }
}
@media (min-width: 768px) {
  .hero--stay .hero__lead, .hero--stay .hero__action { grid-column: 1 / 6; }
}
/* developing heroes keep their photo back until the chart has drawn (html.hold, preboot).
   The photo is covered by its own placeholder rather than set to opacity 0, so it still
   paints in the first frame (it is the page's LCP element) while the reader sees exactly
   what opacity 0 showed: the placeholder. The chart canvas is a later sibling of the
   picture, so it draws above the cover. */
html.hold [data-hero-develop] .hero__media .media { position: relative; }
html.hold [data-hero-develop] .hero__media .media::after { content: ""; position: absolute; inset: 0; background: inherit; }
.hero--donate .hero__media img { object-position: 50% 45%; }
/* Donate: the RIB sits on the surface mid-frame, so the headline takes the storm sky and the
   lead and action sit low, over the chart of the water */
.hero--donate .hero__content { align-self: stretch; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(1.5rem, 6vh, 4rem)); }
.hero--donate .hero__lead { margin-top: auto; }
.give-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }

@media (min-width: 768px) {
  .hero--page .hero__title, .hero--page .hero__lead { margin-left: 0; }
  .hero--page .hero__content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .hero--page .hero__title { grid-column: 1 / 11; }
  .hero--page .hero__lead { grid-column: 1 / 7; }
  .hero--page .hero__action { grid-column: 1 / 7; }
}
@media (min-width: 768px) {
  .hero--donate .hero__content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .hero--donate .hero__title { grid-row: 1; }
  .hero--donate .hero__lead { grid-row: 3; margin-top: var(--s-5); }
  .hero--donate .hero__action { grid-row: 4; }
}

/* Partner: the chart is the hero. The foundation's operating area, Taba to Sharm El Sheikh,
   with the two planned centres marked; the words sit on open ink beside it. */
.hero--chart { background: var(--ink); color: var(--sand); }
.hero--chart .hero__content { position: relative; min-height: 100svh; display: grid; align-items: end; padding-top: calc(var(--nav-h) + var(--s-5)); padding-bottom: clamp(2.5rem, 7vh, 5rem); overflow: hidden; }
.hero--chart .hero__words { position: relative; z-index: 1; grid-row: 1; grid-column: 1; align-self: end; }
.hero--chart .hero__title { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); max-width: 11em; text-wrap: balance; }
.hero--chart .hero__lead { margin-top: var(--s-5); color: var(--fg-2); }
.hero--chart .hero__action { margin-top: var(--s-6); }
.hero--chart .hero__chart { grid-row: 1; grid-column: 1; justify-self: end; align-self: start; color: var(--sand); }
.hero--chart .coastmap__frame { height: calc(100svh - var(--nav-h) - var(--s-7)); }
.hero--chart .coastmap__cap { display: none; }
.hero--chart .town__coord { display: none; }
@media (max-width: 899.98px) {
  /* phones: the chart fills the frame behind the words, which sit on an ink scrim at the foot */
  .hero--chart .hero__chart { opacity: 0.9; margin-right: -6vw; }
  .hero--chart .coastmap__frame { height: calc(100svh - var(--nav-h) - var(--s-5)); }
  .hero--chart .hero__words::before { content: ""; position: absolute; inset: -40vh calc(var(--gutter) * -1) calc(clamp(2.5rem, 7vh, 5rem) * -1); z-index: -1; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 88%, transparent) 38%, var(--ink) 70%); }
  .hero--chart .town__plan { display: none; }
}
@media (min-width: 900px) {
  .hero--chart .hero__content { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .hero--chart .hero__words { grid-column: 1 / 8; }
  .hero--chart .hero__lead { max-width: 40ch; }
  .hero--chart .hero__chart { grid-column: 8 / 13; justify-self: center; }
}

/* =========================================================
   Root
   ========================================================= */

/* Descent: tall underwater plate, words set low beside it */
.descent { padding-block: var(--section-pivotal); }
.descent__media .media { aspect-ratio: 4 / 5; }
.descent__text { margin-top: var(--s-7); }
.descent__text .lead { margin-top: var(--s-5); color: var(--fg-2); }
@media (min-width: 768px) {
  .descent__media { grid-column: 7 / 13; grid-row: 1; }
  .descent__media .media { aspect-ratio: 2 / 3; }
  .descent__text { grid-column: 1 / 7; grid-row: 1; align-self: end; margin-top: 0; padding-bottom: var(--s-9); }
}
@media (min-width: 1100px) {
  .descent__media { grid-column: 7 / 12; }
  .descent__text { grid-column: 1 / 6; }
}

/* Harmony: the one oversized statement, then two quiet columns stepping down */
.harmony { padding-block: var(--section-pivotal) var(--section-standard); }
.harmony .statement {
  grid-column: 1 / -1;
  /* the heaviest typographic moment on the page: architectural, tight */
  font-size: clamp(3rem, 1rem + 9.6vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.harmony__intro { margin-top: var(--s-8); color: var(--fg-2); }
.harmony__note { margin-top: var(--s-7); }
@media (min-width: 768px) {
  .harmony .statement { grid-column: 1 / -1; }
  .harmony__intro { grid-column: 2 / 7; margin-top: var(--s-9); }
  .harmony__note { grid-column: 8 / 13; margin-top: var(--s-11); align-self: start; }
}
@media (min-width: 1100px) { .harmony__note { grid-column: 8 / 12; } }

/* Species: naturalist plates, staggered like specimens pinned on a page.
   The motion agent can add .is-horizontal to .species-track for the pinned gallery. */
.species { padding-block: var(--section-pivotal); }
.species__head .lead { color: var(--fg-2); }
.species__viewport { margin-top: var(--s-9); }
.species-track { display: grid; gap: var(--s-9); list-style: none; }
.plate { display: grid; gap: var(--s-5); align-content: start; }
.plate__figure .media { aspect-ratio: 2 / 3; background: var(--ph); }
.plate__figure .media img { object-fit: cover; }
.plate__name { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); letter-spacing: -0.01em; line-height: 1.02; }
.plate__latin { color: var(--fg-2); margin-top: var(--s-1); }
.plate__status { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.plate__status .mono-label { color: var(--fg-2); }
.plate__status-value { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg); }
.plate__desc { margin-top: var(--s-4); color: var(--fg-2); max-width: 40ch; }
@media (max-width: 767.98px) {
  .plate__figure { width: 86%; }
  .plate:nth-child(even) .plate__figure { margin-left: auto; }
}
@media (min-width: 768px) {
  .species-track { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 8vw, 9rem); row-gap: var(--s-10); }
  .plate:nth-child(even) { margin-top: clamp(6rem, 16vw, 16rem); }
}
@media (min-width: 1100px) {
  /* specimens pinned on a page: narrower than the column, the second column offset */
  .species-track { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); }
  .plate { max-width: 400px; }
  .plate:nth-child(odd) { margin-left: 8%; }
  .plate:nth-child(even) { margin-left: 22%; }
}
/* Horizontal gallery state, applied by the motion module only */
.species-track.is-horizontal {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  gap: clamp(3rem, 7vw, 8rem);
  padding-inline: var(--gutter) 20vw;
}
.species-track.is-horizontal .plate { width: clamp(280px, 27vw, 400px); margin-top: 0; }
.species-track.is-horizontal .plate:nth-child(even) { transform: translateY(8vh); }

/* Threats: an editorial contact sheet; a fishing line runs through it */
.threats { position: relative; padding-block: var(--section-pivotal); overflow: hidden; }
.fishing-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767.98px) { .fishing-line { display: none; } }
.fishing-line__path { fill: none; stroke: var(--sand-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.threats__grid { position: relative; z-index: 1; display: grid; gap: var(--s-8); }
.threat figcaption { margin-top: var(--s-4); max-width: 36ch; }
.threat figcaption h3 { font-size: var(--step-2); }
.threat figcaption p { color: var(--fg-2); margin-top: var(--s-2); }
.threat--plastic .media { aspect-ratio: 2 / 3; }
.threat--net .media, .threat--hull .media, .threat--lights .media { aspect-ratio: 3 / 2; }
@media (max-width: 767.98px) {
  .threat--plastic { width: 78%; }
  .threat--hull { width: 88%; margin-left: auto; }
}
@media (min-width: 768px) {
  .threats__grid { row-gap: var(--s-9); }
  .threats__title { grid-column: 1 / 8; grid-row: 1; }
  .threat--plastic { grid-column: 1 / 5; grid-row: 2 / span 2; }
  .threat--net { grid-column: 6 / 13; grid-row: 2; }
  .threat--hull { grid-column: 6 / 10; grid-row: 3; }
  .threat--lights { grid-column: 2 / 7; grid-row: 4; margin-top: calc(var(--s-9) * -0.5); }
}
@media (min-width: 1100px) {
  .threat--plastic { grid-column: 1 / 5; }
  .threat--hull { grid-column: 5 / 9; margin-top: var(--s-8); }
  .threat--lights { grid-column: 10 / 13; grid-row: 3 / span 2; margin-top: var(--s-12); }
}

/* Letters: the acronym reads down the page */
.letters { padding-block: var(--section-pivotal); }
.letters__head .lead { color: var(--fg-2); }
.letters .letter-list { margin-top: var(--s-8); }
@media (min-width: 768px) {
  .letters__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-7)); }
  .letters .letter-list { grid-column: 6 / 13; margin-top: 0; }
}
@media (min-width: 1100px) { .letters .letter-list { grid-column: 7 / 13; } }

/* Coastline: the chart, and the two bases set beside it */
.coastline { padding-block: var(--section-standard) var(--section-pivotal); }
.coastline__text { margin-top: var(--s-8); }
.coastline__text .lead { color: var(--fg-2); }
.bases { margin-block: var(--s-7) var(--s-5); display: grid; gap: var(--s-7); }
.base__name { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; max-width: 18ch; }
.base dd { margin-top: var(--s-3); color: var(--fg-2); max-width: 46ch; }
@media (min-width: 768px) {
  .coastline .coastmap { grid-column: 1 / 6; grid-row: 1; }
  .coastline__text { grid-column: 7 / 13; grid-row: 1; margin-top: 0; align-self: center; }
}
@media (min-width: 1100px) {
  /* the chart is the chapter: taller than the screen, so you travel down the coast with it */
  .coastline .coastmap { grid-column: 1 / 7; }
  .coastline .coastmap__frame { height: min(176svh, 1720px); }
  .coastline__text { grid-column: 7 / 12; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
}

/* Doors: one big door (Volunteer leads), three quiet ones as an index */
.doors { padding-block: var(--section-pivotal); }
.doors__title { max-width: 16ch; }
.door--lead { margin-top: var(--s-8); display: grid; gap: var(--s-5); }
.door--lead .media { aspect-ratio: 3 / 2; }
.door--lead .door__name { font-size: var(--step-4); }
.door--lead p { color: var(--fg-2); margin-block: var(--s-4) var(--s-6); max-width: 34ch; }
.door-list { margin-top: var(--s-9); display: grid; }
.door-list .door { display: grid; gap: var(--s-3); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.door-list .door:last-child { border-bottom: 1px solid var(--line); }
.door-list .door__name { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); letter-spacing: -0.01em; }
.door-list p { color: var(--fg-2); max-width: 52ch; }
@media (min-width: 768px) {
  .doors__title { grid-column: 1 / 9; }
  .door--lead { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .door--lead .door__media { grid-column: 1 / 8; }
  .door--lead .door__text { grid-column: 8 / 13; }
  .door-list { grid-column: 5 / 13; }
  .door-list .door { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--gap); align-items: baseline; }
  .door-list .door p, .door-list .door .arrow-link { grid-column: 2; }
  .door-list .door__name { grid-row: 1 / span 2; }
}

/* =========================================================
   Volunteer
   ========================================================= */
.roles { padding-block: var(--section-standard); }
.roles__grid { display: grid; }
.roles__head .lead { color: var(--fg-2); }
.role-list { margin-top: var(--s-7); display: grid; gap: var(--s-3); }
.role-list li { font-size: var(--step-2); line-height: 1.25; font-weight: 450; letter-spacing: -0.01em; }
.roles__any { margin-top: var(--s-7); color: var(--fg-2); max-width: 46ch; }
/* the diver is the section's anchor: a full plate beside the list, not a thumbnail after it */
.roles__media { margin-top: var(--s-7); order: 2; }
.roles__media .media { aspect-ratio: 4 / 5; }
.roles__head { order: 1; }
.role-list { order: 3; }
.roles__any { order: 4; }
@media (min-width: 768px) {
  .roles__media { grid-column: 1 / 6; grid-row: 1 / span 3; align-self: start; margin-top: 0; position: sticky; top: calc(var(--nav-h) + var(--s-7)); }
  .roles__media .media { aspect-ratio: 2 / 3; }
  .roles__head, .role-list, .roles__any { grid-column: 7 / 13; }
  .roles__head { grid-row: 1; }
  .role-list { grid-row: 2; }
  .roles__any { grid-row: 3; align-self: start; }
}

/* Day: a sticky sky that the motion agent tints by time; the timeline scrolls beside it.
   It always sits in its own column, never over the timeline: on phones it is a slim sky strip
   (a tide-gauge of the day) with the clock at its foot, on desktop the tall panel. */
.day { padding-block: var(--section-standard); }
.day__grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); }
.day__sky {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  height: calc(100svh - var(--nav-h) - var(--s-4) * 2);
  max-height: 560px;
  overflow: hidden;
  border-radius: var(--r-media);
}
.day__sky-fill { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom)); }
.day__clock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sky-ink, var(--ink));
  letter-spacing: 0;
}
.day__body { grid-column: 2; grid-row: 1; min-width: 0; }
.timeline { margin-top: var(--s-7); display: grid; gap: var(--s-7); }
.timeline__entry { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
.timeline__entry time { font-family: var(--font-mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.timeline__entry p { color: var(--fg-2); margin-top: var(--s-2); max-width: 44ch; }
.day__evening { margin-top: var(--s-8); }
.day__evening .media { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .day__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .day__sky { grid-column: 1 / 6; top: calc(var(--nav-h) + var(--s-6)); height: calc(100svh - var(--nav-h) - var(--s-6) * 2); max-height: none; }
  .day__clock { left: var(--s-6); right: auto; bottom: var(--s-6); text-align: left; font-size: clamp(3rem, 1.5rem + 4vw, 6rem); letter-spacing: -0.02em; }
  .day__body { grid-column: 7 / 13; }
  .timeline { margin-top: var(--s-8); gap: var(--s-9); }
  .timeline__entry { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
  .timeline__entry time { font-size: var(--step-1); color: var(--fg); }
}

/* Cost: the number, then the terms */
.cost { padding-block: var(--section-pivotal) var(--section-standard); }
.cost__figure { margin-top: var(--s-7); display: grid; gap: var(--s-2); max-width: none; }
.cost__amount { font-family: var(--font-mono); font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); line-height: 0.95; letter-spacing: -0.05em; font-weight: 400; }
.cost__per { color: var(--fg-2); font-size: var(--step-1); }
.terms { margin-top: var(--s-8); display: grid; gap: var(--s-5); }
.terms > div { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.terms dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.terms dd { max-width: 48ch; }
.cost__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
@media (min-width: 768px) {
  .cost__title { grid-column: 1 / 7; }
  .cost__figure { grid-column: 1 / 7; grid-row: 2; align-self: start; }
  .terms { grid-column: 7 / 13; grid-row: 1 / span 3; margin-top: var(--s-3); }
  .cost__actions { grid-column: 1 / 7; grid-row: 3; align-self: end; }
}

/* Apply: on paper, by the shore */
.apply { padding-block: var(--section-standard) var(--section-pivotal); scroll-margin-top: var(--nav-h); }
.apply__head .lead { color: var(--fg); }
.apply__how { margin-top: var(--s-5); color: var(--fg-2); max-width: 36ch; }
.apply .form, .apply .form-done { margin-top: var(--s-8); }
@media (min-width: 768px) {
  .apply__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-7)); }
  .apply .form, .apply .form-done { grid-column: 7 / 13; margin-top: 0; }
}
@media (min-width: 1100px) { .apply .form, .apply .form-done { grid-column: 7 / 12; } }

/* =========================================================
   Stay
   ========================================================= */
.rooms { padding-block: var(--section-standard); }
.rooms__title { max-width: 20ch; }
.spread { margin-top: var(--s-8); display: grid; gap: var(--s-9); }
.spread__media .media { aspect-ratio: 3 / 2; }
.spread__text { margin-top: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.spread__name { font-size: var(--step-3); }
.price { font-family: var(--font-mono); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.price span { font-family: var(--font-body); color: var(--fg-2); font-size: var(--step-0); }
.spread__text > p:not(.price) { color: var(--fg-2); max-width: 42ch; }
.specs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.specs li { font-family: var(--font-mono); font-size: var(--step--1); }
.specs li::before { content: "+ "; color: var(--fg-2); }
.rooms__action { margin-top: var(--s-9); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; }
.rooms__hint { color: var(--fg-2); }
@media (min-width: 900px) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .spread__page { padding-inline: 0 clamp(2rem, 4vw, 4.5rem); }
  .spread__page + .spread__page { padding-inline: clamp(2rem, 4vw, 4.5rem) 0; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  .spread__page + .spread__page .spread__text { margin-top: 0; margin-bottom: var(--s-6); }
}

.amenities { padding-block: var(--section-standard); }
.amenities__media .media { aspect-ratio: 4 / 5; }
.amenities__text { margin-top: var(--s-8); }
.amenity-list { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.amenity-list li { display: flex; gap: var(--s-4); align-items: center; font-size: var(--step-1); }
.amenity-list .icon { width: 26px; height: 26px; color: var(--fg-2); }
@media (min-width: 768px) {
  .amenities__media { grid-column: 1 / 7; }
  .amenities__text { grid-column: 8 / 13; margin-top: 0; align-self: center; }
}

.wonder { padding-block: var(--section-pivotal) var(--section-standard); }
.wonder__media { margin-top: var(--s-7); }
.wonder__media .media { aspect-ratio: 3 / 2; }
.wonder-list { margin-top: var(--s-8); display: grid; gap: var(--s-7); }
.wonder-list dt { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.01em; }
.wonder-list dd { margin-top: var(--s-3); color: var(--fg-2); max-width: 46ch; }
@media (min-width: 768px) {
  .wonder__title { grid-column: 1 / 9; }
  .wonder-list { grid-column: 1 / 7; }
  .wonder__media { grid-column: 8 / 13; grid-row: 2; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-7)); margin-top: var(--s-8); }
  .wonder__media .media { aspect-ratio: 4 / 5; }
}

.find { padding-block: var(--section-standard); }
.find__address { font-style: normal; margin-top: var(--s-5); font-size: var(--step-1); }
.find__coord { margin-top: var(--s-2); font-size: var(--step--1); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.find__links { margin-top: var(--s-5); display: grid; gap: var(--s-1); }
.find .chart { margin-top: var(--s-7); }
@media (min-width: 768px) {
  .find__text { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-7)); }
  .find .chart { grid-column: 6 / 13; margin-top: 0; }
}
@media (min-width: 1100px) { .find .chart { grid-column: 7 / 12; } }

/* =========================================================
   Donate
   ========================================================= */
.why { padding-block: var(--section-standard); }
.why__media { margin-top: var(--s-7); }
.why__media .media { aspect-ratio: 3 / 2; }
.why-list { margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.why-list > div { display: grid; gap: var(--s-2); }
.why-list dt { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.02; }
.why-list dd { color: var(--fg-2); max-width: 40ch; }
@media (min-width: 768px) {
  .why__title { grid-column: 1 / 7; }
  .why__media { grid-column: 7 / 13; grid-row: 1 / span 2; margin-top: 0; align-self: start; }
  .why-list { grid-column: 1 / 6; grid-row: 2; }
}

.ledger { padding-block: var(--section-pivotal); }
.ledger__head .lead { color: var(--fg-2); }
.ledger__book { margin-top: var(--s-9); display: grid; gap: var(--s-9); }
.ledger__h { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); padding-bottom: var(--s-4); border-bottom: 3px double var(--ink); }
.ledger__rows li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--sand-5);
  font-size: var(--step-1);
  line-height: 1.4;
}
@media (min-width: 900px) {
  .ledger__head { max-width: 62%; }
  .ledger__book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .ledger__page { padding-right: clamp(2rem, 4vw, 4rem); }
  .ledger__page + .ledger__page { padding: 0 0 0 clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--sand-5); }
}

.inkind { padding-block: var(--section-standard); }
.inkind__text { margin-top: var(--s-7); }
.inkind__text .give-actions { margin-top: var(--s-7); }
@media (min-width: 768px) {
  .inkind__title { grid-column: 1 / 10; }
  .inkind__text { grid-column: 6 / 12; margin-top: var(--s-9); }
}

.community { padding-block: var(--section-connective); }
.community .lead { color: var(--fg-2); }
.community p:last-child { margin-top: var(--s-5); }
@media (min-width: 768px) { .community__grid > * { grid-column: 3 / 11; } }

/* =========================================================
   Partner
   ========================================================= */
.vision { padding-block: var(--section-pivotal) var(--section-standard); }
.vision__goals { margin-top: var(--s-9); }
.goal-list { margin-top: 0; display: grid; gap: var(--s-7); }
.goal-list h3 { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.goal-list p { margin-top: var(--s-3); color: var(--fg-2); max-width: 40ch; }
@media (min-width: 768px) {
  .vision__statement { grid-column: 1 / 12; }
  .vision__goals { grid-column: 3 / 13; }
  .goal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 7rem); row-gap: var(--s-9); }
  .goal-list li:nth-child(even) { margin-top: var(--s-9); }
}

.centres { padding-block: var(--section-standard) var(--section-pivotal); }
.centres__head .lead { color: var(--fg-2); }
.centre { margin-top: var(--s-9); }
.centre__media { margin-bottom: var(--s-5); }
.centre__media .media { aspect-ratio: 3 / 2; }
.centre__name { font-size: var(--step-3); text-wrap: balance; max-width: 16ch; }
.centre__list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.centre__list li { color: var(--fg-2); padding-left: 1.25rem; position: relative; max-width: 44ch; }
.centre__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: currentColor; }
/* the closing row: who staffs the centres, and the action, together under both bases */
.centres__close { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-5); align-items: center; }
.centres__staff { font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.3; letter-spacing: -0.01em; max-width: 26ch; text-wrap: balance; }
@media (min-width: 900px) {
  .centres__head { grid-column: 1 / 8; }
  .centre--nuweiba { grid-column: 1 / 7; }
  .centre--dahab { grid-column: 7 / 13; margin-top: calc(var(--s-9) + var(--s-10)); }
  .centres__close { grid-column: 1 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-8); }
}

.team { padding-block: var(--section-standard); }
.people { margin-top: var(--s-7); display: grid; gap: var(--s-7); }
.person__name { font-size: var(--step-4); }
.person__role { margin-top: var(--s-3); color: var(--fg-2); max-width: 30ch; }
@media (min-width: 768px) {
  .team__grid > h2 { grid-column: 1 / 5; }
  .people { grid-column: 5 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 0; }
  .person + .person { margin-top: var(--s-9); }
}

.partners { padding-block: var(--section-standard); }
.partner-list { margin-top: var(--s-7); display: grid; gap: var(--s-7); }
.partner { display: grid; gap: var(--s-4); justify-items: start; text-decoration: none; }
.partner__logo { height: 96px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.partner__logo--crest { height: 132px; }
.partner__name { display: inline-flex; align-items: center; gap: 6px; font-weight: 560; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (hover: hover) and (pointer: fine) { .partner:hover .partner__name { text-decoration-color: currentColor; } }
@media (min-width: 768px) {
  .partners__grid > h2 { grid-column: 1 / 6; }
  .partner-list { grid-column: 6 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; margin-top: 0; }
}

.status { padding-block: var(--section-pivotal); }
.status__body { margin-top: var(--s-6); display: grid; gap: var(--s-5); justify-items: start; }
.status__body .lead strong { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.status__body > p:not(.lead) { color: var(--fg-2); max-width: 46ch; }
.status__body .btn { margin-top: var(--s-4); }
.status__media { margin-top: var(--s-7); }
.status__media .media { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .status__grid > h2 { grid-column: 1 / 6; grid-row: 1; }
  .status__media { grid-column: 1 / 6; grid-row: 2; }
  .status__body { grid-column: 7 / 12; grid-row: 1 / span 2; margin-top: 0; padding-top: var(--s-2); align-self: start; }
}

/* =========================================================
   404
   ========================================================= */
.lost { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; padding-block: var(--s-9); }
.lost__sky { position: absolute; inset: 0; z-index: -1; }
.lost__sky .media { width: 100%; height: 100%; border-radius: 0; }
.lost__sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 30%, transparent), var(--ink) 92%); }
.lost__brand { position: absolute; top: var(--s-5); left: var(--gutter); color: var(--sand); }
.lost__depth { color: var(--fg-2); margin-bottom: var(--s-4); }
.lost__title { max-width: 14ch; }
.lost .lead { margin-top: var(--s-4); color: var(--fg-2); }
.lost__links { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }