/* Overwatch master program page (/programs/overwatch/). Loads after /css/bevp-shell.css and /css/readability.css and
   never restyles the shell. Breakpoints match the shell: 1100 desktop compositions, 900 stacked sections, 700 phone.
   Character: research-instrument labels in JetBrains Mono beside the BEVP Anton and Barlow type; ink, bone and paper grounds. */

.ow{
  --ow-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ow-paper:var(--u-paper);
  --ow-pad-y:var(--rd-section);
  --ow-intro-gap:clamp(32px,3.4vw,52px);
  background:var(--u-bone);
}
.ow section{position:relative;padding-block:var(--ow-pad-y)}
.ow-kicker{margin-bottom:var(--u-s4)}
.ow-mono{font-family:var(--ow-mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.ow-credit{position:absolute;right:12px;bottom:12px;z-index:1;padding:5px 10px;border-radius:999px;background:rgba(14,13,11,.66);color:#fff;font-family:var(--u-ff-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* Section intros: headline left, lead right, top-aligned (contract B) */
.ow-intro{margin-bottom:var(--ow-intro-gap)}
.ow-intro > [data-col]:first-child{grid-column:1 / span 6}
.ow-intro__lead{grid-column:7 / -1;margin:0;padding-top:calc(13px * 1.3 + var(--u-s4))}
.ow-intro__h{max-width:14ch}
.ow-intro__h--wide{max-width:none}
@media (min-width:360px){.ow-keep{white-space:nowrap}}
/* A short lead stays under its headline instead of opening an empty right column */
.ow-intro--stack > [data-col]:first-child{grid-column:1 / -1}
.ow-intro--stack .ow-intro__lead{grid-column:1 / -1;padding-top:0;margin-top:var(--u-s5)}
/* A stacked intro is one block, so its headline and the copy under it run the full content width */
.ow-intro--stack .ow-intro__h,.ow-intro--stack .ow-intro__lead{max-width:none}

/* ============================================================
   1. HERO (Saasten .banner-area-v3 split): copy on ink, photograph to the right edge
   ============================================================ */
.ow .ow-hero{
  /* The copy column is the page margin plus 42% of the content width, so the headline keeps its room on wide screens */
  display:grid;grid-template-columns:calc(max(0px,(100vw - var(--u-wrap)) / 2) + .42 * min(100vw,var(--u-wrap))) minmax(0,1fr);
  min-height:clamp(560px,calc(100svh - var(--u-header-h)),880px);
  padding:0;background:var(--u-ink);color:var(--u-bone);
}
.ow-hero__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--u-s8) var(--rd-gap) var(--u-s8) calc(max(0px,(100vw - var(--u-wrap)) / 2) + var(--u-pad-x));
}
.ow-hero .ow-kicker{color:var(--u-bone-soft)}
.ow-h1{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(56px,6.2vw,96px);line-height:.94;letter-spacing:.005em;text-wrap:balance;max-width:7.5ch}
.ow-hero__lead{margin-top:var(--u-s5);font-size:var(--rd-lead);line-height:1.55;max-width:34em;text-wrap:pretty}
.ow-hero__note{order:2;margin-top:var(--u-s5)!important;font-size:var(--rd-body);line-height:1.6;color:var(--u-bone-soft);max-width:36em;text-wrap:pretty}
/* Actions follow the lead directly so they stay on the first screen above the Donate/988 rail; the note closes the column */
.ow-hero__actions{order:1;margin-top:var(--u-s6)}
.ow-hero__media{position:relative;min-height:100%}
.ow-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:96% 45%}
.ow-hero :focus-visible{outline-color:var(--u-bone)}
/* A narrower, taller photo column keeps both the climber on the rope and the belayer in frame */
@media (min-width:900px) and (max-width:1279px){.ow-hero__media img{object-position:70% 45%}}

/* ============================================================
   2. HOW IT WORKS (Asata portfolio-detail sticky column, index9 scroll-spy nav)
   ============================================================ */
