/* ==========================================================================
   about.css — the About page: dark root, portrait hero, the "Areas" rows
   (the home listings rows mirrored: hover inverts to WHITE), the verbatim
   bio blocks, the testimonial statement, the 2-up portraits and the CTA.

   Normative sources:
     docs/research/01-kononenko-base.md  §9 ABOUT (dark page: hero, offices
                                         mirror, team cards), §5.4 row anatomy
                                         + entrance, §2 tokens / type scale
   1rem === 1 design px (canvas 1920 / 375). One breakpoint: 767.98px.

   Section CSS never sets font-family — that is core.js contract (a); the
   markup carries `.f-mn` / `.f-sf`.
   ========================================================================== */

/* ==========================================================================
   1. Dark root (01 §2.2: "about page root is inverted")
   Loaded after main.css, so `body.page-about` simply out-specifies `body`.
   core.js reads the computed body background for the transition overlay and
   the wipe pin, so setting it here is also what makes home ↔ about wipe out
   to black instead of to white.
   ========================================================================== */

body.page-about {
  background-color: var(--bk);
  color: var(--wh);
}
body.page-about ::selection {
  background-color: var(--wh);
  color: var(--bk);
}

/* ==========================================================================
   2. HERO (01 §9 `ecu`)

   DEVIATION, deliberate — §9's hero is a full-bleed image band 1702rem tall
   with the headline overlaid at top 170rem. Our source frames are VERTICAL
   portraits, 1066×1600, and full-bleeding one at this canvas breaks in three
   independent ways:
     (a) sharpness — 1066px of source stretched across 1920rem is a 1.8×
         upscale on a face, against a site whose photos are all 2000w;
     (b) crop — the subject's head starts 8% into the frame, so at any band
         height the face lands in the top third, exactly where §9 puts the
         headline. There is no crop that clears it;
     (c) legibility — the headline would sit on sunlit foliage and need a
         scrim heavy enough to grey down the portrait itself.
   So the band stays full-width and 1100rem tall, but the portrait is a plate
   on its right (860rem — a 0.8× DOWNscale of the source, i.e. sharp) and the
   headline keeps §9's top 170rem / left 30rem / indent 130rem in the black
   beside it. Parallax speed 20 is unchanged (core.js [data-parallax]).
   ========================================================================== */

.ab-hero {
  position: relative;
  height: 1100rem;
  /* NO `overflow: hidden` here — that is what silently amputated the headline.
     The clip this band actually needs belongs to the parallax plate, and
     `.ab-hero-media` already carries its own. On the band it did nothing but
     guarantee that any headline taller than 1100rem gets cut mid-glyph with no
     warning, which is exactly what happened: the copy ran to eight masked
     lines, 1368rem to its baseline, and the bottom 268rem were gone. Without
     it, a headline that outgrows the band spills into the 200rem of black
     above the Areas section — visible and fixable, instead of invisible. */
}

.ab-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 860rem;
  height: 100%;
  overflow: hidden;
}
.ab-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* art direction: 20% down the frame keeps a little headroom above him and
     cuts at the thigh rather than the knee. */
  object-position: center 20%;
  will-change: transform;
}

.ab-hero-h {
  position: absolute;
  top: 170rem;
  left: var(--pad);
  /* §9's 1374rem measure would run under the plate; 1000rem is what clears
     it (plate starts at 1920 − 860 = 1060rem). */
  max-width: 1000rem;
  /* `.txt-indent` (main.css §8) turns this into the split-safe pair. */
  --ti: 130rem;
}

/* DEVIATION from `.fn-h3` (118rem), desktop only.

   §9's headline sits in a 1374rem measure; ours is 1000rem, because the
   portrait plate takes the right 860rem of the band. Narrowing the measure by
   27% without touching the type left this sentence — 84 characters — running
   to EIGHT masked lines. Each `.ln-mask` is line-height 0.9 plus 0.35em of
   descender padding top and bottom, so eight of them measure 1257rem; from
   `top: 170rem` that put the last line 268rem past the bottom of the band.

   96rem is the largest step that fits: seven lines, 902rem, clearing the band
   by 76rem — and it breaks better, with no one-word last line. Scoped to
   desktop so the mobile scale (`.fn-h3` = 36rem) is untouched; below 768 the
   headline is in flow under the plate and was never at risk.

   IF THE COPY CHANGES, re-check this. The number that matters is
   `.ab-hero-h`'s bottom against `.ab-hero`'s. */
@media (min-width: 767.99px) {
  .ab-hero-h {
    font-size: 96rem;
  }
}

@media (max-width: 767.98px) {
  /* Stacked: plate first, headline under it — 375rem of width cannot hold a
     36rem headline beside a portrait. */
  .ab-hero {
    height: auto;
  }
  .ab-hero-media {
    position: relative;
    width: 100%;
    height: 420rem;
  }
  .ab-hero-h {
    position: static;
    max-width: none;
    padding: 32rem var(--pad) 0;
    --ti: 24rem;
  }
}

