/* ==========================================================================
   Jonshan Safari: about
   Loaded only on /about/. Everything structural comes from base.css and
   home.css; this file is the hero and three small layouts.
   ========================================================================== */

/* ---------- hero: the portrait, standing in the painted dunes ----------
   The homepage hero is 90vh of drawn desert with nothing in it but type. Here
   the photograph is the subject, so the same artwork is cut down to a band and
   the man is stood in it: his frame runs to the very bottom edge of the
   section, so the next band begins at his feet rather than cropping him. */
.abt-hero{
  --pt:clamp(112px,12vw,148px);   /* clears the absolutely-positioned masthead */
  position:relative;
  padding:var(--pt) 0 0;
  overflow:hidden;
  background:var(--sand-pale);
}
.abt-hero .dunes{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The painted sun is hidden rather than moved. The photograph already has one
   in it, and two suns in a single composition read as an oversight. */
.abt-hero .sun{display:none}
/* No entrance animation either: the homepage spends the site's one piece of
   uninvited motion on its own hero, and dunes sliding up under a portrait that
   cannot move with them looks like a loading fault rather than a flourish. */
.abt-hero::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.07;pointer-events:none;
}

.abt-hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(26px,4vw,52px);
  align-items:end;
}
.abt-hero__copy{align-self:center;padding-bottom:clamp(30px,4vw,56px)}
.abt-hero .h1{color:var(--bark);max-width:9ch}
.abt-hero__lede{
  margin-top:22px;max-width:44ch;
  font-size:clamp(18px,1.6vw,21px);line-height:1.55;
  color:var(--bark-2);
}

/* Native aspect, so the arch takes nothing off the top or the bottom of the
   photograph. The cusped crown is already biting into it as it is. */
.abt-portrait{align-self:end;width:100%}
.abt-portrait .arch__frame{aspect-ratio:853/1280}

/* ---------- the hero, stacked ----------
   On a phone the photograph comes first. The page is about a person, and on a
   small screen the person should be what you land on, not his name.

   That move breaks the desktop composition, though: the dune artwork is anchored
   to the bottom of the section, so with the copy last the headline would sit on
   the darkest painted bands: #3D230D on #A76C2B is about 2.9:1, which fails.
   So the drawing is clipped to end at the portrait's feet, and the section takes
   the artwork's own last colour underneath. He still stands in the dunes, the
   copy gets clean ground, and there is no seam where the drawing stops because
   both sides of it are the same value.

   The portrait's width is the single source of truth for both: the dune band's
   height is derived from it rather than guessed alongside it. */
@media (max-width:879px){
  .abt-hero{
    --pw:min(74vw,340px);                    /* portrait width  */
    --ph:calc(var(--pw) * 1280 / 853);       /* its native height */
    background:#F0D6A6;                      /* dune--4's own fill in hero-dunes.php */
    padding-bottom:clamp(40px,9vw,60px);
  }
  .abt-hero .dunes{inset:0 0 auto;height:calc(var(--pt) + var(--ph))}
  .abt-portrait{order:-1;max-width:var(--pw);margin-inline:auto}
  .abt-hero__copy{padding-bottom:0}
}
/* The portrait column tracks the viewport between 880 and ~1200 and only then
   settles at 430px. Pinned at 430 from 880 up it took half a tablet screen and
   squeezed the name into a 390px column. */
@media (min-width:880px){
  .abt-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,36vw,430px))}
}

/* ---------- the story ----------
   One column, one measure, no pull quotes. --bark-2 rather than --muted: this
   is the page's main reading text, not a caption under something else. */
.abt-story p{
  max-width:62ch;
  font-size:18px;line-height:1.72;
  color:var(--bark-2);
}
.abt-story p + p{margin-top:20px}

/* ---------- two photographs, no heading ----------
   A breath between the statements and the ask. Tighter block padding than a
   normal band, because there is no heading above them to make room for. */
.abt-pair-band{padding-block:clamp(48px,6vw,84px)}
.abt-pair{display:grid;gap:clamp(22px,3vw,38px)}
.abt-pair .arch__frame{aspect-ratio:3/2}
@media (min-width:760px){.abt-pair{grid-template-columns:1fr 1fr}}