/* ===========================================================================
   ABOUT LAB — a small, fixed picker for the About page's layout, styled to
   match the Theme Lab's neutral dark panel but deliberately simpler: no
   drag, no resize, no docking modes. Four options, one small dock,
   bottom-right, out of the way of the content it's previewing.
   =========================================================================== */
.al-dock{
  position:fixed;right:16px;bottom:16px;z-index:9000;
  display:flex;flex-direction:column;gap:6px;
  background:#12151b;color:#e8ecf2;border:1px solid #2b313b;border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.04) inset;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12px;line-height:1.3;padding:10px;min-width:190px;
}
.al-dock *{box-sizing:border-box;}
.al-dock-label{font-weight:700;letter-spacing:.02em;font-size:10px;
  text-transform:uppercase;color:#7f8aa0;padding:0 2px 2px;}
.al-chip{
  appearance:none;border:1px solid #232833;background:#1a1e26;color:#c7cedb;
  border-radius:8px;padding:7px 10px;text-align:left;cursor:pointer;font:inherit;
}
.al-chip:hover{border-color:#3a4150;color:#e8ecf2;}
.al-chip[aria-pressed="true"]{
  background:#1f2a3b;border-color:#4a7fc4;color:#e8ecf2;
  box-shadow:inset 0 0 0 1px rgba(143,182,232,.35);
}
.al-chip small{display:block;font-size:10px;color:#7f8aa0;margin-top:1px;}
.al-chip[aria-pressed="true"] small{color:#8fb6e8;}
@media (max-width:640px){ .al-dock{left:12px;right:12px;bottom:12px;min-width:0;} }

/* ===========================================================================
   THE STORY — chapters of picture + short text.
   Each chapter is three siblings: .as-head (kicker + heading), .as-media
   (picture or montage) and .as-body (the text). Every layout places those
   three so that nothing sits beside a blank half-column: where a picture and
   its text would not be the same height, the text is either run under the
   picture at full width or flowed in balanced columns. Pictures always show
   whole, at their own aspect ratio.
   =========================================================================== */

/* --- title block: the lede sits beside the title instead of under it ------ */
.al-hero .al-hero-row .lede{margin:0;}
@media (min-width:900px){
  .al-hero .al-hero-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:end;}
  .al-hero .al-title{max-width:none;margin-bottom:0;}
  .al-hero .al-hero-row .lede{max-width:none;padding-bottom:.35em;}
}
.al-banner{line-height:0;}
.al-banner img{width:100%;height:clamp(140px,22vw,340px);object-fit:cover;object-position:50% 45%;}
.al-banner + section{border-top:0;}
.al-story{padding-block:var(--sec-sm);}

/* --- base (and every layout on a phone): picture, heading, text, stacked -- */
.as-story{display:flex;flex-direction:column;gap:clamp(2.25rem,4.5vw,3.5rem);}
.as-ch{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-direction:column;scroll-margin-top:calc(var(--nav-h) + 1rem);}
.as-media{order:-1;margin-bottom:1.25rem;}
.as-media-in{display:grid;gap:.75rem;}
.as-ch--pair .as-media-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;align-items:start;}
.as-fig,.as-aside{margin:0;}
.as-fig img,.as-aside img{width:100%;height:auto;border:1px solid var(--rule);border-radius:2px;}
.as-fig a{display:block;}
.as-fig figcaption{margin-top:.5rem;font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-soft);}
.as-head > .kicker{margin-bottom:.9rem;}
.as-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:none;margin-bottom:.5em;}
.as-body p{font-size:1.06rem;max-width:none;}
.as-body > :last-child{margin-bottom:0;}
.as-aside{float:right;width:min(44%,230px);margin:.3rem 0 .75rem 1.25rem;}
.as-body::after{content:"";display:block;clear:both;}
.as-links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;}
.as-links .more{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--navy);text-underline-offset:3px;}
/* two unlike pictures in one chapter: one row, one shared height */
@media (min-width:760px){
  .as-ch--stack .as-media-in{display:flex;gap:.75rem;align-items:flex-start;}
  .as-ch--stack .as-fig{flex:var(--ar) 1 0;min-width:0;}
}

/* --- the two blocks under the story ---------------------------------------- */
/* the timeline runs in two columns beside the portrait, so the pair end level
   and the portrait fills its side without being blown up */
@media (min-width:901px){
  .al-short .story{align-items:stretch;}
  .al-short #portrait{display:flex;}
  .al-short #portrait .ph{aspect-ratio:auto;height:100%;min-height:320px;}
  .al-short #portrait .ph img{object-position:50% 30%;}
  .al-short .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,2.5rem);margin-top:1.25rem;}
  .al-short .rows li{grid-template-columns:1fr;gap:.25rem;align-content:start;}
  .al-short h2{margin-bottom:0;}
}
.al-now-grid > div > .btn-row{margin-top:1.5rem;}
.al-now-grid .al-credential{margin-top:2rem;}
@media (min-width:900px){
  .al-now-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start;}
  .al-now-grid .al-credential{margin-top:0;}
  .al-now-grid p{max-width:none;}
}

