/* Direct Stay — About.
   Typographic register: the two founder portraits are the only imagery, and they sit in
   the first fold so a visitor meets two faces before they read a word. They appear once
   on the page; the bios lower down are text, because running the same two photos twice
   halves what they are worth. One kicker on the page (the opening), no numbered
   scaffolding except the one section that is a genuine ordered sequence, and no two
   sections built on the same structure. */

.about-page{overflow:clip}

/* shared bits */
.ab-kicker{
  margin:0 0 28px;
  color:var(--teal-dark);
  font-size:13px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ab-text-link{
  /* inline-flex + min-height gives it a 44px touch target without changing how it looks */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--teal-dark);
  font-size:15px;
  font-weight:750;
  text-decoration:none;
}
.ab-text-link span{display:inline-block;transition:transform .4s var(--ease-out)}
.ab-text-link:hover{text-decoration:underline;text-underline-offset:5px}
.ab-text-link:hover span{transform:translateY(3px)}
.ab-text-link:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}

/* ------------------------------------------------------------------
   1. Opening statement
   ------------------------------------------------------------------ */
.ab-open{
  min-height:100svh;
  padding:clamp(150px,17vh,196px) var(--gutter) clamp(64px,9vh,96px);
  display:flex;
  align-items:center;
  background:var(--cloud);
}
.ab-open-inner{width:min(100%,var(--max));margin-inline:auto}