.ow-how__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start}
.ow-how__aside{grid-column:1 / span 6;align-self:stretch}
.ow-how__sticky{position:sticky;top:calc(var(--u-header-h) + 24px)}
.ow-how__index{display:grid;grid-template-columns:repeat(2,max-content);gap:0 32px;margin-bottom:var(--u-s4)}
.ow-how__index a{display:inline-flex;align-items:center;min-height:var(--u-tap);font-family:var(--ow-mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--u-text-soft);text-decoration:none;transition:color .2s ease}
.ow-how__index a[aria-current="true"]{color:var(--u-ink);text-decoration:underline;text-decoration-color:var(--u-red);text-decoration-thickness:2px;text-underline-offset:8px}
.ow-how__stage{position:relative;aspect-ratio:5 / 4;overflow:hidden;background:var(--u-ink)}
.ow-how__stage figure{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.ow-how__stage figure.is-on{opacity:1}
.ow-how__stage img{width:100%;height:100%;object-fit:cover}
.ow-how__steps{grid-column:7 / -1}
.ow-step{padding-block:var(--u-s5) var(--u-s7)}
.ow-step .rd-h3{color:rgba(14,13,11,.4);transition:color .3s ease}
.ow-step.is-on .rd-h3{color:var(--u-ink)}
.ow-step:first-child{padding-top:calc(2 * var(--u-tap) + var(--u-s4))}
.ow-step:last-child{padding-bottom:0}
.ow-step .rd-h3{margin-bottom:var(--u-s4)}
.ow-step p{font-size:var(--rd-lead);line-height:1.55;max-width:34em}
.ow-step__media{display:none}

/* ============================================================
   3. WHAT WE STUDY (Asata .pric-tabs topic list; Saasten .integration-area orbit as a ring of subjects)
   ============================================================ */
.ow .ow-study{background:var(--u-ink);color:var(--u-bone)}
.ow-study .ow-kicker,.ow-study .rd-lead{color:var(--u-bone-soft)}
.ow-study :focus-visible{outline-color:var(--u-bone)}
/* What we study: one instrument read left to right. Select a group (list), see where it sits in the ring and how many
   subjects it holds (ring), read its subjects (panel). The three columns share one top line; the intro above is one
   stacked block at a quieter size so the instrument leads. */
.ow-study__intro{margin-bottom:clamp(48px,5vw,80px)}
.ow-study__intro .ow-intro__h{font-size:clamp(36px,3.7vw,56px);line-height:1;text-wrap:balance}
.ow-study__intro .ow-intro__lead{margin-top:var(--u-s6)}
.ow-atlas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start}
.ow-atlas__list{grid-column:1 / span 5;display:flex;flex-direction:column;gap:4px}
.ow-atlas__list > button{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 7.5em;align-items:center;column-gap:16px;
  min-height:64px;padding:10px 20px;border-radius:16px;cursor:pointer;color:rgba(236,227,208,.62);
  transition:color .2s ease,background-color .2s ease;
}
.ow-atlas__name{font-family:var(--u-ff-title);font-size:clamp(22px,1.9vw,28px);line-height:1.04;text-transform:uppercase;text-wrap:balance}
.ow-atlas__list .ow-mono{color:rgba(236,227,208,.5);text-align:right}
.ow-atlas__list > button:hover{color:var(--u-bone);background-color:rgba(236,227,208,.05)}
.ow-atlas__list > .is-sel,.ow-atlas__list > .is-sel:hover{color:var(--u-bone);background-color:rgba(236,227,208,.11)}
.ow-atlas__list > .is-sel .ow-mono{color:var(--u-red)}
.ow-atlas__list > button:focus-visible{outline:var(--u-focus);outline-color:var(--u-bone);outline-offset:3px}
.ow-atlas__view{grid-column:6 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:var(--rd-gap);align-items:start}
.ow-ring{position:relative;aspect-ratio:1;width:100%}
.ow-ring__svg{display:block;width:100%;height:100%;overflow:visible}
.ow-ring__svg .tick{stroke:rgba(236,227,208,.32);stroke-width:3;stroke-linecap:round;transition:stroke .25s ease}
.ow-ring__svg .grp{cursor:pointer}
.ow-ring__svg .grp:hover .tick{stroke:rgba(236,227,208,.6)}
.ow-ring__svg .grp.is-on .tick{stroke:var(--u-red);stroke-width:4}
.ow-ring__svg .arc{fill:none;stroke:rgba(236,227,208,.14);stroke-width:1.5}
.ow-ring__svg .grp.is-on .arc{stroke:rgba(236,227,208,.7)}
.ow-ring__center{position:absolute;inset:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;pointer-events:none}
.ow-ring__name{font-family:var(--u-ff-title);font-size:clamp(18px,1.6vw,26px);line-height:1.02;text-transform:uppercase;text-wrap:balance}
.ow-ring__count{color:var(--u-bone-soft)}
.ow-atlas__panels{padding-top:10px}
.ow-atlas__h{margin:0 0 var(--u-s5);font-family:var(--u-ff-title);font-weight:400;font-size:clamp(28px,2.4vw,38px);line-height:1.02;text-transform:uppercase;text-wrap:balance;color:var(--u-bone)}
/* Subjects are numbered in the order of the ring's ticks */
.ow-subjects{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:ow-subj}
.ow-subjects li{counter-increment:ow-subj;display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline;font-size:clamp(18px,1.35vw,20px);line-height:1.35;text-wrap:pretty}
.ow-subjects li::before{content:counter(ow-subj,decimal-leading-zero);font-family:var(--ow-mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--u-red)}
.ow-atlas__panel:focus-visible{outline:var(--u-focus);outline-color:var(--u-bone);outline-offset:8px}
.ow-atlas__status{margin-top:var(--u-s7)!important;font-size:var(--rd-note);line-height:1.6;color:rgba(236,227,208,.7);max-width:36ch}
.ow-atlas__status .ow-mono{display:block;margin-bottom:6px;color:var(--u-bone-soft)}
.ow-atlas__status a{color:var(--u-bone)}

