/* Jappo Ocean · desktop header and hero
   Placement and spacing follow alethia.earth, measured from Marianne's recordings. */

:root {
  --navy: #11162A;      /* Pantone 20-0195 TPM Midnight Sky */
  --white: #FFFFFF;
  --ink: #171919;       /* arrow inside the Contact us box */

  /* Menu font. Marianne's pick for Alethia's menu font is Encercle Sans (Typodermic, paid).
     Chivo Mono is the closest free match until a web licence is bought. */
  --font-label: "Chivo Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Name beside the logo. Alethia's name is drawn as part of its logo;
     Poppins SemiBold is the closest free match to its letters. */
  --font-name: "Poppins", system-ui, sans-serif;

  /* Hero headline and scroll hint, and the scan labels: Geist and Geist Mono,
     the closest free matches to Alethia's hero text (same widths within 3 px). */
  --font-display: "Geist", system-ui, sans-serif;
  --font-data: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  --lime: #C7FA9E;      /* Alethia's lime: open rows, tags, labels, the cards' reveal */
  --lime-ink: #0A2F00;  /* the dark green of the text on it */
  --forest: #122111;    /* Alethia's dark text on white, and on a revealed card */

  --pad: 28px;          /* left and right page edge */
  --header-h: 64px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
}

a { color: inherit; text-decoration: none; }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* keeps the menu centred on the page */
  align-items: center;
  color: var(--white);
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  pointer-events: none;   /* only its links take clicks, so that once they fade out nothing under the bar is blocked */
  transition: opacity .22s ease, transform .22s ease;   /* the compact bar showing and hiding (js/header.js) */
}
.header > * { pointer-events: auto; }

.logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 5.2px;           /* same space as between Alethia's icon and its name */
}
.logo img { display: block; height: 28px; width: auto; }
.logo-name {             /* "Jappo" above "Ocean", both left-aligned */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: 600 18px/1.05 var(--font-name);
  letter-spacing: -0.03em;
  text-transform: none;
  white-space: nowrap;
}

.nav { display: flex; gap: 20px; }
.nav a { display: block; }

/* Contact us sits in a box of its own, its padding taken back by its margins so that the words and the
   arrow stay where they were; the box turns lime on hover, keyboard focus and touch */
.cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -7px -7px -7px -12px;
  padding: 7px 7px 7px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta-arrow {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.cta-arrow svg { display: block; }
.nav a[aria-current="page"],
.nav a[aria-current="true"] {           /* the page the visitor is on, or the section (Understand's articles) */
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

/* EN / FR, just before Contact us: the two codes in the header's capitals, the page's language on a
   small lime ground with the lime's dark green, the other one plain (underlined on hover) and leading
   to the same page in that language (js/lang.js). Both stay readable over dark and light grounds. */
.header-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 26px);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}
.lang-option {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 26px;
  padding: 0 5px;
  border-radius: 3px;
  letter-spacing: .02em;
}
.lang-option[aria-current] { background: var(--lime); color: var(--lime-ink); }
a.lang-option { -webkit-tap-highlight-color: transparent; }
a.lang-option:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@media (hover: hover) {
  a.lang-option:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
}
.lang-slash { opacity: .6; }
.header { column-gap: 24px; }                   /* the logo, the links and the end never touch */
.header-end { white-space: nowrap; }
/* French takes more room: on narrower tablets and windows its header's capitals are a little smaller,
   so that the links, EN / FR and Nous contacter keep to one line beside the logo */
@media (min-width: 760px) and (max-width: 959px) and (orientation: landscape) {
  html[lang="fr"] .header:not(.is-menu-open) { font-size: 13px; }
  html[lang="fr"] .header:not(.is-menu-open) .nav { gap: 14px; }
  html[lang="fr"] .header:not(.is-menu-open) .header-end { gap: 14px; }
  html[lang="fr"] .header.is-compact:not(.is-menu-open) { column-gap: 18px; }
  html[lang="fr"] .header.is-compact:not(.is-menu-open) .nav { gap: 14px; font-size: 13px; }
  html[lang="fr"] .header.is-compact:not(.is-menu-open) .cta { gap: 10px; }
}

/* Contact us in lime, the words and the arrow navy: on hover (where there is a pointer that hovers),
   keyboard focus and while pressed. The phone's menu has its own lime button. */
@media (hover: hover) {
  .header:not(.is-menu-open) .cta:hover { border-color: var(--lime); background: var(--lime); color: var(--navy); }
  .header:not(.is-menu-open) .cta:hover .cta-arrow { background: var(--navy); color: var(--lime); }
}
.header:not(.is-menu-open) .cta:is(:focus-visible, :active) { border-color: var(--lime); background: var(--lime); color: var(--navy); }
.header:not(.is-menu-open) .cta:is(:focus-visible, :active) .cta-arrow { background: var(--navy); color: var(--lime); }

/* The compact bar (js/header.js), further down a page: Alethia's floating bar from Marianne's
   screenshot, on the navy, with its proportions on a screen 1902 px wide: 69 px high, 13 px from the
   top, corners of 10 px, the links in 18 px capitals and Contact us a 34 px button, and as wide as its
   contents with the screenshot's spacing (17 px, the logo's symbol, 31 px, the links 27 px apart,
   31 px, Contact us, 15 px), so about 36% of the screen (the screenshot's links fill 40%). On smaller
   screens it scales down to the header's own sizes. Its navy is translucent, as Marianne asked: the
   page shows through it, blurred, behind the logo, the links and Contact us, which stay solid. Over a
   light section it takes a little more navy (66%) than over a dark one (55%), so that its white words
   stay readable over white; a fine light border edges it. It slides and fades in and out
   (is-hidden), and is-instant changes it at once. */
.header.is-compact:not(.is-menu-open) {
  top: calc(clamp(10px, .684vw, 13px) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 32px);
  height: clamp(56px, 3.63vw, 69px);
  margin: 0 auto;
  padding: 0 clamp(12px, .79vw, 15px) 0 clamp(14px, .9vw, 17px);
  grid-template-columns: auto auto auto;
  column-gap: clamp(25px, 1.63vw, 31px);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 10px;
  background: rgb(17 22 42 / .66);   /* the navy, over a light section */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px -14px rgb(6 9 22 / .45);
  color: var(--white);
  pointer-events: auto;   /* a bar: clicks on it stay on it */
  transition: opacity .22s ease, transform .22s ease, background-color .2s ease;
}
.header.is-compact.is-over-dark:not(.is-menu-open) {
  background: rgb(17 22 42 / .55);
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / .6);
}
/* where the browser can't blur the page behind the bar, more of the navy; for a visitor who prefers
   less transparency, the navy itself */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-compact:not(.is-menu-open) { background: rgb(17 22 42 / .9); }
  .header.is-compact.is-over-dark:not(.is-menu-open) { background: rgb(17 22 42 / .85); }
}
@media (prefers-reduced-transparency: reduce) {
  .header.is-compact:not(.is-menu-open),
  .header.is-compact.is-over-dark:not(.is-menu-open) {
    background: var(--navy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.header.is-compact.is-hidden:not(.is-menu-open) {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.header.is-compact.is-hidden:not(.is-menu-open) > * { pointer-events: none; }
.header.is-compact:not(.is-menu-open) .logo-name { display: none; }
.header.is-compact:not(.is-menu-open) .logo img { height: clamp(28px, 1.68vw, 32px); }
.header.is-compact:not(.is-menu-open) .nav {
  justify-self: start;
  gap: clamp(22px, 1.42vw, 27px);
  font-size: clamp(15px, .946vw, 18px);
}
.header.is-compact:not(.is-menu-open) .cta {
  height: 34px;
  margin: 0;
  padding: 0 6px 0 11px;
  gap: 12px;
  border-color: rgb(255 255 255 / .3);
  border-radius: 4px;
}
.header.is-compact:not(.is-menu-open) .header-end { gap: clamp(18px, 1.2vw, 24px); }
.header.is-instant,
.header.is-instant * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .header,
  .header.is-compact:not(.is-menu-open) { transition: none; }
  .header.is-compact.is-hidden:not(.is-menu-open) { transform: none; }
}

/* on a phone the links and Contact us fold into Menu, which opens them over the page on the navy
   (js/header.js) */
.menu-button { display: none; }
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .header { grid-template-columns: 1fr auto auto; column-gap: 0; }
  .header-end { display: contents; }
  .nav,
  .cta { display: none; }
  .lang-switch {                           /* before Menu, above the open menu's ground too */
    position: relative;
    z-index: 1;
    margin-right: 14px;
  }
  a.lang-option { height: 44px; }          /* a finger's height to tap */
  .logo { position: relative; z-index: 1; }   /* above the open menu's ground */
  .menu-button {
    position: relative;
    z-index: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  .menu-button-icon {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: var(--white);
    color: var(--ink);
  }
  .menu-button-icon span {
    position: absolute;
    left: 5px;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s;
  }
  .menu-button-icon span:first-child { top: 7px; }
  .menu-button-icon span:last-child { top: 11.5px; }
  .header.is-on-light:not(.is-compact) .menu-button-icon { background: var(--forest); color: var(--white); }

  .header.is-compact:not(.is-menu-open) {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 56px;
    padding: 0 6px 0 14px;
    grid-template-columns: 1fr auto auto;
  }
  .header.is-compact:not(.is-menu-open) .menu-button { margin-right: 0; }

  .header.is-menu-open { color: var(--white); opacity: 1; transform: none; transition: none; }
  .header.is-menu-open > * {              /* whole, even if the first scroll had begun to fade them */
    opacity: 1 !important;
    visibility: visible !important;
  }
  .header.is-menu-open::before {          /* the menu's ground, which also keeps taps off the page */
    content: "";
    position: fixed;
    inset: 0;
    background: var(--navy);
    pointer-events: auto;
  }
  .header.is-menu-open .logo img { filter: none; }
  .header.is-menu-open .menu-button-icon { background: var(--white); color: var(--ink); }
  .header.is-menu-open .menu-button-icon span:first-child { transform: translateY(2.25px) rotate(45deg); }
  .header.is-menu-open .menu-button-icon span:last-child { transform: translateY(-2.25px) rotate(-45deg); }
  .header.is-menu-open .nav {
    position: fixed;
    top: calc(var(--header-h) + 36px);
    left: var(--pad);
    right: var(--pad);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font: 500 clamp(34px, 10vw, 44px)/1.05 var(--font-display);
    letter-spacing: -.04em;
    text-transform: none;
  }
  .header.is-menu-open .nav a { padding: 6px 0; }
  .header.is-menu-open .nav a[aria-current="page"],
  .header.is-menu-open .nav a[aria-current="true"] {
    color: var(--lime);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .header.is-menu-open .cta {             /* Contact us as the footer's lime button, across the screen */
    position: fixed;
    left: var(--pad);
    right: var(--pad);
    justify-self: stretch;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px 0 18px;
    border-radius: 6px;
    background: var(--lime);
    color: var(--lime-ink);
  }
  .header.is-menu-open .cta-arrow { width: 26px; height: 26px; background: var(--ink); color: var(--lime); }
  .header.is-menu-open :is(a, button):focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }
}
html.is-menu-open { overflow: hidden; }   /* the page waits under the open menu */

/* phones: Alethia's mobile menu (Marianne's IMG_3543) in Jappo's navy and lime. Menu is a
   hamburger, three thin white lines 16 px from the screen's right edge, the logo 16 px from its left. Open, the menu covers the
   screen in three areas of its own, so nothing in it can overlap: the header's row with the logo and the
   lines turned into a cross; the links, large and left-aligned with a fine rule under each, Home's capitals 64 px under
   the row; and a compact lime Contact us at the foot on the left. On a short screen the links scroll
   between the other two. The phone's status bar and home bar keep their room. The button is 44 px
   square to tap; its word (Menu, Close) is its name for screen readers. */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .header { padding: 0 16px; }
  .menu-button { width: 44px; height: 44px; margin-right: -11px; padding: 0; gap: 0; justify-content: center; }
  .menu-button-word {                    /* Menu / Close stays the button's name, read but not shown */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* three thin white lines; open, the outer two turn into a cross and the middle one fades */
  .menu-button-icon,
  .header.is-menu-open .menu-button-icon,
  .header.is-on-light:not(.is-compact) .menu-button-icon {
    width: 22px;
    height: 14px;
    border-radius: 0;
    background: none;
    color: var(--white);
  }
  .menu-button-icon span,
  .menu-button-icon::before {
    left: 0;
    width: 22px;
    height: 1.5px;
    border-radius: 1px;
  }
  .menu-button-icon::before {
    content: "";
    position: absolute;
    top: 6.25px;
    background: currentColor;
    transition: opacity .2s;
  }
  .menu-button-icon span:first-child { top: 0; }
  .menu-button-icon span:last-child { top: 12.5px; }
  .header.is-menu-open .menu-button-icon::before { opacity: 0; }
  .header.is-menu-open .menu-button-icon span:first-child { transform: translateY(6.25px) rotate(45deg); }
  .header.is-menu-open .menu-button-icon span:last-child { transform: translateY(-6.25px) rotate(-45deg); }
  .header.is-on-light:not(.is-compact, .is-menu-open) .menu-button-icon { color: var(--forest); }   /* over a white page's top */
  .lang-switch { margin-right: 10px; font-size: 13px; }
  .menu-button:focus-visible { outline: 1px solid var(--white); outline-offset: -4px; }
  .header.is-compact:not(.is-menu-open) { padding: 0 8px 0 14px; }

  .header.is-menu-open {
    bottom: 0;
    height: auto;
    padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
    grid-template-areas: "logo lang button" "nav nav nav" "cta cta cta";
    pointer-events: auto;
  }
  .header.is-menu-open .logo { grid-area: logo; }
  .header.is-menu-open .lang-switch { grid-area: lang; }
  .header.is-menu-open .menu-button { grid-area: button; }
  .header.is-menu-open .nav {
    grid-area: nav;
    position: relative;
    inset: auto;
    z-index: 1;
    align-self: stretch;
    min-height: 0;
    display: block;
    padding: 40px 0 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font: 500 clamp(30px, 8.5vw, 38px)/1 var(--font-display);
    letter-spacing: -.04em;
  }
  .header.is-menu-open .nav a {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 4px 0;
    border-bottom: 1px solid rgb(255 255 255 / .18);
  }
  .header.is-menu-open .nav a[aria-current="page"],
  .header.is-menu-open .nav a[aria-current="true"] {
    text-underline-offset: 7px;
  }
  .header.is-menu-open .cta {           /* Alethia's compact lime button, at the foot on the left */
    grid-area: cta;
    position: relative;
    inset: auto;
    z-index: 1;
    justify-self: start;
    height: 56px;
    margin: 16px 0 36px;
    padding: 0 14px 0 16px;
    gap: 22px;
    border-radius: 4px;
  }
  .header.is-menu-open .nav a:focus-visible { outline-offset: -1px; }
}


/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  color: var(--white);
}

/* decorative layers: the opening's veil, fish, light, scan frames, labels. None of them takes clicks. */
.hero-scene,
.hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-scene { z-index: 0; }
.hero-veil {              /* the nearly black navy the page opens on, lifted by js/hero-scene.js */
  z-index: 0;
  display: none;
  background: #05070f;
}
.hero-fish { z-index: 1; }
.hero-pulse { z-index: 2; }
.hero-frames { z-index: 3; }
.hero-labels { z-index: 4; }
.fish-art { position: absolute; width: 0; height: 0; overflow: hidden; }

/* each fish: an outer box that places it, a layer that brings it in at the opening,
   and an inner layer that floats inside it */
.fish-place {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;           /* small fish: placed by js/hero-scene.js */
  aspect-ratio: 5 / 2;    /* artwork is 1000 x 400 */
}
.fish-place--big {        /* where Alethia's central rock is: the drawing's middle 49% across and halfway down,
                             the drawing 42% of the hero wide (its artwork box has a little empty space at the ends) */
  left: 49%;
  top: 50%;
  width: 42.9%;
  transform: translate(-50.95%, -50%);
}
.fish-scroll,             /* moved by the scroll story (js/story.js) */
.fish-enter { position: absolute; inset: 0; }
.fish-scroll { transform-origin: 50% 50%; }
.fish,
.pulse {
  transform-origin: 50% 50%;
  will-change: transform;
  contain: strict;        /* changes elsewhere in the scene never make the browser redraw a fish */
}
.fish { position: absolute; inset: 0; }
.fish svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* the big fish opens on scroll: its halves part beyond its box, so it is not clipped to it */
.fish[data-fish="big"] { contain: size layout style; }
.fish-bones,
.fish-half,
.fish-rim { position: absolute; inset: 0; }
.fish-bones,
.fish-half { visibility: hidden; }   /* shown by js/story.js once the fish starts to open */
.fish-half { will-change: transform; }
.fish-bones,
.fish-rim { will-change: opacity; }
.fish--far { opacity: .8; filter: saturate(.85) brightness(.92); }   /* the farthest fish, a little hazier */

.pulse {                  /* placed over the big fish by js/hero-scene.js, with room around it */
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100px;
  height: 54px;
}

.scan-frame {
  position: absolute;
  left: 0;
  top: 0;
  contain: layout paint;
  border: 1px solid #eaf4ff;
  opacity: 0;
  will-change: transform, opacity;
}

.scan-label {
  position: absolute;
  left: 0;
  top: 0;
  contain: layout paint;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  will-change: transform, opacity;
}
.scan-label.is-end { align-items: flex-end; }   /* labels left of their frame, or lined up with its right edge */
.scan-tag {
  padding: 4px 6px 3px;
  border-radius: 2px;
  background: #eef4fa;
  color: #0e1529;
  font: 500 11px/1 var(--font-data);
  letter-spacing: .02em;
  white-space: nowrap;
}
.scan-line {
  padding: 3px 5px 2px;
  border-radius: 2px;
  background: rgb(17 22 42 / .72);   /* keeps the white line readable over the silver fish */
  color: var(--white);
  font: 400 12px/1.2 var(--font-data);
  text-transform: uppercase;
  white-space: nowrap;
}
.scan-line:empty { visibility: hidden; }

/* title, button and scroll hint stay still above the scene; the title runs over the big fish's tail */
.hero-content {
  position: absolute;
  z-index: 5;
  left: 24px;
  top: 20.3vh;            /* cap height of the first line starts here, like Alethia's */
  top: 20.3svh;
  width: 50%;
}
.hero-title {
  margin: -.22em 0 0 -.053em;   /* pulls the first line up so its capitals start at the top of the block, and
                                   left by the F's side bearing so its stem lines up with the button and introduction */
  font: 500 clamp(72px, 6vw, 112px)/.96 var(--font-display);
  letter-spacing: -.045em;
  white-space: nowrap;    /* the three lines stay as written */
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10.75px;
  height: 58px;
  padding: 0 16.5px;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 6px;
  background: var(--navy);   /* solid, so the tail of the lower left fish tucks behind its lower right corner */
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .2s;
}
.btn:hover { border-color: rgb(255 255 255 / .7); }
.btn-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
}
.btn-arrow svg { display: block; }
/* the hero's Contact us turns lime, its words and arrow navy, as the header's does: on hover, keyboard
   focus and while pressed, the same size */
.hero-actions .btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-actions .btn-arrow { transition: background-color .2s ease, color .2s ease; }
@media (hover: hover) {
  .hero-actions .btn:hover { border-color: var(--lime); background: var(--lime); color: var(--navy); }
  .hero-actions .btn:hover .btn-arrow { background: var(--navy); color: var(--lime); }
}
.hero-actions .btn:is(:focus-visible, :active) { border-color: var(--lime); background: var(--lime); color: var(--navy); }
.hero-actions .btn:is(:focus-visible, :active) .btn-arrow { background: var(--navy); color: var(--lime); }

/* introduction at the bottom left, lined up with the title like Alethia's "Know your impact" text.
   js/hero-scene.js keeps the fish and labels out of the corner it sits in. */
.hero-intro {
  position: absolute;
  z-index: 5;
  left: 24px;
  bottom: 4.5%;
  max-width: 42%;
  margin: 0;
  font: 400 clamp(18px, 1.6vw, 30px)/1.1 var(--font-display);
}

.scroll-hint {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 15px/1 var(--font-display);
}
.scroll-mouse {
  position: relative;
  width: 10.5px;
  height: 14.5px;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.scroll-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: currentColor;
}

a:focus-visible,
button:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

/* a page brought back by Back or Forward waits unseen, on its own ground, until js/visit.js has put it
   back where it was */
html.is-returning body { opacity: 0; }
html.is-leaving body { visibility: hidden; }   /* on its way to the French page the visitor chose (js/lang.js) */
html.is-returning:has(> body:is(.page-our-work, .page-understand, .page-article, .page-contact)) { background: var(--white); }

/* the opening: until js/hero-scene.js brings them in, the hero opens dark and its parts are
   hidden. If the script never runs they show anyway after 6 seconds. */
@media (prefers-reduced-motion: no-preference) {
  .hero-entrance .hero-veil {
    display: block;
    animation: jo-hide .6s 6s both;
  }
  .hero-entrance :is(.header, .hero-title, .hero-actions, .hero-intro, .scroll-hint, .fish-enter) {
    opacity: 0;
    animation: jo-show .6s 6s both;
  }
}
@keyframes jo-show { to { opacity: 1; } }
@keyframes jo-hide { to { opacity: 0; } }

/* tall screens (phones, tablets upright): the fish sit above the text */
@media (max-width: 719px), (max-aspect-ratio: 23 / 20) {
  .hero {                 /* title, button and introduction stack at the bottom */
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 20px 72px;
  }
  .fish-place--big { left: 50%; top: 35%; width: 94%; }
  .hero-content,
  .hero-intro {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
  }
  .hero-intro { margin-top: 22px; }
  .hero-title {
    margin-top: 0;
    font-size: clamp(40px, 11.5vw, 72px);
  }
  .hero-actions { margin-top: 24px; gap: 10px; }
  .btn { height: 50px; }
  .scroll-hint { right: 20px; bottom: 24px; }
}

/* phones: Alethia's mobile hero (Marianne's IMG_3541). The title in the upper part, its capitals 42 px
   under the header and 4% of the screen from its left edge, about 31 px on a 402 px screen with tight
   lines, as wide as the reference's (so it wraps freely); Contact us under it, the big fish just under
   the button and the introduction at the foot. Everything scales with the screen's width, so it wraps
   the same way on every phone. js/hero-scene.js places the small fish around them. */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .hero { --hero-title: clamp(25px, 7.8vw, 34px); display: block; padding: 0; }
  .hero-content {
    position: absolute;
    left: 4vw;
    right: 4vw;
    top: calc(var(--header-h) + 42px);
  }
  .hero-title {                   /* the three lines as written, in both languages; the longest is about 60% of the width */
    margin: -.22em 0 0 -.053em;   /* the first line's capitals at the top of the block, the F's stem on the edge */
    font-size: var(--hero-title);
    line-height: .96;
  }
  .hero-actions { margin-top: 33px; }
  .hero-actions .btn { height: 56px; }
  /* its drawing 16 px under the button, the title's third line included */
  .fish-place--big { top: calc(var(--header-h) + 146px + 33.8vw + var(--hero-title) * .96); }
  .hero-intro {
    position: absolute;
    left: 4vw;
    right: 4vw;
    bottom: 72px;
    margin: 0;
  }
  .scroll-hint { right: 4vw; }
}