/* ==========================================================================
   3. AREAS (01 §9 `aat` — the home listings rows, mirrored)
   Row anatomy is main.css §19 verbatim (hairlines 1px currentColor at .15,
   overflow hidden, 14rem padding, 7×7 arrow parked right). The ONE change is
   the hover: on a dark page the invert runs the other way, to white.
   ========================================================================== */

.ab-areas {
  margin-top: 200rem;
}
.ab-lbl {
  grid-column: 1 / 2;
}
.ab-areas-body {
  grid-column: 8 / -1;
}
.ab-areas-h {
  max-width: 856rem;
}
.ab-rows {
  width: 856rem;
  margin-top: 80rem;
  display: flex;
  flex-direction: column;
}

/* one row ---------------------------------------------------------------- */
.ab-row {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
/* Instant invert, no transition property — same as the home rows (01 §5.4).
   The muted cell keeps its explicit gray on both sides of the flip. */
.ab-row:hover {
  background-color: var(--wh);
  color: var(--bk);
}

.ab-rule {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  opacity: 0.15;
}
.ab-rule--top { top: 0; }
.ab-rule--btm { bottom: 0; }

.ab-head {
  position: relative;
  display: flex;
  gap: 20rem;
  padding: 14rem 0;
}
.ab-name {
  display: block;
  width: 230rem;
  flex: none;
}
.ab-note {
  display: block;
  flex: 1 1 auto;
  padding-right: 30rem;
  color: var(--gr3);
}
.ab-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  width: 10rem;
  height: 10rem;
  transform: translateY(-50%);
  opacity: 0.6;
}

@media (max-width: 767.98px) {
  .ab-areas {
    margin-top: 80rem;
  }
  .ab-lbl {
    margin-bottom: 24rem;
  }
  .ab-rows {
    width: 100%;
    margin-top: 32rem;
  }
  /* 01 §5.4 mobile row: 2 columns, arrow pinned top-right. */
  .ab-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem 16rem;
    padding: 12rem 28rem 12rem 0;
  }
  .ab-name,
  .ab-note {
    width: auto;
    padding-right: 0;
  }
  .ab-arrow {
    top: 12rem;
    transform: none;
  }
}

/* ==========================================================================
   4. BIO (verbatim client copy; 01 §5.3 def-list anatomy on 01 §9's grid)
   Lead is the fn-h5 serif statement; each titled section is a serif label
   column + a ~620rem measure, alternating left/right down the page.
   ========================================================================== */

.ab-bio {
  margin-top: 200rem;
}
.ab-lead {
  max-width: 1240rem;
  margin-bottom: 140rem;
  --ti: 130rem;                 /* .txt-indent, main.css §8 */
}

.ab-blk + .ab-blk {
  margin-top: 100rem;
}
.ab-blk-k {
  grid-column: 1 / 3;
}
/* Body copy stays full white: at 16rem (12px on a 1440 viewport) the muted
   #929292 the intro paragraphs use on the WHITE home page would be a weak
   read on black, and this is the longest prose on the site. Muted is kept
   for the labels beside it — the caption cells, the row notes and the
   testimonial attribution. */
.ab-blk-b {
  grid-column: 4 / 10;
  max-width: 620rem;
}
.ab-blk:nth-child(even) .ab-blk-k {
  grid-column: 7 / 9;
}
.ab-blk:nth-child(even) .ab-blk-b {
  grid-column: 10 / -1;
}

/* --------------------------------------------------------------------------
   BROKERAGE MARK

   The Roatan Reef Realty logo is a light-background asset: the palms, the
   roofline and the "REALTY" rule are WHITE, and they only read because of the
   grey sun-disc behind them. On this page (body.page-about is --bk) it would
   lose half its artwork, and a white knockout would be worse still — the white
   palms would dissolve into a white disc. Recolouring someone else's brokerage
   mark is also not ours to do. So it keeps its own colours and gets a light
   plate, which is what --bg2 was reserved for.

   Column 4 / 10 matches .ab-blk-b on an ODD block, and "About Roatan Reef
   Realty" is the fifth and last one — so the plate lines up under that copy
   rather than floating in the gutter.
   -------------------------------------------------------------------------- */
.ab-brand {
  margin: 64rem 0 0;
}
.ab-brand-plate {
  grid-column: 4 / 10;
  justify-self: start;
  background-color: var(--bg2);
  padding: 30rem 36rem;
}
.ab-brand-plate img {
  display: block;
  width: 220rem;
  height: auto;
}
@media (max-width: 767.98px) {
  .ab-brand {
    margin-top: 48rem;
  }
  .ab-brand-plate {
    align-self: flex-start;
    padding: 22rem 26rem;
  }
  .ab-brand-plate img {
    width: 176rem;
  }
}

@media (max-width: 767.98px) {
  .ab-bio {
    margin-top: 80rem;
  }
  .ab-lead {
    max-width: none;
    margin-bottom: 56rem;
    --ti: 24rem;
  }
  /* `.grd` is already a column flex here — only the spacing needs setting. */
  .ab-blk + .ab-blk {
    margin-top: 48rem;
  }
  .ab-blk-k {
    margin-bottom: 12rem;
  }
  .ab-blk-b {
    max-width: none;
  }
}

