/* Maybe Tomorrow microsite, option C: one page that scrolls. The film, the story (three headings that open in place),
   Take action, the wider story and the media, then the footer. */

@font-face{font-family:"Lyon";font-weight:300;font-display:swap;src:url(../fonts/lyon-light.woff2) format("woff2")}
@font-face{font-family:"Lyon";font-weight:400;font-display:swap;src:url(../fonts/lyon-regular.woff2) format("woff2")}
@font-face{font-family:"Lyon";font-weight:700;font-display:swap;src:url(../fonts/lyon-bold.woff2) format("woff2")}

:root{
  --bg:#14130F;
  --black:#000;   /* the laurels bar */
  --ink:#FFFFFF;
  --line:rgba(255,255,255,.28);
  --pad:clamp(20px,5vw,72px);
  --accent:#EBE3A7;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Lyon",Georgia,"Times New Roman",serif;font-weight:300;font-size:19px;line-height:29px;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
p{margin:0}
a{color:var(--ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h2{margin:0;font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.107;text-wrap:balance}
h3{margin:0;font-weight:400;font-size:26px;line-height:32px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;inset-inline-start:var(--pad);top:-60px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:5px}
.skip:focus{top:12px;color:var(--bg)}

.lang{flex:none;display:inline-flex;align-items:center;text-decoration:none;font-size:18px;line-height:24px;border:1px solid var(--line);border-radius:999px;min-height:44px;padding:0 24px}   /* a pill, like the buttons */

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 26px;border:1px solid var(--ink);border-radius:999px;background:rgba(14,13,11,.35);color:var(--ink);text-decoration:none;font:inherit;font-size:16px;line-height:20px;font-weight:400;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.give{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.give:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* Grain over the photos, as the Maybe Tomorrow app adds it to its posts: -7% to +7% on every pixel, uniform. A flat
   layer takes 7% off (difference), then a noise tile adds 0 to 14% (plus-lighter); site.js makes the tile (--grain)
   and sets --gk, the photo's darkening, and --gs, the Grain setting (1 is the app's). */
.gr{display:none;position:absolute;inset:0;pointer-events:none}
.has-grain .gr{display:block}
.gr.sub{background:rgb(18,18,18);mix-blend-mode:difference;opacity:calc(var(--gk,1)*var(--gs,.5))}
.gr.add{background:var(--grain) 0 0/var(--grain-size,256px) var(--grain-size,256px);mix-blend-mode:plus-lighter;opacity:calc(var(--gk,1)*var(--gs,.5))}

/* 1. The film (Social Media/Web_ref.psd). The photo fills the first screen and darkens toward its foot, where the
   title sits; the black bar just below the fold holds the laurels and the trailer link.
   Where the photo is cropped, as object-position from 0 to 1: --lx / --ly on landscape screens, --px / --py on
   portrait ones, from content/backgrounds.json (the editor's Placement field). */
.hero{position:relative;overflow:hidden;height:100svh;min-height:420px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(28px,6.5vh,64px)}
.hero .bg{--fx:var(--lx,.5);--fy:var(--ly,.4);position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--fx)*100%) calc(var(--fy)*100%)}
@media (orientation:portrait){.hero .bg{--fx:var(--px,.5);--fy:var(--py,.5)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.72) 100%)}
.hero h1{position:relative;z-index:1;margin:0;width:min(475px,40vw,80vh)}
.hero h1 img{width:100%;height:auto}
.hero .cue{position:absolute;z-index:1;left:50%;bottom:clamp(6px,1.6vh,16px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-22px;color:rgba(255,255,255,.8)}
.hero .cue:hover{color:var(--accent)}
/* It fades away once the page has scrolled (site.js marks the page .scrolled) and comes back at the top */
.hero .cue{transition:opacity .4s ease,visibility .4s}
.scrolled .hero .cue{opacity:0;visibility:hidden}
.hero .lang.over{position:absolute;z-index:2;top:clamp(16px,2.4vw,32px);inset-inline-end:var(--pad);background:rgba(20,19,15,.65);backdrop-filter:blur(6px)}

/* The black bar: the laurels in a row, the trailer link under them, and the trailer opening below the link */
.bar{background:var(--black);padding:clamp(40px,7svh,80px) var(--pad) clamp(48px,8svh,96px);display:flex;flex-direction:column;align-items:center;gap:clamp(32px,6svh,64px)}
/* Laurels: as many as the editor lists, centred, six to a row (three on tablets, two on phones) */
.laurels{--per:6;--gap:clamp(16px,3vw,44px);list-style:none;margin:0;padding:0;width:min(1200px,100%);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);align-items:center}
.laurels li{flex:0 0 calc((100% - (var(--per) - 1)*var(--gap))/var(--per))}
.laurels img{width:100%;height:auto;max-height:clamp(56px,9svh,96px);object-fit:contain}
/* Watch the trailer: plain text over a hairline that fades out at both ends, with a small notch under the middle
   pointing down to where the trailer opens (it points up while the trailer is open) */
