/*
 * Las Tortuguitas — lastortuguitas.com
 *
 * One stylesheet for every page. The palette and type are taken from the Wix
 * site this replaces (lastortuguitas.org) so the two read as the same brand:
 * olive header/footer, navy feature panels, a cream donation card and the red
 * DONATE button. Layout is plain grid/flex — there is no build step, so what
 * is in this file is what ships.
 */

:root {
  --olive: #577014;
  --olive-dark: #4e6807;
  --olive-deep: #3d5106;
  --navy: #274b7d;
  --navy-deep: #163446;
  --red: #e63a36;
  --red-dark: #c92a26;
  --cream: #ffeb9d;
  --sand: #f7f4ec;
  --ink: #1d1d1b;
  --muted: #5a5a54;
  --line: #dedad0;
  --white: #fff;

  --wrap: 1240px;
  --display: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}

/* `height: auto` is load-bearing, not tidiness. Every <img> carries width and
   height attributes (they reserve layout space and stop the page jumping), and
   those attributes are CSS presentational hints. Without this, any rule that
   sets width but not height leaves the height pinned at the attribute value and
   the photo stretches. Rules that set an explicit height are more specific and
   still win. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; margin: 0; line-height: 1.12; }

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--ink); padding: .75rem 1.25rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- header */

.topbar {
  background: var(--olive);
  color: var(--white);
  font-size: .82rem;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 44px;
}
.social { display: flex; gap: .85rem; align-items: center; }
.social a { display: grid; place-items: center; opacity: .85; transition: opacity .15s; }
.social a:hover { opacity: 1; }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.topbar a.mail { color: var(--white); text-decoration: none; }
.topbar a.mail:hover { text-decoration: underline; }

.nav {
  background: var(--sand);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nav .wrap {
  display: flex; align-items: center; gap: 2rem;
  min-height: 92px;
}
.brand { flex: none; }
.brand img { width: 82px; height: 82px; }

.nav-links {
  display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;
  font-family: var(--display); font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase;
}
.nav-links a {
  text-decoration: none; color: var(--olive-dark); padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

.nav-actions { margin-left: auto; display: flex; gap: .75rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: .9rem; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; font-weight: 500;
  padding: .78rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn svg { width: 15px; height: 15px; fill: currentColor; }
.btn-shop { background: var(--olive-dark); color: var(--white); }
.btn-shop:hover { background: var(--olive-deep); }
.btn-donate { background: var(--red); color: var(--white); }
.btn-donate:hover { background: var(--red-dark); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; padding: .6rem 1.1rem;
  font-size: .8rem; letter-spacing: .06em; text-transform: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-block { width: 100%; justify-content: center; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0;
  padding: .5rem; cursor: pointer; color: var(--olive-dark);
}
.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; min-height: var(--ph, 78vh); display: grid;
  grid-template-rows: auto 1fr auto; color: var(--white);
  background: var(--navy-deep) center/cover no-repeat;
  padding: 3rem 0 3.5rem;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.42) 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 4.3rem); letter-spacing: .04em;
  text-transform: uppercase; text-align: center; color: var(--ink);
  text-shadow: 0 1px 18px rgba(255, 255, 255, .35);
}
.hero .kicker {
  align-self: end; text-align: center; font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}

.page-hero {
  background: var(--navy-deep) center/cover no-repeat;
  color: var(--white); padding: clamp(4rem, 11vw, 8rem) 0;
  min-height: var(--ph, 0);
  position: relative; text-align: center;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; background: rgba(10, 26, 38, .5);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--cream); }
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: .05em; text-transform: uppercase;
}
.page-hero p { max-width: 46rem; margin: 1.25rem auto 0; }

/* -------------------------------------------------------------- sections */

.eyebrow {
  font-family: var(--display); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1rem;
}

.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 420px;
}
.split-media { background: center/cover no-repeat; min-height: 320px; }
.split-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.split-body .inner { max-width: 30rem; border-left: 1px solid var(--line); padding-left: 1.75rem; }
.split-body h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.split.reverse .split-media { order: 2; }
.split.right .split-body { align-items: flex-end; text-align: right; }
.split.right .split-body .inner { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: 1.75rem; }
.split.on-navy { background: var(--navy); color: var(--white); }
.split.on-navy .eyebrow { color: rgba(255, 255, 255, .72); }
.split.on-navy .inner { border-color: rgba(255, 255, 255, .35); }
.split.on-navy .btn-ghost { color: var(--white); border-color: var(--white); }
.split.on-navy .btn-ghost:hover { background: var(--white); color: var(--navy); }