/* ---------------------------------------------------------------- scroll story
   Without motion (reduced motion, or no script) the hero, Our Vision and the ocean simply follow
   one another, a screen each. With motion (`story-motion` on <html>) they are layers of a stage
   pinned to the screen for the length of .story, and js/story.js moves them from the scroll position. */

.story { position: relative; }
.story-stage { position: relative; }
.story-end {              /* links to #what-we-do land where the story ends */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

.story-motion .story {
  height: calc(100vh + 208vh);       /* the stage plus 2.08 screens of scrolling, three scroll gestures; see js/story.js */
  height: calc(100lvh + 208svh);
}
.story-motion .story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
}
.story-motion .story-end { height: 100lvh; }
.story-vision {           /* links to #our-vision land on Our Vision: just after the hero, */
  position: absolute;
  left: 0;
  top: max(100vh, 520px);
  top: max(100svh, 520px);
  width: 1px;
  height: 1px;
  pointer-events: none;
}
@media (max-width: 719px), (max-aspect-ratio: 23 / 20) {
  .story-vision { top: max(100svh, 560px); }   /* the hero is at least 560 px tall there */
}
/* or with motion at step 244 of the story, its words in since 185 and staying until 303 (a step is a
   third of the small viewport height on every screen, see js/story.js) */
.story-motion .story-vision { top: 81.33vh; top: 81.33svh; }
/* wide screens: the stage holds What we do for one more screen while Our work slides up over it. When
   Our work is shorter than the screen (tablets held upright, its two cards side by side) the stage is
   held only for Our work's height (--hold), so that the story, and its stage, end where Our work does:
   Our expertise then follows Our work directly, with nothing of the stage left under it. js/story.js
   gives Our work's height (--our-work-height). */
:root { --hold: min(100vh, var(--our-work-height, 100vh)); }
.story-motion .story.is-holding { height: calc(100vh + var(--hold) + 208vh); }
.story-motion .story.is-holding .story-end { bottom: var(--hold); }
.story-motion .story.is-holding + .our-work { margin-top: calc(-1 * var(--hold)); }
@supports (height: 100lvh) {
  :root { --hold: min(100lvh, var(--our-work-height, 100lvh)); }
  .story-motion .story.is-holding { height: calc(100lvh + var(--hold) + 208svh); }
}
.story-motion .hero {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
}

/* Our Vision: a small boxed label, a large tight headline and a line of supporting text, centred
   over the opened fish like Alethia's. Sizes are Alethia's on a 1518 px wide screen. */