/* --- shared by Classic and Gallery-Led: text runs under the picture at the
       full width, in two balanced columns when there is more than a paragraph */
@media (min-width:900px){
  [data-about-layout="classic"] .as-ch--long .as-body,
  [data-about-layout="gallery"] .as-ch--long .as-body,
  [data-about-layout="compact"] .as-ch--text .as-body{columns:2;column-gap:clamp(2rem,4.5vw,4rem);}
  [data-about-layout="classic"] .as-ch--long .as-body p,
  [data-about-layout="gallery"] .as-ch--long .as-body p,
  [data-about-layout="compact"] .as-ch--text .as-body p{orphans:3;widows:3;}
  /* a one-paragraph chapter: the words large on the left, its picture right */
  [data-about-layout="classic"] .as-ch--aside .as-body,
  [data-about-layout="gallery"] .as-ch--aside .as-body{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(2rem,4.5vw,4rem);align-items:center;}
  [data-about-layout="classic"] .as-ch--aside .as-body::after,
  [data-about-layout="gallery"] .as-ch--aside .as-body::after{content:none;}
  [data-about-layout="classic"] .as-ch--aside .as-aside,
  [data-about-layout="gallery"] .as-ch--aside .as-aside{float:none;width:auto;margin:0;order:2;}
  [data-about-layout="classic"] .as-ch--aside .as-body p,
  [data-about-layout="gallery"] .as-ch--aside .as-body p{font-family:var(--serif);
    font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;}
}

/* --- layout: Classic — picture across the page, heading under it, then the
       text (base order); the two-picture chapter keeps heading and links on
       one line ---------------------------------------------------------------- */
@media (min-width:900px){
  [data-about-layout="classic"] .as-ch--stack{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:end;column-gap:2rem;grid-template-areas:"media media" "head body";}
  [data-about-layout="classic"] .as-ch--stack .as-media{grid-area:media;}
  [data-about-layout="classic"] .as-ch--stack .as-head{grid-area:head;}
  [data-about-layout="classic"] .as-ch--stack .as-body{grid-area:body;padding-bottom:1rem;}
  [data-about-layout="classic"] .as-ch--stack .as-head h2{margin-bottom:.7em;}
}

/* --- layout: Editorial — each chapter set in two balanced columns: heading
       and picture lead the first, the text flows on beneath and across ------ */
@media (min-width:900px){
  [data-about-layout="editorial"] .as-ch{display:block;columns:2;column-gap:clamp(2rem,4.5vw,4rem);}
  [data-about-layout="editorial"] .as-head{break-inside:avoid;break-after:avoid;}
  [data-about-layout="editorial"] .as-media{break-inside:avoid;margin-bottom:1.35rem;}
  [data-about-layout="editorial"] .as-body p{orphans:3;widows:3;}
  [data-about-layout="editorial"] .as-aside{break-inside:avoid;}
  /* the two-picture chapter runs full width: its text is only a pair of links */
  [data-about-layout="editorial"] .as-ch--stack{columns:auto;display:grid;
    grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:2rem;
    grid-template-areas:"head body" "media media";}
  [data-about-layout="editorial"] .as-ch--stack .as-head{grid-area:head;}
  [data-about-layout="editorial"] .as-ch--stack .as-body{grid-area:body;padding-bottom:1rem;}
  [data-about-layout="editorial"] .as-ch--stack .as-media{grid-area:media;margin-bottom:0;}
  [data-about-layout="editorial"] .as-ch--stack .as-head h2{margin-bottom:.7em;}
}

/* --- layout: Gallery-Led — a full-width dark band per chapter carrying its
       heading and its picture; the text sits on the page underneath ---------- */
[data-about-layout="gallery"] .al-story{padding-block:0 var(--sec-sm);}
[data-about-layout="gallery"] .as-story{gap:clamp(1.75rem,3.5vw,2.75rem);}
[data-about-layout="gallery"] .as-ch{max-width:none;padding-inline:0;}
[data-about-layout="gallery"] .as-head{order:-2;background:var(--band);color:var(--on-navy);
  padding:clamp(1.25rem,2.5vw,2rem) max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad))) 0;}
