/* ============================================================
   JUNO PORTALS · about.css
   The editorial layer for one page.

   Everything that defines the brand — colours, type, spacing steps,
   buttons, rules, labels — is loaded first from css/styles.css and is
   NOT redefined here. This file only adds what a long, image-led page
   needs and the app shell does not: full bleed plates, wide reading
   measures, large statements and a page header.

   Mobile first. Every width below is a minimum, never a maximum.
   ============================================================ */

/* the app shell constrains itself to 480px · this page does not */
body.about{overscroll-behavior-y:auto}

/* ---------- page header ----------
   The same marks as the app: the logo, quiet uppercase links, a
   hairline. The mark is carried at the size the magazine masthead
   uses, which makes the header too tall to hold a phone screen
   hostage, so it scrolls away with the page instead of sticking. */
.about-header{
  position:static;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);
  padding:calc(var(--s-3) + env(safe-area-inset-top)) var(--pad) var(--s-3);
  background:var(--color-background);
  border-bottom:1px solid var(--color-line-soft);
}
.about-nav{display:flex;align-items:center;gap:var(--s-3)}
.about-nav a{
  min-height:44px;display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-text);text-decoration:none;
}
.about-nav a[aria-current="page"]{color:var(--color-accent)}

/* the mark · one size on every editorial page */
.about-header .brandmark{
  height:90px;max-width:100%;
  object-fit:contain;object-position:left center;
}

/* the phone · a mark this tall and four links do not share a line.
   The mark takes its own, the links sit under it in one row, left
   aligned with everything else on the page. No menu to open: with
   four names there is nothing worth hiding behind a button. */
@media (max-width:699px){
  .about-header{
    flex-direction:column;align-items:flex-start;
    gap:var(--s-2);
  }
  .about-nav{width:100%;flex-wrap:wrap;gap:0 var(--s-3)}
}

/* from a tablet up the two sit side by side again, and only then does
   a wide wordmark need holding back */
@media (min-width:700px){
  .about-header .brandmark{max-width:46vw}
}

/* ---------- rhythm ----------
   One measure for reading, one for statements, one for nothing at all. */
.wrap{max-width:640px;margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--s-6) 0}
.section--tight{padding:var(--s-5) 0}

@media (min-width:900px){
  .section{padding:var(--s-7) 0}
  .wrap{max-width:680px}
}

/* ---------- type ----------
   Oranienbaum for anything that is meant to be felt, Quicksand for
   anything that is meant to be read. */
.h-section{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:1;
  font-size:clamp(34px,10vw,64px);
  margin-top:var(--s-3);
}
/* a section that opens on its heading needs no lead-in space */
.wrap > .h-section:first-child{margin-top:0}
.h-hero{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:.95;
  font-size:clamp(46px,15vw,120px);
}
.lede{font-size:18px;line-height:1.7;margin-top:var(--s-4)}
.copy p{margin-top:var(--s-3);line-height:1.75}
.copy p:first-child{margin-top:var(--s-4)}
.copy--wide p{font-size:17px}

/* a sentence that is allowed to take the whole screen */
.statement{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  line-height:1.06;font-size:clamp(30px,8.5vw,56px);
  margin-top:var(--s-5);
}
.statement--accent{color:var(--color-accent)}

/* a list that is really a rhythm, not a list */
.litany{margin-top:var(--s-4);list-style:none}
.litany li{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:clamp(24px,7vw,40px);line-height:1.25;
  padding:2px 0;
}
.litany--label li{
  font-family:var(--font-body);font-size:13px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  line-height:2.1;
}

/* ---------- plates ----------
   Two different jobs, one element.

   On a phone the picture is a full bleed band: a crop is fine there,
   the centre of the photograph edge to edge, the way it always was.

   On a desktop a band across the whole window becomes a wall and shows
   only a strip out of the middle. So from 1000px the image steps back
   to roughly the width of a column of text, keeps its own shape and is
   shown whole. Smaller, and complete.

   Give the file its real pixel size in width= and height= so the space
   is reserved before it loads and nothing jumps. */