.vision {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 24px;
  overflow: hidden;
  color: var(--white);
}
.vision:focus { outline: none; }   /* reached by Scroll to discover */
.vision-art {             /* reduced motion: the fish already open behind the words, as the story shows it */
  position: absolute;
  inset: 0;
}
.vision-art svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(66%, 1300px);
  height: auto;
  translate: -50% -50%;
  overflow: visible;
}
.vision-half--upper { transform: translateY(-194px); }
.vision-half--lower { transform: translateY(194px); }
.vision-rim { opacity: .77; }
.vision-veil {            /* keeps the words readable over the ivory bones */
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1200px, 120vw);
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(10 14 30 / .74), rgb(10 14 30 / .55) 45%, rgb(10 14 30 / 0));
  pointer-events: none;
}
.vision-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  text-align: center;
}
.vision-label {
  margin: 0;
  padding: 6px 7px 5px;
  border-radius: 2px;
  background: var(--lime);           /* the site's lime label, as on the articles and About */
  color: var(--lime-ink);
  font: 500 13px/1 var(--font-data);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vision-title {
  max-width: 8.5em;       /* three balanced lines, as wide as Alethia's */
  margin: 40px 0 0;
  font: 500 clamp(40px, 4.28vw, 84px)/.94 var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
:where(html[lang="fr"]) .vision-title { max-width: 10em; }   /* the French words, in three lines too */
.vision-text {
  max-width: 21em;
  margin: 44px 0 0;
  font: 400 clamp(17px, 1.53vw, 30px)/1.04 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* the ocean: Marianne's seabed photo across the screen, the statement upper left, the paragraph upper
   right where Alethia's sits, and four numbered topics on the photo */
.ocean {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
}
.ocean-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ocean-frame {            /* sized and moved by js/story.js so the photo covers the screen */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
.ocean-frame img,
.ocean-blur {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ocean-blur { display: none; }
.ocean-live {             /* the living photo (js/ocean-live.js), in the story only, once it can draw */
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}
.ocean-shade {            /* a little darker behind the words, for readability */
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(60% 55% at 72% 22%, rgb(4 16 38 / .42), rgb(4 16 38 / 0)),
    radial-gradient(30% 30% at 8% 18%, rgb(4 16 38 / .38), rgb(4 16 38 / 0)),
    linear-gradient(rgb(4 16 38 / .3), rgb(4 16 38 / 0) 55%);
  pointer-events: none;
}
.ocean-copy {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}
.ocean-statement {
  position: absolute;
  left: var(--pad);
  top: 16.6%;
  margin: 0;
  font: 500 clamp(12px, .92vw, 17px)/.92 var(--font-data);
  text-transform: uppercase;
}
.ocean-text {
  position: absolute;
  left: 34.9%;
  top: 15.4%;
  width: 47%;
  margin: 0;
  font: 400 clamp(22px, 2.9vw, 56px)/.95 var(--font-display);
  letter-spacing: -.04em;
}
.ocean-line { display: block; }

.topics {                 /* the visible screen, whatever the photo does behind it */
  position: absolute;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100svh;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.topic {                  /* placed by js/story.js: the middle of its circle on Alethia's spot */
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topic:hover,
.topic:focus-within { z-index: 1; }   /* its note shows above the other topics */
.topic-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: rgb(9 20 44 / .55);
  color: var(--white);
  font: 500 12px/1 var(--font-data);
  pointer-events: auto;
}
button.topic-mark { cursor: pointer; transition: background-color .2s, color .2s; }
.topic--more .topic-mark { border-style: dashed; }
.topic-label {
  position: relative;
  padding: 7px 9px 6px;
  border: 1px solid rgb(255 255 255 / .85);
  background: rgb(9 20 44 / .55);
  font: 500 12px/1 var(--font-data);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topic-label.is-wrapped { white-space: normal; line-height: 1.3; }  /* narrow screens: js/story.js sets its width */
.topic-name { color: transparent; }  /* holds the label's size and is what screen readers read */
.topic-typed {            /* the whole name over it, the part not typed yet unseen, so both wrap alike */
  position: absolute;
  left: 9px;
  right: 9px;
  top: 7px;
  color: var(--white);
}
.topic-rest { color: transparent; }
.topic-label.is-typing .topic-shown::after {   /* a block caret that takes no room in the line */
  content: "";
  display: inline-block;
  width: 0;
  height: 1em;
  margin-top: -.15em;
  border-left: .6em solid currentColor;
  vertical-align: middle;
}
.topic-note {             /* Marine pollution's note: a small light panel above its circle */
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: min(310px, 80vw);
  padding: 13px 15px 14px;
  border: 1px solid #1d2128;
  background: #f6f7f5;
  color: #1d2128;
  font: 400 15px/1.5 var(--font-display);
  letter-spacing: -.005em;
  transform: translateX(var(--note-dx, 0px));   /* set by js/story.js to keep it on screen */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility 0s .2s;
}
.topic.is-note-below .topic-note { top: calc(100% + 12px); bottom: auto; }
.topic:hover .topic-note,
.topic-mark:focus-visible ~ .topic-note,
.topic-mark[aria-expanded="true"] ~ .topic-note {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s;
}
.topic:hover button.topic-mark,
button.topic-mark:focus-visible,
button.topic-mark[aria-expanded="true"] { background: var(--white); color: var(--navy); }

/* What we do: Alethia's instrument scene with a pirogue. A deep sunlit seabed fills the screen, the
   heading sits upper left, a frosted card holds the plastic pollution estimate, five activities open
   one at a time on the right, and the pirogue stands behind the card and the activities. Places and
   sizes are Alethia's on a 1517 x 722 screen: places as shares of the screen, type in vw. */
.work {
  --t: clamp(13px, 1.187vw, 24px);   /* the activities' titles */
  --c: clamp(13px, .89vw, 18px);     /* the card's title, and the step its spacing is counted in */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
}
.work-backdrop,
.work-photo,
.work-murk,
.work-content {
  position: absolute;
  inset: 0;
}
.work-photo { overflow: hidden; }
.work-frame {             /* moved by js/story.js in the story; otherwise the photo covers the section */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
.work-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-murk {              /* the haze the scene comes in through (js/story.js) */
  background:
    radial-gradient(70% 60% at 50% 62%, rgb(150 198 228 / .9), rgb(150 198 228 / .55) 60%, rgb(150 198 228 / .35)),
    linear-gradient(rgb(110 170 214 / .25), rgb(170 210 232 / .6));
  opacity: 0;
  pointer-events: none;
}
.work-boat {              /* the pirogue's outline is 78% of the screen tall, its top at 20%, its middle at 50.5% */
  position: absolute;
  left: 50.5%;
  top: 19.79%;            /* the image has 4 px of air around the boat (4 / 1494 of 78%) */
  height: 78.42%;
  aspect-ratio: 411 / 1502;
  translate: -50% 0;
}
.work-boat img {
  display: block;
  width: 100%;
  height: 100%;
}
.work-content { pointer-events: none; }
.work-content > * { pointer-events: auto; }

.work-title {             /* the arrow at 21% from the left, the capitals of the first line at 8.4% from the top */
  position: absolute;
  left: 21.05%;
  top: 8.42%;
  display: flex;
  align-items: flex-start;
  gap: .655em;
  margin: 0;
  font: 500 clamp(24px, 2.096vw, 44px)/.956 var(--font-display);
  letter-spacing: -.018em;
}
.work-title span { margin-top: -.243em; }   /* lifts the first line so its capitals start at the top of the block */
.work-arrow {
  flex: none;
  width: .42em;
  height: .42em;
  margin-top: .07em;
}

/* the card: dark frosted glass with Alethia's rounded corners and spacing */
.work-card {
  position: absolute;
  left: 20.31%;
  top: 44.68%;
  width: 21.78%;
  min-height: 46%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(var(--c) * 1.63) calc(var(--c) * 1.66) calc(var(--c) * 1.5);
  border-radius: 14px;
  background: rgb(8 17 30 / .5);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
}
.work-card > * { margin: 0; }
.work-card-title {
  font: 600 var(--c)/1.01 var(--font-display);
  letter-spacing: .01em;
}
.work-card-period {
  margin-top: calc(var(--c) * 1.05);
  font: 500 clamp(9px, .593vw, 12px)/1 var(--font-data);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .85);
}
.work-card-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .3em;
  margin-top: calc(var(--c) * 2.1);
}
.work-card-number {
  font: 500 clamp(24px, 2.077vw, 44px)/1 var(--font-display);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.work-card-unit {
  font: 400 calc(var(--c) * .86)/1 var(--font-data);
  letter-spacing: -.02em;
  color: rgb(255 255 255 / .5);
}
.work-card-text {
  margin-top: calc(var(--c) * .8);
  max-width: 24em;
  font: 400 calc(var(--c) * .93)/1.3 var(--font-display);
  letter-spacing: -.01em;
  color: rgb(255 255 255 / .78);
}
.work-card-source {
  margin-top: calc(var(--c) * .9);
  font: 400 clamp(10px, .745vw, 14px)/1.2 var(--font-data);
  letter-spacing: -.01em;
  color: rgb(255 255 255 / .62);
}

/* the range: a faint track, the estimate's two ends joined by a thin line, labelled below, and the
   lime figure tag above its middle. The ends sit at 19 and 23 on a scale that runs from 16 to 26. */
.work-chart {
  --low: 30%;
  --high: 70%;
  position: relative;
  flex: 1 0 calc(var(--c) * 6.4);
  margin: 0;
  font: 400 clamp(9px, .593vw, 12px)/1 var(--font-data);
}
.work-chart-track,
.work-chart-range {
  position: absolute;
  top: 48%;
  height: 0;
}
.work-chart-track {
  left: 0;
  right: 0;
  border-top: 1px dashed rgb(255 255 255 / .28);
}
.work-chart-range {
  left: var(--low);
  width: calc(var(--high) - var(--low));
  border-top: 1.6px solid var(--white);
  margin-top: -.3px;
  transform-origin: 0 50%;
}
.work-chart-end {
  position: absolute;
  top: 48%;
  width: 0;
  height: 0;
}
.work-chart-end--low { left: var(--low); }
.work-chart-end--high { left: var(--high); }
.work-chart-end::before {   /* the point */
  content: "";
  position: absolute;
  left: -3.6px;
  top: -3.6px;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: var(--white);
}
.work-chart-value {
  position: absolute;
  left: 0;
  top: 13px;
  translate: -50% 0;
  color: rgb(255 255 255 / .85);
  letter-spacing: .02em;
}
.work-chart-tag {
  position: absolute;
  left: calc((var(--low) + var(--high)) / 2);
  bottom: calc(52% + 13px);
  translate: -50% 0;
  padding: .42em .55em .36em;
  border-radius: 3px;
  background: var(--lime);
  color: var(--lime-ink);
  font-size: clamp(9px, .62vw, 12px);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* the activities: translucent grey rows with bold monospaced titles, a number and a plus; the open one
   turns lime with dark text, its description sliding out below. The stack stays centred on 49.5% of
   the screen's height as rows open and close. */
.work-list {
  position: absolute;
  left: 53.27%;
  top: 49.45%;
  width: 29.22%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  translate: 0 -50%;
}
:where(html[lang="fr"]) .work-list { width: 38%; }   /* the French titles on one line each */
.work-item { display: flex; flex-direction: column; }
.work-head { margin: 0; font: inherit; }
.work-button {
  display: grid;
  grid-template-columns: calc(var(--t) * 1.69) minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: calc(var(--t) * .733 - 1px) calc(var(--t) * .89 - 1px) calc(var(--t) * .733 - 1px) calc(var(--t) * .667 - 1px);
  border: 1px solid transparent;
  border-radius: 2px;
  background: rgb(222 228 232 / .16);
  -webkit-backdrop-filter: blur(14px) saturate(.45);
  backdrop-filter: blur(14px) saturate(.45);
  color: var(--white);
  font: 600 var(--t)/.933 var(--font-data);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.work-button:hover { background: rgb(255 255 255 / .26); border-color: rgb(255 255 255 / .6); }
.work-button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.work-num {
  margin-top: .03em;
  font: 400 calc(var(--t) * .78)/1 var(--font-data);
  letter-spacing: -.05em;
  color: rgb(255 255 255 / .45);
  transition: color .25s;
}
.work-name { min-width: 0; }
.work-icon {              /* a plus that becomes a minus */
  position: relative;
  align-self: center;
  width: calc(var(--t) * .62);
  height: calc(var(--t) * .62);
  margin-left: calc(var(--t) * 1.1);
}
.work-icon::before,
.work-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.work-icon::before { left: 0; right: 0; top: calc(50% - .6px); height: 1.2px; }
.work-icon::after { top: 0; bottom: 0; left: calc(50% - .6px); width: 1.2px; transition: scale .25s; }
.work-panel {
  display: grid;
  grid-template-rows: 1fr;
}
.work-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.work-panel p {
  margin: 2px 0 0;
  padding: calc(var(--t) * 1.09) calc(var(--t) * 2.7) calc(var(--t) * 1.09) calc(var(--t) * 2.41);
  border-radius: 2px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 400 clamp(13px, .903vw, 18px)/1.226 var(--font-display);
  letter-spacing: -.02em;
}
.work-item.is-open .work-button { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.work-item.is-open .work-num { color: rgb(10 47 0 / .5); }
.work-item.is-open .work-icon::after { scale: 1 0; }
/* with js/work.js the rows start closed and open one at a time, the description sliding out as its
   row turns lime; without it every description shows */
.work-list.is-ready .work-item:not(.is-open) .work-panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.work-list.is-smooth .work-panel {
  transition: grid-template-rows .34s cubic-bezier(.33, 0, .2, 1), visibility 0s .34s;
}
.work-list.is-smooth .work-item.is-open .work-panel {
  transition: grid-template-rows .34s cubic-bezier(.33, 0, .2, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .work-list.is-smooth .work-panel,
  .work-list.is-smooth .work-item.is-open .work-panel { transition: none; }
}

/* Our work: Alethia's Our solutions on white. A small lime label, a large heading with tight lines and
   two nearly square photo cards side by side, a narrow gutter between them and rounded corners. Each
   card's title sits at its bottom left; on a pointer that can hover, and on keyboard focus, a lime circle
   grows from the card's top right corner over the photo, the title turns dark and the description comes
   in above it (js/our-work.js). The cards are information only. Sizes are Alethia's on a 1515 px wide
   screen; on touch screens the description always shows with the title. */
.our-work {
  --name: clamp(22px, 2.79vw, 56px);   /* the cards' titles */
  position: relative;
  z-index: 1;             /* slides over the story's stage */
  padding: 66px var(--pad) 67px;
  background: #FFFFFF;
  color: var(--forest);
}
.our-work-label,
.ex-label,
.purpose-label,
.activities-label,
.activity-status,
.president-label,
.understand-label,
.soon-label,
.page-label,
.glossary-label,
.article-category,
.article-action-title,
.about-label,
.about-hero-label,
.contact-label {
  width: fit-content;
  margin: 0;
  padding: 4px 7px 5.5px 6px;
  border-radius: 2px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 500 14px/1 var(--font-data);
  text-transform: uppercase;
}
.our-work-title {
  margin: 49px 0 0;
  font: 500 clamp(34px, 3.76vw, 76px)/.94 var(--font-display);
  letter-spacing: -.05em;
}
.our-work-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 123px;
}
.our-work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 722 / 730;
  min-width: 0;
  padding: 28px 28px 40px;
  border-radius: 24px;
  color: var(--white);
}
.our-work-card:focus { outline: none; }
.our-work-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.our-work-media {         /* the photo, a little shade at the bottom and the lime, clipped to the card's corners */
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #23343a;    /* until the photo loads */
  isolation: isolate;
}
.our-work-media::after {  /* a restrained shade under the title, for readability */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .46), rgb(0 0 0 / .16) 24%, rgb(0 0 0 / 0) 42%);
}
.our-work-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.our-work-photo--net { object-position: 50% 65%; }        /* the face, the hands and the net */
.our-work-photo--gathering { object-position: 50% 55%; }  /* the speaker, the gathering and the vest's logo */
.our-work-wash {          /* the lime circle, grown from the top right corner by js/our-work.js */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--lime);
  clip-path: circle(0 at calc(100% - 24px) 24px);
}
.our-work-card.is-covered .our-work-media { background: none; }   /* under the full lime, see js/our-work.js */
.our-work-card.is-covered .our-work-photo,
.our-work-card.is-covered .our-work-media::after { visibility: hidden; }
.our-work-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.our-work-name {
  margin: 0;
  font: 500 var(--name)/.89 var(--font-display);
  letter-spacing: -.05em;
}
.our-work-desc {          /* above the title, hidden until the card is revealed */
  order: -1;
  max-width: 24em;
  margin: 0 0 calc(var(--name) * .5);
  color: var(--forest);
  font: 400 clamp(16px, 1.45vw, 28px)/1.18 var(--font-display);
  letter-spacing: -.01em;
  opacity: 0;
}
/* without the script, hovering and focus still reveal the card, in one step */
.our-work:not(.is-scripted) .our-work-card:is(:hover, :focus-visible) .our-work-wash { clip-path: circle(150% at calc(100% - 24px) 24px); }
.our-work:not(.is-scripted) .our-work-card:is(:hover, :focus-visible) :is(.our-work-name, .our-work-desc) { color: var(--forest); opacity: 1; }
/* touch screens: nothing to hover, so each description shows with its title, just below the photo,
   where it covers none of the fisherman's hands or the vest's logo */
@media (hover: none) {
  .our-work-card {
    display: grid;
    align-content: start;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
  }
  .our-work-media {
    position: relative;
    grid-area: 1 / 1;
    aspect-ratio: 722 / 730;
    border-radius: 24px;
  }
  .our-work-text { display: contents; }
  .our-work-name {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    z-index: 1;
    padding: 0 28px 40px;
  }
  .our-work-desc {
    grid-area: 2 / 1;
    margin: 16px 0 0;
    opacity: 1;
  }
  .our-work .our-work-wash { display: none; }
}
/* the header over the white sections (only seen without the scroll story, which hides it), unless the
   phone's menu is open on its navy */
.header.is-on-light:not(.is-menu-open, .is-compact) { color: var(--forest); }
.header.is-on-light:not(.is-menu-open, .is-compact) .cta-arrow { background: var(--forest); color: var(--white); }
.header.is-on-light:not(.is-menu-open, .is-compact) .logo img { filter: brightness(.16); }

/* until js/story.js reveals them, the story's later parts wait unseen on the stage */
.story-motion .vision,
.story-motion .ocean {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}
.story-motion .vision {
  z-index: 2;
  bottom: auto;
  height: 100vh;
  height: 100svh;         /* the words stay in the middle of what shows above a phone's toolbar */
}
.story-motion .ocean { position: absolute; overflow: visible; z-index: auto; }
.story-motion .vision-art { display: none; }
.story-motion .vision-veil,
.story-motion .vision-copy,
.story-motion .ocean-photo,
.story-motion .ocean-shade,
.story-motion .ocean-statement,
.story-motion .topic { opacity: 0; }
.story-motion .ocean-line { opacity: 0; }
/* the paragraph, until js/story.js has split it into its lines (which then come in one by one) */
.story-motion .ocean-text:not(.is-split) { visibility: hidden; }
.story-motion .ocean-blur { display: block; }
.story-motion .ocean.is-live .ocean-live { display: block; }
.story-motion .ocean.is-live .ocean-frame { visibility: hidden; }
.story-motion .ocean:not(.is-ready) .topic-mark { pointer-events: none; }
.story-motion .vision-copy,
.story-motion .ocean-statement,
.story-motion .ocean-line,
.story-motion .topic,
.story-motion .ocean-frame { will-change: transform, opacity; }
.story-motion .vision-veil,
.story-motion .ocean-shade { will-change: opacity; }

/* What we do on the stage (wide screens, put there by js/story.js): above the ocean, unseen until
   the story brings it in */
.story-motion .work.is-staged {
  position: absolute;
  inset: 0;
  z-index: 7;
  min-height: 0;
  pointer-events: none;
}
.story-motion .work.is-staged :is(.work-photo, .work-boat, .work-title, .work-card, .work-list) { opacity: 0; }
/* the card and the activities grow in from a line at 77% of the screen's height, as in Alethia's */
.story-motion .work.is-staged .work-card { transform-origin: 50% 69%; }
.story-motion .work.is-staged .work-list { transform-origin: 50% 137%; }
.story-motion .work.is-staged:not(.is-ready) .work-content > * { pointer-events: none; }
.story-motion .work.is-live .work-live { display: block; }
.story-motion .work.is-live .work-frame { visibility: hidden; }
.story-motion .work.is-staged :is(.work-frame, .work-boat, .work-title, .work-card, .work-list) { will-change: transform, opacity; }
.story-motion .work.is-staged :is(.work-photo, .work-murk) { will-change: opacity; }

/* tall screens: the same story, set for a phone */
@media (max-width: 719px), (max-aspect-ratio: 23 / 20) {
  .vision-art svg { width: 111%; }
  .vision-half--upper { transform: translateY(-436px); }
  .vision-half--lower { transform: translateY(436px); }
  .vision-title { font-size: clamp(34px, 9.4vw, 64px); margin-top: 28px; }
  .vision-text { font-size: clamp(16px, 4.4vw, 24px); margin-top: 28px; }
  .vision-label { font-size: 12px; }
  .ocean-statement { left: 20px; top: 92px; font-size: 12px; }
  .ocean-text {
    left: 20px;
    right: 20px;
    top: 150px;
    width: auto;
    font-size: clamp(22px, 6.4vw, 34px);
    line-height: 1;
  }
  .topic-label { font-size: 11px; }
}

/* tall screens, and screens too short for the card beside the activities (js/story.js stages What we
   do on neither) */
@media (max-width: 719px), (max-aspect-ratio: 23 / 20), (max-height: 539px) {
  /* the story ends with the ocean; What we do follows it as a section of its own, in one column:
     the photo and the pirogue stay on the screen while the heading, the card and the activities
     scroll over them */
  .story-motion .story {
    height: calc(100vh + 150vh);
    height: calc(100lvh + 150svh);
  }
  .work {
    display: grid;
    min-height: 0;
    overflow: visible;    /* lets the scene stick */
  }
  .work-backdrop {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .work-boat { top: max(25%, 230px); height: 72%; left: 56%; }   /* below the heading */
  .work-content {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 96px max(20px, calc(50% - 280px)) 80px;   /* one column, 560 px at most */
  }
  .work-title,
  .work-card,
  .work-list {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .work-title { font-size: clamp(26px, min(7vw, 9svh), 40px); margin-bottom: 30vh; margin-bottom: 30svh; }
  .work-card { min-height: 0; }
  .work-chart { flex-basis: 96px; }
  .work-list { translate: none; }
}

/* What we do on phones, as on Alethia's phone site (Marianne's recording): no card, and in portrait
   js/story.js brings it onto the stage after all (PHONE there). The heading, then one wide column of
   activities 16 px from the edges, centred on the screen together, so that they re-centre as a row
   opens and closes; the pirogue upright in the middle behind them, its top hidden by the rows and its
   foot showing below them. The story then holds the stage for the screen Our work slides up over. */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .work-card { display: none; }
  /* the stage, 580 steps (LENGTH.phone), and the screen it holds (--hold, above) */
  .story-motion .story.is-holding { height: calc(100vh + var(--hold) + 193.33vh); }
  @supports (height: 100lvh) {
    .story-motion .story.is-holding { height: calc(100lvh + var(--hold) + 193.33svh); }
  }
  .story-motion .work.is-staged { display: block; overflow: hidden; }
  .story-motion .work.is-staged .work-backdrop { position: absolute; inset: 0; height: auto; }
  .story-motion .work.is-staged .work-boat { left: 50%; top: 40%; height: 56%; }
  .story-motion .work.is-staged .work-content {
    position: absolute;
    inset: 0;
    justify-content: center;
    gap: 0;
    padding: 24px 16px;
  }
  .story-motion .work.is-staged .work-title { margin: 0 0 24px; }
  .story-motion .work.is-staged .work-list {
    --t: clamp(14px, 3.75vw, 16px);
    gap: 4px;
    transform-origin: 50% 113%;   /* the rows grow in from just below them */
  }
  .story-motion .work.is-staged .work-button { padding-block: calc(var(--t) * 1.1); }
  /* darker glass, as Alethia's rows, for the sunlit sand; the open row stays lime */
  .story-motion .work.is-staged .work-item:not(.is-open) .work-button { background: rgb(14 30 44 / .34); }
  .story-motion .work.is-staged .work-item:not(.is-open) .work-button:hover { background: rgb(14 30 44 / .5); }
  .story-motion .work.is-staged .work-panel p { font-size: 14px; }
}

/* Our work on phones: the heading wraps freely and the cards stack */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .our-work { padding: 64px 20px; }
  .our-work-label { font-size: 12px; }
  .our-work-title { margin-top: 32px; font-size: clamp(30px, 8.6vw, 44px); line-height: .96; text-wrap: balance; }
  .our-work-title br { display: none; }
  .our-work-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
  .our-work-card {          /* the photos' own shape: nothing cut, the title clear of the hands and the logo */
    --name: clamp(24px, 7.4vw, 34px);
    aspect-ratio: 3 / 4;
    padding: 22px 20px 24px;
    border-radius: 20px;
  }
  .our-work-desc { font-size: clamp(15px, 4.2vw, 18px); }
}
/* the French heading keeps its three lines (Protéger notre océan. / Soutenir celles et ceux / qui
   façonnent leur avenir.), a little smaller on phones so that the longest fits */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  html[lang="fr"] .our-work-title br { display: inline; }
}
@media (max-width: 719px) {
  html[lang="fr"] .our-work-title { font-size: clamp(26px, 8.2vw, 44px); }
}
@media (max-width: 719px) and (hover: none), (orientation: portrait) and (max-width: 1100px) and (hover: none) {
  .our-work-card { aspect-ratio: auto; padding: 0; border-radius: 0; }
  .our-work-media { aspect-ratio: 3 / 4; border-radius: 20px; }
  .our-work-name { padding: 0 20px 24px; }
  .our-work-desc { margin-top: 12px; }
}

/* Our expertise: Alethia's technology scenes, on black. An introduction in large centred type; the
   disciplines on the left beside a fish whose four labels are joined to it by fine lines; knowledge
   sharing on the right beside net-mending hands and two panels of global figures; and a closing
   statement over a dimmed pirogue. Each scene fills the screen. On wide screens with motion
   js/expertise.js adds .is-staged: the fish, the hands and the pirogue then stay on the screen (sticky
   over the whole section) while the words scroll past, and the script brings each in and out at
   Alethia's points. In the one column of tall and narrow screens it adds .is-revealing instead, and the
   panels play their entrance as they come into view. Sizes are Alethia's on a 1520 px wide screen. */
@property --ex-in { syntax: "<number>"; inherits: false; initial-value: 1; }

.expertise {
  --big: clamp(40px, 4.737vw, 96px);    /* the introduction's and the closing headlines: 72 px */
  --head: clamp(26px, 2.664vw, 54px);   /* the side scenes' headlines: 40.5 px */
  --text: clamp(17px, 1.6vw, 30px);     /* paragraphs: 24.3 px */
  --gap: clamp(22px, 2.05vw, 40px);     /* from a label to its headline, and on to the paragraph and the button */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100%;
  overflow-x: clip;
  background: #000000;
  color: var(--white);
}

/* the words of each scene, over its picture */
.ex-scene {
  grid-column: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px var(--pad);
}
.ex-intro { grid-row: 1; align-items: center; text-align: center; }
.ex-fields { grid-row: 2; padding-right: 55.7%; }                   /* a column on the left, 646 px */
.ex-sharing { grid-row: 3; padding-left: 58.7%; padding-right: 5.4%; } /* and on the right, 546 px */
.ex-closing { grid-row: 4; align-items: center; text-align: center; }

.ex-big {
  margin: var(--gap) 0 0;
  font: 500 var(--big)/.955 var(--font-display);
  letter-spacing: -.043em;
}
.ex-head {
  margin: var(--gap) 0 0;
  font: 500 var(--head)/.948 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ex-text {
  margin: var(--gap) 0 0;
  font: 400 var(--text)/1 var(--font-display);
  letter-spacing: -.03em;
}
.ex-intro .ex-text { max-width: 34vw; margin-top: calc(var(--gap) * 1.29); }
.ex-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.ex-btn {
  margin-top: var(--gap);
  background: #000000;
  border-color: rgb(255 255 255 / .18);
}
.ex-btn .btn-arrow { background: var(--lime); color: var(--lime-ink); }

/* the pictures: each the size of the screen, in its scene; staged, over the whole section */
.ex-figure {
  grid-column: 1;
  align-self: start;
  position: relative;
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.ex-fish { grid-row: 2; }
.ex-hands { grid-row: 3; }
.ex-boat { grid-row: 4; }

/* the fish on the right, sized by the fish itself, as tall as most of the screen */
.ex-fish-body {
  position: absolute;
  left: 72.4%;
  top: 8.5%;
  height: 87%;
  aspect-ratio: 383 / 1057;
  translate: -50% 0;
}
.ex-fish-body img { display: block; width: 100%; height: 100%; }

/* its disciplines: Alethia's small grey labels, each joined by a fine line to a lime point on the fish */
.ex-callouts { --reach: 64px; margin: 0; padding: 0; list-style: none; }
.ex-callout { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.ex-callout::before {
  content: "";
  position: absolute;
  left: -4.8px;
  top: -4.8px;
  width: 9.6px;
  height: 9.6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6.2px rgb(199 250 158 / .3);
}
.ex-callout::after {
  content: "";
  position: absolute;
  top: -.5px;
  width: calc(var(--reach) - 11px);
  height: 1px;
  background: rgb(255 255 255 / .42);
}
.ex-callout--left::after { right: 11px; }
.ex-callout--right::after { left: 11px; }
.ex-callout span {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  padding: 10.6px 12.8px 5.6px;
  border-radius: 5px;
  background: rgb(255 255 255 / .1);
  color: rgb(255 255 255 / .92);
  font: 500 12px/1.3 var(--font-data);
  text-transform: uppercase;
  white-space: nowrap;
}
.ex-callout--left span { right: var(--reach); }
.ex-callout--right span { left: var(--reach); }

/* the hands at the top left, from the screen's edge: big enough to read the shuttle and the knots, and
   no wider than half the screen. The photo's cut top and bottom fade into the black. */
.ex-hands-photo {
  position: absolute;
  left: 0;
  top: 5.5%;
  height: min(73%, 43.8vw);
  aspect-ratio: 1012 / 887;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
}
.ex-hands-photo img { display: block; width: 100%; height: 100%; }

/* the panels: Alethia's two overlapping cards over the lower part of the hands, on the net. The larger,
   frosted one holds its words in its left two thirds; the smaller, olive one comes over its right third,
   where only the range's empty track runs, a little lower down, as in Alethia's. */
.ex-panels {
  --p: clamp(12px, min(1.118vw, 2.34vh), 22px);   /* the titles, and the step the panels' sizes count in: 17 px */
  position: absolute;
  left: var(--pad);
  top: calc(5.5% + min(73%, 43.8vw) * .7);        /* 70% of the way down the hands */
  width: calc(var(--p) * 32.95);
  height: calc(var(--p) * 17.4);
}
.ex-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 0;
  opacity: calc(var(--ex-in) * var(--ex-out, 1));
}
.ex-panel > * { margin: 0; }
.ex-panel--range {
  left: 0;
  top: 0;
  width: calc(var(--p) * 23.5);
  height: 100%;
  padding: calc(var(--p) * 1.53) calc(var(--p) * 1.7) calc(var(--p) * 1.4);
  border-radius: calc(var(--p) * 1.5);
  background: rgb(55 55 55 / .4);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.ex-panel--share {
  --d: .2s;                          /* comes in after the larger one */
  left: calc(var(--p) * 16.8);
  top: calc(var(--p) * 4.1);
  width: calc(var(--p) * 16.15);
  padding: calc(var(--p) * 1.03) calc(var(--p) * .95) calc(var(--p) * 1.05);
  border-radius: calc(var(--p) * 1.03);
  background: rgb(54 55 43 / .94);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.ex-panel-title {
  font: 500 var(--p)/.95 var(--font-display);
  letter-spacing: -.005em;
}
.ex-panel--share .ex-panel-title { font-weight: 600; font-size: calc(var(--p) * 1.07); }
.ex-panel-period {
  margin-top: calc(var(--p) * .6);
  font: 500 calc(var(--p) * .54)/1 var(--font-data);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .62);
}
.ex-panel-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .45em;
  margin-top: calc(var(--p) * 1.4);
}
.ex-panel--share .ex-panel-figure { margin-top: calc(var(--p) * .82); }
.ex-panel-number {
  font: 400 calc(var(--p) * 2.4)/1 var(--font-data);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ex-panel--share .ex-panel-number { font-size: calc(var(--p) * 2); }
.ex-panel-unit {
  font: 400 calc(var(--p) * .66)/1 var(--font-data);
  color: rgb(255 255 255 / .6);
}
.ex-panel-text {
  margin-top: calc(var(--p) * .55);
  font: 400 calc(var(--p) * .8)/1.3 var(--font-display);
  letter-spacing: -.005em;
  color: rgb(255 255 255 / .78);
}
.ex-panel--range .ex-panel-text { max-width: 17.6em; }   /* clear of the smaller panel */
.ex-panel-source {
  margin-top: auto;
  font: 400 calc(var(--p) * .6)/1.3 var(--font-data);
  color: rgb(255 255 255 / .55);
}

/* the range: a faint track from 16 to 26 million tonnes, the estimate's two ends joined by a white line
   and labelled below, and the lime tag above its middle */
.ex-range {
  --low: 30%;
  --high: 70%;
  position: relative;
  height: calc(var(--p) * 4.2);
  margin-top: calc(var(--p) * .35);
  font: 400 calc(var(--p) * .6)/1 var(--font-data);
}
.ex-range-track,
.ex-range-line,
.ex-range-end { position: absolute; top: 56%; }
.ex-range-track {
  left: 0;
  right: 0;
  border-top: 1px dashed rgb(255 255 255 / .28);
}
.ex-range-line {
  left: var(--low);
  width: calc(var(--high) - var(--low));
  margin-top: -.3px;
  border-top: 1.6px solid var(--white);
  transform-origin: 0 50%;
}
.ex-range-end { width: 0; height: 0; }
.ex-range-end--low { left: var(--low); }
.ex-range-end--high { left: var(--high); }
.ex-range-end::before {
  content: "";
  position: absolute;
  left: -3.6px;
  top: -3.6px;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: var(--white);
}
.ex-range-value {
  position: absolute;
  left: 0;
  top: calc(var(--p) * .62);
  translate: -50% 0;
  color: rgb(255 255 255 / .8);
}
.ex-range-tag {
  position: absolute;
  left: calc((var(--low) + var(--high)) / 2);
  bottom: calc(44% + var(--p) * .62);
  translate: -50% 0;
  padding: .45em .55em .38em;
  border-radius: 3px;
  background: var(--lime);
  color: var(--lime-ink);
  white-space: nowrap;
}

/* the share: a bar from 0 to 100%, lime over its first 85% and plain after, since 85% is a minimum */
.ex-share {
  margin-top: calc(var(--p) * .7);
  font: 400 calc(var(--p) * .6)/1 var(--font-data);
}
.ex-share-tag {
  display: block;
  width: fit-content;
  margin: 0 15% 0 auto;              /* its right edge over the 85% mark */
  padding: .45em .55em .38em;
  border-radius: 3px;
  background: var(--lime);
  color: var(--lime-ink);
  white-space: nowrap;
}
.ex-share-bar {
  position: relative;
  display: block;
  height: 5px;
  margin-top: 6px;
  border-radius: 2.5px;
  background: rgb(255 255 255 / .16);
  overflow: hidden;
}
.ex-share-fill {
  position: absolute;
  inset: 0 15% 0 0;
  background: var(--lime);
  transform-origin: 0 50%;
}
.ex-share-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: rgb(255 255 255 / .55);
}
.ex-panel--share .ex-panel-source { margin-top: calc(var(--p) * .7); }

/* the pirogue, across the middle of the screen behind the closing statement, dimmed so the words stay clear */
.ex-boat img {
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(78vw, 200vh);
  height: auto;
  translate: -50% -50%;
  opacity: .3;
}

/* staged (js/expertise.js): the pictures stay on the screen over the whole section, and each scene takes
   Alethia's share of the scroll, its label 19% down the screen as it starts */
.expertise.is-staged .ex-figure { grid-row: 1 / -1; position: sticky; top: 0; }
/* the pirogue a little below the middle of the closing headline where it comes to rest, on any screen: the
   labels' top 33.78% down, their height, the gap, the headline's first line (.955 of its size) and .425 more */
.expertise.is-staged .ex-boat img { top: calc(33.78% + 23.5px + var(--gap) + 1.38 * var(--big)); }
.expertise.is-staged .ex-scene { justify-content: flex-start; min-height: 0; padding-top: 19.15vh; padding-bottom: 0; }
.expertise.is-staged .ex-intro { height: 111.07vh; }
.expertise.is-staged .ex-fields { height: 100.5vh; }
.expertise.is-staged .ex-sharing { height: 107.77vh; }
.expertise.is-staged .ex-closing { height: 85.37vh; }
.expertise.is-staged :is(.ex-fish-body, .ex-hands-photo, .ex-boat img) { opacity: 0; will-change: transform, opacity; }

/* the fish's labels come in one after another once it has settled, and go together */
.expertise.is-staged .ex-callout { opacity: 0; transition: opacity .2s; }
.expertise.is-staged .ex-fish.is-labelled .ex-callout { opacity: 1; transition: opacity .3s var(--d, 0s); }
.ex-callout:nth-child(2) { --d: .16s; }
.ex-callout:nth-child(3) { --d: .32s; }
.ex-callout:nth-child(4) { --d: .48s; }

/* the panels rise in one after the other once the hands are in (on tall screens, once they come into view),
   then their graphics draw: the range's ends and line, its tag, and the share's fill and tag. They go
   quickly, all together. */
.expertise:is(.is-staged, .is-revealing) .ex-panel {
  --ex-in: 0;
  translate: 0 calc(var(--p) * .9);
  transition: --ex-in .25s, translate .25s;
  will-change: opacity, transform;
}
.expertise:is(.is-staged, .is-revealing) .ex-hands.is-shown .ex-panel {
  --ex-in: 1;
  translate: none;
  transition: --ex-in .45s var(--d, 0s), translate .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
/* the graphics draw the same way in Our purpose's collage, where each panel plays them once it is on the
   screen (js/purpose.js) */
:is(.expertise:is(.is-staged, .is-revealing), .purpose.is-moving) :is(.ex-range-line, .ex-share-fill) { transition: transform .2s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel):not(.is-shown) :is(.ex-range-line, .ex-share-fill) { transform: scaleX(0); }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-range-line { transition: transform .5s cubic-bezier(.4, 0, .2, 1) .45s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-share-fill { transition: transform .6s cubic-bezier(.4, 0, .2, 1) .6s; }
:is(.expertise:is(.is-staged, .is-revealing), .purpose.is-moving) .ex-range-end::before { transition: scale .2s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel):not(.is-shown) .ex-range-end::before { scale: 0; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-range-end--low::before { transition: scale .3s cubic-bezier(.3, 1.5, .5, 1) .35s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-range-end--high::before { transition: scale .3s cubic-bezier(.3, 1.5, .5, 1) .88s; }
:is(.expertise:is(.is-staged, .is-revealing), .purpose.is-moving) :is(.ex-range-value, .ex-range-tag, .ex-share-tag, .ex-share-scale) { transition: opacity .2s, transform .2s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel):not(.is-shown) :is(.ex-range-value, .ex-range-tag, .ex-share-tag, .ex-share-scale) { opacity: 0; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel):not(.is-shown) :is(.ex-range-tag, .ex-share-tag) { transform: translateY(5px); }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown :is(.ex-range-value, .ex-share-scale) { transition: opacity .35s .5s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-range-tag { transition: opacity .3s .95s, transform .4s cubic-bezier(.2, .7, .2, 1) .95s; }
:is(.expertise:is(.is-staged, .is-revealing) .ex-hands, .purpose.is-moving .ex-panel).is-shown .ex-share-tag { transition: opacity .3s 1.1s, transform .4s cubic-bezier(.2, .7, .2, 1) 1.1s; }

/* tall screens, and screens too narrow or too short for the scenes side by side: one column, each scene's
   words and then its picture, the fish's disciplines below it and the panels under the hands */
@media (max-width: 959px), (max-aspect-ratio: 23 / 20), (max-height: 539px) {
  .expertise {
    --big: clamp(34px, 9.4vw, 64px);
    --head: clamp(28px, 7.4vw, 44px);
    --text: clamp(17px, 4.6vw, 24px);
    --gap: 24px;
  }
  .ex-scene { min-height: 0; padding: 96px 20px 0; }
  .ex-intro { padding-top: 112px; }
  .ex-fields,
  .ex-sharing { padding-left: max(20px, calc(50% - 300px)); padding-right: max(20px, calc(50% - 300px)); }
  .ex-intro .ex-text { max-width: 30em; }
  .ex-text { line-height: 1.12; }
  .ex-head { line-height: 1; }
  .ex-closing .ex-big br { display: none; }   /* its lines balance themselves, "Collective Action" kept whole */
  .ex-big { text-wrap: balance; }
  .ex-label { font-size: 12px; }

  .ex-fish { grid-row: 3; }
  .ex-sharing { grid-row: 4; }
  .ex-hands { grid-row: 5; }
  .ex-closing { grid-row: 6; min-height: 0; padding: 150px 20px 170px; justify-content: center; }
  .ex-boat { grid-row: 6; align-self: center; }
  .ex-figure { height: auto; overflow: visible; }

  .ex-fish-body {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    aspect-ratio: auto;
    translate: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px max(20px, calc(50% - 300px)) 0;
  }
  .ex-fish-body img { width: auto; height: min(124vw, 68svh); }
  .ex-callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 32px;
  }
  .ex-callout { position: static; width: auto; height: auto; display: flex; }
  .ex-callout::after { content: none; }
  .ex-callout::before { position: static; flex: none; margin: 15px 0 0 12px; translate: 0 -50%; order: 0; }
  .ex-callout span {
    position: static;
    flex: 1;
    translate: none;
    padding: 9px 10px 8px 12px;
    font-size: 11px;
    white-space: normal;
  }
  .ex-callout span br { display: none; }
  .ex-callout { border-radius: 5px; background: rgb(255 255 255 / .1); }
  .ex-callout span { background: none; }

  .ex-hands-photo {
    position: relative;
    top: auto;
    width: min(100%, 640px);
    height: auto;
    margin-top: 40px;
  }
  .ex-hands-photo img { height: auto; }
  .ex-panels {              /* the panels over the foot of the photo, the smaller one over the larger one's foot */
    --p: clamp(14px, 4.1vw, 18px);
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: -64px;
    padding: 0 max(20px, calc(50% - 300px));
  }
  .expertise .ex-panel { position: relative; left: auto; top: auto; width: auto; }
  .expertise .ex-panel--range { height: auto; }
  .expertise .ex-panel--range .ex-panel-text { max-width: none; }
  .expertise .ex-panel--range .ex-panel-source { margin-top: calc(var(--p) * .7); }
  .expertise .ex-panel--share { margin: -20px 0 0 16%; }

  .ex-boat img {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    translate: none;
  }
}
@media (max-width: 743px), (orientation: portrait) and (max-width: 1100px) {
  .ex-intro .ex-big br { display: none; }   /* the introduction keeps the wireframe's three lines where they fit */
}

/* Our expertise on phones, as Alethia's phone site scrolls through its technology (Marianne's
   recording): 16 px gutters; the introduction centred on black, about a screen tall; then each scene
   in turn, its lime label, words and button, and 40 px under them its picture in a place of its own:
   the fish upright in the middle with its four disciplines around it on solid labels, as Alethia's
   instrument and its labels, then the hands across the screen with the two panels over their foot.
   About 110 px from a picture to the next label. The closing statement is centred with the pirogue
   dimmed above it, its lower part behind the labels, and about 40% of a screen of black under it
   before Our purpose's white comes up. js/expertise.js (is-phone) fades each picture in as it comes
   up the screen and shows the fish's labels one after another. */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .expertise {
    --fish: min(420px, 108vw, 60svh);              /* the fish's height */
    --fw: calc(var(--fish) * 383 / 1057);          /* and its width */
    --boat-w: 120vw;                               /* the pirogue, its ends past the screen's edges */
    --boat-h: calc(var(--boat-w) * 599 / 1960);
    --gap: 22px;
  }
  .ex-scene { padding: 110px 16px 0; }
  .ex-intro { min-height: calc(100svh - 40px); padding: 64px 16px 40px; }
  .ex-fields,
  .ex-sharing { padding-left: 16px; padding-right: 16px; }
  .ex-btn { margin-top: 28px; }

  .ex-fish-body {
    display: block;
    width: var(--fw);
    height: var(--fish);
    margin: 40px auto 0;
    padding: 0;
  }
  .ex-fish-body img { width: 100%; height: 100%; }
  .ex-callouts { --reach: 18px; display: block; width: auto; margin: 0; }
  .ex-callout { position: absolute; display: block; width: 0; height: 0; border-radius: 0; background: none; }
  .ex-callout::before { position: absolute; margin: 0; translate: none; }
  .ex-callout::after { content: ""; }
  .ex-callout span {
    position: absolute;
    translate: 0 -50%;
    width: max-content;
    max-width: var(--room);   /* the room between its line and the screen's edge */
    padding: 7px 9px 5px;
    border-radius: 4px;
    background: #1c1c1c;
    font-size: 10.5px;
    letter-spacing: -.02em;
    white-space: normal;
  }
  .ex-callout--left span { right: var(--reach); }
  .ex-callout--right span { left: var(--reach); }
  /* each label's room, from its point on the fish (its x, in the markup) to the gutter */
  .ex-callout:nth-child(1) { --room: calc(50vw - 16px - var(--fw) * .435 - var(--reach)); }
  .ex-callout:nth-child(2) { --room: calc(50vw - 16px - var(--fw) * .401 - var(--reach)); }
  .ex-callout:nth-child(3) { --room: calc(50vw - 16px - var(--fw) * .2 - var(--reach)); }
  .ex-callout:nth-child(4) { --room: calc(50vw - 16px - var(--fw) * .009 - var(--reach)); }

  .ex-hands-photo { width: 100%; margin-top: 40px; }
  .ex-panels { padding: 0 16px; }

  .ex-closing { padding: calc(110px + var(--boat-h) - 44px) 16px 42svh; }   /* the pirogue's foot 44 px behind the labels */
  .ex-boat { align-self: start; padding-top: 110px; }
  .ex-boat img { width: var(--boat-w); max-width: none; margin-left: calc(50% - var(--boat-w) / 2); opacity: .32; }

  /* with js/expertise.js: the pictures come in as they come up the screen, the fish's labels after it */
  .expertise.is-phone :is(.ex-fish-body, .ex-hands-photo, .ex-boat img) { opacity: 0; will-change: transform, opacity; }
  .expertise.is-phone .ex-callout { opacity: 0; transition: opacity .2s; }
  .expertise.is-phone .ex-fish.is-labelled .ex-callout { opacity: 1; transition: opacity .3s var(--d, 0s); }
}

/* Our purpose: Alethia's floating collage, on white, as one full-width canvas. The message in the middle,
   in the flow; the five photos and the two cards each placed on their own around it, at the places and
   sizes measured in Alethia's recording when the message is readable: x as a share of the width, y in
   vw from the top of the OUR PURPOSE label, widths in vw. The photo and the card below the message hang
   from its foot instead, so Jappo's longer text always keeps them clear. Each photo is cropped to the
   shape of its frame in Alethia's and carries a small caption over its edge. With motion
   js/purpose.js adds .is-moving and moves the photos and cards as the page scrolls. */
.purpose {
  --u: calc(100vw / 1520);
  --head: max(26px, calc(40.5 * var(--u)));  /* the message's headline: 40.5 px */
  --text: max(15px, calc(20 * var(--u)));    /* and its paragraph: 20 px */
  --tag: 27.9vw;                             /* the label's top, below the section's top */
  --below: 29vw;                             /* the space under the message */
  position: relative;
  z-index: 2;             /* the lower photos drift over the line's section as they leave */
  overflow-x: clip;
  background: var(--white);
  color: var(--forest);
}
.purpose-collage {
  position: relative;
  padding: var(--tag) 0 var(--below);
}
.purpose-message {
  position: relative;
  z-index: 2;
  width: max(480px, calc(720 * var(--u)));
  max-width: calc(100% - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.purpose-title {
  margin: max(22px, calc(32 * var(--u))) 0 0;
  font: 500 var(--head)/.948 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;     /* two even lines across the message, as Alethia's, wherever they fit */
}
.purpose-text {
  max-width: max(420px, calc(652 * var(--u)));
  margin: max(18px, calc(27 * var(--u))) 0 0;
  font: 400 var(--text)/1.2 var(--font-display);
  letter-spacing: -.01em;
}

.purpose-item {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * 1%);
  top: calc(var(--tag) + var(--y) * 1vw);
  width: calc(var(--w) * 1vw);
  margin: 0;
}
.purpose-photo--hands,
.purpose-panel--share { top: calc(100% - var(--below) + var(--y) * 1vw); }
.purpose-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--frame);
  object-fit: cover;
  object-position: var(--crop, 50% 50%);
  border-radius: max(8px, calc(11 * var(--u)));
  -webkit-user-drag: none;
}
/* the places: Alethia's tower, sensor card and rice field above the message, the relief map and the grey
   sensor at its sides, and the leaf and the moss below it, the moss taken by the smaller card. Each
   photo has its frame's shape, cropped around its subject: the fishermen's hands and catch, the pirogue,
   the sandy channel, and the hands with the shuttle. */
.purpose-photo--fishing { --x: 5.5;  --y: -22;  --w: 16.2; --frame: 306 / 388; --crop: 50% 30%; }
.purpose-panel--range   { --x: 33.5; --y: -18;  --w: 15; }
.purpose-photo--beach   { --x: 55.5; --y: -24;  --w: 15;   --frame: 284 / 325; --crop: 50% 28%; }
.purpose-photo--water   { --x: 76.5; --y: -7;   --w: 15;   --frame: 283 / 250; --crop: 42% 50%; }
.purpose-photo--shell   { --x: 8.5;  --y: 5;    --w: 13;   --frame: 1; }
.purpose-photo--hands   { --x: 33;   --y: 4.2;  --w: 15;   --frame: 287 / 350; --crop: 0 50%; }
.purpose-panel--share   { --x: 72;   --y: 4.1;  --w: 13; }

/* the captions: Alethia's small white tags with a lime hexagon, over the edge of each photo near its foot,
   as her tag hangs over the tower's; toward the message from the outer photos and outward from the
   ones nearer it */
.purpose-caption {
  position: absolute;
  right: -25%;
  bottom: 13%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 7px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(18 33 17 / .06), 0 0 0 1px rgb(18 33 17 / .08);
  color: var(--forest);
  font: 500 max(10px, calc(11.5 * var(--u)))/1 var(--font-data);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.purpose-photo--beach .purpose-caption { right: -20%; }
.purpose-photo--water .purpose-caption { right: -16%; }
.purpose-photo--shell .purpose-caption,
.purpose-photo--hands .purpose-caption { right: auto; left: -20%; }
.purpose-caption::before {
  content: "";
  flex: none;
  width: 11px;
  height: 12px;
  background: #A6E86F;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* the cards: the ones of Our expertise, made compact like Alethia's sensor card, solid on the white, the
   larger one her dark green and the smaller one her olive. Their sentence is left to screen readers. */
.purpose .purpose-panel {
  --p: max(10px, .85vw);
  left: calc(var(--x) * 1%);
  width: calc(var(--w) * 1vw);
  height: auto;
  z-index: 1;
  padding: calc(var(--p) * 1.05) calc(var(--p) * 1.1) calc(var(--p) * .95);
  border-radius: calc(var(--p) * .8);
  color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.purpose .ex-panel--range { background: #132514; }
.purpose .ex-panel--share { z-index: 2; background: #36382A; }
.purpose .ex-panel-period { margin-top: calc(var(--p) * .45); font-size: max(7px, calc(var(--p) * .56)); }
.purpose .ex-panel-figure { margin-top: calc(var(--p) * .9); }
.purpose .ex-panel-number { font-size: calc(var(--p) * 2); }
.purpose .ex-panel-unit { font-size: max(7px, calc(var(--p) * .62)); }
.purpose .ex-panel-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.purpose .ex-range { height: calc(var(--p) * 3.4); margin-top: calc(var(--p) * .2); font-size: max(7px, calc(var(--p) * .58)); }
.purpose .ex-share { margin-top: calc(var(--p) * .7); font-size: max(7px, calc(var(--p) * .58)); }
.purpose .ex-share-bar { height: 4px; }
.purpose .ex-panel-source { margin-top: calc(var(--p) * .55); font-size: max(7px, calc(var(--p) * .54)); }
.purpose.is-moving .purpose-item { will-change: transform; }

/* From knowledge to action: the line drawn down from the collage to its hexagon, the statement, and the
   four commitments in two rows of two, centred. The line draws as the page scrolls (js/purpose.js). */
.action {
  --u: calc(100vw / 1520);
  --card: #F3F4F1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(30 * var(--u)) var(--pad) calc(250 * var(--u));
  background: var(--white);
  color: var(--forest);
}
.action-link {
  position: relative;
  width: 14px;
  height: calc(198 * var(--u));
}
.action-line {
  position: absolute;
  left: 6.25px;
  top: 0;
  bottom: 12px;
  width: 1.5px;
  background: var(--forest);
  transform-origin: 50% 0;
}
.action-end {
  position: absolute;
  left: 0;
  bottom: 0;
  fill: var(--forest);
}
.action.is-linked .action-end { scale: 0; transition: scale .2s; }
.action.is-linked.is-ended .action-end { scale: 1; transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.action-title {
  margin: calc(122 * var(--u)) 0 0;
  font: 500 max(30px, calc(62.5 * var(--u)))/.985 var(--font-display);
  letter-spacing: -.042em;
  text-align: center;
  text-wrap: balance;
}
.action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 21px;
  width: min(100%, calc(1214 * var(--u)));
  margin: calc(116 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.action-card {
  display: flex;
  align-items: center;
  gap: max(22px, calc(32 * var(--u)));
  min-width: 0;
  padding: 20px max(22px, calc(32 * var(--u))) 20px 20px;
  border-radius: 24px;
  background: var(--card);
}
.action-num {
  flex: none;
  display: grid;
  place-items: center;
  width: max(48px, calc(56 * var(--u)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  color: var(--forest);
  font: 400 max(17px, calc(20 * var(--u)))/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.action-words { min-width: 0; }
.action-name {
  margin: 0;
  font: 500 max(20px, calc(23.5 * var(--u)))/1 var(--font-display);
  letter-spacing: -.03em;
}
.action-desc {
  margin: max(6px, calc(8 * var(--u))) 0 0;
  color: rgb(18 33 17 / .74);
  font: 400 max(15px, calc(18 * var(--u)))/1.28 var(--font-display);
  letter-spacing: -.01em;
}

/* Our activities: Alethia's case studies, on white. The label, heading and a short paragraph; the two
   round arrows at the right above the carousel; and the large rounded cards, one at a time with the
   next one showing at the right edge, the photo on the left and the words on the right. Over each photo
   the lime circle of Our work grows from the top right corner with the activity's description on it
   (js/activities.js). */
.activities {
  --u: calc(100vw / 1520);
  --card: #F3F4F1;
  position: relative;
  z-index: 1;
  padding: 66px var(--pad) calc(140 * var(--u));
  overflow-x: clip;
  background: var(--white);
  color: var(--forest);
}
.activities-title {
  margin: 49px 0 0;
  font: 500 clamp(34px, 3.76vw, 76px)/.94 var(--font-display);
  letter-spacing: -.05em;
}
.activities-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: max(26px, calc(36 * var(--u)));
}
.activities-text {
  max-width: 33em;
  margin: 0;
  color: rgb(18 33 17 / .74);
  font: 400 max(16px, calc(20 * var(--u)))/1.25 var(--font-display);
  letter-spacing: -.01em;
}
.activities-arrows {
  flex: none;
  display: flex;
  gap: 16px;
}
.activities-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: none;
  color: rgb(32 32 29);
  cursor: pointer;
  transition: color .2s;
}
.activities-arrow:disabled { color: rgb(182 180 178); cursor: default; }
.activities-arrow:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.activities-carousel {
  position: relative;
  margin: 24px calc(-1 * var(--pad)) 0;
  overflow: hidden;
}
.activities-track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.activities-track.is-sliding { transition: transform .65s cubic-bezier(.62, 0, .3, 1); }
.activity { flex: none; width: 90%; min-width: 0; }
.activity-card {
  display: grid;
  grid-template-columns: minmax(0, 581.6fr) minmax(0, 692fr);
  gap: 20px;
  height: 100%;
  padding: 20px;
  border-radius: 32px;
  background: var(--card);
}
.activity-media {
  position: relative;
  aspect-ratio: 581.6 / 509.6;
  max-height: calc(100vh - 150px);
  max-height: calc(100svh - 150px);
  min-height: 300px;
  overflow: hidden;
  border-radius: 12px;
  background: #23343a;     /* until the photo loads */
  isolation: isolate;
}
.activity-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.activity-photo--cleanup { object-position: 50% 35%; }     /* the volunteers, the sacks and waste, the sea behind */
.activity-photo--gathering { object-position: 50% 28%; }   /* the speaker, the residents and the vest's logo */
.activity-photo--class { object-position: 50% 43%; }       /* the woman helping, the students and their papers */
.activity-photo--conference { object-position: 6% 50%; }   /* the audience, the screen and the hall */
.activity-wash {          /* the lime circle, grown from the top right corner by js/activities.js */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--lime);
  clip-path: circle(0 at calc(100% - 12px) 12px);
}
.activity-media.is-covered { background: none; }
.activity-media.is-covered .activity-photo { visibility: hidden; }
.activity-desc {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 21em;
  margin: 0;
  padding: max(22px, calc(28 * var(--u)));
  color: var(--forest);
  font: 400 max(18px, calc(26 * var(--u)))/1.15 var(--font-display);
  letter-spacing: -.02em;
  opacity: 0;
  pointer-events: none;
}
.activity-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.activity-toggle:focus { outline: none; }
.activity-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.activity-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 20px 20px 20px 0;
}
.activity-title {
  max-width: 15em;
  margin: max(14px, calc(18 * var(--u))) 0 0;
  font: 500 max(26px, calc(40 * var(--u)))/.96 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.activity-place {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: auto 0 0;
  padding-top: 24px;
}
.activity-place-name { font: 600 max(16px, calc(17.5 * var(--u)))/1.1 var(--font-display); letter-spacing: -.01em; }
.activity-place-label {
  color: rgb(18 33 17 / .55);
  font: 400 max(12px, calc(13.6 * var(--u)))/1 var(--font-data);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.activities-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* without the script, hovering and focus still show the description, in one step */
.activities:not(.is-scripted) .activity-media:is(:hover, :focus-within) .activity-wash { clip-path: circle(150% at calc(100% - 12px) 12px); }
.activities:not(.is-scripted) .activity-media:is(:hover, :focus-within) .activity-desc { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .activities-track.is-sliding { transition-duration: .01s; }
}
/* between 760 and 959 px wide the photo's least height (300 px) made it wider than its column, over the
   start of the words beside it, in French and in English; it keeps to its column, its photo cropped to fit */
@media (min-width: 760px) and (max-width: 959px) and (orientation: landscape) {
  .activity-media { justify-self: stretch; }
}

/* phones: the collage closes in above and below the message, in a column at most 640 px wide, each photo
   and card still placed on its own, counted in px of a 390 px wide phone (--v): those above from the
   top of the section, those below from the foot of the message. The cards overlap a photo's top or its
   open net, never a caption. Tablets in portrait take this too: below 900 px the photos round the
   message would come too close to it. */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1100px) {
  .purpose {
    --v: calc(min(100vw, 640px) / 390);
    --head: clamp(28px, 7.2vw, 40px);
    --text: clamp(16px, 4.1vw, 19px);
    --tag: calc(64px + 364 * var(--v));
    --below: calc(352 * var(--v) + 32px);
  }
  .purpose-collage {
    max-width: 640px;
    margin: 0 auto;
  }
  .purpose-message {
    width: auto;
    max-width: none;
    padding: 44px 20px 48px;
  }
  .purpose-text { max-width: 30em; }
  .purpose .purpose-item {
    left: calc(var(--mx) * var(--v));
    top: calc(64px + var(--my) * var(--v));
  }
  .purpose :is(.purpose-photo--shell, .purpose-photo--water, .purpose-photo--hands, .purpose-panel--share) {
    top: calc(100% - var(--below) + var(--my) * var(--v));
  }
  .purpose .purpose-photo { width: calc(var(--mw) * var(--v)); }
  .purpose-photo img { aspect-ratio: var(--whole); }   /* each photo whole, not in Alethia's frames */
  .purpose .purpose-panel { --p: max(9px, calc(9 * var(--v))); }
  .purpose .ex-panel--range { width: calc(var(--p) * 19); }
  .purpose .ex-panel--share { width: calc(var(--p) * 16); }
  .purpose-panel--range   { --mx: 176; --my: 0; }
  .purpose-photo--fishing { --mx: 16;  --my: 28;  --mw: 150; --whole: 600 / 900; }
  .purpose-photo--beach   { --mx: 206; --my: 140; --mw: 144; --whole: 640 / 960; }
  .purpose-photo--shell   { --mx: 16;  --my: 0;   --mw: 150; --whole: 1; }
  .purpose-photo--water   { --mx: 182; --my: 36;  --mw: 192; --whole: 1816 / 866; }
  .purpose-photo--hands   { --mx: 16;  --my: 172; --mw: 200; --whole: 1012 / 887; }
  .purpose-panel--share   { --mx: 196; --my: 190; }
  .purpose .purpose-photo .purpose-caption { left: 7px; right: auto; bottom: 7px; gap: 6px; padding: 5px 7px 5px 6px; border-radius: 5px; font-size: 9.5px; }
  .purpose-caption::before { width: 9px; height: 10px; }
}

/* the line, the statement and the commitments on narrower screens: one commitment a row */
@media (max-width: 959px), (orientation: portrait) and (max-width: 1100px) {
  .action { padding: 24px 20px 120px; }
  .action-link { height: 128px; }
  .action-title { margin-top: 72px; font-size: clamp(30px, 6.4vw, 48px); line-height: 1; }
  .action-list { grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 640px); margin-top: 64px; }
  .action-card { padding: 18px 20px 18px 18px; border-radius: 20px; gap: 18px; }
}
@media (max-width: 559px), (orientation: portrait) and (max-width: 1100px) {
  .action-title br { display: none; }
  .action-card { align-items: flex-start; }
}

/* the activities on phones: the label and heading as in Our work, the paragraph over the arrows, and
   one card at a time, its photo above its words */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .activities { padding: 64px 20px 96px; }
  .activities-label { font-size: 12px; }
  .activities-title { margin-top: 32px; font-size: clamp(30px, 8.6vw, 44px); line-height: .96; text-wrap: balance; }
  .activities-title br { display: none; }
  .activities-bar { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 20px; }
  .activities-arrows { justify-content: flex-end; gap: 12px; }
  .activities-arrow { width: 44px; height: 44px; }
  .activities-carousel { margin: 16px -20px 0; }
  .activities-track { gap: 16px; padding: 0 20px; }
  .activity { width: 100%; }
  .activity-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 12px;
    border-radius: 24px;
  }
  .activity-media { aspect-ratio: 4 / 3.4; min-height: 0; max-height: none; border-radius: 14px; }
  .activity-text { padding: 20px 10px 12px; }
  .activity-title { font-size: clamp(24px, 6.6vw, 30px); }
  .activity-place { padding-top: 20px; }
  .activity-desc { padding: 20px; font-size: clamp(17px, 4.6vw, 21px); }
}

/* read by screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Our president: Alethia's founders, on white, for one person. The label and the large heading of Our
   work, then two columns of the same height with a narrow gutter: the portrait, its corners rounded,
   with the name and role over its foot and a light shade under them, and a white column outlined
   finely with the biography and the statement at its foot. Nothing in it moves, opens or reacts to the
   pointer. Sizes are Alethia's on a 1520 px wide screen. */
.president {
  --u: calc(100vw / 1520);
  position: relative;
  z-index: 1;
  padding: 66px var(--pad) 67px;
  background: var(--white);
  color: var(--forest);
}
.president-title {
  margin: 49px 0 0;
  font: 500 clamp(34px, 3.76vw, 76px)/.94 var(--font-display);
  letter-spacing: -.05em;
}
.president-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 81px;
}
.president-portrait {
  position: relative;
  align-self: stretch;     /* as tall as the column beside it if its words need more */
  aspect-ratio: 903 / 866;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #3a4a5c;     /* until the photo loads */
}
.president-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 13%;   /* the top of his head, his face, the hand with the pen and the other on his arm */
}
.president-portrait::after {   /* a light shade under the name */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(8 12 24 / .5), rgb(8 12 24 / .18) 22%, rgb(8 12 24 / 0) 38%);
}
.president-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(8px, calc(9 * var(--u)));
  padding: 0 32px 32px;
  color: var(--white);
}
.president-name {
  font: 600 max(24px, calc(33 * var(--u)))/1 var(--font-display);
  letter-spacing: -.02em;
}
.president-role {
  font: 500 max(12px, calc(14 * var(--u)))/1 var(--font-data);
  text-transform: uppercase;
}
.president-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* the words toward the foot, as Alethia's biography */
  gap: max(17px, calc(24 * var(--u)));
  min-width: 0;
  padding: max(28px, calc(40 * var(--u)));
  border: 1px solid rgb(18 33 17 / .14);
  border-radius: 24px;
  font: 400 max(17px, calc(24 * var(--u)))/1 var(--font-display);
  letter-spacing: -.03em;
}
.president-text p { margin: 0; }
.president-quote {
  margin: max(17px, calc(24 * var(--u))) 0 0;   /* a clear line between the biography and the statement */
  font-weight: 600;
  letter-spacing: -.04em;
}
.president-reveal,
.president-card-name,
.president-toggle { display: none; }   /* the phone card's (below) */
/* from 760 px wide, where the biography and statement need more height than the photo (the French
   always, the English on narrower screens), the portrait keeps the width of its column and grows taller with them, its photo cropped to
   fit, instead of widening over the start of their lines */
@media (min-width: 760px) and (orientation: landscape), (min-width: 1101px) {
  .president-portrait { justify-self: stretch; }
}

/* Understand: Alethia's latest news, on a light band so its white cards show. The label and heading on
   the left; View all on the right, with Alethia's small lime square, just above three cards of the
   same size. Each card is one link: its photo set inside it with rounded corners and the topic over
   its top left corner, the title, a short description and Read more at its foot. Hovering a card
   enlarges its photo a little and moves the arrow on. */
.understand {
  --u: calc(100vw / 1520);
  position: relative;
  z-index: 1;
  padding: 66px var(--pad) 88px;
  background: #F3F4F1;
  color: var(--forest);
}
.understand-title {
  margin: 49px 0 0;
  font: 500 clamp(34px, 3.76vw, 76px)/.94 var(--font-display);
  letter-spacing: -.05em;
}
.understand-all {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin: 56px 0 0 auto;
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.understand-all-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--lime);
  color: var(--lime-ink);
  transition: transform .2s;
}
.understand-all:hover .understand-all-arrow { transform: translateX(3px); }
.understand-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.understand-cards > li { display: flex; min-width: 0; }
.explainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  border-radius: 24px;
  background: var(--white);
}
.explainer-media {
  position: relative;
  aspect-ratio: 436 / 298;
  overflow: hidden;
  border-radius: 12px;
  background: #23343a;     /* until the photo loads */
  isolation: isolate;
}
.explainer-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);   /* the photo's subject, where set on it */
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.explainer-topic {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 1;
  padding: 7px 13px 6px;
  border-radius: 99px;
  background: rgb(14 18 24 / .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white);
  font: 600 14px/1 var(--font-data);
  text-transform: uppercase;
}
.explainer-words {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 13px 14px;
}
.explainer-title {
  margin: max(22px, calc(29 * var(--u))) 0 0;
  font: 600 max(24px, calc(32 * var(--u)))/.95 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.explainer-desc {
  margin: max(14px, calc(18 * var(--u))) 0 0;
  color: rgb(18 33 17 / .8);
  font: 400 max(16px, calc(18 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.01em;
}
.explainer-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: max(32px, calc(48 * var(--u)));
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
}
.explainer-more svg { display: block; transition: transform .2s; }
.explainer:hover .explainer-media img,
.explainer:focus-visible .explainer-media img { transform: scale(1.04); }
.explainer:hover .explainer-more svg,
.explainer:focus-visible .explainer-more svg { transform: translateX(3px); }
.understand a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .explainer-media img { transition: none; }
  .explainer:hover .explainer-media img,
  .explainer:focus-visible .explainer-media img { transform: none; }
}

/* Soon: the coming activities, as in Marianne's wireframe, on white. The label and a short line, a thin
   rule, then a spacious row for each activity, with a fine line under it: the date in small mono type,
   the name in heavier type with its place, and an outlined Take part at the right. */
.soon {
  --u: calc(100vw / 1520);
  position: relative;
  z-index: 1;
  padding: 88px var(--pad) 120px;
  background: var(--white);
  color: var(--forest);
}
.soon-text {
  margin: 20px 0 0;
  color: rgb(18 33 17 / .74);
  font: 400 max(16px, calc(20 * var(--u)))/1.25 var(--font-display);
  letter-spacing: -.01em;
}
.soon-list {
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--forest);
  list-style: none;
}
.soon-item {
  display: grid;
  grid-template-columns: minmax(170px, 17%) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: max(84px, calc(100 * var(--u)));
  padding: 18px 0;
  border-bottom: 1px solid rgb(18 33 17 / .16);
}
.soon-date {
  margin: 0;
  color: rgb(18 33 17 / .8);
  font: 400 max(15px, calc(16 * var(--u)))/1 var(--font-data);
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.soon-what {
  margin: 0;
  font: 400 max(18px, calc(22 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.02em;
}
.soon-name { font-weight: 600; }
.soon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--forest);
  border-radius: 6px;
  font: 700 15px/1 var(--font-label);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.soon-button:hover { border-color: var(--lime); background: var(--lime); color: var(--lime-ink); }
.soon a:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* The footer, on the hero's navy: Alethia's. The invitation in the middle, its heading large in lime with
   Together. heavier, the words under it and Contact us in lime with a dark arrow; the name, Jappo above
   Ocean as in the logo, as wide as the page; then a fine line, where we are on the left, the links in
   three groups, the copyright and Back to top. Everything simply scrolls. Sizes are Alethia's on a
   1520 px wide screen. */
.footer {
  --u: calc(100vw / 1520);
  position: relative;
  z-index: 1;
  padding: 0 var(--pad) 26px;
  overflow-x: clip;
  background: var(--navy);
  color: var(--lime);
  container-type: inline-size;   /* the name is sized on the footer's width (cqw) */
}
.footer-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 198px;
  text-align: center;
}
.footer-title {
  margin: 0;
  font: 500 clamp(40px, 4.737vw, 96px)/.955 var(--font-display);
  letter-spacing: -.043em;
  text-wrap: balance;
}
.footer-title strong { font-weight: 700; }   /* Together., heavier */
.footer-text {
  max-width: 30em;
  margin: 31px 0 0;
  font: 400 max(18px, calc(24 * var(--u)))/1.05 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.footer-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  margin-top: 64px;
  padding: 0 16px 0 18px;
  border-radius: 6px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s;
}
.footer-button:hover { background: #D6FBB6; }
.footer-button-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--lime);
}
.footer-button-arrow svg,
.understand-all-arrow svg { display: block; }
/* the name on one line, as wide as the page: the J's left edge and the N's right edge on the margins.
   In Archivo ExtraBold with this spacing the ink is 7.1209em wide, starts .029em after the line's start
   and ends .041em before its end; the capitals' top is .147em below the line's top and the baseline
   .166em above its bottom, so the gaps are measured from the letters themselves */
.footer-mark {
  margin: calc(200px - .147em) -.042em calc(196px - .166em) -.029em;
  font: 800 calc((100vw - 2 * var(--pad) - 20px) / 7.1209)/1 "Archivo", var(--font-display);
  font-size: calc(100cqw / 7.1209);
  letter-spacing: -.034em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
/* the Contact page's footer, without the invitation (which the page answers): it starts at the name,
   as far below the footer's top as the side margins and the name's own size suggest */
.footer--from-name .footer-mark { margin-top: calc(max(72px, calc(120 * var(--u))) - .147em); }
.footer-base {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  border-top: 1px solid #D6F3BE;
  color: #D9F5C5;
}
.footer-place {
  margin: 0;
  padding-top: 28px;
  font: 500 max(26px, calc(40 * var(--u)))/.94 var(--font-display);
  letter-spacing: -.04em;
}
.footer-links {
  display: grid;
  grid-template-columns: minmax(0, 16.1fr) minmax(0, 16.1fr) minmax(0, 25.8fr);
  padding-top: 30px;
}
.footer-group-title {
  margin: 0;
  color: rgb(199 250 158 / .42);
  font: 500 14px/1 var(--font-data);
  text-transform: uppercase;
}
.footer-group ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}
.footer-group a {
  font: 400 16px/1 var(--font-data);
  text-transform: uppercase;
  transition: color .2s;
}
.footer-group a:hover,
.footer-top:hover { color: var(--lime); }
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 69px;
}
.footer-copy {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  font: 400 14px/1.2 var(--font-display);
  letter-spacing: -.01em;
}
.footer-copy img { display: block; width: 24px; height: auto; }
.footer-top {
  font: 400 14px/1.2 var(--font-display);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.footer a:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }

/* Our president on phones: the portrait whole above the words, which simply follow */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .president { padding: 64px 20px; }
  .president-label { font-size: 12px; }
  .president-title { margin-top: 32px; font-size: clamp(30px, 8.6vw, 44px); line-height: .96; }
  .president-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .president-portrait { aspect-ratio: 1086 / 1448; max-height: 85svh; border-radius: 20px; }   /* the whole photo */
  .president-caption { gap: 10px; padding: 0 20px 22px; }
  .president-name { font-size: clamp(24px, 6.6vw, 32px); }
  .president-role { font-size: 12px; }
  .president-text {
    gap: 16px;
    padding: 24px 20px 26px;
    border-radius: 20px;
    font-size: clamp(17px, 4.6vw, 21px);
    line-height: 1.2;
    letter-spacing: -.02em;
  }
  .president-quote { margin-top: 8px; letter-spacing: -.03em; }
}

/* Our president on phones: one card, Alethia's founder card (Marianne's recording of it). The portrait
   fills it, with his name and role over its lower left and a white plus at its top right. The plus
   grows a lime circle from itself over the card, faster and faster, while it turns into a minus in a
   dark circle; his name, then his biography and statement, rise in on the lime once it is nearly over,
   all in by about 0.8 s. The minus lets the words go first, then draws the circle back into the
   corner. The card keeps its size either way: as tall as a 4:5 portrait, or as the words if they need
   more. Without the script the portrait and the words follow one another, as above. */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .president { padding-inline: 16px; }
  .president.is-scripted .president-columns {
    --corner: 37px;   /* the plus's centre, from the card's top and right edges */
    position: relative;
    grid-template-areas: "card";
    gap: 0;
    min-height: calc((100vw - 32px) * 5 / 4);
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
    cursor: pointer;                    /* the whole card opens and closes it, as the plus does */
    -webkit-tap-highlight-color: transparent;
  }
  .president.is-scripted .president-portrait { grid-area: card; aspect-ratio: auto; max-height: none; border-radius: 0; }
  .president.is-scripted .president-reveal {
    display: block;
    grid-area: card;
    z-index: 2;
    background: var(--lime);
    -webkit-clip-path: circle(0px at calc(100% - var(--corner)) var(--corner));
    clip-path: circle(0px at calc(100% - var(--corner)) var(--corner));
    transition: clip-path .4s cubic-bezier(.4, 0, .2, 1) .2s, -webkit-clip-path .4s cubic-bezier(.4, 0, .2, 1) .2s;
  }
  .president.is-open .president-reveal {
    -webkit-clip-path: circle(142% at calc(100% - var(--corner)) var(--corner));   /* past the far corner */
    clip-path: circle(142% at calc(100% - var(--corner)) var(--corner));
    transition: clip-path .4s cubic-bezier(.4, 0, .7, .6), -webkit-clip-path .4s cubic-bezier(.4, 0, .7, .6);
  }
  .president.is-scripted .president-text {
    grid-area: card;
    z-index: 3;
    gap: 12px;
    justify-content: flex-start;
    padding: 24px 20px 26px;
    border: 0;
    border-radius: 0;
    color: var(--forest);
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.3;
    letter-spacing: -.01em;
  }
  .president.is-scripted .president-card-name {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: auto;   /* the name at the top, the words at the foot */
    padding: 0 56px 20px 0;
  }
  .president-card-name span:first-child { font: 600 clamp(22px, 6vw, 26px)/1 var(--font-display); letter-spacing: -.02em; }
  .president-card-name span:last-child { font: 500 12px/1 var(--font-data); letter-spacing: 0; text-transform: uppercase; }
  .president.is-scripted .president-quote { margin-top: 6px; }
  .president.is-scripted .president-text > * {
    visibility: hidden;
    opacity: 0;
    translate: 0 14px;
    transition: opacity .18s, translate .18s, visibility 0s .18s;
  }
  .president.is-open .president-text > * {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity .3s var(--in), translate .4s cubic-bezier(.2, .7, .2, 1) var(--in), visibility 0s var(--in);
  }
  .president-text > :nth-child(1) { --in: .28s; }   /* each as the lime reaches it */
  .president-text > :nth-child(2) { --in: .32s; }
  .president-text > :nth-child(3) { --in: .36s; }
  .president-text > :nth-child(4) { --in: .4s; }
  .president.is-scripted .president-toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: calc(var(--corner) - 19px);
    right: calc(var(--corner) - 19px);
    z-index: 4;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--forest);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s, color .3s;
  }
  .president-toggle::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* a larger place to tap */
  .president-toggle:focus { outline: none; }
  .president-toggle:focus-visible { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--forest); }
  .president.is-open .president-toggle { background: var(--forest); color: var(--white); }
  .president-toggle-icon { position: relative; width: 14px; height: 14px; transition: rotate .45s cubic-bezier(.4, 0, .2, 1); }
  .president-toggle-icon::before,
  .president-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -.75px;
    border-radius: 1px;
    background: currentColor;
  }
  .president-toggle-icon::after { rotate: 90deg; transition: scale .3s cubic-bezier(.4, 0, .2, 1); }
  .president.is-open .president-toggle-icon { rotate: 180deg; }
  .president.is-open .president-toggle-icon::after { scale: 0 1; }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce), (orientation: portrait) and (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .president.is-scripted .president-reveal,
  .president.is-open .president-reveal { -webkit-clip-path: none; clip-path: none; opacity: 0; transition: opacity .2s .1s; }
  .president.is-open .president-reveal { opacity: 1; transition: opacity .2s; }
  .president.is-scripted .president-text > * { translate: none; }
  .president-toggle-icon { transition: none; }
}