.watch{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:min(820px,100%);padding:6px 0 clamp(14px,2svh,22px);border:0;background:none;color:var(--ink);font:inherit;font-weight:400;font-size:clamp(18px,1.6vw,24px);line-height:1.2;cursor:pointer;transition:color .2s}
/* The play mark in a thin circle as tall as the text; the padding sets the triangle a touch right of centre, so it looks centred. It points right in Arabic too, as play marks do. */
.watch svg{flex:none;box-sizing:border-box;width:1.1em;height:1.1em;padding:.32em .27em .32em .36em;border:1.2px solid currentColor;border-radius:50%;overflow:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.watch:hover svg{transform:scale(1.06)}

.watch::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 35%,#fff 65%,rgba(255,255,255,0))}
.watch::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:9px;margin-left:-9px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.watch.open::after{transform:translateY(-10px) scaleY(-1)}
.watch.open svg{display:none}
.watch:hover{color:var(--accent)}
.trailer{width:min(1180px,100%);padding-top:clamp(6px,1svh,14px)}
.trailer .frame{aspect-ratio:16/9;background:#000}
.trailer iframe{display:block;width:100%;height:100%;border:0}

/* 2. The story: a photo that stays behind three headings; each opens in place (details/summary, no script needed).
   The section is only as tall as the headings, and grows as one opens; once it is taller than the window the photo
   holds still (sticky, never more than a window high) while the open text scrolls over it. overflow:clip, not hidden,
   so the sticky photo still follows the page. */
.story{position:relative}
.story .bgwrap{position:absolute;inset:0;overflow:clip;pointer-events:none}
/* The section is often much wider than tall, so a crop from the editor's laptop/phone position could cut the subject
   out. Instead the photo is cropped around a focus point (--focus-x / --focus-y, 0 to 1 of the photo, here Wafa's head),
   kept as near the middle of the frame as the photo's edges allow, at any height. The photo is drawn on ::before, which
   measures its frame in container units: H and W are the photo's covering size (--ar is its aspect ratio, from site.js). */
.story .bgpin{position:sticky;top:0;height:min(100svh,100%);overflow:hidden;container-type:size;--focus-x:.86;--focus-y:.34;
  background-color:var(--bg);background-repeat:no-repeat;background-size:0 0}
.story .bgpin::before{content:"";position:absolute;inset:0;background-image:inherit;background-repeat:no-repeat;background-size:cover;
  --W:max(100cqw,calc(100cqh*var(--ar,1.778)));--H:max(100cqh,calc(100cqw/var(--ar,1.778)));
  background-position:clamp(calc(100cqw - var(--W)),calc(50cqw - var(--focus-x)*var(--W)),0px) clamp(calc(100cqh - var(--H)),calc(50cqh - var(--focus-y)*var(--H)),0px)}
.story .bgpin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,11,.82) 0%,rgba(14,13,11,.5) 55%,rgba(14,13,11,.2) 100%)}
[dir="rtl"] .story .bgpin::after{background:linear-gradient(270deg,rgba(14,13,11,.82) 0%,rgba(14,13,11,.5) 55%,rgba(14,13,11,.2) 100%)}
/* Arabic: the headings sit on the right, so the photo is mirrored to keep Wafa on the open side */
[dir="rtl"] .story .bgpin::before{transform:scaleX(-1)}
.acc{position:relative;width:min(880px,100%);padding:clamp(40px,7vh,80px) var(--pad)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);padding:clamp(14px,2.4vh,26px) 0;cursor:pointer;--ease:cubic-bezier(.2,.7,.2,1);--ls:.12em;--ls-hover:.16em}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1;letter-spacing:var(--ls);text-transform:uppercase;color:var(--accent);transition:color .3s,letter-spacing .5s var(--ease)}
/* A chevron right after the heading: pointing down to open, turned up while open. On hover the heading opens its
   letters a little and the chevron dips toward the text it opens (or lifts, while open). */