/* ============================================================
   4. RESEARCH AND PRACTICE (Saasten .working-progress step rail; orbit rebuilt as a connected diagram)
   ============================================================ */
.ow .ow-loop{background:var(--ow-paper)}
.ow-loop__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start}
.ow-loop__copy{grid-column:1 / span 5}
.ow-loop__copy .rd-h2{max-width:16ch}
.ow-rail{display:flex;flex-direction:column;gap:4px;margin-top:var(--u-s6)}
.ow-rail > button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:baseline;gap:12px;min-height:52px;padding:10px 0;cursor:pointer;color:var(--u-text-soft)}
.ow-rail__t{font-size:var(--rd-lead);line-height:1.3;font-weight:600}
.ow-rail > .is-sel{color:var(--u-ink)}
.ow-rail > .is-sel .ow-mono{color:var(--u-red)}
.ow-rail > button:hover{color:var(--u-ink)}
.ow-rail > button:focus-visible{outline:var(--u-focus);outline-offset:4px;border-radius:4px}
.ow-loop__view{grid-column:6 / -1;align-self:center}
.ow-map{display:block;width:100%;height:auto;color:var(--u-ink)}
.ow-map__links path{stroke:rgba(14,13,11,.22);color:rgba(14,13,11,.22);transition:stroke .3s ease,color .3s ease}
.ow-map__nodes circle{fill:var(--u-bone);stroke:rgba(14,13,11,.28);stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.ow-map__nodes text{font-family:var(--u-ff-title);font-size:21px;text-transform:uppercase;text-anchor:middle;fill:rgba(14,13,11,.45);transition:fill .3s ease}
.ow-map__nodes .ow-map__minor{font-family:var(--ow-mono);font-size:14px;font-weight:500;letter-spacing:.04em;fill:rgba(14,13,11,.4)}
.ow-map[data-stage="1"] .s1 circle,.ow-map[data-stage="2"] .s2 circle,.ow-map[data-stage="3"] .s3 circle,.ow-map[data-stage="4"] .s4 circle{fill:var(--u-ink);stroke:var(--u-ink)}
.ow-map[data-stage="1"] .s1 text,.ow-map[data-stage="2"] .s2 text,.ow-map[data-stage="3"] .s3 text,.ow-map[data-stage="4"] .s4 text{fill:var(--u-bone)}
.ow-map[data-stage="2"] .n-ev text,.ow-map[data-stage="3"] .n-rp text{fill:var(--u-red)}
.ow-map[data-stage="1"] path.s1,.ow-map[data-stage="2"] path.s2,.ow-map[data-stage="3"] path.s3,.ow-map[data-stage="4"] path.s4{stroke:var(--u-red);color:var(--u-red)}
.ow-loop__panels{margin-top:var(--u-s5)} /* min-height set by overwatch.js to the tallest stage */
.ow-loop__stage p{font-size:var(--rd-lead);line-height:1.55;max-width:40em}
.ow-loop__stage:focus-visible{outline:var(--u-focus);outline-offset:6px}
.ow-loop__links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:var(--u-s5)!important}

