/* ==========================================================================
   HAQ COFOUNDER — the founder section, built to the owner's editorial
   reference and then to his corrections.

   He stands cut out of his background so the site's ink runs straight past
   him with no panel and no seam. The headline is set enormous and sits
   BEHIND him, so the figure crosses the type the way the reference does. The
   brief begins beside him and continues underneath, and there is no call to
   action: this section introduces a person, it does not sell anything.
   ========================================================================== */

.about {
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: var(--haq-band, clamp(56px, 9vh, 100px));
  padding-inline: var(--haq-gutter, clamp(20px, 4vw, 48px));
  overflow: clip;
}
.about-in { position: relative; max-width: 1080px; margin-inline: auto; }

/* "Meet our Haq Visionary" is the owner's line and it opens the section, but
   the headline underneath it has to be the published name exactly, because
   that string is counsel-gated and checked on build. So the line he wrote
   becomes the eyebrow and the name takes the display type. */
.about-eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(10px, 1.8vh, 16px);
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--haq-eyebrow, .74rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--record-amber, #f49f2e);
}
[dir="rtl"] .about-eyebrow { letter-spacing: 0; }

/* The headline, behind the figure. */
.about-title {
  position: relative;
  z-index: 0;
  margin: 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.9rem, 11vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.015em;
  color: #f4efe4;
}
/* The type has to be big enough that its second line actually runs behind the
   figure, which is the whole point of the reference: he stands in front of the
   words, not beside them. The name wraps on its own on a phone and holds one
   line on a desk, where the length is what carries the type behind him. */
@media (min-width: 900px) {
  .about-title { font-size: clamp(3rem, 7.4vw, 6.6rem); white-space: nowrap; }
}
/* The reference closes its headline with a single coloured mark. It is drawn
   here rather than typed, so the heading text stays the exact published name
   with nothing added to it. */
