@charset "UTF-8";
/* Malee’s Bird Sanctuary – V1 (local build). System fonts only, no external requests. */

:root {
  --cream: #f7f6ee;
  --green: #123d34;
  --green-mid: #184639;
  --green-deep: #0d2b24;
  --sage-pale: #dce8dc;
  --band: #e7ebe0;
  --mist: #e4e9dd;
  --ink: #1f332d;
  --muted: #52695a;
  --accent: #5f8570;          /* italic headline accent on light grounds (AA large text) */
  --accent-dark: #a3c5a9;     /* italic headline accent on dark grounds */
  --eyebrow: #426d54;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --pad-x: 7%;
  --gallery-gap: 24px;
  --gallery-tall: 345px;
  --gallery-short: 295px;
  --gallery-duration: 112s; /* one loop = one set of 11 photos; scaled from the former 90 s (9 photos) so the speed stays ~30 px/s */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, p, dl, dd, ul { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.052em; }
h1 em, h2 em { font-weight: 400; font-style: italic; color: var(--accent); }
a { color: inherit; text-decoration: none; }
::selection { background: #b4d3bf; color: var(--ink); }
.line { display: block; }
.icon { width: 1em; height: 1em; flex: none; }

:focus-visible { outline: 3px solid #2d654d; outline-offset: 4px; }
.story :focus-visible, .contact :focus-visible, .site-footer :focus-visible { outline-color: #d7ebd0; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 20;
  background: var(--green); color: #fff; padding: 12px 18px; font-size: 14px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- header */
.site-header {
  height: 100px; padding: 0 5.4%;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream); border-bottom: 1px solid #e1e6db;
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; color: var(--green); overflow: visible; }
/* header mark: perched bird on a twig (inline SVG; the bird group is the only animated part) */
.mark-line { fill: none; stroke: currentColor; stroke-linecap: round; }
.mark-fill { fill: currentColor; }
.bird-wing { fill: none; stroke: var(--cream); stroke-width: .95; stroke-linecap: round; }
.bird-eye { fill: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  /* one-time landing on load: glide in from upper left, flare, touch down, settle; then static (no loop) */
  /* fill-mode "backwards" (not "both"): after the landing nothing keeps animating, so the header is rendered exactly like any static header */
  .bird { transform-box: fill-box; transform-origin: 55% 95%; animation: bird-land 1s linear .15s backwards; }
}
@keyframes bird-land {
  0%   { opacity: 0; transform: translate(-14px, -11px) rotate(7deg); animation-timing-function: cubic-bezier(.3, .55, .35, 1); }
  14%  { opacity: 1; }
  56%  { transform: translate(-2.2px, -1.6px) rotate(-6deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  74%  { transform: translate(.2px, 1px) rotate(1.8deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  89%  { transform: translate(0, -.5px) rotate(-.6deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand strong { font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: -.075em; line-height: 1; text-transform: lowercase; }
.brand small { font-size: 8px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.desktop-nav { display: flex; gap: 36px; font-size: 12px; font-weight: 600; }
.desktop-nav a { padding: 8px 0; transition: color .2s; }
.desktop-nav a:hover { color: #5f8570; }
.header-link {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 700; padding: 9px 0; border-bottom: 1px solid var(--green);
}
.header-link .icon { font-size: 16px; }

/* ------------------------------------------------------------------ hero */
.hero { min-height: 730px; display: grid; grid-template-columns: 49% 51%; overflow: hidden; }
.hero-copy { padding: 86px 6% 43px 11%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow-line { width: 26px; height: 1px; background: #749585; }
.hero-main { margin: 30px 0 40px; }
.hero h1 { font-size: clamp(56px, 6.3vw, 94px); line-height: 1.03; white-space: nowrap; }
.lead { font-size: 18px; line-height: 1.7; max-width: 440px; color: var(--muted); margin-top: 26px; }
.hero-text { font-size: 15px; line-height: 1.75; max-width: 440px; color: var(--muted); margin-top: 14px; }
.hero-actions { margin-top: 34px; }
.primary-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 182px; padding: 19px 24px 19px 28px; border-radius: 3px;
  background: var(--green); color: #fff; font-size: 12px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.primary-button .icon { font-size: 18px; }
.primary-button:hover { background: #2d654d; transform: translateY(-2px); }
.primary-button.on-dark { background: var(--cream); color: var(--green); }
.primary-button.on-dark:hover { background: #fff; }
.flourish { width: 40px; height: 40px; color: #83a996; }

.hero-art { position: relative; display: flex; background: var(--sage-pale); padding: 32px 55px 32px 20px; min-height: 730px; }
.hero-image-frame { flex: 1; overflow: hidden; background: #c2d0ca; border-radius: 180px 180px 4px 4px; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 51%; filter: saturate(.94) contrast(1.02); }
@media (prefers-reduced-motion: no-preference) {
  /* one-time zoom of the photo (the frame stays put), starting with the header bird's landing (same .15s delay): 1.00 -> 1.028, then it rests there.
     The resting scale is this regular rule; the animation only supplies the 1.00 start (fill-mode "backwards", like .bird), so nothing keeps animating
     and no layer stays promoted (the badge and the vertical label keep their approved text rendering). */
  .hero-image-frame img { transform: scale(1.028); animation: hero-zoom 1.1s cubic-bezier(.3, .1, .2, 1) .15s backwards; }
}
@keyframes hero-zoom { from { transform: scale(1); } }
.photo-label {
  position: absolute; right: 22px; bottom: 60px; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
  font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #2e6350; white-space: nowrap;
}
.hero-badge {
  position: absolute; left: -64px; bottom: 75px; width: 135px; height: 135px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #ecd7b7; color: #5c5539; transform: rotate(-17deg); box-shadow: 0 5px 20px #26402e19;
}
.hero-badge span { font-size: 13px; letter-spacing: .06em; }
.hero-badge strong { font-family: var(--serif); font-size: 35px; font-style: italic; font-weight: 400; line-height: 1.1; }

/* ------------------------------------------------------------------ band */
.band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px; padding: 0 6%; background: var(--band);
  font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #3f6650;
}
.band-star { width: 22px; height: 22px; flex: none; opacity: .7; }

/* ----------------------------------------------------------------- story */
.section-pad { padding: 135px var(--pad-x); }
/* DOM order is copy → photo (reading order); on wide screens the photo sits on the left. */
.story { display: grid; grid-template-columns: 43% 57%; align-items: center; background: var(--green); color: #fff; }
.story-copy { grid-column: 2; grid-row: 1; max-width: 700px; padding: 20px 0 20px 6%; }
.story-photo { grid-column: 1; grid-row: 1; position: relative; width: 82%; height: 560px; margin-left: 35px; }
.eyebrow-light { color: #b1d5bc; }
.story h2 { font-size: clamp(42px, 3.9vw, 58px); line-height: 1.12; margin: 28px 0 33px; }
.story h2 em { color: var(--accent-dark); }
.story-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.85; color: #d6e4d9; max-width: 500px; margin-bottom: 20px; }
.story-copy > p.story-close {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid #638677;
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.5; color: #e7f1e6;
}
.story-photo > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; border-radius: 210px 210px 8px 8px; background: #1f4a3e; }
.story-photo-note {
  position: absolute; right: 16px; bottom: -58px; max-width: 220px;
  padding: 18px 22px; background: #d7ebd0; color: #2f513d; transform: rotate(-5deg);
  font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35;
}

/* --------------------------------------------------------------- gallery */
.gallery-section { padding-left: 0; padding-right: 0; overflow: hidden; background: var(--cream); }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; padding: 0 var(--pad-x); margin-bottom: 55px; }
.section-intro h2 { font-size: clamp(52px, 6vw, 85px); line-height: 1.08; margin-top: 24px; }
.section-intro-text { max-width: 380px; margin-bottom: 10px; }
.section-intro-text p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.section-intro-text p + p { margin-top: 14px; }

.gallery-window {
  overflow: hidden; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.gallery-window::-webkit-scrollbar { display: none; }
.gallery-window:focus-visible { outline-offset: -4px; }
.gallery-track { display: flex; width: max-content; animation: gallery-run var(--gallery-duration) linear infinite; }
.gallery-set { display: flex; align-items: flex-start; flex: none; padding: 0; list-style: none; }
.gallery-card { flex: none; margin-right: var(--gallery-gap); border-radius: 5px; overflow: hidden; } /* clips the hover zoom to the card */
.gallery-card:nth-child(even) { margin-top: 50px; }
.gallery-card img { width: auto; max-width: none; height: var(--gallery-tall); border-radius: 5px; background: #d3e0d6; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.gallery-card:nth-child(even) img { height: var(--gallery-short); }
@keyframes gallery-run { to { transform: translateX(-50%); } }

/* hover zoom: ~10 % inside the card (the card keeps its size, so nothing shifts or gets cut at the top); mouse-type pointers only */
@media (hover: hover) and (pointer: fine) { .gallery-card:hover img { transform: scale(1.1); } }

/* lightbox trigger: script.js wraps each photo of the first set in a real <button> (the second set is a mouse-only duplicate) */
.gallery.has-lightbox .gallery-card { cursor: pointer; }
.gallery-open {
  display: block; position: relative; margin: 0; padding: 0; border: 0; border-radius: 5px; background: none;
  color: inherit; font: inherit; line-height: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gallery-open:focus-visible { outline: 3px solid transparent; outline-offset: -3px; } /* transparent outline = visible in forced-colours mode */
.gallery-open:focus-visible::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px var(--green);
}

/* pause: hover (fine pointers), keyboard focus only (:focus-visible, so a mouse/touch click never leaves it stuck),
   off-screen, and JS manual mode */
@media (hover: hover) { .gallery-window:hover .gallery-track { animation-play-state: paused; } }
.gallery-window:focus-visible .gallery-track,
.gallery.is-offscreen .gallery-track { animation-play-state: paused; }
.gallery.is-manual .gallery-track { animation-name: none; }
.gallery.is-manual .gallery-window { overflow-x: auto; }

.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 36px var(--pad-x) 0; min-height: 76px; }
.gallery-toggle {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 2px;
  background: none; border: 0; border-bottom: 1px solid #9fb3a2; border-radius: 0;
  font: 700 12px var(--sans); letter-spacing: .04em; color: var(--ink); cursor: pointer;
}
.gallery-toggle[hidden] { display: none; }
.gallery-toggle:hover { border-bottom-color: var(--green); }
.gallery-hint { display: none; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }

/* --------------------------------------------------------------- growing */
.growing { display: grid; grid-template-columns: 45% 55%; min-height: 780px; overflow: hidden; background: var(--mist); }
.growing-words { padding: 120px 5% 100px 12%; }
.growing h2 { font-size: clamp(44px, 4.4vw, 64px); line-height: 1.1; margin: 32px 0; }
.growing-words > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; max-width: 410px; color: #4a6050; margin-bottom: 18px; }
.growing .outline-heart { display: block; width: 110px; height: 100px; margin: 40px 0 0 30px; color: #7f9c88; opacity: .45; transform: rotate(-18deg); }
.growing-images { position: relative; min-height: 780px; }
.photo-primary, .photo-secondary { position: absolute; }
.photo-primary { top: 8%; left: 17%; width: 57%; height: 65%; transform: rotate(5deg); box-shadow: 0 15px 60px #233e2831; }
.photo-secondary { bottom: 9%; left: 0; width: 45%; height: 42%; transform: rotate(-8deg); border: 9px solid #fff; box-shadow: 0 15px 60px #233e2831; }
.photo-primary img, .photo-secondary img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; background: #c9d6cc; }

/* --------------------------------------------------------------- contact */
.contact { padding-top: 115px; padding-bottom: 145px; background: var(--green-mid); color: #fff; }
.contact-layout { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 40px; }
.contact h2 { font-size: clamp(54px, 6.5vw, 100px); line-height: 1.05; }
.contact h2 em { color: #b8d1b1; }
.contact-text { flex: none; width: 380px; }
.contact-text > p:not(.contact-note) { font-size: 17px; line-height: 1.7; color: #d0e0d2; }
.contact-details { margin-top: 34px; padding-top: 26px; border-top: 1px solid #557b66; display: grid; gap: 22px; }
.contact-details dt { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #b1d5bc; }
.contact-details dd { margin-top: 8px; font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.contact-details a { border-bottom: 1px solid #a7c4af; overflow-wrap: anywhere; }
.contact-details a:hover { border-bottom-color: #fff; }
.contact .primary-button { margin-top: 34px; }
.contact-note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: #c4d8c5; }

/* ---------------------------------------------------------------- footer */
.site-footer { padding: 65px var(--pad-x) 28px; background: var(--green-deep); color: #b7cfc0; }
.footer-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px 40px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; color: #fff; }
.footer-brand strong { font-family: var(--serif); font-size: 45px; font-weight: 700; letter-spacing: -.08em; line-height: 1; text-transform: lowercase; }
.footer-brand span { margin-top: 12px; font-size: 8px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
.footer-tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: #d7e8d7; }
.footer-location, .back-to-top { font-size: 12px; }
.back-to-top { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
.back-to-top:hover { color: #fff; }
.footer-meta { margin-top: 55px; padding-top: 22px; border-top: 1px solid #39564a; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 40px; font-size: 12px; line-height: 1.7; color: #a6c0b2; }
.site-info summary { cursor: pointer; padding: 4px 0; list-style-position: inside; text-decoration: underline; text-underline-offset: 4px; }
.site-info summary:hover { color: #fff; }
.site-info-panel { max-width: 460px; margin-top: 12px; padding: 16px 18px; border: 1px dashed #5b7d6d; border-radius: 4px; color: #c7dacd; }
.site-info-panel p + p { margin-top: 8px; }
.site-info-panel a { text-decoration: underline; text-underline-offset: 4px; }   /* links must be recognisable (global `a` has no underline); same underline as the summary */
.site-info-panel a:hover { color: #fff; }
.site-info-flag { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ecd7b7; }
/* agency credit: own row inside the meta line; brand colours IM #F5F5F5 · [PRESS] #C6A15B · IF #F5F5F5 */
.footer-credit { flex: 0 0 100%; text-align: right; }
.footer-credit a { display: inline-block; border-bottom: 1px solid rgba(245, 245, 245, .28); border-radius: 1px; font-weight: 700; letter-spacing: .03em; transition: border-color .25s; }
.footer-credit a:hover { border-bottom-color: rgba(198, 161, 91, .9); }
.wm-im, .wm-if { color: #f5f5f5; }
.wm-press { display: inline-block; color: #c6a15b; }

/* --------------------------------------------------------- scroll reveals
   Content is visible by default (no JavaScript, reduced motion, print, old browsers). Only when scripting is on and motion is
   welcome do items wait hidden (opacity only: a pending item must not sit displaced, or the browser's scroll restoration after a
   reload would land a few pixels off). script.js releases each item once, the first time it scrolls into view; the rise
   (fade + 16-20 px, via the individual `translate` property, never `transform`) is a one-off animation that starts then, and
   the attribute is removed again afterwards, so no state is left behind. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal=""] { opacity: 0; }
  [data-reveal="in"] { animation: reveal-rise var(--reveal-dur, .56s) cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) backwards; }
  [data-reveal-media] { --reveal-y: 20px; --reveal-dur: .65s; }
  /* safety net: if script.js never starts (blocked, error), everything shows by itself after 3 s */
  html:not([data-reveal-ready]) [data-reveal=""] { animation: reveal-rescue .01s linear 3s forwards; }
}
@keyframes reveal-rise { from { opacity: 0; translate: 0 var(--reveal-y, 16px); } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-rescue { to { opacity: 1; } }

/* ---------------------------------------------------------------- lightbox
   A real <dialog> opened with showModal(): top layer, rest of the page inert, Escape built in. The dialog itself carries the dark
   backdrop so a click on the dark area is a click on the dialog. */
html.lightbox-open { overflow: hidden; } /* script.js adds padding-right for a classic scrollbar so the page does not shift; overlay scrollbars need none */
.lightbox {
  --lb-pad-y: clamp(56px, 8vh, 72px); --lb-pad-x: clamp(12px, 3vw, 48px);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: rgba(6, 20, 16, .93); color: #fff;
  touch-action: pinch-zoom; overscroll-behavior: contain;
  opacity: 0; transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox::backdrop { background: transparent; }
.lightbox-stage { position: absolute; inset: 0; display: grid; padding: var(--lb-pad-y) var(--lb-pad-x); }
.lightbox-figure { margin: 0; min-width: 0; min-height: 0; background: center / contain no-repeat; } /* thumbnail shown until the large file is ready */
.lightbox-img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.lightbox-img.is-loaded { opacity: 1; }
.lightbox-close {
  position: absolute; z-index: 2; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(247, 246, 238, .5); border-radius: 50%; background: rgba(247, 246, 238, .16); color: var(--cream);
  cursor: pointer; transition: background .2s;
}
.lightbox-close:hover { background: rgba(247, 246, 238, .3); }
.lightbox-close:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.lightbox-close svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- tablet ≤1100 */
@media (max-width: 1100px) {
  .hero h1 { font-size: 5.6vw; }
  .hero-copy { padding-left: 8%; }
  .lead { font-size: 16px; }
  .hero-art { padding-right: 35px; }
  .section-pad { padding-top: 95px; padding-bottom: 95px; }
  .story-photo { margin-left: 0; height: 500px; }
  .story-photo > picture > img { object-position: 50% 70%; }
  .story-copy { padding-left: 4%; }
  .growing-words { padding-left: 9%; }
  .contact-text { width: 340px; }
}

/* ------------------------------------------------- stacked layout ≤940
   (prototype stacked at 720; with the longer approved copy the two-column story/growing layout collides below ~960px) */
@media (max-width: 940px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 54px 7% 40px; gap: 0; }
  .hero h1 { font-size: clamp(42px, 13.2vw, 78px); white-space: normal; }
  .hero-main { margin: 24px 0 0; }
  .flourish { display: none; }
  .hero-art { height: clamp(500px, 75vw, 640px); min-height: 0; padding: 20px 35px 20px 36px; }
  .hero-image-frame { border-radius: 160px 160px 4px 4px; }
  .hero-badge { left: 9px; bottom: 25px; width: 97px; height: 97px; }
  .hero-badge span { font-size: 10px; }
  .hero-badge strong { font-size: 26px; }
  .photo-label { right: 9px; bottom: 44px; font-size: 8px; }
  .band { min-height: 61px; justify-content: center; gap: 19px; padding: 0 5%; }
  .band span:nth-of-type(n+2), .band .band-star { display: none; }
  .band span:first-child { font-size: 9px; line-height: 1.5; text-align: center; }

  .section-pad { padding: 80px 7%; }
  .story { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .story-copy { padding: 0; max-width: none; }
  .story-photo { align-self: center; width: 78%; max-width: 420px; height: 440px; margin-left: 0; }
  .story-photo > picture > img { object-position: 100% 46%; }
  .story-photo-note { padding: 13px; font-size: 14px; max-width: 170px; }
  .story h2 { font-size: clamp(40px, 11vw, 62px); margin: 22px 0 25px; }
  .story-copy > p:not(.eyebrow) { font-size: 16px; max-width: 560px; }

  .gallery-section { padding-left: 0; padding-right: 0; }
  .section-intro { display: block; margin-bottom: 35px; }
  .section-intro h2 { font-size: clamp(42px, 11vw, 62px); margin-top: 18px; }
  .section-intro-text { margin-top: 22px; max-width: 460px; }
  .section-intro-text p { font-size: 15px; }

  .growing { display: flex; flex-direction: column; min-height: 0; }
  .growing-words { padding: 82px 7% 30px; }
  .growing h2 { font-size: clamp(42px, 11vw, 62px); margin: 20px 0 22px; }
  .growing-words > p:not(.eyebrow) { font-size: 16px; max-width: 520px; }
  .growing .outline-heart { display: none; }
  /* keep the approved mobile proportions (390 × 480) at any stacked width so portrait photos are never cropped hard */
  .growing-images { width: 100%; max-width: 560px; height: auto; min-height: 0; margin: 0 auto; aspect-ratio: 390 / 480; }
  .photo-primary { top: 4%; left: 26%; width: 62%; height: 72%; }
  .photo-secondary { bottom: 6%; left: 5%; width: 51%; height: 48%; border-width: 6px; }

  .contact { padding-top: 88px; padding-bottom: 95px; }
  .contact-layout { display: block; margin-top: 28px; }
  .contact h2 { font-size: clamp(42px, 12vw, 70px); }
  .contact-text { width: auto; max-width: 440px; margin-top: 40px; }
  .contact-text > p:not(.contact-note) { font-size: 16px; }
  .contact-details dd { font-size: 20px; }
}

/* ------------------------------------------------------- phones ≤720 */
@media (max-width: 720px) {
  :root { --gallery-gap: 15px; --gallery-tall: 280px; --gallery-short: 240px; --gallery-duration: 93s; }
  .site-header { height: 78px; padding: 0 6%; }
  .brand-mark { width: 28px; height: 28px; }
  .brand strong { font-size: 25px; }
  .brand small { font-size: 7px; }
  .desktop-nav { display: none; }
  .header-link { font-size: 11px; gap: 8px; }
  .eyebrow { font-size: 9px; letter-spacing: .15em; }
  .lead { font-size: 16px; margin-top: 22px; }
  .hero-text { font-size: 15px; }
  .hero-actions { margin-top: 26px; }
  .primary-button { min-width: 150px; padding: 16px 16px 16px 20px; font-size: 12px; }
  .hero-art { padding: 20px 28px 20px 28px; }
  .gallery-card:nth-child(even) { margin-top: 40px; }
  .gallery-controls { padding-top: 26px; }
  .footer-brand strong { font-size: 40px; }
  .footer-main { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .footer-brand, .footer-tagline { grid-column: 1 / -1; }
  .footer-meta { margin-top: 40px; }
  .footer-credit { text-align: left; }
}

@media (max-width: 380px) {
  .contact-details dd { font-size: 18px; }
}

/* story photo: tall crop with the face on its right edge, so only the vertical position changes with the arch size (≤940 / ≤1100 above) */
@media (max-width: 560px) { .story-photo > picture > img { object-position: 100% 60%; } }
@media (min-width: 1500px) { .story-photo > picture > img { object-position: 50% 62%; } }
@media (min-width: 1800px) { .story-photo > picture > img { object-position: 50% 56%; } }

/* ------------------------------------------------- story composition (MALEE-V1-STORY-EDITORIAL-PHOTO-POLISH-1)
   The arch photo stays the main motif. Two small companion photos (re-used gallery files, decorative) lean against it; they are absolutely
   positioned inside .story-photo, so the story grid, widths and text column are untouched. The note hangs at the foot of the arch where the
   picture holds no face or parrot. Everything below only addresses these new elements; the main photo rules above use `.story-photo > picture > img`.
   Percentages refer to the arch box (.story-photo); min()/clamp() keep the cards from growing on very wide screens. */
.story-card {
  position: absolute; z-index: 1; width: var(--card-w); margin: 0; padding: 3px;
  background: var(--cream); border-radius: 5px; transform: rotate(var(--card-tilt));
  box-shadow: 0 10px 24px rgba(3, 20, 15, .34), 0 2px 6px rgba(3, 20, 15, .2); /* short reach: must not bleed into the next section */
}
.story-card img { width: 100%; height: auto; border-radius: 3px; }
.story-card-memory { --card-w: clamp(132px, 40%, 188px); --card-tilt: -4deg; left: calc(-1 * min(84px, 17%)); bottom: -72px; }
.story-card-wings { --card-w: clamp(112px, 35%, 160px); --card-tilt: 3deg; right: calc(-1 * min(48px, 11%)); top: -76px; }
.story-photo-note { z-index: 2; }
@media (max-width: 1100px) {
  .story-card-wings { top: -64px; }
  .story-photo-note { right: -28px; }
}
@media (max-width: 940px) {
  .story-photo { margin-bottom: 56px; }
  .story-card-memory { --card-w: clamp(112px, 33%, 144px); left: -20%; bottom: -88px; }
  .story-card-wings { --card-w: clamp(104px, 30%, 128px); right: -11%; top: -42px; }
  .story-photo-note { right: 8px; bottom: -58px; }
}
@media (max-width: 560px) {
  .story-card-memory { --card-w: clamp(104px, 33%, 124px); left: -17%; bottom: -62px; }
  .story-card-wings { --card-w: clamp(96px, 30%, 112px); right: -12%; top: -40px; }
  .story-photo-note { right: -4px; bottom: -48px; }
}
@media (max-width: 380px) {
  .story-photo-note { left: -18px; right: auto; top: 20px; bottom: auto; }
}
@media (max-width: 340px) {
  .story-card-wings { display: none; }
}
@media (min-width: 1500px) {
  .story-card-memory { left: calc(-1 * min(96px, 16%)); bottom: -92px; }
  .story-card-wings { right: calc(-1 * min(60px, 9%)); top: -92px; }
  .story-photo-note { right: 12px; bottom: -64px; }
}
@media (min-width: 1700px) {
  .story-card-memory { left: calc(-1 * min(120px, 20%)); }
}
@media (min-width: 2000px) {
  .story-card-wings { right: calc(-1 * min(120px, 16%)); top: -130px; }
  .story-photo-note { bottom: -84px; }
}
@media (min-width: 2400px) {
  .story-card-wings { top: -150px; }
  .story-photo-note { bottom: -108px; }
}

/* one-time entrance of the companion photos, after the arch photo (scroll reveal above): they settle into their tilt 130 ms apart
   (lift 16 px, tilt 2.5 deg, 620-700 ms, soft ease-out, no bounce). The resting state is the plain rules above. The transition is declared on
   the card itself, not on the [data-reveal] state, so script.js removing the attribute after the run cannot cut it short; only the hidden
   starting state is tied to [data-reveal=""] (same gating as the reveal: scripting on, motion welcome). */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .story-card {
    --card-ease: cubic-bezier(.22, .61, .36, 1); --card-start: calc(var(--reveal-delay, 0ms) + var(--card-lag, 0ms));
    transition: opacity .62s var(--card-ease) var(--card-start), translate .7s var(--card-ease) var(--card-start), rotate .7s var(--card-ease) var(--card-start);
  }
  .story-card-memory { --card-lag: 130ms; --card-turn: -2.5deg; }
  .story-card-wings { --card-lag: 260ms; --card-turn: 2.5deg; }
  [data-reveal=""] .story-card { opacity: 0; translate: 0 16px; rotate: var(--card-turn); }
  html:not([data-reveal-ready]) [data-reveal=""] .story-card { animation: story-card-rescue .01s linear 3s forwards; }
}
@keyframes story-card-rescue { to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* ------------------------------------------------ reduced motion: static */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary-button, .desktop-nav a, .footer-credit a, .gallery-card img { transition: none; }
  .lightbox, .lightbox-img, .lightbox-close { transition: none; }
  .primary-button:hover { transform: none; }
  .gallery-track { animation: none; }
  .gallery-set[aria-hidden="true"] { display: none; }
  .gallery-window { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #9fb3a2 transparent; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; }
  .gallery-window::-webkit-scrollbar { display: block; height: 8px; }
  .gallery-window::-webkit-scrollbar-thumb { background: #9fb3a2; border-radius: 4px; }
  .gallery-card { scroll-snap-align: start; }
  .gallery-toggle { display: none; }
  .gallery-hint { display: inline-flex; }
}