/* Understand on tablets: one card a row, its photo on the left and its words beside it, then on phones
   the photo above the words; Soon's rows on phones: the date above the name and place, and Take part
   under them; the footer: the links in groups under where we are */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1100px) {
  .understand-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .explainer { flex-direction: row; gap: 24px; }
  .explainer-media { flex: 0 0 46%; align-self: flex-start; }
  .explainer-words { padding: 8px 8px 6px 0; }
  .explainer-title { margin-top: 0; }
  .footer-base { grid-template-columns: minmax(0, 1fr); }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 40px; }
}
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .understand { padding: 64px 20px 72px; }
  .understand-label { font-size: 12px; }
  .understand-title { margin-top: 32px; font-size: clamp(30px, 8.6vw, 44px); line-height: .96; text-wrap: balance; }
  .understand-all { margin-top: 28px; }
  .understand-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  .explainer { flex-direction: column; gap: 0; padding: 12px; border-radius: 20px; }
  .explainer-media { flex: none; align-self: stretch; border-radius: 10px; }
  .explainer-topic { left: 14px; top: 14px; font-size: 12px; }
  .explainer-words { padding: 0 8px 10px; }
  .explainer-title { margin-top: 22px; font-size: clamp(22px, 6.2vw, 28px); }

  .soon { padding: 64px 20px 80px; }
  .soon-label { font-size: 12px; }
  .soon-list { margin-top: 28px; }
  .soon-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 22px 0 24px;
  }
  .soon-what { font-size: clamp(18px, 5vw, 21px); }
  .soon-place { display: block; margin-top: 4px; }   /* the place under the name */
  .soon-place > [aria-hidden] { display: none; }
  .soon-button { justify-self: start; height: 44px; margin-top: 6px; }

  .footer { padding: 0 20px 24px; }
  .footer-invite { padding-top: 104px; }
  .footer-title { font-size: clamp(36px, 10.4vw, 56px); }
  .footer-title br { display: none; }
  .footer-title strong { display: block; }
  .footer-text { margin-top: 24px; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.2; }
  .footer-button { margin-top: 40px; }
  .footer-mark { margin: calc(104px - .147em) -.042em calc(64px - .166em) -.029em; }
  .footer--from-name .footer-mark { margin-top: calc(64px - .147em); }
  .footer-place { padding-top: 24px; font-size: clamp(26px, 7.4vw, 34px); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; padding-top: 36px; }
  .footer-group ul { gap: 14px; margin-top: 16px; }
  .footer-group a { font-size: 15px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 48px; }
}

