:root{color-scheme:dark;--pink:#ff0093;--wine:#a2084e;--dark:#2a0009;--mint:#d0ffea;--green:#aeeb87;--white:#fdfcfc;--line:rgba(208,255,234,.3);--gutter:clamp(24px,4vw,72px);
 /* One type unit that follows the smaller of the two screen dimensions. It is
    exactly 1vw on a 16:9 screen, the ratio this page is laid out at, and
    shrinks with the height on anything shorter — so a wide but short window
    scales the whole design down instead of pushing it off the screen. */
 --u:min(1vw,1.7778vh)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130px}body{margin:0;background:var(--wine);color:var(--white);font-family:Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:7px}.skip-link{position:fixed;top:-100px;left:20px;z-index:30;padding:16px;background:var(--dark)}.skip-link:focus{top:20px}
.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px var(--gutter);transition:background .25s,padding .25s; color:var(--pink)}.site-header.scrolled{padding-top:14px;padding-bottom:14px;background:transparent}.brand-link{display:block;flex:none}.brand-link img{display:block;width:clamp(64px,7.5vw,132px);height:auto;transition:width .25s}.scrolled .brand-link img{width:64px}.site-header nav{display:flex;align-items:center;gap:clamp(22px,3vw,54px)}.site-header nav button,.site-header nav a{background:none;border:0;padding:8px 0;color:var(--pink);font-size:clamp(15px,1.65vw,28px);font-weight:700;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}.site-header nav button:hover,.site-header nav a:hover{text-decoration:underline;text-underline-offset:7px}
.hero{position:relative;isolation:isolate;min-height:100svh;background:var(--dark);padding:clamp(170px,12vw,220px) var(--gutter) 28px;display:flex;flex-direction:column;justify-content:space-between}.hero-image{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}.hero h1{margin:0;color:var(--green);font-weight:500;position:relative;min-height:330px}.hero-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:end;margin-top:120px;color:var(--pink);font-size:clamp(14px,1.2vw,21px);font-weight:700;line-height:1.5;text-transform:uppercase}.hero-bottom p{margin:0}.course{text-align:right}.scroll-cue{font-size:10px;letter-spacing:.15em;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--green)}.scroll-cue span{font-size:27px;font-weight:400}
.quote-section{min-height:100svh;display:grid;place-items:center;padding:150px var(--gutter);background:linear-gradient(var(--dark),var(--wine) 38%)}
.text-link{display:inline-flex;gap:40px;align-items:center;padding-bottom:9px;border-bottom:1px solid var(--green);color:var(--green);font-weight:700;text-decoration:none}footer{padding:30px var(--gutter);display:flex;justify-content:space-between;gap:24px;background:var(--dark);color:var(--pink);font-size:12px}footer a{text-decoration:none}