.acc summary::after{content:"";flex:none;width:clamp(9px,.85vw,13px);height:clamp(9px,.85vw,13px);margin-top:-.35em;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);transition:transform .45s var(--ease),border-color .3s}
.acc details[open] summary::after{transform:translateY(.45em) rotate(225deg)}
/* Closing (site.js keeps it open until the text has folded away): the chevron turns back down at once */
.acc details.closing summary::after{transform:rotate(45deg)}
.acc summary:hover h2,.acc summary:focus-visible h2{color:var(--ink);letter-spacing:var(--ls-hover)}
.acc summary:hover::after,.acc summary:focus-visible::after{transform:translateY(5px) rotate(45deg);border-color:var(--accent)}
.acc details[open] summary:hover::after,.acc details[open] summary:focus-visible::after{transform:translateY(calc(.45em - 5px)) rotate(225deg)}
.acc .body{display:flex;flex-direction:column;gap:20px;padding:4px 0 clamp(28px,4vh,44px);max-width:760px}
.acc .body > p{max-width:62ch}
.strong{font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.3}

.people{gap:32px}
.person{display:flex;flex-direction:column;gap:14px}
.who{display:flex;align-items:flex-end;gap:22px}
.who img{width:110px;height:83px;object-fit:cover;border-radius:8px}
.person p{font-size:17px;line-height:26px}