/* Understand on Home, on phones: only the IUU fishing card, as Alethia's single news card (Marianne's
   IMG_3549): 16 px gutters, the photo taller in its rounded inset, the words beneath. The other topics
   stay on the Understand page, and on tablets and desktops here */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .understand { padding-inline: 16px; }
  .understand .understand-cards > li:nth-child(n+2) { display: none; }
  .understand .explainer-media { aspect-ratio: 6 / 5; border-radius: 12px; }
  .understand .explainer-topic { left: 16px; top: 16px; }
  .understand .explainer-words { padding: 0 12px 14px; }
}

/* The pages' introduction (Our work, Understand): Alethia's news page. A small label above a large
   heading on the left and a short introduction on the right, two thirds across; on phones the
   introduction under the heading. Sizes are Alethia's on a 1520 px wide screen. */
.page-intro {
  --u: calc(100vw / 1520);
  display: grid;
  grid-template-columns: minmax(0, 996fr) minmax(0, 470fr);   /* the introduction starts two thirds across */
  align-items: start;
  padding: calc(var(--header-h) + 45px) var(--pad) 0;
}
.page-label { grid-column: 1 / -1; }
.page-title {
  margin: 58px 0 0;
  font: 500 clamp(40px, 4.737vw, 96px)/.94 var(--font-display);
  letter-spacing: -.043em;
}
.page-lead {
  max-width: 20em;
  margin: 47px 0 0;
  font: 400 max(17px, calc(20 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .page-intro { grid-template-columns: minmax(0, 1fr); padding: calc(var(--header-h) + 32px) 20px 0; }
  .page-label { font-size: 12px; }
  .page-title { margin-top: 32px; font-size: clamp(36px, 10.4vw, 56px); line-height: .96; }
  .page-lead { max-width: 24em; margin-top: 24px; font-size: clamp(17px, 4.6vw, 21px); }
}

/* The Our work page, on white: the introduction, then the five actions, each as Alethia's featured
   story: a light, warm panel with rounded corners, a rounded photo in one half and the words in the
   other, the number in a white pill at the top and the heading, the description, a supporting line and
   the button at the foot, level with the photo's. The photo is on the left for 01, 03 and 05 and on the
   right for 02 and 04, as in Marianne's wireframe. Then the home page's Soon and footer. Sizes are
   Alethia's on a 1520 px wide screen. */
.our-work-page {
  --u: calc(100vw / 1520);
  background: var(--white);
  color: var(--forest);
}
.ow-list {
  display: grid;
  gap: 20px;
  margin: 64px 0 0;
  padding: 0 var(--pad);
  list-style: none;
}
.ow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 28px;
  border-radius: 32px;
  background: #F5F3F1;
  scroll-margin-top: 24px;
}
.ow-photo {
  position: relative;
  align-self: stretch;     /* as tall as the words beside it if they need more, */
  width: 100%;             /* and no wider than its half */
  aspect-ratio: 694 / 505;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #D9DCD6;     /* until the photo loads */
}
.ow-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);   /* each photo's subject, set on it */
}
.ow-words {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
  padding-left: 28px;      /* a little more room beside the photo */
}
.ow-panel:nth-child(even) .ow-photo { grid-area: 1 / 2; }
.ow-panel:nth-child(even) .ow-words { grid-area: 1 / 1; padding: 0 28px 0 0; }
.ow-number {               /* Alethia's white pill */
  display: flex;
  align-items: center;
  height: 37px;
  margin: 0;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--white);
  font: 500 14px/1 var(--font-data);
  font-variant-numeric: tabular-nums;
}
.ow-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: max(320px, calc(600 * var(--u)));
}
.ow-heading {
  margin: 0;
  font: 500 max(28px, calc(40.5 * var(--u)))/.94 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ow-desc {
  margin: max(16px, calc(20 * var(--u))) 0 0;
  font: 400 max(17px, calc(20 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.ow-support {              /* in place of the wireframe's data box: a fine line, then the words, quieter */
  align-self: stretch;
  margin: max(20px, calc(26 * var(--u))) 0 0;
  padding-top: 14px;
  border-top: 1px solid rgb(18 33 17 / .16);
  color: rgb(18 33 17 / .68);
  font: 500 max(15px, calc(16 * var(--u)))/1.3 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.ow-button {               /* Alethia's dark button, with the home page's arrow in a lime square */
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 48px;
  margin-top: max(28px, calc(36 * var(--u)));
  padding: 0 11px 0 18px;
  border-radius: 6px;
  background: var(--forest);
  color: var(--white);
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s;
}
.ow-button:hover { background: #26381F; }
.ow-button-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--lime);
  color: var(--lime-ink);
  transition: transform .2s;
}
.ow-button-arrow svg { display: block; }
.ow-button:hover .ow-button-arrow { transform: translateX(3px); }
.ow-button:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
/* the French words can be longer than the English (Demander une séance de sensibilisation): where the
   panel is narrow they take two lines, the button growing to hold them */
:where(html[lang="fr"]) .ow-button {
  height: auto;
  min-height: 48px;
  padding-block: 10px;
  line-height: 1.2;
  white-space: normal;
}
:where(html[lang="fr"]) .ow-button-arrow { flex: none; }
.page-our-work .soon { padding-top: 120px; }   /* Soon after the last panel, with room to breathe */
@media (prefers-reduced-motion: reduce) {
  .ow-button-arrow { transition: none; }
  .ow-button:hover .ow-button-arrow { transform: none; }
}

/* on tablets the panels keep their two halves with less room around the words */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1100px) {
  .ow-panel { gap: 16px; padding: 20px; border-radius: 24px; }
  .ow-words { padding-left: 12px; }
  .ow-panel:nth-child(even) .ow-words { padding: 0 12px 0 0; }
}

/* on phones: each photo above its words, at its own proportions unless taller than most of the screen,
   where it is cropped around its subject */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .ow-list { gap: 16px; margin-top: 48px; padding: 0 20px; }
  .ow-panel,
  .ow-panel:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px; border-radius: 20px; }
  .ow-photo,
  .ow-panel:nth-child(even) .ow-photo { grid-area: auto; aspect-ratio: auto; border-radius: 10px; }
  .ow-photo img { position: static; height: auto; max-height: 78svh; }
  .ow-words,
  .ow-panel:nth-child(even) .ow-words { grid-area: auto; gap: 20px; padding: 20px 8px 8px; }
  .ow-number { height: 32px; padding: 0 12px; font-size: 13px; }
  .ow-heading { font-size: clamp(26px, 7vw, 32px); }
  .ow-desc { margin-top: 14px; }
  .ow-support { margin-top: 20px; padding-top: 12px; }
  .ow-button { margin-top: 24px; }
  .page-our-work .soon { padding-top: 80px; }
}

/* The Understand page, on the home page's light band so the white cards show: the introduction, the
   four topics as the home page's cards, three to a row with the fourth under the first (two to a row on
   tablets, one on phones), then the glossary, every term open, two to a row in white panels. */
.understand-page {
  --u: calc(100vw / 1520);
  padding-bottom: 140px;
  background: #F3F4F1;
  color: var(--forest);
}
.understand-topics { padding: 0 var(--pad); }
.understand-page .understand-cards { margin-top: 64px; }
.understand-page a:focus-visible,
.article-page a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

.glossary {
  margin-top: 128px;
  padding: 0 var(--pad);
}
.glossary-text,
.glossary-sources { text-wrap: pretty; }
.glossary-intro {
  margin: 20px 0 0;
  color: rgb(18 33 17 / .74);
  font: 400 max(16px, calc(20 * var(--u)))/1.25 var(--font-display);
  letter-spacing: -.01em;
}
.glossary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
}
.glossary-item {
  padding: max(26px, calc(32 * var(--u))) max(26px, calc(36 * var(--u))) max(28px, calc(36 * var(--u)));
  border-radius: 20px;
  background: var(--white);
  scroll-margin-top: 24px;
  transition: box-shadow .4s;
}
.glossary-item:target { box-shadow: 0 0 0 2px var(--lime), 0 0 0 6px rgb(199 250 158 / .35); }   /* a term an article linked to */
.glossary-term {
  font: 600 max(22px, calc(28 * var(--u)))/1.05 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.glossary-text {
  max-width: 34em;
  margin: 14px 0 0;
  color: rgb(18 33 17 / .8);
  font: 400 max(16px, calc(18 * var(--u)))/1.45 var(--font-display);
  letter-spacing: -.005em;
}
.glossary-sources {
  max-width: 62em;
  margin: 28px 0 0;
  color: rgb(18 33 17 / .64);
  font: 400 14px/1.5 var(--font-display);
}
.glossary-sources a,
.article-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(18 33 17 / .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s, color .2s;
}
.glossary-sources a:hover,
.article-body a:hover { color: var(--forest); text-decoration-color: currentColor; }
.link-out { display: inline-block; }   /* the arrow after a link to another site, not underlined */

/* An article: Alethia's, on white. Go back below the header; the category in a lime label, an oversized
   title and the introduction on the left; a wide photo with rounded corners across the page; then the
   text in one column of about 720 px in the middle, What you can do in a light panel and the sources
   after it, small and quiet. Sizes are Alethia's on a 1520 px wide screen. */
.article-page {
  --u: calc(100vw / 1520);
  padding: calc(var(--header-h) + 28px) var(--pad) 140px;
  background: var(--white);
  color: var(--forest);
}
.go-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.go-back svg { display: block; transition: transform .2s; }
.go-back:hover svg,
.go-back:focus-visible svg { transform: translateX(-3px); }
.article-head { margin-top: max(48px, calc(80 * var(--u))); }
.article-title {
  max-width: 16em;
  margin: max(16px, calc(20 * var(--u))) 0 0;
  font: 500 clamp(40px, 4.31vw, 88px)/.95 var(--font-display);
  letter-spacing: -.043em;
  text-wrap: balance;
}
.article-lead {
  max-width: 34em;
  margin: max(28px, calc(44 * var(--u))) 0 0;
  font: 400 max(18px, calc(22 * var(--u)))/1.36 var(--font-display);
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.article-hero {
  max-width: 100%;
  aspect-ratio: 1466 / 720;
  margin: max(40px, calc(79 * var(--u))) 0 0;
  overflow: hidden;
  border-radius: 24px;
  background: #D9DCD6;     /* until the photo loads */
}
.article-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);   /* each photo's subject, set on it */
}
.article-body {
  max-width: 720px;
  margin: max(64px, calc(104 * var(--u))) auto 0;
  font: 400 19px/1.62 var(--font-display);
  letter-spacing: -.005em;
}
.article-body p { margin: 0; text-wrap: pretty; }
.article-body p + p { margin-top: 1.05em; }
.article-body strong { font-weight: 600; }
.article-section + .article-section { margin-top: 60px; }
.article-section-title {
  margin: 0 0 20px;
  font: 500 max(28px, calc(36 * var(--u)))/1.04 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.article-action {          /* What you can do: a light rounded panel, its heading in the lime label */
  margin-top: 64px;
  padding: 36px 40px 40px;
  border-radius: 24px;
  background: #F3F4F1;
}
.article-action-title { margin-bottom: 20px; }
.article-sources {         /* the sources: small and quiet, after a fine line */
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgb(18 33 17 / .14);
}
.article-sources-title {
  margin: 0;
  color: rgb(18 33 17 / .64);
  font: 500 13px/1.2 var(--font-data);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.article-sources ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: rgb(18 33 17 / .74);
  font-size: 16px;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .go-back svg { transition: none; }
  .go-back:hover svg,
  .go-back:focus-visible svg { transform: none; }
}

/* tablets: the topics two to a row, each card's photo above its words as on wide screens; an article's
   text lined up with its title, with too little room to sit in the middle */
@media (min-width: 760px) and (max-width: 1023px) and (orientation: landscape) {
  .understand-page .understand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .understand-page .explainer { flex-direction: column; gap: 0; }
  .understand-page .explainer-media { flex: none; align-self: stretch; }
  .understand-page .explainer-words { padding: 0 13px 14px; }
  .understand-page .explainer-title { margin-top: 22px; }
  .article-body { margin-left: 0; }
}

/* phones: one card and one term a row; the article's photo nearly square, its text a little smaller */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .understand-page { padding-bottom: 96px; }
  .understand-topics { padding: 0 20px; }
  .understand-page .understand-cards { margin-top: 48px; }
  .glossary { margin-top: 88px; padding: 0 20px; }
  .glossary-label,
  .article-category,
  .article-action-title { font-size: 12px; }
  .glossary-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .glossary-item { padding: 22px 20px 24px; border-radius: 16px; }
  .glossary-term { font-size: clamp(21px, 5.8vw, 24px); }
  .glossary-text { margin-top: 10px; font-size: 16px; }

  .article-page { padding: calc(var(--header-h) + 20px) 20px 96px; }
  .article-head { margin-top: 40px; }
  .article-title { margin-top: 18px; font-size: clamp(34px, 9.6vw, 48px); line-height: .98; }
  .article-lead { margin-top: 22px; font-size: 18px; line-height: 1.38; }
  .article-hero { aspect-ratio: 4 / 3; margin-top: 32px; border-radius: 16px; }
  .article-body { margin-top: 48px; font-size: 18px; line-height: 1.6; }
  .article-section + .article-section { margin-top: 44px; }
  .article-section-title { margin-bottom: 16px; font-size: clamp(25px, 7vw, 30px); }
  .article-action { margin-top: 48px; padding: 24px 20px 26px; border-radius: 18px; }
  .article-action-title { margin-bottom: 16px; }
  .article-sources { margin-top: 44px; }
  .article-sources ul { font-size: 15px; }
}