@media(min-width:1800px){.hero h1{max-width:1600px}}
@media(max-width:900px){.site-header{gap:20px}.site-header nav{gap:20px}.site-header nav a,.site-header nav button{font-size:14px}.hero h1{min-height:230px}.hero-bottom{grid-template-columns:1fr 1fr}.scroll-cue{display:none}.five-ds-grid article:last-child{grid-column:1/-1}}
@media(max-width:600px){html{scroll-padding-top:110px}.site-header{padding:18px 20px;gap:18px}.brand-link img,.scrolled .brand-link img{width:52px}.site-header nav{display:grid;grid-template-columns:auto auto;gap:6px 18px}.site-header nav button,.site-header nav a{font-size:12px;padding:4px 0}.hero{padding-top:180px;min-height:90svh}.hero-bottom{margin-top:100px;font-size:11px;gap:16px}.quote-section{min-height:75svh;padding:120px 20px}footer{flex-wrap:wrap;font-size:10px}footer span:last-child{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Keep the landing credits inside the first screen on laptop displays. */
@media(min-width:601px){.hero h1{min-height:0}.hero-bottom{margin-top:60px}}

.project-title-image{display:block;width:min(100%,1400px);height:auto}
.hero{
  background:radial-gradient(ellipse at 50% 48%,#c64b82 0%,#bb326f 34%,#a2084e 70%,#76032f 100%);
}
.hero h1{
  position:absolute;
  top:50%;
  left:50%;
  /* 183vh is 4.36 — the title image's ratio — times 42vh, so the title never
     takes more than about two fifths of the height on a short screen. */
  width:min(90vw,1600px,183vh);
  max-width:none;
  min-height:0;
  transform:translate(-50%,-50%);
}
.project-title-image{width:100%;margin-inline:auto}
.hero-bottom{
  position:absolute;
  right:var(--gutter);
  bottom:28px;
  left:var(--gutter);
  margin-top:0;
}
@media(max-width:600px){
  .hero h1{top:47%;width:92vw}
  .hero-bottom{right:20px;bottom:20px;left:20px;margin-top:0}
}
.quote-w{font-size:1.4em;font-family:"Mea Culpa",cursive;font-weight:400;font-style:normal;letter-spacing:0;line-height:0}



/* Fade the sticky navigation background without fading its controls. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0 0 -36px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(42,0,9,.97) 0%,rgba(42,0,9,.94) 58%,rgba(42,0,9,.65) 76%,rgba(42,0,9,0) 100%);
  opacity:0;
  transition:opacity .25s ease;
}
.site-header.scrolled::before{opacity:1}

.nav-d{display:inline-block;font-family:"Mea Culpa",cursive;font-size:1.8em;font-weight:400;line-height:0;text-transform:none}
.site-header nav button,.site-header nav a{text-shadow:0 3px 10px rgba(42,0,9,.72),0 1px 2px rgba(42,0,9,.9)}

/* Center the CTA text independently of its decorative arrow. */

.closing-call>span{position:absolute;right:24px;top:50%;transform:translateY(-50%)}

/* Generative 3D garden: foreground flowers stay sharp, distant blooms soften. */
.hero{background:#280e25;min-height:100svh;overflow:hidden}
#garden{z-index:-2;overflow:hidden}
#garden canvas{display:block;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(24,5,19,.35),transparent 24%,rgba(24,5,19,.1) 60%,rgba(24,5,19,.8))}
.hero h1{pointer-events:none;filter:drop-shadow(0 4px 30px #280e2570)}
.hero-bottom{text-shadow:0 2px 10px #280e25}
.garden-status{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;text-align:center}

/* Landing palette: pale lettering over the dark circular gradient garden. */
.hero,.hero h1,.hero-bottom,.hero .scroll-cue,.garden-status,
.site-header:not(.scrolled),.site-header:not(.scrolled) nav a,
.site-header:not(.scrolled) nav button{color:#D0FFEA}
.hero h1{
 color:#FDF2F2;
 filter:drop-shadow(0 5px 5px rgba(17,3,15,.65)) drop-shadow(0 12px 22px rgba(17,3,15,.45));
}
.hero .project-title-image{opacity:1}

/* Bright pink base; the 3D backdrop paints the randomized blurred ellipses. */
.hero{background:#FF0093}
.hero::after{background:none}

/* Atmospheric wine backdrop and a continuous, non-interactive firefly layer. */
.hero{background:#FF0093}
.fireflies{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;contain:strict}

/* Dim the complete landing composition, including fixed navigation and particles. */
body::after{
 content:"";
 position:absolute;
 top:0;left:0;right:0;
 height:100svh;
 z-index:25;
 pointer-events:none;
 background:rgba(0,0,0,.1);
}

/* One continuous static gradient across the content beneath the landing. */
body{
 background-color:#A2084E;
 background-image:linear-gradient(to bottom,#A2084E 0%,#2A0009 100%);
 background-size:100% calc(100% - 100svh);
 background-position:center bottom;
 background-repeat:no-repeat;
}
.quote-section,footer{background:transparent}
.hero{background:#A2084E}
.hero h1{filter:drop-shadow(0 0 5px rgba(255,255,255,.6)) drop-shadow(0 0 22px rgba(255,255,255,.4))}

/* Local Helvetica faces: bold oblique nav, compressed quote rows, bold card label. */
@font-face{font-family:"Helvetica Nav";src:url("../assets/Helvetica-Font-Family/Helvetica-BoldOblique.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Local";src:url("../assets/Helvetica-Font-Family/Helvetica-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Local";src:url("../assets/Helvetica-Font-Family/Helvetica.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}


/* Navigation: always mint, Helvetica Bold Oblique, D to lowercase letters at 4:3. */
.site-header,.site-header.scrolled,
.site-header nav button,.site-header nav a,
.site-header:not(.scrolled) nav a,.site-header:not(.scrolled) nav button{color:#D0FFEA}
.site-header nav button,.site-header nav a{font-family:"Helvetica Nav",Helvetica,Arial,sans-serif;font-weight:700;font-style:italic}
.site-header .nav-d{font-family:inherit;font-weight:700;font-style:italic;font-size:calc(4em/3);text-transform:none}

/* Project name sits at one third of the landing height. */
.hero h1{top:33.333%}
@media(max-width:600px){.hero h1{top:33.333%}}

/* Pinned quote: curved rows scroll with the page, then three article cards appear. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quote-section,#why-act{display:block;place-items:normal;height:400svh;min-height:0;padding:0;scroll-margin-top:-130px}
.quote-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.quote-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.quote-cards{position:absolute;top:50%;left:50%;width:min(34vw,480px,68vh);aspect-ratio:16/9;transform:translate(-50%,-50%);perspective:1400px}
.quote-card{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transform:scale(.82) translateY(24px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.quote-card.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
.quote-card__inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.quote-card:hover .quote-card__inner,.quote-card:focus-visible .quote-card__inner{transform:rotateY(180deg)}
.quote-card__face{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 50px rgba(42,0,9,.45)}
.quote-card__face img{display:block;width:100%;height:100%;object-fit:cover}
.quote-card__back{transform:rotateY(180deg);background:#000}
.quote-card__back img{transform:scale(1.12);filter:brightness(.42) blur(7px)}
.quote-card__label{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,36px);letter-spacing:.02em;text-transform:uppercase}
.quote-credit{position:absolute;left:0;right:0;bottom:24px;margin:0;text-align:center;color:var(--green);font-weight:700;font-size:clamp(12px,1vw,16px);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:600px){.quote-cards{width:min(72vw,68vh)}}
@media(prefers-reduced-motion:reduce){.quote-card,.quote-card__inner{transition:none}}

/* Lenis smooth scroll (see smooth-scroll.js). */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}

/* Call to action: pinned, Lenis-style scroll reveal. Sizes keep the reference ratio
   title : heading : body ≈ 6.1 : 1.65 : 1. */
.cta-section{position:relative;height:280svh}
.cta-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.cta-inner{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:4vw;align-items:center;padding:clamp(72px,10vh,110px) var(--gutter) clamp(20px,4vh,40px)}
.cta-title{margin:0;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(34px,calc(7 * var(--u)),150px);line-height:.88;letter-spacing:-.045em}
.cta-copy{max-width:36vw}
.cta-heading{margin:0 0 1.1em;color:#AEEB87;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(16px,calc(1.9 * var(--u)),40px);line-height:1;letter-spacing:.01em}
.cta-text{margin:0;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(14px,calc(1.15 * var(--u)),24px);line-height:1.45}
.cta-text .w{opacity:.14}
/* Each line rises out of its own mask. */
.cta-line{display:block;overflow:hidden;padding-bottom:.06em}
.cta-line>span{display:block;transform:translateY(105%);will-change:transform}
.cta-glow{position:absolute;right:-8vw;top:-20vh;width:26vw;height:150vh;pointer-events:none;border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,0,147,.55),rgba(255,0,147,.18) 55%,transparent);filter:blur(30px);transform-origin:50% 100%;opacity:.8}
@media(max-width:900px){
 .cta-inner{grid-template-columns:1fr;gap:28px;padding:96px 20px 24px}
 .cta-title{font-size:min(12vw,9vh)}
 .cta-copy{max-width:none}
 .cta-heading{font-size:min(5vw,4vh)}
 .cta-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.cta-line>span{transform:none}.cta-text .w{opacity:1}}

/* Header: flat page colour (set by script.js), no gradient fade. */
.site-header::before{inset:0;background:var(--header-bg,#A2084E)}

/* Pages run into each other with no divider lines. */
.cta-section+.cta-section{border:0}
.cta-heading{text-transform:uppercase}
.cta-text+.cta-heading{margin-top:1.6em}
.cta-link{margin-top:2.2em;font-size:clamp(14px,calc(1.15 * var(--u)),24px);color:#AEEB87;border-bottom-color:#AEEB87}
.cta-link{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.cta-link.is-in{opacity:1;transform:none}
.sdg-section{height:220svh}
.sdg-section .cta-title{font-size:clamp(30px,calc(6.2 * var(--u)),132px)}
@media(max-width:900px){.cta-link{font-size:14px}.sdg-section .cta-title{font-size:min(10.5vw,8vh)}}
@media(prefers-reduced-motion:reduce){.cta-link{opacity:1;transform:none}}
/* Fade the glow out before it reaches the solid header, so no hard edge shows. */
.cta-glow-wrap{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,#000 260px);mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,#000 260px)}
/* Keep the blurred glow on its own compositor layer: moving it no longer re-rasterises the blur. */
.cta-glow{will-change:transform}

/* Distract & Direct: a pinned stage (GSAP ScrollTrigger) with Nhi's flower on the left. */
.flower-seq{position:relative}
.flower-stage{position:relative;height:100svh;overflow:hidden}
.flower-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.flower-copy{position:absolute;left:52%;top:0;bottom:0;width:min(36vw,640px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden}
.flower-eyebrow{margin:0 0 1.4em;color:#AEEB87;font-weight:700;font-size:clamp(11px,calc(.8 * var(--u)),17px);letter-spacing:.14em;text-transform:uppercase}
/* The enlarged initial D has line-height:0 so it does not open up the line
   spacing, which means its top reaches about .4em above the line box. Without
   room reserved for that, a tall copy block pushes the D past the top of the
   pinned stage and its crown is sliced off. */
.flower-title{margin:0 0 .7em;padding-top:.4em;color:#D0FFEA;font-family:"Helvetica Nav",Helvetica,Arial,sans-serif;font-weight:700;font-style:italic;font-size:clamp(28px,calc(4.2 * var(--u)),88px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.flower-d{font-size:calc(4em/3);line-height:0}
.flower-heading{margin:1.4em 0 .5em;color:#AEEB87;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(15px,calc(1.6 * var(--u)),34px);text-transform:uppercase}
.flower-text{margin:0;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-size:clamp(14px,calc(1.15 * var(--u)),24px);line-height:1.5}
.flower-link{margin-top:2em;font-size:clamp(14px,calc(1.15 * var(--u)),24px);color:#AEEB87;border-bottom-color:#AEEB87}
@media(max-width:800px){
 .flower-copy{left:20px;right:20px;top:auto;bottom:5svh;width:auto;display:block}
 .flower-title{font-size:min(9vw,7vh)}
 .flower-heading{font-size:15px;margin-top:1em}
 .flower-text,.flower-link{font-size:14px}
}

/* 5Ds copy: Nhi's copy sits right, Chì's left; stacked panels crossfade in place. */
.flower-copy--left{left:var(--gutter)}
.flower-title{margin-bottom:.45em}
.flower-panels{display:grid;width:100%}
.flower-panel{grid-area:1/1}
.flower-panel>.flower-heading:first-child{margin-top:0}
.flower-text{margin:0 0 .75em;font-size:clamp(13px,calc(1.05 * var(--u)),22px)}
.flower-lead{margin-bottom:.25em;font-weight:700}
.flower-list{margin:0 0 .9em;padding-left:1.15em;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-size:clamp(13px,calc(1.05 * var(--u)),22px);line-height:1.45}
.flower-list li{margin-bottom:.2em}
.flower-list li::marker{color:#AEEB87}
.flower-examples{display:grid;grid-template-columns:repeat(2,max-content);gap:0 2em}
.flower-link{margin-top:1.2em;font-size:clamp(13px,calc(1.05 * var(--u)),22px)}
@media(max-width:800px){
 .flower-copy--left{left:20px}
 .flower-copy{top:auto;bottom:4svh}
 .flower-text,.flower-list,.flower-link{font-size:13px;line-height:1.4}
 .flower-title{font-size:min(8vw,6.5vh)}
 .flower-eyebrow{margin-bottom:.8em}
 .flower-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1em}
}

/* Goal 5 in pictures: the UN Photo strip that follows the Delegate sequence.
   Nothing here animates on its own — sdg-gallery.js pins the stage and scrolling
   is what slides the track sideways. */
.photo-page{position:relative}
.photo-stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,48px);height:100svh;padding:clamp(76px,9vh,140px) 0 clamp(18px,3vh,56px);overflow:hidden}
.photo-page__head{padding:0 var(--gutter);max-width:min(900px,72vw)}
.photo-page__title{margin:0 0 .5em;color:#D0FFEA;font-family:"Helvetica Nav",Helvetica,Arial,sans-serif;font-weight:700;font-style:italic;font-size:clamp(28px,calc(4.2 * var(--u)),88px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.photo-page__note{margin:0;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-size:clamp(13px,calc(1.05 * var(--u)),22px);line-height:1.5}
.photo-page__credit{margin:0;padding:0 var(--gutter);color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-size:clamp(11px,calc(.78 * var(--u)),16px);line-height:1.5;opacity:.6}
.photo-page__credit a{color:#AEEB87}

/* The frames are lifted on hover, so the rail needs room above and below; the
   mask fades both ends so frames arrive and leave instead of popping. */
.photo-marquee{--photo-gap:clamp(14px,1.5vw,26px);position:relative;padding:clamp(14px,2.4vh,40px) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.photo-marquee__track{display:flex;width:max-content}
.photo-marquee.is-scrubbed .photo-marquee__track{will-change:transform}
.photo-marquee__set{display:flex}

.photo-card{position:relative;flex:none;width:min(clamp(220px,25vw,400px),calc(36vh * 1.5));margin-right:var(--photo-gap);text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.photo-card:hover,.photo-card:focus-visible{z-index:2;transform:scale(1.13)}
.photo-card__frame{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;border:1px solid var(--line);background:rgba(208,255,234,.06)}
.photo-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transition:filter .45s}
.photo-card:hover img,.photo-card:focus-visible img{filter:none}
.photo-card__caption{display:block;margin-top:14px;color:#D0FFEA;font-family:"Helvetica Local",Helvetica,Arial,sans-serif;font-size:clamp(12px,calc(.85 * var(--u)),18px);line-height:1.4;opacity:.5;transition:opacity .35s}
.photo-card__date{display:block;margin-top:6px;color:#AEEB87;font-weight:700;font-size:clamp(10px,calc(.7 * var(--u)),15px);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .35s}
.photo-card:hover .photo-card__caption,.photo-card:focus-visible .photo-card__caption{opacity:1}
.photo-card:hover .photo-card__date,.photo-card:focus-visible .photo-card__date{opacity:.85}

@media(max-width:800px){
 .photo-stage{gap:28px}
 .photo-page__head{max-width:none}
 .photo-page__title{font-size:min(9vw,7vh)}
 .photo-page__note{font-size:14px}
 .photo-card{width:min(74vw,320px)}
 .photo-card__caption{font-size:12px}
}

/* Nobody who asked for less motion gets the pinned slide: the stage is a normal
   block and the strip becomes a rail they can push along themselves. */
@media(prefers-reduced-motion:reduce){
 .photo-stage{height:auto;min-height:100svh}
 .photo-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
 .photo-marquee__set[aria-hidden="true"]{display:none}
}

/* Short windows — a 768px laptop, a phone turned on its side — are handled the
   same way as narrow ones. Everything sized in --u already follows the height;
   these are the few remaining fixed measurements that did not. */
/* A short but wide window (a phone on its side) must keep the two-column
   call-to-action: stacking the heading over the paragraph made the block taller
   than the screen it was pinned to. */
@media(max-height:560px) and (min-width:620px){
 .cta-inner{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
 .cta-copy{max-width:none}
}
@media(max-height:560px){
 html{scroll-padding-top:74px}
 .site-header{padding:10px var(--gutter)}
 .brand-link img,.scrolled .brand-link img{width:44px}
 .hero{padding-top:84px;padding-bottom:16px}
 .hero-bottom{bottom:12px;gap:12px;font-size:10px;line-height:1.35}
 .scroll-cue{display:none}
 .quote-credit{bottom:10px;font-size:10px}
 .cta-inner{padding:64px var(--gutter) 20px;gap:3vw}
 .cta-heading{margin-bottom:.6em}
 .flower-eyebrow{margin-bottom:.6em}
 .flower-title{margin-bottom:.3em}
 .flower-heading{margin-top:.7em}
 .flower-link,.cta-link{margin-top:.8em}
 .photo-stage{gap:16px;padding:64px 0 20px}
 .photo-marquee{padding:14px 0}
 .photo-card__caption,.photo-card__date{margin-top:6px}
}

/* Below about 430px of height — a phone held sideways — the call-to-action
   paragraph simply needs more room than the screen has at a readable size. Let
   that screen and the photo strip flow normally instead of being pinned, so all
   of the text can be reached by scrolling rather than being cut off. */
/* Pinning a screenful of text only works where a screenful of text fits. On a
   phone, and on any window under about 430px tall, the call-to-action and SDG
   paragraphs are taller than the viewport at a readable size, so those two
   screens flow normally and are read by scrolling. */
@media(max-width:600px),(max-height:430px){
 .cta-section,.sdg-section{height:auto}
 /* relative, not static: static would stop this being the containing block for
    the absolutely positioned glow, which would then escape its overflow:hidden
    and push a horizontal scrollbar onto the whole page. */
 .cta-sticky{position:relative;height:auto;min-height:100svh;padding:16px 0}
 .cta-inner{align-items:start}
}
@media(max-height:430px){
 .photo-page__note{display:none}
 /* The 5Ds copy carries a heading, a paragraph and five bullets; at this height
    it cannot all be shown at a readable size, so the block scrolls on its own
    rather than having its last lines cut off. */
 .flower-copy{padding:48px 0 6px;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start}
 .flower-title{font-size:min(6vw,5.2vh)}
 .flower-text,.flower-list,.flower-link{font-size:12px;line-height:1.35}
 .flower-list{margin-bottom:.5em}
 .flower-heading{margin-top:.5em}
}

/* On an ultrawide or 4K screen the two call-to-action columns would drift to
   opposite edges. Cap the composition and centre it, so the heading and its
   paragraph stay in relation to each other however wide the window is. */
@media(min-width:1700px){
 .cta-inner{max-width:1680px;margin-inline:auto}
}