/* ============================================================
   5. WHAT READERS CAN EXPECT (ink): standards beside the summary record, then publication status
   ============================================================ */
.ow .ow-standards{background:var(--u-ink);color:var(--u-bone)}
.ow-standards .ow-kicker{color:var(--u-bone-soft)}
.ow-standards :focus-visible{outline-color:var(--u-bone)}
.ow-standards__copy{grid-column:1 / span 6}
.ow-standards__copy .rd-h2{max-width:15ch;margin-bottom:var(--u-s5)}
.ow-standards__copy p:not([class]){font-size:var(--rd-lead);line-height:1.55;color:var(--u-bone-soft);max-width:34em}
.ow-standards__spec{grid-column:7 / -1;padding-top:calc(13px * 1.3 + var(--u-s4))}
.ow-spec__h{margin-bottom:var(--u-s5)!important;color:var(--u-red)}
.ow-spec{margin:0;display:grid;gap:18px}
.ow-spec div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:16px;align-items:baseline}
.ow-spec dt{font-family:var(--ow-mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--u-bone-soft)}
.ow-spec dd{margin:0;font-size:clamp(20px,1.7vw,26px);line-height:1.3;text-wrap:balance}
/* The status statement and its two actions read as one block: actions sit directly under the line */
.ow-status{margin-top:clamp(56px,6vw,96px)}
.ow-status__copy{grid-column:1 / -1}
.ow-status__copy .ow-mono{color:var(--u-red);margin-bottom:var(--u-s3)}
.ow-status__line{font-family:var(--u-ff-edit);font-style:italic;font-size:var(--rd-deck);line-height:1.3;max-width:none;text-wrap:pretty}
.ow-status__actions{grid-column:1 / -1;justify-content:flex-start;margin-top:var(--u-s5)}

/* ============================================================
   6. CONTRIBUTE (Saasten .ux-features-list row selector)
   ============================================================ */
.ow-paths{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start}
.ow-paths__list{grid-column:1 / span 6;display:flex;flex-direction:column;gap:4px}
.ow-paths__list > button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 28px;column-gap:16px;row-gap:4px;min-height:var(--u-tap);padding:12px 0;cursor:pointer;color:rgba(14,13,11,.42);transition:color .2s ease}
.ow-paths__list > button > span{grid-column:1}
.ow-paths__list > button svg{grid-column:2;grid-row:1;align-self:center;width:24px;height:24px;color:var(--u-red);opacity:0;transform:translateX(-10px);transition:opacity .2s ease,transform .2s ease}
.ow-paths__list > .is-sel svg{opacity:1;transform:none}
.ow-paths__t{font-family:var(--u-ff-title);font-size:clamp(24px,2.1vw,32px);line-height:1.05;text-transform:uppercase}
.ow-paths__s{font-size:16px;line-height:1.45;text-wrap:pretty}
.ow-paths__list > button:hover{color:rgba(14,13,11,.75)}
.ow-paths__list > .is-sel{color:var(--u-ink)}
.ow-paths__list > .is-sel .ow-paths__s{color:var(--u-text-soft)}
.ow-paths__list > button:focus-visible{outline:var(--u-focus);outline-offset:4px;border-radius:4px}
.ow-paths__view{grid-column:7 / -1;padding-top:12px}
.ow-paths__panel p{font-size:var(--rd-lead);line-height:1.55;max-width:34em}
.ow-paths__panel:focus-visible{outline:var(--u-focus);outline-offset:6px}
.ow-notice{margin-top:clamp(56px,6vw,88px)!important;font-size:var(--rd-note);line-height:1.6;color:var(--u-text-soft);max-width:none}

