/* ==========================================================================
   ABOUT — the line's destination, and the site's only inversion.

   This is the one place --kumkumam is a field rather than an accent, and the
   one place the paper/ink relationship flips. That is what makes it read as
   an arrival: the page has been cream with a red line drawn through it, and
   the line ends by turning the ground itself red.

   Contact lives here rather than in a section of its own — reaching the end
   of the writing and reaching the way to get in touch should be one moment.
   ========================================================================== */

.about {
  position: relative;
  z-index: var(--z-content);
  background: var(--kumkumam);
  color: var(--paper);

  /* --about-rhythm lives here, not on __inner, because the section's own
     bottom padding is one of the gaps it has to keep equal — see below. */
  --about-rhythm: clamp(var(--sp-l), 7vh, var(--sp-xl));

  /* THE BOTTOM IS A RHYTHM STEP, NOT A SECTION MARGIN.
     The inverted footer sits flush against this section — same red field,
     zero top padding, by design — so this padding is not breathing room at
     the end of a block, it is the gap between the last contact link and the
     conch. It was the section pad (147.6px at 1280) against 68.9px above the
     contact list: measured optically, 152px below versus 44px above, and the
     conch read as detached from the block it closes.

     SAME MULTIPLIER AS THE GAP ABOVE, which is what actually keeps them
     equal: the mark's bottom margin is 1.2 rhythm, so a bottom padding of
     1.0 rhythm diverged from it as the rhythm grew with viewport height. Less
     the conch link's own 12px hit-area padding — 1.125rem covers both, and measured back
     the two gaps land within a pixel. Tied to the token so they stay equal at
     every viewport rather than at the width someone checked. The field does not lose its breathing room —
     it continues through the footer, which carries its own padding. */
  padding-block: clamp(var(--sp-2xl), 18vh, var(--sp-3xl))
                 calc(var(--about-rhythm) * 1.2 - 1.125rem);
  padding-inline: var(--gutter);

  /* Fills the viewport. Without this the section was shorter than the screen,
     so at maximum scroll its top could never pass under the header — the
     inverted header state was unreachable rather than broken. It also makes
     the destination behave like one: the field is the last thing, and it
     should own the screen when you arrive. */
  min-height: 100svh;
  display: grid;
  align-content: center;

  /* Full bleed out of the page's container. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Centred, matching the hero stack and the project stacks.

   --about-rhythm is one value for every gap in the block. The eyebrow, the
   lead, the note and the contact list were each carrying their own margin,
   so the spacing between them was three different numbers that only looked
   deliberate by accident. */
.about__inner {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

/* Matches how "Selected work" heads the work section, in paper rather than
   kumkumam because the field is inverted here. */
.about__eyebrow {
  max-width: none;
  margin: 0 0 var(--about-rhythm);
  color: var(--paper);
  font-size: clamp(1.05rem, 2.1vw, 2rem);
  letter-spacing: 0.26em;
}

/* The paper grain is multiply, which cannot lighten, so it does nothing on
   this field (see base.css). The dark-ground screen layer is scoped to the
   contained frames in §7/§10 and is deliberately NOT applied here — this is
   kumkumam, not near-black, and screen over it would wash it pink. */

.about__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.9vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.about__note {
  margin: var(--about-rhythm) auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  /* Paper at reduced strength would drop below AA on this field, so the
     secondary voice is set by size and measure instead of by dimming. */
  color: var(--paper);
}

/* --- The Malayalam mark ---------------------------------------------------
   Moved here out of the hero. It reads as the illustration of the paragraph
   above it rather than as a second name under the first, so it is sized to
   sit with that paragraph, not to compete with it: a shade larger than the
   note, well under the lead, and nowhere near the hero's 3.25rem.

   COLOUR IS EXPLICIT, NOT INHERITED. In the hero this was --kumkumam, and
   this field is kumkumam — carrying that value across would have painted the
   mark in its own ground. Paper matches the one inversion this section is.

   IT STANDS ALONE. A full rhythm above and a little more below, so it reads
   as its own beat between the paragraph and the contact block rather than as
   a tail on either. Margins collapse between siblings here, so the space
   below has to exceed the contact list's own margin-top to have any effect —
   1.2x does, an equal value would not.

   Set larger than the note it illustrates and larger than the lead: it is one
   glyph cluster, not a line of reading, so it carries scale without taking
   the section over. Still well under the hero's old 3.25rem. */
.about__mal {
  margin: var(--about-rhythm) auto calc(var(--about-rhythm) * 1.2);
  max-width: none;
  color: var(--paper);
  font-size: clamp(2.5rem, 4.6vw, 3.6rem);
  /* LEADING TRIMMED SO THE BOX HUGS THE GLYPHS.
     This mark is a single line, never wrapped, so leading buys nothing — and
     it costs: the half-leading below the glyphs scales with the font, which
     grows from 40px to 57.6px across the range, so the visual gap under the
     mark shrank as the viewport widened. That was the whole reason the space
     above the contact block and the space below it could not be equalised
     with one value. At line-height 1 the box tracks the glyphs and the gap is
     the margin, at every width. */
  line-height: 1;
}

/* Scoped through .about__inner deliberately. base.css resets
   ul[role='list'] { margin: 0 }, which is specificity (0,1,1) and beats a
   lone class (0,1,0) whatever the file order — so the margin below silently
   did nothing and the contact block sat flush against the paragraph above
   it. Two classes (0,2,0) wins. */
.about__inner .about__contact {
  /* Stacked, not a row: three links of very different lengths in a row read
     as a fragment of a sentence rather than three separate ways to make
     contact. */
  display: grid;
  justify-items: center;
  gap: var(--sp-s);
  margin: var(--about-rhythm) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.about__contact a {
  color: var(--paper);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: opacity var(--t-quick) var(--ease),
              text-decoration-thickness var(--t-quick) var(--ease);
}

/* Hover cannot go to --kumkumam-lit here: it is a near-neighbour of the
   field and would nearly vanish. Opacity keeps it clearly paper.

   MEASURED: paper at 0.72 over kumkumam composites to rgb(220,183,173),
   which is 3.95:1 against the field — 3.85:1 on the pessimistic all-black
   grain bound — and this is 16px/400 text, so §12 wants 4.5. The dim itself
   was the whole hover state, and it was dimming below the floor to do it.

   0.85 measures 4.85 / 4.72, clear with margin rather than sitting on the
   threshold at the arithmetic minimum of 0.82. It is also a fainter signal,
   so the underline now carries the rest of the state: doubling its thickness
   is not a contrast question at all, on a link that is already underlined. */
.about__contact a:hover {
  opacity: 0.85;
  text-decoration-thickness: 2px;
}

.about__contact a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}


/* --- The closing conch ----------------------------------------------------
   Paper on kumkumam, below the contact links: the exact inverse of the hero,
   where the same artwork sits in kumkumam on paper. The page opens with it
   and closes with it, and the only thing that changed in between is which
   way round the ground is.

   This is NOT the rejected terminus. That one wound a fresh coil as the line
   arrived — a second animated gesture at the boundary, which made the conch
   the subject twice over. This one does not animate at all: it is the
   resting outline, sitting still, after the line has already ended plainly.

   Sized off the same axes as the hero's, a size class down, because it is a
   sign-off rather than an opening statement. */

/* The anchor carries the spacing and the hit area; the SVG inside it is only
   the artwork. Splitting them means the target can be comfortably larger than
   the mark without the mark growing to match — the drawn conch is 64-104px
   wide, and a bare 64px-wide stroke is a thin thing to ask a thumb to find. */
.about__top {
  display: block;
  width: max-content;
  margin: var(--about-rhythm) auto 0;
  padding: var(--sp-xs);
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

.about__conch {
  display: block;
  width: clamp(64px, min(9vh, 8vw), 104px);
  aspect-ratio: 666 / 908;
  height: auto;
  max-width: none;
  fill: var(--paper);
  /* Paper at full strength would weigh as much as the lead paragraph. This is
     the one place a reduced strength is right — it is a mark, not a reading
     surface, so the AA floor in §12 does not apply to it. */
  opacity: 0.62;
  transition: opacity var(--t-quick) var(--ease),
              transform var(--t-slow) var(--ease);
}

/* Coming up to full paper is the whole hover state. It cannot go brighter
   than paper and it must not go to kumkumam-lit, which is a near-neighbour of
   this field and would make the mark disappear rather than respond. The lift
   is small on purpose: it is a footer control, not a gesture. */
.about__top:hover .about__conch,
.about__top:focus-visible .about__conch {
  opacity: 1;
  transform: translateY(-3px);
}

.about__top:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .about__conch { transition: none; }
  .about__top:hover .about__conch,
  .about__top:focus-visible .about__conch { transform: none; }
}

/* --- Narrow ---------------------------------------------------------------
   The red field fills far more of the screen on a phone, so the type has to
   hold its own against it rather than floating in the middle of a wash. */

@media (max-width: 46rem) {
  .about {
    /* TWO VALUES, NOT ONE. The shorthand's single-value form resets both
       edges, so this quietly threw away the bottom step set above and the
       conch drifted back out to 98px against 52px at the top of the contact
       block. Narrow gets a smaller top pad; the bottom stays a rhythm step. */
    padding-block: clamp(var(--sp-xl), 12vh, var(--sp-2xl))
                   calc(var(--about-rhythm) * 1.2 - 1.125rem);
  }
  .about__note { max-width: none; }
  .about__contact { gap: var(--sp-s); }
}


/* --- Arrival --------------------------------------------------------------
   §14 phase 6. The block fades up as you reach it, one element at a time.

   THE HIDDEN STATE IS BEHIND .js-reveal, which only js/about-reveal.js adds.
   Without the script — blocked, failed, or absent — none of these rules match
   and the copy is simply there. A reveal that hides content by default and
   relies on JavaScript to show it again is one script error away from an
   empty section, and this one is the site's contact details.

   transform and opacity only: both composite, so a six-item stagger costs no
   layout work while the field itself is 100svh of solid colour. */

.about.js-reveal .about__reveal {
  opacity: 0;
  transform: translateY(0.7em);
}

.about.js-reveal .about__reveal.is-in {
  opacity: 1;
  transform: none;
  /* The step index comes from the script, so the stagger follows source order
     without a nth-child ladder that would silently go stale if the block
     gained a line. */
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--reveal-step, 0) * var(--t-base) * 0.09);
}

/* Belt and braces: the script already refuses to arm under the preference,
   but if the class arrived by any other route the copy stays put rather than
   merely moving faster. */
@media (prefers-reduced-motion: reduce) {
  .about.js-reveal .about__reveal,
  .about.js-reveal .about__reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}