/* ==========================================================================
   5. TESTIMONIAL (01 §9 statement voice)
   ========================================================================== */

.ab-quote-sec {
  margin-top: 220rem;
}
/* Quote left, portrait right, both ending on the same line: `align-items: end`
   sets the figure's caption row against the quote's attribution row, which is
   what makes the two read as one block rather than two things that happen to
   be side by side. The quote is the taller of the two, so the plate hangs from
   the bottom and the black above it is the breathing room. */
.ab-quote-grid {
  align-items: end;
}
.ab-quote-col {
  grid-column: 1 / 11;
}
/* DEVIATION, measured: this block was specced at fn-h3 (118rem), which is the
   §9 statement voice — sized for kononenko's ten-word sentences. The client's
   testimonial is 196 characters: at fn-h3 it rendered as NINE lines of 88px
   type, taller than the viewport (screenshotted at 1440×900). That is the
   same trap build.js's LEAD_MAX guard documents for the MLS descriptions, so
   the same answer applies — one step down the scale, fn-h4, which lands it at
   five lines and reads as a statement again. The indent is unchanged.

   The 1500rem max-width is gone: the grid column is the measure now, and a
   max-width on top of it would only ever fight the column or do nothing. */
.ab-quote-t {
  --ti: 130rem;                 /* .txt-indent, main.css §8 */
}

/* THE QUOTE WAS WRAPPING AT HALF ITS COLUMN. Measured at 1920: a plain
   paragraph with these exact classes fills the 1233rem column and sets in
   SEVEN lines; the live, split one set in TWELVE, none of them wider than
   659rem of ink. That is what made the black gap between the quote and the
   plate — the text was never reaching the column it had been given.

   Cause, and it is a timing bug inside SplitText's own measuring pass.
   `text-indent` inherits. main.css §8 knows this and cancels it on `.ln-mask`
   and `.ln` — but SplitText splits into WORDS first and reads their positions
   to decide where the lines fall, and at that moment no `.ln` exists yet. The
   `.wd` spans are still direct children of `.txt-indent`, and because core.js
   splits with `tag: 'span'` our own CSS gives them `display: inline-block` —
   the one box type that honours `text-indent`. So every word carried 130rem
   of phantom indent, the browser wrapped early, and SplitText froze those
   wrong breaks into the lines it built. Cancelling the indent one level
   deeper is all it takes.

   SCOPE: this is deliberately NOT the global `.txt-indent .wd` rule, which
   belongs in main.css §8. The same bug is measurably on `.ab-hero-h` (7 lines
   -> 4), `.ab-lead` (10 -> 5) and every split `.txt-indent` headline on the
   home and listing pages, and fixing it there re-flows pages that are already
   signed off. Flagged in HANDOFF for the client's call; if it is taken
   site-wide, this block comes out and `.ab-hero-h`'s 96rem step-down (§2)
   should be re-checked, because at four lines it no longer needs it. */
.ab-quote-t .wd,
.ab-quote-t .ch {
  text-indent: 0;
}
.ab-quote-c {
  margin-top: 60rem;
  margin-left: 130rem;
  color: var(--gr3);
}

@media (max-width: 767.98px) {
  .ab-quote-sec {
    margin-top: 80rem;
  }
  .ab-quote-t {
    max-width: none;
    --ti: 24rem;
  }
  .ab-quote-c {
    margin-top: 24rem;
    margin-left: 24rem;
  }
}

/* ==========================================================================
   6. PORTRAIT (was 01 §9 `jqf` team cards, 2-up — now one plate, and it lives
   inside the testimonial block above rather than in a section of its own)

   606rem × 900rem at the 1920 canvas. That is a 0.673 box against a 0.666
   source — deliberately within half a percent of the frame's own ratio, so
   `cover` has essentially nothing to crop and the photograph is shown whole.
   `object-position` only matters for the rounding.
   ========================================================================== */

.ab-port {
  grid-column: 11 / -1;
}
.ab-port-img {
  height: 900rem;
  overflow: hidden;
}
.ab-port-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.ab-port-cap {
  display: flex;
  justify-content: space-between;
  gap: 20rem;
  margin-top: 14rem;
}
.ab-port-r {
  color: var(--gr3);
}

@media (max-width: 767.98px) {
  /* .grd is a flex column below 768, so the two simply stack — quote, then
     plate. `align-items: end` would mean "right edge" down here, hence the
     reset; the column rules are inert and left out. */
  .ab-quote-grid {
    align-items: stretch;
    row-gap: 60rem;
  }
  .ab-port-img {
    height: 420rem;
  }
}

/* ==========================================================================
   7. CONTACT CTA
   `data-btn-color="light"` = white plate, black label (main.css §14): the
   one high-contrast object on a black page.
   ========================================================================== */

.ab-cta {
  margin-top: 220rem;
}
.ab-cta-in {
  display: flex;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .ab-cta {
    margin-top: 80rem;
  }
}