/* ==========================================================================
   COMPONENT — .c-about
   Who is doing the filming.

   Deliberately NOT a second hero. The hero is full-bleed footage under a
   headline; two of those back to back read as a stutter, not a sequence. So
   this section sits on a solid ink surface and carries ONE framed portrait —
   a plate, not a backdrop. The page goes: full-bleed → framed → paper, which
   is a rhythm rather than a repeat.

   The portrait frame takes a looping clip of Alex to camera. It is built so a
   real photograph drops straight in: replace the <div data-about-stage> with
   an <img class="c-about__portrait-img"> and nothing else changes.

   WP Phase 2 target: template-parts/sections/about.php
   ========================================================================== */

.c-about {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--slate-950);
  color: var(--stone-50);
  overflow: clip;
  isolation: isolate;
}

/* A single faint arc of limestone light in the top right — enough to stop the
   surface reading as flat black, far short of a photographic bed. */
.c-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 70% at 88% -10%,
    color-mix(in oklab, var(--slate-700) 55%, var(--stone-300)) 0%,
    transparent 62%);
  opacity: 0.5;
}

.c-about__shell { position: relative; z-index: 1; row-gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   The portrait — columns 1 to 4, a tall plate with a hairline offset frame.
   -------------------------------------------------------------------------- */

.c-about__portrait {
  grid-column: content-start / span 4;
  position: relative;
  align-self: start;
}

/* The offset rule behind the plate: the one piece of ornament in the section. */
.c-about__portrait::before {
  content: "";
  position: absolute;
  inset-block: var(--sp-5) calc(var(--sp-5) * -1);
  inset-inline: calc(var(--sp-5) * -1) var(--sp-5);
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 26%, transparent);
  pointer-events: none;
}

.c-about__plate {
  position: relative;
  z-index: 1;
  /* 7:10, the photograph's own ratio. A full-length shot in a 4:5 frame
     loses either his feet or the top of the doorway, and the doorway is half
     the picture. */
  aspect-ratio: 7 / 10;
  overflow: hidden;
  background:
    linear-gradient(168deg, var(--slate-800) 0%, var(--slate-950) 70%);
}

/* Cover-fit a 16:9 clip into a 4:5 plate. The subject of a talking-to-camera
   shot sits centre frame, so cropping the sides is safe; sizing is done in JS
   for the same cross-axis reason as every other bed on the site. */
.c-about__stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.c-about[data-portrait-ready] .c-about__stage { opacity: 1; }

.c-about__stage iframe {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  filter: saturate(0.96) contrast(1.02);
  pointer-events: none;
}

/* Drop-in slot for a real photograph. */
.c-about__portrait-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.c-about__caption {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  /* No backdrop-filter. See the note in base.css on the washes — same
     complaint, same cause. A backdrop blur makes the browser read back
     everything already painted behind the element and blur it again, and it
     has to redo that whenever the backdrop moves. On a page that scrolls past
     video, that is every frame.

     The opacity is raised to compensate: a blur and a slightly darker plate
     are doing the same job here, which is stopping the picture behind from
     competing with the type in front. Only one of them costs anything. */
  background: color-mix(in oklab, var(--slate-950) 88%, transparent);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--stone-300);
  line-height: 1.5;
}

.c-about__caption::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
}

/* --------------------------------------------------------------------------
   The writing — columns 6 to 12.
   -------------------------------------------------------------------------- */

.c-about__body { grid-column: col 6 / content-end; }

.c-about__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.c-about__eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: var(--bw-hair);
  background: currentColor;
}

.c-about__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--fs-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.c-about__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

.c-about__copy {
  margin-block-start: var(--sp-5);
  max-inline-size: none;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--stone-300);
  text-wrap: pretty;
}

.c-about__copy + .c-about__copy { margin-block-start: var(--sp-4); }

/* --------------------------------------------------------------------------
   THE FLAG, TRAILING

   `.c-flag` leads by default — it carries its space on the end, because
   everywhere else on the site it sits in front of the word. Here it follows,
   twice, so the space has to move to the other side of it. Same reason the
   footer rule exists.

   It is an SVG and not the 🇲🇹 emoji on purpose: regional-indicator pairs
   render as the bare letters "MT" on Windows, which has no flag font. The
   client is on a Mac and would never have seen it; a third of his visitors
   would have seen nothing else.
   -------------------------------------------------------------------------- */