.scr{display:grid;grid-template-columns:130px minmax(0,1.4fr) minmax(0,1fr) auto;gap:20px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.scr .when{font-size:13px;line-height:18px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;padding-top:8px}
.scr h4{margin:0;font-size:22px;line-height:28px;font-weight:400}
.scr-h{margin:clamp(28px,3vw,40px) 0 4px;font-weight:400;font-size:13px;line-height:19px;letter-spacing:.14em;text-transform:uppercase}
.scr-h:first-child{margin-top:8px}
.scr .note{display:block;font-size:15px;line-height:22px;color:var(--accent);padding-top:4px}
.scr .where{font-size:17px;line-height:26px;padding-top:2px}
.scr .btn{padding:0 18px;min-height:42px}
.empty{padding:18px 0;border-top:1px solid var(--line);font-size:17px;line-height:26px}

/* 3. Take action: a heading, one sentence, one button */
.action{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding:clamp(80px,14vh,160px) var(--pad);background:var(--black);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.action h2{font-weight:400;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.action p{max-width:640px;font-size:clamp(19px,1.6vw,23px);line-height:1.5}
.action .btn{min-width:220px;min-height:56px;font-size:17px;margin-top:8px}

/* 4. The wider story and the media */
.lab{margin:0 0 clamp(28px,4vw,48px);font-weight:400;font-size:13px;line-height:19px;letter-spacing:.14em;text-transform:uppercase}
.wider,.media{padding:clamp(64px,9vw,128px) var(--pad) 0}
.media{padding-bottom:clamp(64px,9vw,128px)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(36px,5vw,88px);align-items:start}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}
.quote{margin:0 0 8px;font-size:clamp(34px,4.4vw,64px);line-height:1.083;text-wrap:balance}
.num{font-size:clamp(84px,12vw,176px);line-height:.9;color:var(--accent);letter-spacing:-.02em;direction:ltr;text-align:start}
[dir="rtl"] .num{text-align:right}
.numlab{font-size:clamp(21px,1.9vw,28px);line-height:1.27}
.col .btns{padding-top:6px}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0}
.card .thumb{display:block;overflow:hidden;margin-bottom:8px;background:#22201A;border:1px solid rgba(255,255,255,.22)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.06)}
.card .kind{font-size:13px;line-height:18px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.card .ttl{font-size:22px;line-height:28px}
.cards .empty{grid-column:1/-1}
.cards [hidden]{display:none}
.media .more{margin-top:40px}

/* Footer: one row, contact at the start, the logo in the middle, the language switch at the end (mirrored on the
   Arabic page). On phones the logo goes on top, centred, with contact and the switch under it at either side. */
.foot{padding:clamp(40px,5vw,72px) var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px}
.foot .contact{justify-self:start}
.foot img{width:204px;height:auto}
.foot .end{justify-self:end;display:flex;align-items:center;gap:14px}
.foot .give{min-height:44px;padding:0 22px}
/* Contact: a small label and two icon links, above the logo */
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.contact p{font-weight:400;font-size:13px;line-height:19px;letter-spacing:.14em;text-transform:uppercase;margin-inline-end:6px}
.contact .ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;transition:color .2s,border-color .2s}
.contact .ico:hover{border-color:var(--accent)}
.contact .addr{font-size:15px;line-height:22px;text-decoration:none;border-bottom:1px solid var(--line)}

/* Arabic: looser line spacing, no letter spacing (it breaks joined letters) */
[lang="ar"] body{line-height:34px}
[lang="ar"] .lab,[lang="ar"] .scr-h,[lang="ar"] .contact p,[lang="ar"] .scr .when,[lang="ar"] .card .kind{letter-spacing:0;font-size:15px}
[lang="ar"] .acc summary h2,[lang="ar"] .action h2{line-height:1.3}
[lang="ar"] .action h2{letter-spacing:0}
/* The headings' hover spreads the letters, which would break joined Arabic letters: in Arabic the heading only
   brightens and the chevron dips */
[lang="ar"] .acc summary{--ls:0;--ls-hover:0}
[lang="ar"] h2{line-height:1.35}
[lang="ar"] h3{line-height:1.5}
[lang="ar"] .quote{line-height:1.35}
[lang="ar"] .numlab,[lang="ar"] .strong,[lang="ar"] .action p{line-height:1.6}
[lang="ar"] .person p,[lang="ar"] .scr .where{line-height:30px}
[lang="ar"] .card .ttl{line-height:1.5}

/* Motion. Off for people who ask for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes settle{from{scale:1.14}to{scale:1}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .js .hero .bg{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
  .js .hero h1{animation:rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
  .js .laurels{animation:rise 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
  .js .watch{animation:rise 1.1s .6s cubic-bezier(.2,.7,.2,1) both}
  /* The scroll chevron drifts down and back, gently, after the title has settled */
  @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  .hero .cue svg{animation:nudge 2.2s 1.6s ease-in-out infinite}
  .trailer:not([hidden]){animation:fadein .5s ease both}
  /* Quote: word by word */
  .js .words .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.35em);transition:opacity .8s ease,filter .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}
  .js .words.in .w{opacity:1;filter:none;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* below laptop width, six in a row gets too small: three to a row */
@media (max-width:1100px){.laurels{--per:3;width:min(720px,100%)}}
@media (max-width:900px){
  .two{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scr{grid-template-columns:minmax(0,1fr);gap:4px}
  .scr .when{padding-top:0}
  .scr .btn{justify-self:start;margin-top:10px}
}
@media (max-width:640px){
  body{font-size:17px;line-height:26px}
  .lang{font-size:16px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo logo" "contact lang" "give give";gap:28px 16px}
  .foot img{grid-area:logo;justify-self:center}
  .foot .contact{grid-area:contact}
  .foot .end{display:contents}
  .foot .lang{grid-area:lang;align-self:start}
  .foot .give{grid-area:give}
  /* the text runs nearly the full width here, so the photo is shaded evenly */
  .story .bgpin::after,[dir="rtl"] .story .bgpin::after{background:rgba(14,13,11,.66)}
  .contact{gap:12px}
  /* the whole address fits beside Copy on a phone */
  html:not([lang="ar"]) .acc summary{--ls:.08em;--ls-hover:.1em}
  .hero h1{width:min(340px,72vw)}
  .laurels{--per:2;width:min(420px,100%)}
}