.band {
  background: var(--navy-deep) center/cover no-repeat fixed;
  color: var(--white); padding: clamp(4rem, 9vw, 7rem) 0; position: relative;
  min-height: var(--ph, 0);
}
.band::after { content: ""; position: absolute; inset: 0; background: rgba(9, 24, 36, .68); }
.band > * { position: relative; z-index: 1; }
.band .narrow { max-width: 54rem; }
.band h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-bottom: 1.5rem; }
.band .eyebrow { color: var(--cream); }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section.tint { background: var(--sand); }
.section h2 {
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: .03em; margin-bottom: 1.25rem;
}
.section .lead { max-width: 52rem; font-size: 1.06rem; }
.centered { text-align: center; }
.centered .lead { margin-inline: auto; }

/* ------------------------------------------------------------ story grid */

.story {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem);
}
.story + .story { border-top: 1px solid var(--line); }
.story.reverse .story-media { order: 2; }
.story img { width: 100%; height: auto; }
.story h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------- gallery */

/* Tile size is a column count, and it rides on a custom property so the
   responsive rules further down can still win: they set the property
   `grid-template-columns` outright, which an inline `--cols` cannot
   override. A five-across grid still drops to two on a phone. */
.gallery {
  display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 4px;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

/* -------------------------------------------------------- allocation list */

.allocation { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.alloc-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem;
  align-items: start; padding-block: 1.4rem;
}
.alloc-item + .alloc-item { border-top: 1px solid rgba(255, 255, 255, .16); }
.alloc-item img { width: 140px; height: 100px; object-fit: cover; }
.alloc-item h3 {
  font-family: var(--display); font-size: .92rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .5rem; font-weight: 500;
}
.alloc-item p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.on-black { background: #000; color: var(--white); }
.on-black h2 { color: var(--white); }

/* ---------------------------------------------------------- donate panel */

.donate-panel { display: grid; grid-template-columns: 1fr 1fr; }
.donate-panel .lhs {
  background: var(--navy); color: var(--white);
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.donate-panel .lhs h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.5rem; letter-spacing: .04em; text-transform: uppercase; }
/* `margin-block`, not the `margin` shorthand: the shorthand also resets the
   INLINE margins, and at `.donate-panel .lhs img` it outranks the alignment
   class a dragged photo carries — so dragging one of these photos left or
   right silently did nothing. Same rendering, one axis. */
.donate-panel .lhs img { margin-block: 1.5rem; }
.donate-panel .rhs {
  background: var(--cream); display: grid; place-items: center;
  padding: clamp(2.5rem, 5vw, 4rem);
}

.donate-card {
  background: var(--white); color: var(--ink); border-radius: 14px;
  width: min(100%, 27rem); padding: 2rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
  text-align: left;
}
.donate-card h3 { font-family: var(--body); font-weight: 700; font-size: 1.4rem; margin-bottom: .6rem; }
.donate-card p.blurb { font-size: .93rem; color: var(--muted); margin: 0 0 1.4rem; }
.raised { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.25rem; }
.raised small { font-size: .95rem; color: var(--muted); }
.meter { height: 6px; background: #eee; border-radius: 999px; margin: .6rem 0 .35rem; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--olive-dark); border-radius: 999px; }
.meter-note { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }

.field { margin-top: 1.4rem; }
.field > label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .45rem; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choices.freq { grid-template-columns: repeat(3, 1fr); }
.choice {
  border: 1px solid var(--line); background: var(--white); border-radius: 4px;
  padding: .7rem .4rem; font: inherit; font-size: .92rem; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.choice:hover { border-color: var(--olive-dark); }
.choice[aria-pressed="true"] { border-color: var(--red); background: #fdece8; }
.donate-card textarea {
  width: 100%; min-height: 5.5rem; border: 1px solid var(--line); border-radius: 4px;
  padding: .7rem; font: inherit; font-size: .92rem; resize: vertical;
}
.donate-card .count { text-align: right; font-size: .75rem; color: var(--muted); }
.pending {
  margin-top: 1.2rem; font-size: .84rem; color: var(--muted);
  background: var(--sand); border-radius: 6px; padding: .8rem 1rem;
}

/* -------------------------------------------------------------- partners */

.partners { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.partners .inner { border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 1.75rem; max-width: 30rem; }
.partners h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: .02em; margin-bottom: 1.1rem; }
.partner-lists { text-align: center; display: grid; gap: 2rem; }
.partner-lists h3 {
  font-family: var(--display); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream); margin-bottom: .8rem; font-weight: 500;
}
.partner-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.partner-lists li { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.partner-lists a { text-decoration: underline; text-underline-offset: 4px; }

.banner img { width: 100%; height: clamp(220px, 30vw, 420px); object-fit: cover; }

/* ---------------------------------------------------------------- footer */

.footer { background: var(--olive-dark); color: var(--white); padding: 3.5rem 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem;
}
.footer h4 {
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  color: var(--cream); margin-bottom: 1rem;
}
.footer p, .footer li { font-size: .88rem; color: rgba(255, 255, 255, .88); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .brand img { width: 62px; height: 62px; margin-bottom: 1rem; }
.footer .social { margin-top: 1.25rem; }
.footer .social a {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.copyright {
  border-top: 1px solid rgba(255, 255, 255, .18); text-align: center;
  padding: 1.1rem 0; font-size: .8rem; color: rgba(255, 255, 255, .8);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sand); padding: 1.25rem 1.5rem; gap: 1.1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-actions {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0 1.5rem 1.5rem; background: var(--sand);
    transform: translateY(calc(100% - 1px)); border-bottom: 1px solid var(--line);
  }
  .nav { position: relative; }
  .split, .donate-panel, .partners, .allocation, .story { grid-template-columns: 1fr; }
  .split.reverse .split-media, .story.reverse .story-media { order: 0; }
  .split.right .split-body { align-items: flex-start; text-align: left; }
  .split.right .split-body .inner {
    border-right: 0; border-left: 1px solid var(--line);
    padding-right: 0; padding-left: 1.75rem;
  }
  .band { background-attachment: scroll; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 2.25rem); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .alloc-item { grid-template-columns: 1fr; }
  .alloc-item img { width: 100%; height: 180px; }
  .choices { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------- dragged photo size + place

   Willie sizes and moves photos by dragging them in the editor. What lands
   here is the result: a width as a PERCENTAGE of the space the photo sits in
   (`--pw`), and which side of that space it sits on.

   A percentage, never a pixel count, because the editor is a thing you drag
   on a big screen and the result has to survive a 390px phone. `--pw` is a
   custom property rather than an inline `width` for the same reason — an
   inline width would beat every stylesheet rule, including the one below
   that hands phones the full column back. Drag a photo to a third of the
   width at a desk and a phone still shows it edge to edge, because a third
   of 390px is a thumbnail nobody wanted. */
img.ph { width: var(--pw, 100%); max-width: 100%; }

/* A split section's photo is a grid TRACK, not an image, so its edge drags
   the track. The media is always the second track on desktop: with the photo
   on the right it is second in the DOM, and with `reverse` it is first in the
   DOM but carries `order: 2`. Both land in the same place, which is why one
   rule covers both. */
.split.ph { grid-template-columns: 1fr var(--pw); }

/* Centring the copy only matters once a band has been dragged taller than its
   content, and `display: grid` on these two would otherwise change how they
   lay out on a live site nobody has edited. So it is scoped to the class that
   only appears when a height has actually been set. */
.page-hero.phh, .band.phh { display: grid; align-content: center; }
img.ph-left { margin-right: auto; margin-left: 0; }
img.ph-center { margin-inline: auto; }
img.ph-right { margin-left: auto; margin-right: 0; }

/* The full-width band is the one photo with no width to drag, so the same
   gesture sets its height instead — from the bottom edge. */
.banner img.phh { height: var(--ph, clamp(220px, 30vw, 420px)); }

@media (max-width: 640px) {
  /* Below this the columns are single-file and every photo takes the width
     it is given. This rule is why a dragged width is safe. */
  img.ph { width: 100%; }
}

@media (max-width: 960px) {
  /* A split stacks here, so a dragged ratio has nothing to divide and must
     not leave a stray track behind. */
  .split.ph { grid-template-columns: 1fr; }
}