.c-about__title .c-flag,
.c-about__copy .c-flag {
  margin-inline: 0.3em 0;
  opacity: 0.95;
}

/* The sign-off. One line, larger, in the section's own accent — it is the
   last thing said before the figures, and reading as body copy buried it. */
.c-about__copy--send {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--c-accent-text);
  text-wrap: nowrap;
}

.c-about__copy--send .c-flag { inline-size: 0.85em; }

/* --- Figures -------------------------------------------------------------- */

.c-about__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  padding-block-end: var(--sp-6);
}

.c-about__figure {
  border-block-start: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 22%, transparent);
  padding-block-start: var(--sp-3);
}

.c-about__figure dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
  margin-block-end: var(--sp-2);
}

.c-about__figure dd {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--tr-tight);
}

/* The cards need air above them: the figures row sits directly overhead and
   the two were touching. */
.c-about .c-socials { margin-block-start: var(--sp-4); }

/* --- Social links --------------------------------------------------------- */

.c-about__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-block-start: var(--sp-7);
}

.c-about__links a {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 20%, transparent);
  color: var(--stone-300);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.c-about__links a:hover {
  color: var(--stone-50);
  border-color: var(--c-accent-text);
  transform: translateY(-0.25rem);
}

.c-about__links svg { inline-size: 1.15rem; block-size: auto; }
.c-about__links a:hover svg { color: var(--c-accent-text); }

.c-about__links small {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
}

.c-about__links b {
  display: block;
  margin-block-start: 0.2rem;
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--stone-50);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .c-about__portrait { grid-column: content-start / span 5; }
  .c-about__body     { grid-column: content-start / content-end; }
  .c-about__portrait::before { inset-inline: calc(var(--sp-4) * -1) var(--sp-4); }
}

@media (max-width: 48rem) {
  .c-about__portrait { grid-column: content-start / span 8; }
  .c-about__figures  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-about__links    { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   MOBILE: the portrait

   The offset rule behind the plate is an ornament for a two-column spread.
   Stacked on a phone it reads as a stray box hanging off the picture's
   corner, so it goes, and the photograph takes the full column instead of
   sitting two thirds across it.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  /* The portrait was still spanning a fraction of the rail — 4 columns, then
     5, then 8 — so on a phone it sat two thirds across a single-column layout
     with the section's background showing beside it. Stacked, it takes the
     whole column. */
  /* The content lines, not `1 / -1`: the rail's outer tracks are the page
     margin, and spanning those puts the photograph against the edge of the
     screen. */
  .c-about__portrait { grid-column: content-start / content-end; inline-size: 100%; }
  .c-about__portrait::before { display: none; }
  .c-about__plate { inline-size: 100%; }
}

/* The combined-following figure spans the row: it is a different KIND of
   number from the four beside it — a total rather than a measure — and
   giving it the full width says so without a label having to. */
.c-about__figure--wide {
  grid-column: 1 / -1;
  border-block-start: var(--bw-hair) solid var(--c-line);
  padding-block-start: var(--sp-4);
  margin-block-start: var(--sp-2);
}

/* --------------------------------------------------------------------------
   MOBILE: the About head

   Every other section head on a phone is centred. This one was ranged left,
   which read as a mistake rather than as a choice. The COPY stays ranged
   left — three paragraphs of centred prose is unreadable — so only the
   eyebrow and the title move.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .c-about__eyebrow { justify-content: center; }
  .c-about__title { text-align: center; }
}

/* --------------------------------------------------------------------------
   THE FIGURE LIST IS CENTRED

   "On the island / 11 yrs" and its three neighbours are plates, not table
   rows: a label naming a thing and a number answering it. Ranged left inside
   four equal boxes they read as a table with the rules missing. Centred, each
   one is complete on its own.
   -------------------------------------------------------------------------- */

.c-about__figure { text-align: center; }


/* --------------------------------------------------------------------------
   PHONE: the whole About block centres

   Against my own advice, and on instruction. Centred prose is harder to read
   than ranged-left prose — every line starts in a different place, so the eye
   has to hunt for the next one — and I said so. On a phone the paragraphs are
   short and the column is narrow, which is the one case where the cost is
   smallest, and the section head, the figures and the social cards are all
   centred already; the copy was the last thing ranged left and it read as an
   oversight rather than as a decision.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .c-about__copy { text-align: center; text-wrap: balance; }
}