.ab-open-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:end;
  gap:clamp(36px,5vw,80px);
}
.ab-open-title{
  margin:0;
  max-width:14ch;
  color:var(--ink);
  /* steps down from the full display size: it now shares the fold with the faces */
  font-size:clamp(2.6rem,5.4vw,4.5rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.04em;
}
.ab-open-title span{display:block}

/* the faces: first thing on the page, at a size you can actually read a person from */
.ab-faces{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.ab-face{margin:0;min-width:0}
.ab-face img{
  display:block;
  width:100%;
  /* height:auto is required, not tidiness: the img carries a height attribute, which maps
     to a presentational height, and aspect-ratio is ignored unless one axis is auto */
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:16px;
  background:var(--ink);
  /* the two sources are both black and white but at different densities; this settles
     them into one treatment so the pair reads as a single commission */
  filter:grayscale(1) contrast(1.06) brightness(.98);
  transition:filter .6s var(--ease-out), transform 1s var(--ease-out);
}
.ab-face:nth-child(2) img{object-position:50% 30%}
.ab-face:hover img{filter:grayscale(1) contrast(1.1) brightness(1);transform:translateY(-4px)}
.ab-face figcaption{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:16px;
}
.ab-face figcaption strong{
  font-size:clamp(16px,1.3vw,19px);
  font-weight:700;
  letter-spacing:-.015em;
}
.ab-face figcaption span{
  color:var(--muted);
  font-size:clamp(13px,1.05vw,15px);
  font-weight:500;
}

.ab-open-foot{
  margin-top:clamp(48px,7vw,86px);
  padding-top:clamp(28px,3vw,38px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
  gap:clamp(32px,5vw,72px);
}
.ab-open-lede{
  margin:0;
  max-width:56ch;
  color:var(--muted);
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  text-wrap:pretty;
}
.ab-open-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:26px;
  justify-content:flex-end;
}

/* ------------------------------------------------------------------
   2. Position — the argument, resolving line by line
   ------------------------------------------------------------------ */
.ab-position{
  padding:clamp(110px,15vw,190px) var(--gutter);
  background:var(--navy);
  color:var(--cloud);
  /* the nav on every page deep-links here, and the header floats over the content */
  scroll-margin-top:var(--header-h);
}
.ab-position-inner{width:min(100%,1240px);margin-inline:auto}

.ab-statement{
  margin:0;
  font-size:clamp(1.6rem,3.35vw,2.95rem);
  font-weight:500;
  /* light type on a dark ground reads lighter, so it gets the extra leading */
  line-height:1.24;
  letter-spacing:-.028em;
}
.ab-line{
  display:block;
  /* visible by default — the reveal below only enhances it */
  opacity:1;
}
.ab-line--turn{
  margin-top:.7em;
  color:var(--signal-yellow);
}
.ab-position-note{
  margin:clamp(44px,5vw,68px) 0 0;
  max-width:52ch;
  color:oklch(88% .02 294);
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
  text-wrap:pretty;
}

/* the reveal: one driver, a per-line lift as the block crosses the viewport */
@media (prefers-reduced-motion:no-preference){
  .js-lines .ab-line{
    opacity:0;
    transform:translateY(.42em);
    transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .js-lines.is-in .ab-line{opacity:1;transform:none}
}

/* ------------------------------------------------------------------
   3. Four moves — a real sequence, ruled rows
   ------------------------------------------------------------------ */
.ab-moves{
  padding:clamp(104px,13vw,160px) var(--gutter);
  background:var(--cloud);
  color:var(--ink);
}
.ab-moves-inner{width:min(100%,var(--max));margin-inline:auto}
.ab-moves-title{
  margin:0 0 clamp(48px,6vw,76px);
  max-width:16ch;
  font-size:clamp(2.3rem,5vw,4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.ab-move-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ab-move{
  display:grid;
  grid-template-columns:104px minmax(0,26ch) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(20px,3vw,52px);
  padding:clamp(30px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line);
  transition:background .45s var(--ease-out);
}
.ab-move:hover{background:rgb(76 29 149 / .035)}
.ab-move-num{
  font-size:15px;
  font-weight:750;
  letter-spacing:.06em;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.ab-move h3{
  margin:0;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:650;
  line-height:1.16;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.ab-move p{
  margin:0;
  max-width:62ch;
  color:var(--muted);
  font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.62;
  text-wrap:pretty;
}

/* ------------------------------------------------------------------
   4. The two of us — bios only; the faces already landed in the first fold
   ------------------------------------------------------------------ */
.ab-people{
  padding:clamp(104px,13vw,160px) var(--gutter);
  background:var(--mist);
  color:var(--ink);
}
.ab-people-inner{width:min(100%,var(--max));margin-inline:auto}
.ab-people-title{
  margin:0 0 clamp(56px,7vw,96px);
  font-size:clamp(2.3rem,5vw,4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
}

.ab-person-set{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,6vw,96px);
}
.ab-person{scroll-margin-top:calc(var(--header-h) + 48px)}

.ab-person h3{
  margin:0;
  font-size:clamp(2rem,3.6vw,3rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
}
.ab-person-role{
  margin:14px 0 26px;
  color:var(--teal-dark);
  font-size:15px;
  font-weight:750;
}
.ab-person p{
  margin:0;
  max-width:58ch;
  color:var(--muted);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.62;
  text-wrap:pretty;
}
.ab-person-line{
  margin-top:26px!important;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--ink)!important;
  font-weight:600;
}

/* ------------------------------------------------------------------
   5. How we work — deliberately not the ruled list again
   ------------------------------------------------------------------ */
.ab-practice{
  padding:clamp(104px,13vw,160px) var(--gutter);
  background:var(--cloud);
  color:var(--ink);
}
.ab-practice-inner{
  width:min(100%,var(--max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.ab-practice-title{
  margin:0;
  position:sticky;
  top:calc(var(--header-h) + 40px);
  font-size:clamp(2.3rem,5vw,4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
}
.ab-practice-set{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.ab-practice-item h3{
  margin:0 0 16px;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.ab-practice-item p{
  margin:0;
  max-width:64ch;
  color:var(--muted);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.62;
  text-wrap:pretty;
}

/* ------------------------------------------------------------------
   6. Close
   ------------------------------------------------------------------ */
.ab-close{
  padding:clamp(96px,11vw,140px) var(--gutter);
  background:var(--violet-mid);
  color:var(--ink);
}
.ab-close-inner{
  width:min(100%,var(--max));
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}
.ab-close-inner h2{
  margin:0;
  max-width:18ch;
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width:1080px){
  .ab-move{grid-template-columns:72px minmax(0,1fr);row-gap:12px}
  .ab-move p{grid-column:2}
  .ab-practice-inner{grid-template-columns:minmax(0,1fr)}
  .ab-practice-title{position:static}
}

@media (max-width:860px){
  .ab-open-foot{grid-template-columns:minmax(0,1fr)}
  .ab-open-actions{justify-content:flex-start}
  .ab-person-set{grid-template-columns:minmax(0,1fr)}

  /* stacked, the faces go ABOVE the headline: the point of this layout is that a
     visitor meets two people before they read anything */
  .ab-open-main{grid-template-columns:minmax(0,1fr);gap:clamp(30px,6vw,44px)}
  .ab-faces{order:-1}
  .ab-face img{aspect-ratio:1 / 1}
  .ab-face:nth-child(2) img{object-position:50% 26%}
}

@media (max-width:720px){
  .ab-open,
  .ab-position,
  .ab-moves,
  .ab-people,
  .ab-practice,
  .ab-close{padding-left:20px;padding-right:20px}
  .ab-open{min-height:auto;padding-top:132px;padding-bottom:72px}
  .ab-statement{line-height:1.28}
  /* the statement is written to break on a wide measure; on a phone let it reflow */
  .ab-line{display:inline}
  .ab-line--turn{display:block;margin-top:.7em}
  .ab-move{grid-template-columns:56px minmax(0,1fr)}
  .ab-close-inner{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .ab-face img,
  .ab-text-link span,
  .ab-move{transition:none}
  .ab-face:hover img{transform:none}
}