.plate{
  display:block;width:100%;height:auto;
  background-color:var(--color-land);
}

/* the phone · cropped on purpose, edge to edge */
@media (max-width:699px){
  .plate{aspect-ratio:4/5;object-fit:cover}
}
/* a tablet in portrait is still full bleed, but 4:5 there would be
   nearly a thousand pixels tall, so the crop flattens */
@media (min-width:700px) and (max-width:999px){
  .plate{aspect-ratio:3/2;object-fit:cover}
}

/* the desktop · the whole photograph, at the measure of the page */
@media (min-width:1000px){
  .plate{max-width:660px;margin-inline:auto}
}
@media (min-width:1500px){
  .plate{max-width:720px}
}

/* an image that is not in place yet · the alt text still describes it */
.plate:not([src]){aspect-ratio:3/2}

/* a plate that carries words · the scrim only appears with an image */
.plate-copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-5) var(--pad) calc(var(--s-5) + env(safe-area-inset-bottom));
}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 130px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:var(--s-6);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  margin-top:var(--s-5);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.hero-meta span:last-child{color:var(--color-accent)}

/* ---------- steps ----------
   A sequence, not a row of feature cards. Hairlines only. */
.steps{margin-top:var(--s-5);list-style:none}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);
  align-items:baseline;
  padding:var(--s-4) 0;border-top:1px solid var(--color-line-soft);
}
.step:last-child{border-bottom:1px solid var(--color-line-soft)}
.step-no{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:28px;line-height:1;color:var(--color-accent);
}
.step-title{
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.step-text{margin-top:var(--s-1);line-height:1.7}

@media (min-width:760px){
  .step{grid-template-columns:auto 220px 1fr;gap:var(--s-4)}
  .step-text{margin-top:0}
}

/* ---------- a personal map ----------
   Her own record, in the folio language the app already uses for
   destinations. */
.journeymap{margin-top:var(--s-5);background:var(--color-folio);
  border:2px solid var(--color-accent);padding:var(--s-5) var(--s-4)}
.journeymap-place{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;font-size:clamp(30px,9vw,44px);line-height:1;
}
.journeymap-entry{padding:var(--s-4) 0;border-top:1px solid var(--color-line-soft)}
.journeymap-entry:first-of-type{margin-top:var(--s-4)}
.journeymap-name{
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);
}
.journeymap-where{margin-top:var(--s-1);line-height:1.6}
.journeymap-when{
  margin-top:2px;font-size:11px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--color-disabled);
}

/* ---------- the way in ---------- */
.cta{padding:var(--s-7) 0 calc(var(--s-7) + env(safe-area-inset-bottom))}
.cta .btn-stack{margin-top:var(--s-5)}

/* ---------- footer ---------- */
.about-footer{
  padding:var(--s-5) var(--pad) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-line-soft);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center;
}
.about-footer a{
  min-height:44px;display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-text);text-decoration:none;
}
/* two different documents, both administrative: how the app treats
   her data, and who runs this website. They sit apart from the
   navigation, and read in the same ink as it. */
@media (min-width:900px){ .about-footer .footer-legal:first-of-type{margin-left:auto} }

/* ---------- movement ----------
   Present, and easy to miss. Anything that has not been revealed yet
   is still fully readable if the script never runs. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}

.parallax{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none !important}
}

/* nothing on this page may push the page sideways */
html,body{overflow-x:hidden}
/* ---------- the phone · a tighter rhythm ----------
   Was copied into every page as an inline <style>. Now once, here,
   so every editorial page breathes the same way on a phone. */
@media (max-width:639px){
  :root{
    --s-3:12px;
    --s-4:18px;
    --s-5:28px;
    --s-6:40px;
    --s-7:52px;
    --s-8:64px;
  }
}