/* ============================================================
   TABLET LANDSCAPE AND SMALL DESKTOP (900 to 1099)
   ============================================================ */
@media (max-width:1099px) and (min-width:900px){
  /* List left; the ring and the subjects stack on the right, ring above its subjects */
  .ow-atlas__view{grid-template-columns:minmax(0,1fr)}
  .ow-ring{width:min(100%,280px)}
  .ow-atlas__panels{margin-top:var(--u-s6);padding-top:0}
  .ow-atlas__list > button{padding:10px 16px;grid-template-columns:minmax(0,1fr) 7em}
}

/* ============================================================
   STACKED SECTIONS (below 900): tablet portrait and phones
   ============================================================ */
@media (max-width:899px){
  .ow-intro > [data-col]:first-child,.ow-intro__lead{grid-column:1 / -1}
  .ow-intro__lead{padding-top:0;margin-top:var(--u-s5)}
  .ow-intro__h{max-width:none}

  .ow .ow-hero{display:flex;flex-direction:column;min-height:0}
  .ow-hero__copy{display:contents}
  .ow-hero__copy > *{padding-inline:max(var(--u-pad-x),env(safe-area-inset-left,0px))}
  .ow-hero .ow-kicker{order:1;padding-top:var(--u-s7)}
  .ow-h1{order:2;max-width:none;font-size:clamp(48px,11vw,84px)}
  .ow-hero__lead{order:3;max-width:60ch}
  .ow-hero__media{order:4;min-height:0;aspect-ratio:2 / 1;margin-top:var(--u-s6)}
  .ow-hero__actions{order:5;margin-top:var(--u-s5)}
  .ow-hero__note{order:6;margin-top:var(--u-s5)!important;padding-bottom:var(--u-s7);max-width:none}
  .ow-hero__note{width:min(100%,calc(62ch + 2 * var(--u-pad-x)))}

  .ow-how__aside{display:none}
  .ow-how__steps{grid-column:1 / -1}
  .ow-step,.ow-step:first-child{opacity:1;padding:0 0 var(--u-s7)}
  .ow-step__media{display:block;position:relative;aspect-ratio:3 / 2;overflow:hidden;margin-bottom:var(--u-s5)}
  .ow-step__media img{width:100%;height:100%;object-fit:cover}

  /* Reading order top to bottom: the group list, then the ring beside the chosen group's subjects */
  .ow-atlas,.ow-atlas__view{grid-template-columns:minmax(0,1fr)}
  .ow-atlas__list,.ow-atlas__view{grid-column:1 / -1}
  .ow-atlas__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
  .ow-atlas__list > button{min-height:60px;padding:8px 16px;grid-template-columns:minmax(0,1fr) auto}
  .ow-atlas__name{font-size:clamp(20px,2.9vw,24px)}
  .ow-atlas__view{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:var(--u-s7);align-items:start}
  .ow-ring{width:100%}

  .ow-loop__copy,.ow-loop__view{grid-column:1 / -1}
  .ow-loop__copy .rd-h2{max-width:none}
  .ow-loop__view{padding-top:0;margin-top:var(--u-s6)}
  .ow-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-gap)}

  .ow-standards__copy,.ow-standards__spec,.ow-status__copy,.ow-status__actions{grid-column:1 / -1}
  .ow-standards__spec{padding-top:0;margin-top:var(--u-s7)}
  .ow-status__actions{justify-content:flex-start;margin-top:var(--u-s5)}

  .ow-paths__list,.ow-paths__view{grid-column:1 / -1}
  .ow-paths__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ow-paths__view{padding-top:var(--u-s5)}
}

/* ============================================================
   PHONE (below 700)
   ============================================================ */