/* The About page, on the light ground of Understand with its words in navy: the deep-sea hero as
   Alethia's company hero, then About us, Our fields, Our principles, Our president and Our partners.
   Sizes are Alethia's on a 1520 px wide screen. */
.about-page {
  --u: calc(100vw / 1520);
  --line: rgb(17 22 42 / .16);   /* a fine navy rule */
  background: #F3F4F1;
  color: var(--navy);
}
.about-page :is(a, button):focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.about-page .about-hero a:focus-visible { outline: 1px solid var(--white); }

/* the hero: the photo across the whole screen, its habitat on the right and the open water behind the
   words, a light shade under the header and behind the words; the label and title two fifths of the way
   down, the supporting line at the lower left and Scroll to discover level with it at the lower right */
.about-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(calc(var(--header-h) + 32px), 291fr) auto minmax(40px, 124fr) auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--pad) 21px;
  overflow: hidden;
  background: var(--navy);   /* until the photo loads */
  color: var(--white);
}
.about-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 50%;   /* on narrower screens the open water stays on the left */
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(2 14 38 / .74), rgb(2 14 38 / .5) var(--header-h), rgb(2 14 38 / 0) calc(var(--header-h) + 120px)),
    linear-gradient(to right, rgb(2 14 38 / .5), rgb(2 14 38 / .2) 50%, rgb(2 14 38 / 0) 70%);
  pointer-events: none;
}
.about-hero-head { grid-area: 2 / 1 / 3 / -1; }
.about-hero-title {
  margin: max(24px, calc(49 * var(--u))) 0 0;
  font: 500 clamp(40px, 4.78vw, 96px)/.925 var(--font-display);
  letter-spacing: -.045em;
}
.about-hero-text {
  grid-area: 4 / 1;
  max-width: 27em;
  margin: 0;
  font: 400 max(17px, calc(22 * var(--u)))/1.09 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.about-hero .scroll-hint {
  position: static;
  grid-area: 4 / 2;
  align-self: center;
  margin-left: 40px;
}

/* About us: the label and a large heading, then the paragraph on the left beside the two facts */
.about-intro { padding: max(80px, calc(128 * var(--u))) var(--pad) 0; }
.about-intro:focus { outline: none; }   /* reached by Scroll to discover */
.about-title {
  margin: max(28px, calc(49 * var(--u))) 0 0;
  font: 500 clamp(34px, 3.76vw, 76px)/.94 var(--font-display);
  letter-spacing: -.05em;
}
.about-intro-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: max(48px, calc(81 * var(--u)));
}
.about-intro-text {
  max-width: 31em;
  margin: 0;
  font: 400 max(17px, calc(22 * var(--u)))/1.36 var(--font-display);
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.about-facts {                /* the two panels share their rows, so the figures line up */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 0 20px;
  margin: 0;
}
.about-fact {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding: max(24px, calc(32 * var(--u))) max(24px, calc(36 * var(--u))) max(26px, calc(34 * var(--u)));
  border-radius: 24px;
  background: var(--white);
}
.about-fact-label {
  color: rgb(17 22 42 / .64);
  font: 500 max(12px, calc(14 * var(--u)))/1 var(--font-data);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.about-fact-value {
  margin: 0;
  padding-top: max(36px, calc(64 * var(--u)));
  font: 500 clamp(56px, 5.4vw, 112px)/.86 var(--font-display);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.about-fact-note {
  margin: max(12px, calc(16 * var(--u))) 0 0;
  color: rgb(17 22 42 / .74);
  font: 400 max(15px, calc(18 * var(--u)))/1.25 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Our fields: the heading on the left and the introduction on the right, as on Our work and
   Understand, then the four fields in white cards, each title at the top and its words at the foot */
.about-fields { padding: max(96px, calc(160 * var(--u))) var(--pad) 0; }
.about-head {
  display: grid;
  grid-template-columns: minmax(0, 996fr) minmax(0, 470fr);
  align-items: end;
}
.about-head .about-label { grid-column: 1 / -1; }
.about-lead {
  max-width: 22em;
  margin: 0;
  font: 400 max(17px, calc(20 * var(--u)))/1.25 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: max(48px, calc(72 * var(--u))) 0 0;
  padding: 0;
  list-style: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: max(40px, calc(80 * var(--u)));
  min-width: 0;
  padding: max(24px, calc(32 * var(--u))) max(22px, calc(32 * var(--u))) max(26px, calc(34 * var(--u)));
  border-radius: 24px;
  background: var(--white);
}
.field-title {
  margin: 0;
  font: 600 max(22px, calc(28 * var(--u)))/1.02 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.field-text {
  margin: auto 0 0;
  color: rgb(17 22 42 / .78);
  font: 400 max(16px, calc(18 * var(--u)))/1.4 var(--font-display);
  letter-spacing: -.005em;
  text-wrap: pretty;
}

/* Our principles: Alethia's. An oversized heading well above four rows between fine navy lines, each
   row a button with its number in a lime circle, the principle and a plus at the far right. Without
   js/about.js every explanation shows; with it they open one at a time under their titles, the
   plus turning into a minus. */
.about-principles { padding: max(96px, calc(160 * var(--u))) var(--pad); }
.principles-title {
  margin: max(28px, calc(49 * var(--u))) 0 0;
  font: 500 clamp(40px, 3.92vw, 80px)/.9 var(--font-display);
  letter-spacing: -.045em;
}
.principles {
  --circle: max(40px, calc(54.4 * var(--u)));
  --indent: calc(var(--circle) + max(18px, calc(40 * var(--u))));   /* where the titles start */
  margin-top: max(64px, calc(120 * var(--u)));
  border-top: 1px solid var(--navy);
}
.principle { border-bottom: 1px solid var(--navy); }
.principle-heading { margin: 0; font: inherit; }
.principle-toggle {
  display: grid;
  grid-template-columns: var(--circle) minmax(0, 1fr) auto;
  column-gap: calc(var(--indent) - var(--circle));
  align-items: center;
  width: 100%;
  margin: 0;
  padding: max(16px, calc(24 * var(--u))) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.principle-number {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font: 400 max(16px, calc(22.7 * var(--u)))/1 var(--font-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.principle-name {
  font: 400 max(20px, calc(30 * var(--u)))/1.1 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.principle-sign {          /* a plus whose upright turns flat into a minus while the row is open */
  position: relative;
  width: max(20px, calc(27 * var(--u)));
  aspect-ratio: 1;
  margin: 0 max(4px, calc(6 * var(--u))) 0 24px;
}
.principle-sign::before,
.principle-sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}
.principle-sign::after {
  transform: rotate(90deg);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.principle-toggle[aria-expanded="true"] .principle-sign::after { transform: rotate(0deg); }
.principle-panel { display: grid; grid-template-rows: 1fr; }
.principle-body { min-height: 0; overflow: hidden; }
.principle-body p {
  max-width: calc(var(--indent) + 40em);
  margin: 0;
  padding: 0 0 max(26px, calc(36 * var(--u))) var(--indent);
  color: rgb(17 22 42 / .8);
  font: 400 max(16px, calc(20 * var(--u)))/1.45 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.principles.is-ready .principle-panel { grid-template-rows: 0fr; visibility: hidden; }
.principles.is-ready .principle.is-open .principle-panel { grid-template-rows: 1fr; visibility: visible; }
.principles.is-animated .principle-panel { transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.principles.is-animated .principle.is-open .principle-panel { transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }

/* Our president: two columns of the same width side by side, 40 to 60px apart. In the first the label, a
   clear gap, then the home page's portrait with his name and role over its foot; in the second his
   biography, his message, then his statement and signature, their middle level with the portrait's. The
   portrait is the whole photo or, beside longer words, as tall as they are, its sides cropped around his
   face and hands (down to half as wide as it is tall). The second column starts as far down as the
   portrait does, so that the label doesn't count. */
.about-president {
  --label-gap: max(32px, calc(56 * var(--u)));   /* between the label and the portrait */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, calc(56 * var(--u)), 60px);
  align-items: center;
  padding: max(96px, calc(140 * var(--u))) var(--pad);
  background: var(--white);
}
.about-president-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;   /* as tall as the words, for the portrait to grow into */
  container-type: inline-size;
}
.about-president .about-label { flex: none; margin-bottom: var(--label-gap); }
.about-portrait {
  flex: 1 0 auto;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  max-height: 200cqi;
}
.about-portrait img { object-position: 40% 13%; }
.about-president-text {
  min-width: 0;
  max-width: max(680px, calc(680 * var(--u)));
  padding-top: calc(23.5px + var(--label-gap));   /* the label's height (14px type, 9.5px padding) and its gap */
}
.about-president-bio {
  display: grid;
  gap: .7em;
  font: 400 max(17px, calc(26 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.025em;
}
.about-president-bio p,
.about-president-message p { margin: 0; text-wrap: pretty; }
.about-president-message {
  display: grid;
  gap: 1.05em;
  margin-top: max(28px, calc(48 * var(--u)));
  color: rgb(17 22 42 / .84);
  font: 400 max(15px, calc(19 * var(--u)))/1.6 var(--font-display);
  letter-spacing: -.005em;
}
.about-quote {
  margin: max(36px, calc(64 * var(--u))) 0 0;
  padding-top: max(24px, calc(40 * var(--u)));
  border-top: 1px solid var(--line);
}
.about-quote-text { margin: 0; }
.about-quote-text p {
  margin: 0;
  font: 500 max(21px, calc(34 * var(--u)))/1.12 var(--font-display);
  letter-spacing: -.03em;
  text-indent: -.4em;   /* the opening quotation mark hangs, so the words line up with the paragraphs above */
  text-wrap: pretty;
}
.about-signature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: max(20px, calc(32 * var(--u)));
}
.about-signature-name {
  font: 600 max(18px, calc(20 * var(--u)))/1.1 var(--font-display);
  letter-spacing: -.02em;
}
.about-signature-role {
  color: rgb(17 22 42 / .64);
  font: 500 max(12px, calc(14 * var(--u)))/1 var(--font-data);
  text-transform: uppercase;
}

/* Our partners: Alethia's, as an invitation while there are none. The label and heading in the middle,
   then a wide navy panel beside a lime one, of the same height, with Let's talk leading to the
   Contact page as Contact us does */
.about-partners { padding: max(96px, calc(140 * var(--u))) var(--pad); }
.partners-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.partners-title {
  margin: max(24px, calc(32 * var(--u))) 0 0;
  font: 500 clamp(30px, 2.78vw, 56px)/.92 var(--font-display);
  letter-spacing: -.035em;
}
.partners-lead {
  max-width: 30em;
  margin: max(20px, calc(28 * var(--u))) 0 0;
  color: rgb(17 22 42 / .78);
  font: 400 max(17px, calc(20 * var(--u)))/1.3 var(--font-display);
  letter-spacing: -.012em;
  text-wrap: balance;
}
.partners-panels {
  display: grid;
  grid-template-columns: minmax(0, 844fr) minmax(0, 601fr);
  gap: 20px;
  margin-top: max(56px, calc(110 * var(--u)));
}
.partners-statement,
.partners-invite {
  min-height: max(240px, calc(282 * var(--u)));
  padding: max(28px, calc(41 * var(--u)));
  border-radius: 24px;
}
.partners-statement {
  display: flex;
  align-items: center;
  background: var(--navy);
  color: var(--white);
}
.partners-statement p {
  margin: 0;
  font: 500 max(34px, calc(64.7 * var(--u)))/.95 var(--font-display);
  letter-spacing: -.045em;
}
.partners-invite {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  background: var(--lime);
  color: var(--navy);
}
.partners-invite-text {
  max-width: 24em;
  margin: 0;
  font: 400 max(18px, calc(25 * var(--u)))/1.04 var(--font-display);
  letter-spacing: -.02em;
}
.partners-button {             /* Alethia's: outlined, with the arrow in its own dark square */
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 57px;
  padding: 0 15px 0 17px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.partners-button-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--navy);
  color: var(--white);
  transition: transform .2s;
}
.partners-button-arrow svg { display: block; }
.partners-button:hover .partners-button-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .principle-sign::after,
  .principles.is-animated .principle-panel,
  .principles.is-animated .principle.is-open .principle-panel,
  .partners-button-arrow { transition: none; }
  .partners-button:hover .partners-button-arrow { transform: none; }
}

/* Our partners on the home page, after Our president and before Understand: the About page's section,
   on the president's white, on every screen. On wide screens it sits a little closer to Our president
   than on About, as the home page's sections do; phones and tablets held upright keep its own spacing. */
.home-partners {
  --u: calc(100vw / 1520);
  position: relative;
  z-index: 1;
  background: var(--white);
  color: var(--navy);
}
.home-partners :is(a, button):focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
@media (min-width: 720px) and (orientation: landscape), (min-width: 1101px) {
  .home-partners { padding: max(66px, calc(96 * var(--u))) var(--pad) max(88px, calc(120 * var(--u))); }
}

/* tablets: two fields a row; then About us's paragraph above its facts, Our fields' introduction under its
   heading and the partners' panels of the same width */
@media (max-width: 1099px), (orientation: portrait) and (max-width: 1100px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1100px) {
  .about-intro-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-facts { max-width: 720px; }
  .about-head { grid-template-columns: minmax(0, 1fr); }
  .about-lead { max-width: 30em; margin-top: 28px; }
  .partners-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tall screens and phones: the label, title and supporting line at the foot of the hero, over the open
   water, with the habitat above them; Scroll to discover under the line */
@media (max-width: 759px), (max-aspect-ratio: 23 / 20) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(calc(var(--header-h) + 120px), 1fr) auto auto auto;
    row-gap: 0;
  }
  .about-hero-photo { object-position: 56% 0; }
  .about-hero::before {
    background:
      linear-gradient(to bottom, rgb(2 14 38 / .74), rgb(2 14 38 / .5) var(--header-h), rgb(2 14 38 / 0) calc(var(--header-h) + 120px)),
      linear-gradient(to top, rgb(2 14 38 / .92) 32%, rgb(2 14 38 / .4) 58%, rgb(2 14 38 / 0) 78%);
  }
  .about-hero-text { grid-area: 3 / 1; margin-top: 32px; }
  .about-hero .scroll-hint { grid-area: 4 / 1; justify-self: end; margin: 32px 0 0; }
}

/* phones: everything in one column, a little smaller */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .about-label,
  .about-hero-label { font-size: 12px; }
  .about-hero { padding: 0 20px 24px; }
  .about-hero-title { margin-top: 24px; font-size: clamp(36px, 10.4vw, 56px); line-height: .96; text-wrap: balance; }
  .about-hero-title br { display: none; }
  .about-hero-text { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.2; }

  .about-intro { padding: 72px 20px 0; }
  .about-title { margin-top: 32px; font-size: clamp(30px, 8.6vw, 44px); line-height: .96; }
  .about-intro-body { gap: 32px; margin-top: 32px; }
  .about-intro-text { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.38; }
  .about-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .about-fact { padding: 20px 20px 22px; border-radius: 18px; }
  .about-fact-value { padding-top: 32px; font-size: clamp(48px, 13vw, 64px); }
  .about-fact-note { font-size: 15px; }

  .about-fields { padding: 88px 20px 0; }
  .about-head { grid-template-columns: minmax(0, 1fr); }
  .about-lead { max-width: 24em; margin-top: 24px; font-size: clamp(17px, 4.6vw, 21px); }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .field { gap: 28px; padding: 22px 20px 24px; border-radius: 18px; }
  .field-title { font-size: clamp(22px, 6vw, 26px); }

  .about-principles { padding: 88px 20px; }
  .principles-title { margin-top: 32px; font-size: clamp(34px, 9.6vw, 48px); line-height: .94; }
  .principles { --circle: 36px; --indent: 52px; margin-top: 48px; }
  .principle-toggle { padding: 16px 0; }
  .principle-number { font-size: 15px; }
  .principle-name { font-size: clamp(18px, 5vw, 22px); line-height: 1.15; }
  .principle-sign { width: 18px; margin: 0 2px 0 16px; }
  .principle-body p { padding-bottom: 24px; font-size: 16px; line-height: 1.5; }

  .about-president { grid-template-columns: minmax(0, 1fr); padding: 72px 20px; }   /* the label, the portrait, then the words */
  .about-portrait { width: min(100%, calc(85vh * 1086 / 1448)); width: min(100%, calc(85svh * 1086 / 1448)); }   /* the whole photo, within the screen's height */
  .about-president-text { max-width: none; margin-top: 40px; padding-top: 0; }   /* the words across the screen */
  .about-president-bio { font-size: clamp(19px, 5.2vw, 22px); }
  .about-president-message { font-size: 17px; line-height: 1.55; }
  .about-quote { margin-top: 44px; padding-top: 28px; }
  .about-quote-text p { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.12; }
  .about-signature { margin-top: 24px; }

  .about-partners { padding: 80px 20px 96px; }
  .partners-title { margin-top: 24px; font-size: clamp(28px, 8vw, 40px); line-height: .96; text-wrap: balance; }
  .partners-title br { display: none; }
  .partners-lead { font-size: clamp(17px, 4.6vw, 20px); }
  .partners-panels { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .partners-statement,
  .partners-invite { min-height: 0; padding: 28px 22px; border-radius: 18px; }
  .partners-statement { min-height: 200px; }
  .partners-statement p { font-size: clamp(34px, 9.4vw, 46px); }
  .partners-invite { gap: 28px; }
  .partners-invite-text { font-size: clamp(18px, 5vw, 21px); line-height: 1.15; }
}


/* ---------------------------------------------------------------- contact */

/* Contact: Alethia's contact page, measured from Marianne's screenshot (sizes for a 1520 px wide
   screen). On white, the invitation on the left across a third of the page, under the label the large
   heading and the paragraph; the form across the other two thirds, its first label level with the
   heading's capitals: the reasons in rounded grey choices, the four fields on fine underlines, the
   message, then Send message. Under the invitation, WhatsApp's own green button. */
.contact-page {
  --u: calc(100vw / 1520);
  --line: rgb(17 22 42 / .14);       /* the fields' underlines */
  --hint: rgb(17 22 42 / .62);       /* the labels inside empty fields, and the message's hint */
  --choice: #F3F4F1;                 /* the reasons' grey */
  --error: #B42318;
  background: var(--white);
  color: var(--navy);
}
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  padding: calc(var(--header-h) + 45px) var(--pad) max(104px, calc(150 * var(--u)));
}
.contact:focus { outline: none; }   /* only where Contact us leads, not a control */
.contact-intro { min-width: 0; padding-right: 32px; }
.contact-title {
  margin: max(24px, calc(31.4 * var(--u))) 0 0;
  font: 500 max(44px, calc(74 * var(--u)))/1 var(--font-display);
  letter-spacing: -.05em;
}
.contact-lead {
  max-width: 19em;
  margin: max(36px, calc(60.8 * var(--u))) 0 0;
  font: 400 max(18px, calc(20 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.contact-whatsapp { margin-top: max(48px, calc(68 * var(--u))); }
.contact-whatsapp-title {
  margin: 0;
  font: 500 max(18px, calc(20 * var(--u)))/1.2 var(--font-display);
  letter-spacing: -.015em;
}
.contact-whatsapp-text {
  margin: 6px 0 0;
  color: rgb(17 22 42 / .74);
  font: 400 max(16px, calc(17 * var(--u)))/1.35 var(--font-display);
  letter-spacing: -.005em;
}
.whatsapp-button {               /* WhatsApp's green, its glyph, and dark words, which read better on it than white */
  display: inline-flex;
  align-items: center;
  gap: max(10px, calc(10 * var(--u)));
  height: max(50px, calc(50 * var(--u)));
  margin-top: max(22px, calc(22 * var(--u)));
  padding: 0 max(24px, calc(24 * var(--u))) 0 max(18px, calc(18 * var(--u)));
  border-radius: 999px;
  background: #25D366;
  color: #111B21;
  font: 600 max(16px, calc(16 * var(--u)))/1 var(--font-display);
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color .2s;
}
.whatsapp-button[href]:hover { background: #3BDD78; }
.whatsapp-button[aria-disabled="true"] { cursor: default; }
.whatsapp-icon { flex: none; display: block; width: max(22px, calc(22 * var(--u))); height: max(22px, calc(22 * var(--u))); }

.contact-form {
  position: relative;
  min-width: 0;
  margin-top: calc(23.5px + max(24px, calc(31.4 * var(--u))) + max(5px, calc(8.4 * var(--u))));   /* the first label level with the heading */
}
.contact-trap { display: none; }
.contact-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-group + .contact-group { margin-top: max(56px, calc(84.6 * var(--u))); }
.contact-group-label {
  display: block;
  margin: 0;
  padding: 0;
  font: 500 14px/1 var(--font-data);
  text-transform: uppercase;
}
.contact-required { margin-left: .15em; }
.contact-required-note {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  color: rgb(17 22 42 / .62);
  font: 500 14px/1 var(--font-data);
  text-transform: uppercase;
}

/* the reasons: real radio buttons, each over its rounded grey choice, the chosen one lime */
.contact-choices {
  display: flex;
  flex-wrap: wrap;
  gap: max(12px, calc(12 * var(--u)));
  margin-top: max(20px, calc(20 * var(--u)));
}
.contact-choice { position: relative; display: block; }
.contact-choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.contact-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max(124px, calc(124 * var(--u)));
  height: max(45px, calc(45 * var(--u)));
  padding: 0 max(18px, calc(18 * var(--u)));
  border-radius: 6px;
  background: var(--choice);
  font: 400 max(18px, calc(18 * var(--u)))/1 var(--font-display);
  white-space: nowrap;
  transition: background-color .2s;
}
.contact-choice:hover span { background: #E7EAE3; }
.contact-choice input:checked + span { background: var(--lime); color: var(--navy); }
.contact-choice input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }

/* the fields: each label inside its field until the visitor types or arrives there, then small above it */
.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(11px, calc(11 * var(--u))) max(20px, calc(20 * var(--u)));
  margin-top: max(11.6px, calc(11.6 * var(--u)));
}
.contact-field { position: relative; min-width: 0; padding-top: max(22px, calc(22 * var(--u))); }
.contact-input,
.contact-textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 max(12px, calc(12 * var(--u)));
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font: 400 max(18px, calc(18 * var(--u)))/1.3334 var(--font-display);
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-input::placeholder { color: transparent; }
.contact-textarea::placeholder { color: var(--hint); opacity: 1; }
.contact-input:focus,
.contact-textarea:focus { outline: none; border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
.contact-input[aria-invalid="true"] { border-bottom-color: var(--error); }
.contact-input[aria-invalid="true"]:focus { box-shadow: 0 1px 0 var(--error); }
.contact-field-label {
  position: absolute;
  top: max(22px, calc(22 * var(--u)));
  left: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--hint);
  font: 400 max(18px, calc(18 * var(--u)))/1.3334 var(--font-display);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .2s, color .2s;
}
.contact-input:focus + .contact-field-label,
.contact-input:not(:placeholder-shown) + .contact-field-label {
  color: rgb(17 22 42 / .74);
  transform: translateY(-1.28em) scale(.75);
}
.contact-textarea {
  min-height: calc(4em + max(12px, calc(12 * var(--u))));   /* three lines */
  margin-top: max(35.6px, calc(35.6 * var(--u)));
  resize: none;
  field-sizing: content;   /* grows with the message */
}
@supports not (field-sizing: content) {
  .contact-textarea { resize: vertical; }
}
/* the phone number: one field, its line under all of it, holding the country's flag and a small
   chevron (which open the countries), a thin rule, the calling code and the number; its label always
   small above it, as the others' once filled */
.contact-phone { scroll-margin-top: calc(var(--header-h) + 16px); }
.contact-phone > .contact-field-label {
  top: max(22px, calc(22 * var(--u)));
  color: rgb(17 22 42 / .74);
  transform: translateY(-1.28em) scale(.75);
}
.contact-phone-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.contact-phone-row .contact-input { flex: 1; min-width: 0; border-bottom: 0; box-shadow: none; }
.contact-phone-row:focus-within { border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
.contact-phone-row:has(.contact-input[aria-invalid="true"]) { border-bottom-color: var(--error); }
.contact-phone-row:has(.contact-input[aria-invalid="true"]):focus-within { box-shadow: 0 1px 0 var(--error); }
.contact-phone-country {
  display: flex;
  align-items: center;
  gap: max(8px, calc(8 * var(--u)));
  align-self: stretch;
  margin: 0;
  padding: 0 max(12px, calc(12 * var(--u))) max(12px, calc(12 * var(--u))) 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.contact-phone-country[hidden] { display: none; }
.contact-phone-country:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.contact-phone-flag {
  display: block;
  width: max(28px, calc(28 * var(--u)));
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(17 22 42 / .12);
  object-fit: cover;
}
.contact-phone-chevron { display: block; transition: transform .2s; }
.contact-phone.is-open .contact-phone-chevron { transform: rotate(180deg); }
.contact-phone-dial {
  flex: none;
  padding: 0 max(8px, calc(8 * var(--u))) max(12px, calc(12 * var(--u))) max(12px, calc(12 * var(--u)));
  color: var(--navy);
  font: 400 max(18px, calc(18 * var(--u)))/1.3334 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.contact-phone-dial[hidden] { display: none; }
/* the countries, under the field while it is open: a search box, then the list, white with a fine
   border, the one reached by the keys in the reasons' grey */
.contact-country-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 32px rgb(17 22 42 / .14);
  overflow: hidden;
}
.contact-country-search {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font: 400 max(16px, calc(16 * var(--u)))/1.3 var(--font-display);
  appearance: none;
}
.contact-country-search::placeholder { color: var(--hint); opacity: 1; }
.contact-country-search:focus { outline: none; background: rgb(17 22 42 / .03); }
.contact-country-list {
  max-height: min(300px, 40vh);
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.contact-country-option,
.contact-country-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--navy);
  font: 400 max(16px, calc(16 * var(--u)))/1.3 var(--font-display);
}
.contact-country-option img { flex: none; width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(17 22 42 / .12); object-fit: cover; }
.contact-country-option .contact-country-code { margin-left: auto; color: var(--hint); font-variant-numeric: tabular-nums; }
.contact-country-option { cursor: pointer; }
.contact-country-option:hover,
.contact-country-option.is-active { background: var(--choice); }
.contact-country-option[aria-selected="true"] { font-weight: 600; }
.contact-country-empty { color: var(--hint); }
.contact-country-list [hidden] { display: none; }
@media (pointer: coarse) {
  .contact-country-option { min-height: 44px; padding-block: 8px; }
}
.contact-error {
  margin: 8px 0 0;
  color: var(--error);
  font: 400 max(15px, calc(15 * var(--u)))/1.35 var(--font-display);
}
.contact-reasons .contact-error { margin-top: 12px; }

/* Send message: the footer's lime button with navy words and arrow; under it what became of the message */
.contact-send {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: max(56px, calc(86 * var(--u)));
}
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 0 16px 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--lime);
  color: var(--navy);
  font: 700 15px/1 var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.contact-submit:hover { background: #D6FBB6; }
.contact-submit[aria-disabled="true"] { cursor: progress; }
.contact-submit-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--navy);
  color: var(--lime);
}
.contact-submit-arrow svg { display: block; }
.contact-status {
  max-width: 34em;
  margin: 0;
  font: 400 max(17px, calc(17 * var(--u)))/1.4 var(--font-display);
  letter-spacing: -.005em;
}
.contact-status:empty { display: none; }
.contact-status.is-failed { color: var(--error); }
.contact-status a { text-decoration: underline; text-underline-offset: 3px; }
.contact-page :is(a, button):focus-visible,
.contact-page .whatsapp-button:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.cta[aria-current="page"] > span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-button,
  .contact-choice span,
  .contact-phone-chevron,
  .contact-phone-row,
  .contact-input,
  .contact-textarea,
  .contact-field-label,
  .contact-submit { transition: none; }
}

/* tablets: the invitation above the form, the fields still two a row */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1100px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-intro { padding-right: 0; }
  .contact-form { margin-top: 72px; }
}

/* phones: one column throughout, WhatsApp before the form */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .contact { padding: calc(var(--header-h) + 32px) 20px 88px; }
  .contact-title { margin-top: 28px; font-size: clamp(44px, 13vw, 56px); }
  .contact-lead { margin-top: 24px; font-size: 18px; line-height: 1.25; }
  .contact-whatsapp { margin-top: 40px; }
  .whatsapp-button { margin-top: 18px; }
  .contact-form { margin-top: 64px; }
  .contact-group + .contact-group { margin-top: 52px; }
  .contact-choices { gap: 10px; }
  .contact-choice span { min-width: 0; height: 44px; padding: 0 16px; font-size: 16px; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-top: 14px; }
  .contact-send { margin-top: 52px; }
}

/* French: the required fields said in a sentence, above the form rather than beside its first label,
   and a long reason allowed onto two lines on a narrow screen */
html[lang="fr"] .contact-required-note {
  top: auto;
  bottom: 100%;
  left: 0;
  margin-bottom: 20px;
  line-height: 1.35;
  text-transform: none;
}
html[lang="fr"] .contact-choice { max-width: 100%; }
html[lang="fr"] .contact-choice span {
  height: auto;
  min-height: max(45px, calc(45 * var(--u)));
  padding-block: 10px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  html[lang="fr"] .contact-choice span { min-height: 44px; }
}

/* ---------------------------------------------------------------- tablets held upright
   Tablets in portrait (and any upright screen up to 1100 px wide) take the phone layout above, its
   order, stacking, menu, scenes and taps, through the same media queries. Rotated to landscape they
   keep the tablet and desktop design. Here the phone's sizes grow for the larger screen: wider
   gutters, larger type and pictures, more room between the parts, the composition unchanged. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1100px) {
  :root { --pad: 40px; }

  /* the header and the open menu */
  .header { padding: 0 32px; }
  .lang-switch { font-size: 15px; }
  .header.is-menu-open { padding-inline: 40px; }
  .header.is-menu-open .nav { padding-top: 64px; font-size: clamp(44px, 6.4vw, 60px); }
  .header.is-menu-open .nav a { min-height: 96px; }
  .header.is-menu-open .cta { height: 64px; padding: 0 18px 0 22px; font-size: 17px; }

  /* the lime labels */
  :is(.our-work-label, .ex-label, .purpose-label, .activities-label, .activity-status, .president-label,
      .understand-label, .soon-label, .page-label, .glossary-label, .article-category,
      .article-action-title, .about-label, .about-hero-label, .contact-label, .vision-label) { font-size: 14px; }

  /* the hero */
  .hero-content { left: 5vw; right: 5vw; top: calc(var(--header-h) + 56px); }
  .hero { --hero-title: 7vw; }
  .hero-actions { margin-top: 44px; }
  .hero-actions .btn { height: 64px; padding: 0 20px; font-size: 17px; }
  .hero-intro { left: 5vw; right: 5vw; bottom: 96px; font-size: clamp(20px, 2.6vw, 26px); }
  .scroll-hint { right: 5vw; bottom: 32px; font-size: 15px; }

  /* the story: Our vision, the ocean and What we do */
  .vision-title { font-size: 8.4vw; }
  .vision-text { font-size: clamp(22px, 3vw, 30px); }
  .ocean-statement { left: 40px; top: 120px; font-size: 15px; }
  .ocean-text { left: 40px; right: 40px; top: 190px; font-size: 5.4vw; }
  .topic-label { font-size: 14px; }
  .story-motion .work.is-staged .work-content { padding: 40px 40px; }
  .story-motion .work.is-staged .work-title { margin-bottom: 40px; font-size: 6vw; }
  .story-motion .work.is-staged .work-list { --t: clamp(18px, 2.4vw, 24px); gap: 6px; }
  .story-motion .work.is-staged .work-panel p { font-size: clamp(18px, 2.4vw, 22px); }

  /* Our work */
  .our-work { padding: 96px 40px; }
  .our-work-title { margin-top: 40px; font-size: 6.4vw; }
  .our-work-cards { gap: 32px; margin-top: 64px; }
  .our-work-card { --name: 5vw; grid-template-columns: minmax(0, 1fr); }
  .our-work-media { aspect-ratio: 3 / 4; border-radius: 28px; }   /* the phone's proportions */
  .our-work-name { padding: 0 32px 36px; }
  .our-work-desc { margin-top: 18px; font-size: clamp(19px, 2.5vw, 24px); }

  /* Our expertise */
  .expertise {
    --big: 7.4vw;
    --head: 5.6vw;
    --text: clamp(19px, 2.6vw, 25px);
    --fish: min(640px, 60svh);
    --gap: 28px;
  }
  .ex-scene { padding: 150px 40px 0; }
  .ex-intro { padding: 96px 40px 56px; }
  .ex-fields,
  .ex-sharing { padding-left: 40px; padding-right: 40px; }
  .ex-intro .ex-text { max-width: 34em; }
  .ex-btn { margin-top: 36px; }
  .ex-fish-body,
  .ex-hands-photo { margin-top: 56px; }
  .ex-callouts { --reach: 26px; }
  .ex-callout span { padding: 9px 12px 7px; font-size: 14px; }
  .ex-callout:nth-child(1) { --room: calc(50vw - 40px - var(--fw) * .435 - var(--reach)); }
  .ex-callout:nth-child(2) { --room: calc(50vw - 40px - var(--fw) * .401 - var(--reach)); }
  .ex-callout:nth-child(3) { --room: calc(50vw - 40px - var(--fw) * .2 - var(--reach)); }
  .ex-callout:nth-child(4) { --room: calc(50vw - 40px - var(--fw) * .009 - var(--reach)); }
  .ex-panels { --p: clamp(18px, 2.5vw, 24px); margin-top: -96px; padding: 0 40px; }
  .ex-closing { padding: calc(150px + var(--boat-h) - 64px) 40px 42svh; }
  .ex-boat { padding-top: 150px; }

  /* Our purpose: the phone's collage, as wide as the screen allows */
  .purpose {
    --v: calc(min(100vw - 80px, 820px) / 390);
    --head: 5.4vw;
    --text: clamp(19px, 2.6vw, 25px);
  }
  .purpose-collage { max-width: min(100vw - 80px, 820px); }
  .purpose-message { padding: 56px 32px 64px; }
  .purpose .purpose-photo .purpose-caption { font-size: 12px; }

  /* the line and the commitments */
  .action { padding: 40px 40px 150px; }
  .action-title { font-size: 6.4vw; }
  .action-list { width: 100%; gap: 16px; }
  .action-card { padding: 26px 30px 26px 26px; border-radius: 24px; gap: 24px; }
  .action-num { width: 60px; font-size: 21px; }
  .action-name { font-size: clamp(22px, 3vw, 28px); }
  .action-desc { font-size: clamp(17px, 2.3vw, 21px); }

  /* Our activities */
  .activities { padding: 96px 40px 128px; }
  .activities-title { margin-top: 40px; font-size: 6.4vw; }
  .activities-text { font-size: clamp(18px, 2.4vw, 22px); }
  .activity-title { font-size: 4.4vw; }
  .activity-desc { font-size: clamp(19px, 2.5vw, 24px); }

  /* Our president */
  .president { padding: 96px 40px; }
  .president-title { margin-top: 40px; font-size: 6.4vw; }
  .president-columns { margin-top: 56px; }
  .president.is-scripted .president-columns { --corner: 52px; min-height: calc((100vw - 80px) * 5 / 4); border-radius: 28px; }
  .president.is-scripted .president-text { gap: 18px; padding: 40px 36px 40px; font-size: clamp(19px, 2.6vw, 25px); }
  .president.is-scripted .president-card-name { gap: 12px; padding: 0 80px 28px 0; }
  .president-card-name span:first-child { font-size: 4.6vw; }
  .president-card-name span:last-child { font-size: 15px; }
  .president-caption { gap: 14px; padding: 0 36px 36px; }
  .president-name { font-size: 4.6vw; }
  .president-role { font-size: 15px; }
  .president.is-scripted .president-toggle { top: calc(var(--corner) - 26px); right: calc(var(--corner) - 26px); width: 52px; height: 52px; }
  .president-toggle-icon { width: 18px; height: 18px; }

  /* Our partners, on the home page and on About */
  .about-partners { padding: 96px 40px 128px; }
  .partners-title { margin-top: 32px; font-size: 6vw; }
  .partners-lead { font-size: clamp(19px, 2.6vw, 25px); }
  .partners-panels { gap: 16px; margin-top: 56px; }
  .partners-statement,
  .partners-invite { padding: 40px 36px; border-radius: 24px; }
  .partners-statement { min-height: 300px; }
  .partners-statement p { font-size: 7.4vw; }
  .partners-invite { gap: 40px; }
  .partners-invite-text { font-size: clamp(21px, 3vw, 28px); }

  /* Understand and Soon */
  .understand-title { font-size: 6.4vw; }
  .explainer-title { font-size: 4.2vw; }
  .explainer-desc { font-size: clamp(17px, 2.3vw, 21px); }
  .soon-text { font-size: 18px; }
  .soon-what { font-size: clamp(21px, 2.8vw, 26px); }
  .soon-name,
  .soon-place { font-size: clamp(19px, 2.5vw, 23px); }
  .soon-date { font-size: 15px; }
  :is(.soon-button, .partners-button, .footer-button, .ex-btn, .explainer-more, .understand-all) { font-size: 16px; }

  /* the footer */
  .footer-title { font-size: 7.6vw; }
  .footer-text { font-size: clamp(19px, 2.6vw, 25px); }
  .footer-place { font-size: 5vw; }
  .footer-group a { font-size: 17px; }
  .footer-group-title { font-size: 14px; }

  /* Our work's page, Understand's page and the articles, About and Contact */
  .page-title { font-size: 8vw; }
  .page-lead { font-size: clamp(19px, 2.6vw, 25px); }
  .ow-heading { font-size: 5.2vw; }
  .glossary-term { font-size: 3.6vw; }
  .glossary-text { font-size: 19px; }
  .article-title { font-size: 7vw; }
  .article-lead,
  .article-body { font-size: 21px; }
  .article-section-title { font-size: 4.6vw; }
  .about-hero-title { font-size: 8vw; }
  .about-hero-text,
  .about-intro-text,
  .about-lead { font-size: clamp(19px, 2.6vw, 25px); }
  .about-title,
  .principles-title { font-size: 6.4vw; }
  .field-title { font-size: 4vw; }
  .principle-name { font-size: 3.4vw; }
  .principle-body p { font-size: 19px; }
  .about-president-bio { font-size: 3.4vw; }
  .about-president-message { font-size: 20px; }
  .about-quote-text p { font-size: 4.4vw; }
  .contact-title { font-size: 9vw; }
  .contact-lead { font-size: 21px; }
}

/* ---------------------------------------------------------------- tablets held upright: one exception
   Marianne's request of 17 October: on tablets in portrait, Home's Soon list keeps the desktop
   arrangement instead of the phone's, scaled to the narrower width. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1100px) {
  /* Soon, on Home: each activity on one row, its date, its name and place, and Take part at the right,
     under the desktop's rules */
  body:not(.page-our-work) .soon { padding: 88px var(--pad) 104px; }
  body:not(.page-our-work) .soon-list { margin-top: 40px; }
  body:not(.page-our-work) .soon-item {
    grid-template-columns: minmax(136px, 19%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 84px;
    padding: 18px 0;
  }
  body:not(.page-our-work) .soon-what { font-size: clamp(18px, 2.4vw, 22px); }
  body:not(.page-our-work) :is(.soon-name, .soon-place) { font-size: inherit; }
  body:not(.page-our-work) .soon-place { display: inline; margin-top: 0; }
  body:not(.page-our-work) .soon-place > [aria-hidden] { display: inline; }
  body:not(.page-our-work) .soon-button { justify-self: auto; height: 46px; margin-top: 0; }
}