.about-title::after { content: "."; color: var(--record-amber, #f49f2e); }

/* The figure: cut out, no ground of its own, and a fifth smaller than it was. */
.about-figure { position: relative; z-index: 1; margin: -8% 0 0 auto; width: min(62%, 300px); }
.about-figure img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .about-figure { position: absolute; inset-block-start: -4%; inset-inline-end: 2%; width: 34%; max-width: 360px; margin: 0; }
}
/* The hairline label runs up beside him, as in the reference. */
.about-rail { display: none; }
@media (min-width: 900px) {
  .about-rail {
    display: flex; align-items: center; gap: 14px;
    position: absolute; z-index: 1; inset-block-start: 6px; inset-inline-end: calc(2% + 360px + 26px);
    writing-mode: vertical-rl;
    font-family: Manrope, system-ui, sans-serif;
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(244,239,228,.5);
  }
  .about-rail::after { content: ""; width: 1px; height: 80px; background: rgba(244,239,228,.3); }
  [dir="rtl"] .about-rail { letter-spacing: 0; }
}

/* A short summary of the man, set beside him. On a phone he stands in the
   right half and used to leave a tall empty column at his left; the summary
   now fills it, so the eye has something to read while it is looking at him.
   The lines are written short on purpose: that column is only about 150px
   wide on the smallest phone we support. */
.about-lede { position: relative; z-index: 2; margin-top: clamp(14px, 3vh, 26px); }
.about-lede-name {
  margin: 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  line-height: 1.14;
  text-wrap: balance;
  color: #f4efe4;
}
.about-lede ul { list-style: none; margin: clamp(10px, 2vh, 16px) 0 0; padding: 0; display: grid; gap: 9px; }
.about-lede li {
  position: relative;
  padding-inline-start: 15px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(.78rem, 2.9vw, .88rem);
  line-height: 1.45;
  color: rgba(244,239,228,.7);
}
.about-lede li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 8px; height: 1px; background: var(--record-amber, #f49f2e);
}
/* The rows are named rather than left to auto-placement, because the whole
   effect depends on the figure sitting in the row BELOW the headline and being
   pulled back up over it. Adding the eyebrow without saying so pushed the
   headline under the portrait and the type stopped running behind him. */
@media (max-width: 899px) {
  .about-in { display: grid; grid-template-columns: minmax(0, 1fr) min(56%, 270px); column-gap: clamp(12px, 3vw, 20px); }
  .about-eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .about-title { grid-column: 1 / -1; grid-row: 2; }
  /* He now stands across two rows: the summary reads beside his head, the
     signature beside his knee, and the brief runs full width underneath. */
  .about-lede { grid-column: 1; grid-row: 3; align-self: start; }
  .about-figure { grid-column: 2; grid-row: 3 / span 2; width: 100%; margin: -8% 0 0; }
  .about-sign { grid-column: 1; grid-row: 4; align-self: end; margin-top: clamp(14px, 2.6vh, 24px); }
  .about-body { grid-column: 1 / -1; grid-row: 5; }
  /* That column is only about 150px wide on the smallest phone we support, so
     the signature sets smaller beside him than it did across the full width.
     Three lines of tracked capitals is a wall on a 390 phone. */
  .about-sign p { font-size: clamp(1.2rem, 5.2vw, 1.55rem); }
  .about-sign span { letter-spacing: .06em; font-size: .66rem; max-width: none; }
}
/* On a desk he is already lifted out of the flow, so the summary simply
   stands above the brief, two facts to a line. */
@media (min-width: 900px) {
  .about-lede { max-width: 40ch; }
  .about-lede ul { grid-template-columns: 1fr 1fr; column-gap: 22px; }
}

/* The brief. It starts beside him and simply carries on underneath. */
.about-body { position: relative; z-index: 2; margin-top: clamp(18px, 3vh, 30px); display: grid; gap: clamp(12px, 2vh, 18px); max-width: 44ch; }
@media (min-width: 900px) { .about-body { max-width: 40ch; margin-top: clamp(20px, 3.4vh, 34px); } }
.about-body p { line-height: 1.62; color: rgba(244,239,228,.82); }
.about-body b { font-weight: 700; color: #f4efe4; }

.about-sign { position: relative; z-index: 2; margin-top: clamp(20px, 3.4vh, 32px); }
/* On a desk he is lifted out of the flow into the right-hand column, and the
   signature goes with him: same width, same inline edge, sitting under his
   feet rather than under his words. Anchoring it to the figure column instead
   of to a gap beside it is what keeps it off the brief at every desk width.

   He is a 1000x1666 cutout, so at 34% of a 1080 column he stands 600px tall -
   taller than the brief beside him, which is why the section has to be told to
   make room. Without the min-height the signature lands on his shins. The
   formula tracks the figure: column is 92vw until it caps at 1080, he is 34%
   of that at 5:3, and the signature needs its own 153px underneath. */
@media (min-width: 900px) {
  .about-in { min-height: calc(50.1vw + 147px); }
  .about-sign {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 2%;
    width: min(34%, 360px);
    margin: 0;
    text-align: end;
  }
  .about-sign span { margin-inline-start: auto; max-width: none; }
}
/* Past 1160 the column is pinned at 1080 and so is he, so the height stops growing. */
@media (min-width: 1160px) { .about-in { min-height: 735px; } }
.about-sign p { font-family: "Instrument Serif", Newsreader, Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1; color: #f4efe4; }
.about-sign span {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(244,239,228,.26);
  max-width: 32ch;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,239,228,.58);
}
[dir="rtl"] .about-sign span { letter-spacing: 0; }

/* One arrival, gated, so a blocked script ships the section whole. */
@media (prefers-reduced-motion: no-preference) {
  html.about-js .about-eyebrow, html.about-js .about-title, html.about-js .about-figure, html.about-js .about-lede, html.about-js .about-body p, html.about-js .about-sign {
    opacity: 0; translate: 0 18px;
  }
  html.about-js .about.in .about-eyebrow,
  html.about-js .about.in .about-title,
  html.about-js .about.in .about-figure,
  html.about-js .about.in .about-lede,
  html.about-js .about.in .about-body p,
  html.about-js .about.in .about-sign {
    opacity: 1; translate: 0 0;
    transition: opacity .6s ease, translate .7s cubic-bezier(.25,.8,.25,1);
  }
  html.about-js .about.in .about-figure { transition-delay: .1s; }
  html.about-js .about.in .about-lede { transition-delay: .16s; }
  html.about-js .about.in .about-body p:nth-child(1) { transition-delay: .2s; }
  html.about-js .about.in .about-body p:nth-child(2) { transition-delay: .28s; }
  html.about-js .about.in .about-sign { transition-delay: .38s; }
}