[data-about-layout="gallery"] .as-head > .kicker{color:var(--on-navy-accent);border-bottom-color:var(--rule-dark);}
[data-about-layout="gallery"] .as-head h2{margin-bottom:0;}
[data-about-layout="gallery"] .as-media{background:var(--band);padding:clamp(1rem,2vw,1.5rem) var(--pad) clamp(1.25rem,2.5vw,2rem);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);}
[data-about-layout="gallery"] .as-media-in{max-width:calc(var(--maxw) - 2 * var(--pad));margin-inline:auto;}
[data-about-layout="gallery"] .as-fig img{border:0;border-radius:0;}
[data-about-layout="gallery"] .as-fig figcaption{color:var(--on-navy-soft);}
[data-about-layout="gallery"] .as-body{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
[data-about-layout="gallery"] .as-ch--text .as-head{padding-bottom:clamp(1.25rem,2.5vw,2rem);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);}

/* --- layout: Compact — heading over a small picture on the left, text on the
       right; hairlines instead of gaps; the timeline steps aside ------------ */
[data-about-layout="compact"] .al-short{display:none;}
[data-about-layout="compact"] .as-story{gap:0;}
[data-about-layout="compact"] .as-ch{padding-block:clamp(1.25rem,2.4vw,1.75rem);border-top:1px solid var(--rule);}
[data-about-layout="compact"] .as-ch:first-child{border-top:0;padding-top:0;}
[data-about-layout="compact"] .as-ch:last-child{padding-bottom:0;}
[data-about-layout="compact"] .as-head h2{font-size:clamp(1.35rem,2vw,1.7rem);}
[data-about-layout="compact"] .as-head > .kicker{margin-bottom:.65rem;padding-bottom:.5rem;}
[data-about-layout="compact"] .as-body p{font-size:1rem;margin-bottom:.85em;}
@media (min-width:760px){
  [data-about-layout="compact"] .as-ch{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    column-gap:clamp(1.5rem,3.5vw,3rem);grid-template-rows:auto 1fr;
    grid-template-areas:"head body" "media body";}
  [data-about-layout="compact"] .as-head{grid-area:head;}
  [data-about-layout="compact"] .as-media{grid-area:media;order:0;margin-bottom:0;}
  [data-about-layout="compact"] .as-body{grid-area:body;}
  [data-about-layout="compact"] .as-ch--text{display:flex;}
  [data-about-layout="compact"] .as-ch--stack{grid-template-columns:minmax(0,1fr) auto;align-items:end;
    grid-template-areas:"head body" "media media";grid-template-rows:auto auto;}
  [data-about-layout="compact"] .as-ch--stack .as-body{padding-bottom:.9rem;}
  [data-about-layout="compact"] .as-ch--stack .as-head h2{margin-bottom:.7em;}
}
/* Gallery-Led, two-picture chapter: its links stay on the band with the pictures */
[data-about-layout="gallery"] .as-ch--stack .as-media{margin-bottom:0;padding-bottom:clamp(.75rem,1.5vw,1rem);}
[data-about-layout="gallery"] .as-ch--stack .as-body{max-width:none;background:var(--band);
  padding:0 max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad))) clamp(1.25rem,2.5vw,2rem);}
[data-about-layout="gallery"] .as-ch--stack .as-links .more{color:var(--on-navy);}

/* --- quotes: Jonny's own words are set apart in every layout --------------- */
.as-body p.as-q{font-style:italic;color:var(--ink);}

/* --- layout: Feature — a magazine profile: one reading column, each picture
       across the top of its chapter, his quotes pulled out large ------------- */
[data-about-layout="feature"] .as-ch{max-width:calc(820px + 2 * var(--pad));}
[data-about-layout="feature"] .as-head{text-align:center;}
[data-about-layout="feature"] .as-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);}
[data-about-layout="feature"] .as-body{max-width:var(--measure);margin-inline:auto;}
[data-about-layout="feature"] .as-body p{font-size:1.1rem;}
[data-about-layout="feature"] .as-head + .as-body > p:first-of-type::first-letter,
[data-about-layout="feature"] .as-media + .as-body > p:first-of-type::first-letter{font-family:var(--serif);
  font-size:3.3rem;line-height:.85;float:left;padding:.08em .1em 0 0;color:var(--navy);}
[data-about-layout="feature"] .as-body p.as-q{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.55rem);
  line-height:1.45;border-left:3px solid var(--navy);padding-left:1.1rem;margin-block:1.5em;}
[data-about-layout="feature"] .as-body p.as-q::first-letter{all:unset;}
[data-about-layout="feature"] .al-short{display:none;}
/* the long two-picture chapter: pictures share a row where there is room */
@media (min-width:760px){
  .as-ch:not(.as-ch--pair):not(.as-ch--stack) .as-media-in:has(.as-fig + .as-fig){display:flex;gap:.75rem;align-items:flex-start;}
  .as-ch:not(.as-ch--pair):not(.as-ch--stack) .as-media-in:has(.as-fig + .as-fig) .as-fig{flex:var(--ar) 1 0;min-width:0;}
}

/* the page closes on two links, centred */
.al-now .al-now-links{justify-content:center;margin-top:0;}