@media (max-width:699px){
  .ow-h1{font-size:clamp(46px,13vw,64px)}
  .ow-hero .ow-kicker{padding-top:var(--u-s6)}
  .ow-hero__media{aspect-ratio:4 / 3;margin-top:var(--u-s5)}
  .ow-hero__lead{font-size:18px}
  /* Short phones (667 and 568 tall): the actions move above the photograph so they reach the first screen */
  @media (max-height:740px){.ow-hero .ow-kicker{padding-top:var(--u-s5)}.ow-hero__actions{order:3;margin-top:var(--u-s5)}}

  /* Phone order: the group list, the ring, then the chosen group's subjects */
  .ow-atlas__view{display:contents}
  .ow-atlas__list{grid-template-columns:minmax(0,1fr);gap:2px}
  .ow-atlas__list > button{min-height:52px;padding:6px 14px;border-radius:14px}
  .ow-atlas__name{font-size:21px}
  .ow-ring{width:min(70vw,260px);margin:var(--u-s7) auto 0}
  .ow-atlas__panels{margin-top:var(--u-s6);padding-top:0}
  .ow-atlas__h{font-size:30px}

  .ow-rail{grid-template-columns:minmax(0,1fr)}
  .ow-rail > button{grid-template-columns:5em minmax(0,1fr);min-height:48px;padding:8px 0}
  .ow-rail__t{font-size:17px}
  .ow-map{width:calc(100% + 2 * var(--u-pad-x));margin-inline:calc(-1 * var(--u-pad-x))}
  .ow-map__nodes text{font-size:24px}
  .ow-map__nodes .ow-map__minor{font-size:20px}
  .ow-map__nodes .n-ow text{font-size:21px}

  .ow-spec div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ow-spec dd{font-size:20px}

  .ow-paths__list{grid-template-columns:minmax(0,1fr)}
  .ow-paths__list > button{padding:10px 0}

  /* Stacked: each panel opens under its own button (overwatch.js), with the ring or diagram inside it */
  .ow-atlas__list .ow-atlas__panel{padding:0 14px var(--u-s6)}
  .ow-atlas__list .ow-atlas__h{display:none}
  .ow-atlas__list .ow-ring{margin:var(--u-s5) auto var(--u-s5)}
  .ow-atlas__panels{margin-top:0}
  .ow-atlas__status{margin-top:var(--u-s6)!important}
  .ow-rail .ow-loop__stage{padding:var(--u-s2) 0 var(--u-s6)}
  .ow-rail .ow-map{margin-top:var(--u-s5)}
  .ow-loop__panels{margin-top:0}
  .ow-paths__list .ow-paths__panel{padding:var(--u-s2) 0 var(--u-s6)}
  .ow-paths__view{padding-top:0}
  .ow-paths__t{font-size:24px}
}

/* Short landscape phones (844x390): keep the two-column compositions (contract F) */
@media (max-width:899px) and (min-width:700px) and (max-height:500px){
  .ow .ow-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .ow-hero__copy{display:flex;padding:var(--u-s6) var(--u-s5) var(--u-s6) max(var(--u-pad-x),env(safe-area-inset-left,0px))}
  .ow-hero__copy > *{padding-inline:0}
  .ow-hero .ow-kicker{padding-top:0}
  .ow-h1{font-size:44px}
  .ow-hero__lead{font-size:16px}
  .ow-hero__note{font-size:15px}
  /* The photograph holds one screen beside the copy, so the whole frame shows instead of its top strip */
  .ow-hero__media{aspect-ratio:auto;margin-top:0;position:sticky;top:var(--u-header-h);align-self:start;height:calc(100svh - var(--u-header-h));min-height:0}
  /* Each responsibility: photograph left, heading and text right, so neither fills more than the screen */
  .ow-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:var(--rd-gap);align-items:start}
  .ow-step__media{grid-row:1 / span 2;margin-bottom:0}
  .ow-step > :not(.ow-step__media){grid-column:2}
  /* Program loop: stages and text left, diagram right */
  .ow-loop__copy{grid-column:1 / span 6}
  .ow-loop__view{grid-column:7 / -1;margin-top:0;align-self:start}
  .ow-rail{grid-template-columns:minmax(0,1fr)}
  .ow-map{width:100%;margin-inline:0}
  .ow-map__nodes text{font-size:24px}
  .ow-map__nodes .n-ow text{font-size:21px}
  .ow-map__nodes .ow-map__minor{font-size:20px}
  .ow-standards__copy{grid-column:1 / span 6}
  .ow-standards__spec{grid-column:7 / -1;margin-top:0;padding-top:calc(13px * 1.3 + var(--u-s4))}
}

@media (prefers-reduced-motion:reduce){
  .ow-how__stage figure,.ow-step,.ow-map *{transition:none}
}