/* One spread: 38.2% light introduction, 61.8% blue stories. */
@media(min-width:761px){
.stories-screen{height:100svh;min-height:700px;display:grid;grid-template-rows:38.2% 61.8%;overflow:hidden}
.stories-screen>.initiative{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:5svh 8vw;background:#fff;display:flex;align-items:center;justify-content:center}
.stories-screen>.initiative p{border:0;padding:0;max-width:46ch;font-size:clamp(28px,2.2vw,72px);line-height:1.25;text-align:center}
.stories-screen>.stories-section{min-height:0;background:radial-gradient(ellipse at 14% 8%,#233B57 0%,#192E47 38%,#112238 72%,#0D1B2D 100%)}
.stories-screen .stories-section>.section-shell{box-sizing:border-box;max-width:none;height:100%;padding:3.4svh 8vw;display:flex;flex-direction:column;min-height:0}
.stories-screen .section-top{flex-direction:row;align-items:end;margin-bottom:2.4svh;gap:24px;flex:none}
.stories-screen .section-top h2{font-size:clamp(30px,2.4vw,78px)}
.stories-screen .section-top .eyebrow{font-size:clamp(10px,.55vw,18px);margin-bottom:1svh}
.stories-screen .stories-track{flex:1;min-height:0;padding-bottom:0;scrollbar-width:none;gap:1.4vw}
.stories-screen .stories-track::-webkit-scrollbar{display:none}
.stories-screen .quote-card{box-sizing:border-box;flex:0 0 calc((100% - 2.8vw)/3);min-height:0;padding:clamp(18px,1.3vw,44px);border-radius:8px;background:#fff}
.stories-screen .story-topic{font-size:clamp(22px,1.5vw,48px);line-height:1.08;margin-bottom:1.6svh}
.stories-screen .excerpt{font-size:clamp(12px,.72vw,23px);line-height:1.5;margin-bottom:1.2svh;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.stories-screen .quote-author{padding-top:1.2svh;gap:12px;flex:none}
.stories-screen .quote-author img{width:clamp(30px,2vw,65px);height:clamp(38px,2.5vw,82px);border-radius:3px}
.stories-screen .quote-author h3{font-size:clamp(16px,1vw,32px)}
.stories-screen .read-story{font-size:clamp(10px,.6vw,19px)}
.stories-screen .stories-note{font-size:clamp(11px,.65vw,21px);line-height:1.5;max-width:85ch;margin:1.6svh 0 0;flex:none}
}
@media(max-width:760px){.stories-screen .stories-section{background:linear-gradient(135deg,#233B57,#0D1B2D)}.stories-track{scrollbar-width:none}}
@media(min-width:761px){.stories-screen{width:100%;min-width:0}.stories-screen>.initiative,.stories-screen>.stories-section,.stories-screen .section-shell,.stories-screen .stories-track{min-width:0;width:100%}.stories-screen>.initiative p{width:100%;max-width:46ch}.stories-screen .stories-track{box-sizing:border-box}}
/* Portrait-led story cards, composed as a restrained printed cover. */
.stories-screen .quote-card.editorial-story{padding:clamp(12px,1vw,32px);border-radius:3px;display:grid;grid-template-rows:59% minmax(0,1fr);gap:clamp(12px,1.2svh,24px);overflow:hidden}
.story-portrait{display:grid;grid-template-columns:12% minmax(0,1fr);gap:7%;min-height:0;overflow:hidden}
.story-spine{writing-mode:vertical-rl;transform:rotate(180deg);font:500 clamp(9px,.55vw,18px)/1.3 Onest,sans-serif;letter-spacing:.12em;align-self:start;justify-self:start;color:#14263d}
.story-portrait>img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 30%;filter:grayscale(1);border-radius:1px}
.story-editorial-copy{display:flex;flex-direction:column;min-height:0;padding-left:19%}
.stories-screen .editorial-story .story-topic{font:500 clamp(18px,1.12vw,36px)/1.05 'Cormorant Garamond',Georgia,serif;margin:0 0 1svh;letter-spacing:-.02em}
.stories-screen .editorial-story .excerpt{font-size:clamp(10px,.6vw,19px);line-height:1.45;-webkit-line-clamp:3;margin:0 0 1svh}
.stories-screen .editorial-story .quote-author{border:0;padding:0;margin-top:auto;display:block}
.stories-screen .editorial-story .quote-author h3{font:500 clamp(11px,.7vw,22px)/1.3 Onest,sans-serif;margin:0 0 .5svh}
.stories-screen .editorial-story .read-story{font-size:clamp(10px,.55vw,18px)}
@media(max-width:760px){.stories-screen .quote-card.editorial-story{height:620px;min-height:620px;grid-template-rows:60% 1fr;padding:18px}.story-spine{font-size:11px}.stories-screen .editorial-story .story-topic{font-size:25px}.stories-screen .editorial-story .excerpt{font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stories-screen .editorial-story .quote-author h3{font-size:13px}}
.stories-screen>.initiative{position:relative;isolation:isolate;overflow:hidden}
.stories-screen>.initiative::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/mgimo/club/optimized/mgimo-frontal-engraving-e6bc36020978.webp') center calc(50% + clamp(18px,3svh,48px))/100% auto no-repeat;mix-blend-mode:multiply;opacity:.09;pointer-events:none}
.stories-screen>.initiative p{line-height:1.02}
.stories-screen .quote-card.editorial-story{border-radius:clamp(10px,.7vw,22px)}
.story-portrait>img{border-radius:clamp(10px,.7vw,22px)}
.stories-screen .editorial-story .quote-author h3{margin-bottom:2px;line-height:1.2}
.stories-screen .editorial-story .read-story{border:0;padding:0;line-height:1.3;text-decoration:none}
.stories-screen .stories-note{max-width:none;line-height:1.4}
.stories-screen .story-controls{gap:clamp(14px,1.1vw,36px);align-items:center}
.stories-screen .story-controls button{display:grid;place-items:center;border:1px solid #ffffff30;width:clamp(34px,2.5vw,68px);height:clamp(34px,2.5vw,68px);border-radius:50%;padding:0;font-size:clamp(17px,1.05vw,30px);transition:background .35s,border-color .35s,opacity .35s}
.stories-screen .story-controls button:hover:not(:disabled){background:#ffffff0b;border-color:#ffffff85}
.story-navigation-status{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:clamp(62px,5vw,160px)}
.story-progress{display:block;width:100%;height:2px;background:#ffffff20;border-radius:9px;overflow:hidden}
.story-progress i{display:block;height:100%;width:var(--story-progress,10%);background:#c6d1df;border-radius:9px;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.story-portrait img[src*="story-0."]{object-position:50% 27%}
.story-portrait img[src*="story-4."]{object-position:50% 26%}
.story-portrait img[src*="story-5."]{object-position:54% 32%}
.story-portrait img[src*="story-3."]{object-position:50% 28%}
.story-portrait img[src*="story-7."]{object-position:50% 30%}
.story-portrait img[src*="story-1."]{object-position:50% 28%}
.story-portrait img[src*="story-2."]{object-position:50% 25%}
.story-portrait img[src*="story-6."]{object-position:50% 30%}
.story-portrait img[src*="story-8."]{object-position:50% 28%}
.story-portrait img[src*="story-9."]{object-position:50% 28%}
/* Focal points checked against the actual source photographs. */
.story-portrait img[src*="story-0."]{object-position:50% 15%}
.story-portrait img[src*="story-1."]{object-position:50% 5%}
.story-portrait img[src*="story-2."]{object-position:50% 61%}
.story-portrait img[src*="story-3."]{object-position:50% 15%}
.story-portrait img[src*="story-4."]{object-position:50% 18%}
.story-portrait img[src*="story-5."]{object-position:52% 30%}
.story-portrait img[src*="story-6."]{object-position:50% 46%}
.story-portrait img[src*="story-7."]{object-position:50% 58%}
.story-portrait img[src*="story-8."]{object-position:50% 30%}
.story-portrait img[src*="story-9."]{object-position:50% 16%}


/* Remove the dark margins embedded in Ruslan's source photo. */
.story-photo-crop{min-width:0;min-height:0;overflow:hidden;border-radius:clamp(10px,.7vw,22px)}
.story-photo-crop>img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.24);transform-origin:50% 61%}

/* Lidia: closer portrait, with eyes at the upper golden-section line. */
.story-portrait .story-photo-lidia>img{object-position:50% 11%;transform:scale(1.32);transform-origin:50% 38.2%}

/* Alexey: enough vertical space for the complete head and collar. */
.stories-screen .quote-card.editorial-story:has(img[src*="story-9."]){grid-template-rows:66% minmax(0,1fr)}
.story-portrait img[src*="story-9."]{object-position:50% 12%}

/* Connected, numbered story navigation. */
.stories-screen .story-controls #stories-prev,.stories-screen .story-controls #stories-next{display:none}
.story-number-rail{position:relative;display:flex;align-items:center;gap:clamp(6px,.55vw,18px);isolation:isolate}
.story-number-rail::before,.story-number-rail::after{content:'';position:absolute;left:15px;right:15px;top:50%;height:1px;z-index:-1;background:#ffffff16}
.story-number-rail::after{right:auto;width:calc((100% - 30px)*var(--rail-progress,0));background:#bbc8d759;transition:width .8s ease}
.stories-screen .story-controls .story-number-rail button{width:clamp(24px,1.65vw,48px);height:clamp(24px,1.65vw,48px);font:400 clamp(9px,.55vw,16px)/1 Onest,sans-serif;background:#14263d;border-color:#ffffff18;color:#a5b5c8;opacity:.22;transform:scale(.86);transition:opacity .65s ease,transform .65s ease,border-color .65s,color .65s,background .65s}
.stories-screen .story-controls .story-number-rail button.is-revealed{opacity:.65;transform:scale(1)}
.stories-screen .story-controls .story-number-rail button.is-visible{opacity:1;border-color:#b8c7d966;color:#e2e8ef}
.stories-screen .story-controls .story-number-rail button.is-current{background:#e5ebf2;color:#14263d;border-color:#e5ebf2}
.stories-screen .story-controls .story-number-rail button:hover{opacity:1;border-color:#e5ebf2}
@media(max-width:1100px){.stories-screen .section-top{flex-wrap:wrap}.story-number-rail{gap:7px}}
@media(prefers-reduced-motion:reduce){.story-number-rail::after,.stories-screen .story-controls .story-number-rail button{transition:none}}
/* A full-height purpose spread, white 61.8 / navy 38.2. */
.community-purpose-screen{display:grid;grid-template-columns:61.8% 38.2%;background:#fff;min-width:0}
.community-purpose-screen .flag-photo{display:none}
.community-purpose-screen .purpose-copy{position:relative;isolation:isolate;overflow:hidden;background:#fff;padding:clamp(32px,5svh,96px) clamp(32px,7.5vw,250px);display:flex;flex-direction:column;justify-content:center;gap:clamp(72px,6svh,120px);min-width:0}
.community-purpose-screen .purpose-copy::before{content:'';position:absolute;inset:52% 0 auto;aspect-ratio:1672/941;transform:translateY(-50%);z-index:-1;background:url('/mgimo/club/optimized/02-engraving-black-0f36344ed3f2.webp') center/100% auto no-repeat;mix-blend-mode:multiply;opacity:.09;pointer-events:none}
.community-purpose-screen .mission{padding:0;margin:0;max-width:none;width:100%}
.community-purpose-screen .mission p{text-align:left;margin:0;max-width:66ch;font-size:clamp(16px,.8vw,28px);line-height:1.55;color:#465970}
/* Read This: introductory serif lead, dominant section title, one shared reading role. */
.community-purpose-screen .mission-lead{margin:0 0 clamp(18px,1.5svh,30px);text-wrap:pretty;font-size:clamp(30px,1.6vw,54px);line-height:1.12;max-width:37ch;font-weight:400;letter-spacing:-.02em}
.community-purpose-screen .participation{display:block;border:0}
.community-purpose-screen .participation-copy{padding:0}
.community-purpose-screen .participation-copy .eyebrow{font-size:clamp(11px,.45vw,15px);margin:0 0 clamp(14px,1.3svh,26px);letter-spacing:.16em;color:#687b91}
.community-purpose-screen .participation h2{font-size:clamp(40px,2.25vw,76px);line-height:1;max-width:30ch;margin:0 0 clamp(22px,1.8svh,36px);font-weight:500;letter-spacing:-.025em}
.community-purpose-screen .participation-copy>p:not(.eyebrow){font-family:Onest,Arial,sans-serif;font-size:clamp(16px,.8vw,28px);font-weight:400;line-height:1.55;max-width:66ch;color:#465970;margin-bottom:0;text-align:justify;text-align-last:left;text-wrap:wrap;hyphens:auto}
.community-purpose-screen .participation-copy .next-step{border:0;margin-top:clamp(20px,1.6svh,32px);padding-top:0}
.community-purpose-screen .supporters{position:relative;isolation:isolate;overflow:hidden;padding:clamp(30px,6svh,110px) clamp(26px,3.8vw,130px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#1e354f,#101f32 70%,#0c192b)}
.community-purpose-screen .supporters::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/mgimo/club/community-flag.JPG') center 40%/cover no-repeat;filter:grayscale(1);opacity:.07;pointer-events:none}
.community-purpose-screen .supporters-intro{font-size:clamp(24px,1.6vw,50px);line-height:1.18;margin:0 0 3svh}
.community-purpose-screen .supporters article{grid-template-columns:clamp(94px,8.3vw,270px) minmax(0,1fr);grid-template-rows:max-content max-content minmax(0,1fr);align-items:start;column-gap:clamp(16px,1.3vw,42px);padding:2.7svh 0;border:0}
.community-purpose-screen .supporters article img{width:100%;height:clamp(120px,10.6vw,344px);border-radius:clamp(8px,.6vw,20px);object-fit:cover;filter:grayscale(1)}
.community-purpose-screen .supporters h3{font-size:clamp(23px,1.5vw,47px);margin:0 0 clamp(6px,.4vw,14px)}
.community-purpose-screen .home-education{font-size:clamp(11px,.65vw,20px);line-height:1.5}
.community-purpose-screen .supporters article p{font-size:clamp(12px,.7vw,22px);line-height:1.5;margin:clamp(14px,.8vw,26px) 0 0}
@media(min-width:761px) and (min-height:720px){.community-purpose-screen{height:100svh;overflow:hidden}}
@media(min-width:761px){.community-purpose-screen .participation{transform:translateY(calc(-1 * clamp(32px,5svh,80px)))}}
@media(max-width:760px){.community-purpose-screen{grid-template-columns:1fr}.community-purpose-screen .purpose-copy{padding:48px 6%;gap:64px}.community-purpose-screen .supporters{padding:48px 6%}.community-purpose-screen .supporters article{grid-template-columns:112px 1fr}.community-purpose-screen .supporters article img{height:143px}}
/* One shared baseline; a fixed navigation footprint prevents lateral jumps. */
.stories-screen .stories-track{scroll-snap-type:none;scroll-behavior:auto;overflow-anchor:none}
.stories-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,2vw,64px);margin-top:1.8svh;flex:none}
.stories-screen .stories-bottom .stories-note{margin:0;max-width:85ch}
.stories-screen .stories-bottom .story-controls{justify-content:flex-end;align-self:center;margin:0;width:auto;gap:0}
.story-number-rail{--story-circle:clamp(30px,2vw,58px);--story-gap:clamp(4px,.3vw,12px);justify-content:flex-end;gap:var(--story-gap);padding:0}
.story-number-rail::before,.story-number-rail::after{display:none}
.stories-screen .story-controls .story-number-rail button,
.stories-screen .story-controls .story-number-rail button.is-current,
.stories-screen .story-controls .story-number-rail button.is-revealed,
.stories-screen .story-controls .story-number-rail button.is-visible{position:relative;width:var(--story-circle);height:var(--story-circle);min-width:var(--story-circle);padding:0;flex:none;font-size:0;background:transparent;border:0;opacity:1;transform:none;overflow:visible;transition:none;color:#e8edf3}
.stories-screen .story-controls .story-number-rail button:hover:not(:disabled){background:transparent;border:0}
.stories-screen .story-controls .story-number-rail button::after{content:'';position:absolute;left:calc(50% + (var(--story-circle) + var(--story-gap)) * .31);top:50%;width:calc((var(--story-circle) + var(--story-gap)) * .38);height:1px;background:#acbbce;opacity:.2;pointer-events:none;z-index:-1;transition:opacity .7s ease}
.stories-screen .story-controls .story-number-rail button.is-circle-adjacent::after{opacity:0;transition-duration:.35s}
.stories-screen .story-controls .story-number-rail button:last-child::after{display:none}
.story-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:5px;height:5px;border-radius:50%;background:#9cacc0;border:1px solid transparent;box-sizing:border-box;opacity:.45;transition:width 1s cubic-bezier(.22,.61,.36,1),height 1s cubic-bezier(.22,.61,.36,1),background .8s,opacity .8s,border-color .8s}
.is-revealed .story-marker,.is-visible .story-marker{opacity:.75}
.is-current .story-marker{width:var(--story-circle);height:var(--story-circle);background:#14263d;border-color:#c5d1df9c;opacity:1}
.story-marker-number{font:400 clamp(10px,.65vw,19px)/1 Onest,sans-serif;opacity:0;transition:opacity .65s;white-space:nowrap}
.is-current .story-marker-number{opacity:1;transition-delay:.2s}
.stories-screen .story-controls .story-number-rail button:focus-visible{outline:1px solid #fff;outline-offset:3px}
@media(max-width:760px){.stories-bottom{grid-template-columns:1fr;gap:18px;margin-top:24px}.stories-screen .stories-bottom .story-controls{justify-self:end}.story-number-rail{--story-circle:26px;--story-gap:5px}.stories-screen .stories-bottom .stories-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.story-marker,.story-marker-number,.stories-screen .story-controls .story-number-rail button::after{transition:none}}
/* Wheel navigation owns vertical movement; the footer also occupies a whole screen. */
html.screen-paging{scroll-behavior:auto!important;scroll-padding-top:0;overscroll-behavior-y:none}
.screen-paging body{overscroll-behavior-y:none}
.screen-paging .club-footer{min-height:100svh;display:grid;grid-template-rows:minmax(220px,1fr) repeat(4,auto);justify-content:normal}

/* Soft bottom shade on the participants panel, behind portraits and copy. */
.community-purpose-screen .supporters::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 38.2%,rgba(0,0,0,.36) 100%)}

/* One editorial heading line gives the portrait cards more vertical room. */
.stories-screen .stories-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;min-width:0}
.stories-screen .stories-heading h2{margin:0}
.stories-screen .stories-heading .eyebrow{margin:0;white-space:nowrap;flex:none;text-align:right}
@media(min-width:761px){
.stories-screen .stories-section>.section-shell{padding-top:2.4svh}
.stories-screen .section-top{align-items:baseline}
.stories-screen .quote-card.editorial-story{grid-template-rows:60% minmax(0,1fr)}
.stories-screen .quote-card.editorial-story:has(img[src*="story-9."]){grid-template-rows:66% minmax(0,1fr)}
}
@media(max-width:760px){.stories-screen .stories-heading{flex-wrap:wrap;gap:12px 20px}.stories-screen .stories-heading h2{font-size:30px}.stories-screen .stories-heading .eyebrow{font-size:10px;margin-left:auto}}

/* Media decode must not let browser scroll anchoring fight explicit paging. */
html.screen-paging, .screen-paging body{overflow-anchor:none}