/* ═══════════════════════════════════════════════════════════════════════
   about.css — THE ABOUT PAGE, and nothing else.

   Every rule here names a component only about.html uses (plus the portrait
   bench, _portrait-bench, which loads this file too). Shared rules — tokens,
   nav, footer, buttons and the page banner — stay in style.css, which loads
   FIRST, so a rule here wins over a style.css rule of equal specificity.

   TWO LAYOUTS, ONE BREAKPOINT. A laptop and a phone; tablets are not a
   target. Every phone rule here is `max-width: 900px`, the width at which the
   nav already switches. Do not introduce another phone width. (The one
   `max-width: 1100px` rule is a LAPTOP rule — the team drops to two columns
   on a small laptop — not a tablet step.)

   Split out of style.css verbatim on 5 Oct 2026, original order kept.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ ABOUT — implements the Figma frame "Bharat Digital — About" (node 289:362)
   of "New Website 2026". Structure: banner → headline → origin card → value
   system → team → footer.

   Two deliberate departures from the house system, both scoped to this page
   and both taken from the design itself:
   · the body runs to a 1536px measure while the footer stays at 1120 — the
     design does this on purpose; the body is the exhibit, the footer is chrome
   · the origin panel is filled with an illustration colour, which the system
     otherwise reserves for imagery. It is the design's one deliberate block
     of colour, and it appears nowhere else.
   Everything below the fold arrives on scroll; values and people answer to
   hover (and to keyboard focus, which is the same thing here). --- */

/* wrap-wide is retained only so About's markup keeps working — it is now the
   same measure as .wrap. Merge the classes when About is next touched. */
.wrap-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* --- 1 · banner — full bleed, straight under the bar.
       The ratio is the export's own (4096×1289); the vh cap is what keeps the
       headline underneath it inside the first fold on a laptop. --- */
/* banner lives with the shared .page-banner rule below */

/* --- 2 · headline — the page's only display type, above the fold with it --- */
.ab-head { padding: clamp(40px, 5.5vw, 96px) 0 clamp(36px, 5vw, 86px); }

.ab-head h1 {
  /* sized so the second line still holds on one line at 1440 — the design's
     80px is struck at its own 1728px frame width */
  margin: 0; max-width: none; color: var(--ink);   /* the column caps it; the display face is wider than 46ch held */
  /* ⚠️ THIS IS A FULL-MEASURE STATEMENT, NOT A PAGE TITLE, AND THE TWO ARE
     SIZED DIFFERENTLY FOR A REASON. A page title never runs the whole
     measure — `.page-head h1` caps at 15ch, `.page-head.split h1` sits in a
     half column — so 66px there is a 555px block. Run the same number
     across 1160 and it is twice the area, which is why this page read as
     shouting while measuring identical to fellowship's. Home has two
     statements of exactly this kind, `.bd-hist-head` and `.svc-chap`, and
     they are serif at `clamp(24px, 3.125vw, 60px)` / 1.1 — 45px at 1440.
     This takes their numbers.
     ⚠️ THE FACE IS THE DISPLAY SERIF, AS ON FELLOWSHIP (5 Oct 2026, the user:
     "the font on the About page ... looks different than ... the Fellowship
     page"). It had been moved to the text serif on a rule that the display
     face is uppercase-only — but fellowship's own title sets it in title case,
     so the two first statements read as two typefaces. Same face, same
     tracking (0) as fellowship's h1 now; only the size differs, for the
     reason above. */
  font-family: var(--serif-display);
  font-size: clamp(24px, 3.125vw, 60px); line-height: 1.1; letter-spacing: 0;
}

.ab-head h1 .ln { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .ab-head h1 .ln { animation: bdRiseText .9s cubic-bezier(.22,1,.36,1) both; }
  .ab-head h1 .ln + .ln { animation-delay: .13s; }
}

/* --- 4 · value system — an index of rules, one hairline each.
       At rest the reasoning sits back at 40%; hovering a row brings it forward,
       opens a 64px indent and drops a serif numeral into the gap. --- */
.ab-values { padding: clamp(36px, 4.5vw, 72px) 0; }

.ab-values-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-bottom: 36px;
}

.ab-values-head h2 {
  margin: 0; max-width: 1024px;
}

.btn.lg { font-size: 15px; padding: 13px 24px; margin-right: 0; flex-shrink: 0; }

.vs-list { list-style: none; margin: 0; padding: 0; position: relative; }

.vs-row {
  position: relative; padding: 32px 0;
  outline-offset: 4px;
}

/* The rules are the textured house stroke (4 Oct 2026), not 1px borders: a
   3px band straddling the edge, ink as background, masked by the brush tile.
   Full ink, same as the border it replaces. One band per row top, one on the
   list's bottom — see the rail/FAQ block for the technique. */
.vs-row::before, .vs-list::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: var(--tex-t); pointer-events: none; background: var(--line);
  -webkit-mask-image: var(--tex-h); mask-image: var(--tex-h);
  -webkit-mask-size: var(--tex-len) var(--tex-t); mask-size: var(--tex-len) var(--tex-t);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

.vs-row::before { top: calc(var(--tex-t) / -2); }

.vs-list::after { bottom: calc(var(--tex-t) / -2); }

/* No hover and no numerals (5 Oct 2026) — the rows stagger in on entry
   ([data-stagger]) and then sit still. The body reads at the secondary colour,
   solid, the way the phone already had it. */
.vs-row-in { max-width: 640px; }

.vs-row h3 { color: var(--ink); }

.vs-row h3 {
  margin: 0 0 8px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.2px;
}

.vs-row p {
  margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6;
  color: var(--muted);
}

/* --- 5 · the people — portrait, name, role.
       At rest the photographs are held back a little and the role sits at 40%;
       hovering brings both fully forward and eases the frame up. --- */
.ab-team { padding: clamp(36px, 4.5vw, 72px) 0 clamp(56px, 6vw, 96px); }

.ab-team h2 {
  margin: 0 0 36px;
}

.ab-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }

.crew-card { display: block; text-decoration: none; color: inherit; outline-offset: 6px; }

.crew-card .shot {
  /* 8px, not 16 (6 Oct 2026, the user: the rounding was "too much" against
     the rest of the site) — the radius the fellowship's project windows use;
     photographs elsewhere are square or 8-10px */
  border-radius: 8px; overflow: hidden; background: var(--box);
  aspect-ratio: 480 / 559;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.crew-card .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.crew-card .who { padding-top: 16px; }

.crew-card .nm, .crew-card .rl {
  margin: 0; color: var(--ink);
}

.crew-card .nm {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.2px;
}

.crew-card .rl { font-size: 16px; line-height: 1.6; }

.crew-card .rl { opacity: .4; transition: opacity .35s ease; }

.crew-card:hover .shot, .crew-card:focus-visible .shot { transform: translateY(-4px); }

.crew-card:hover .rl, .crew-card:focus-visible .rl { opacity: 1; }

/* Portraits REST as dither plates and develop into the photograph on hover /
   tap (4 Oct 2026). The <canvas> is the plate: written cells are ink or paper,
   unwritten cells are transparent, so the photograph shows through cell by
   cell as about.html's driver dissolves it. `html.dplates` is set by that
   driver; until a shot is `.ready` its photograph is held back so the frame
   never flashes the photo before the plate exists. No JS: the photographs. */
.crew-card .shot { position: relative; }

.crew-card .shot canvas.dplate {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}

html.dplates .crew-card .shot:not(.ready) img { visibility: hidden; }

@media (max-width: 1100px) {
  .ab-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 900px) {
  /* TWO UP. One portrait per row made nine people 3,200px of scroll — each
     face the full width of the screen, the names a long way apart. Two
     columns keep the portraits a readable size (~170px) and halve the run. */
  .ab-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .crew-card .shot { border-radius: 8px; }
  .crew-card .who { padding-top: 10px; }
  .crew-card .nm { font-size: 18px; }
  .crew-card .rl { font-size: 14px; line-height: 1.45; }
  /* the role is held at 40% until hovered — and nothing is hovered here, so
     it stays at the secondary colour instead (the same move as the values) */
  .crew-card .rl { opacity: 1; color: var(--muted); }
  .ab-values-head { margin-bottom: 24px; }
  .vs-row { padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crew-card .shot { transition: none; }
}

/* --- portrait pending — the Figma export shipped stock faces under real
       names, which is worse than an obvious gap. A monogram says "no
       photograph yet" without pretending to be a person. Paper ground and
       ink rule only: no illustration colour, per the house rule. --- */
.crew-card .shot.pending {
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(35, 35, 35, .16);
}

.crew-card .shot.pending span {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1;
  color: var(--ink); opacity: .26; letter-spacing: .02em;
  transition: opacity .45s ease;
}

.crew-card:hover .shot.pending span,
.crew-card:focus-visible .shot.pending span { opacity: .42; }

/* ═══ THE ABOUT BANNER — Figma 734:909, on the same stage (4 Oct 2026) ═══
   Same 4173x1331 frame as fellowship's, so .banner-scene / .bs-stage do the
   cover fit unchanged. Every box below is the node's own over the frame.
   The sky is the file's periwinkle ground. */
.ab-scene { background: var(--brand-violet); }

.ab-scene .bs-stage > div { position: absolute; overflow: hidden; }

.ab-scene .bs-stage > div > img { position: absolute; display: block; image-rendering: pixelated; }

/* image 172: a crop of the water — the source sits at 247.37% of the box,
   pulled up 88.89%, exactly as the file has it */
.ab-river  { left: -0.0240%; top: 43.0503%; width: 99.8802%; height: 77.8362%; }

.ab-river img { left: 0; top: -88.89%; width: 100%; height: 247.37%; }

/* image 162: the landscape cutout; the water band and the sky are transparent */
.ab-mountain { left: -0.1198%; top: -26.8970%; width: 100%; height: 192.9376%; }

/* image 164: the walkers, mirrored, the right part of the source */
.ab-people { left: 48.8856%; top: 43.0503%; width: 11.5984%; height: 44.0271%; transform: scaleX(-1); }

.ab-people img { left: -81.88%; top: -0.33%; width: 181.88%; height: 100.66%; }

/* image 173: the flags, hung from above the frame; only the lower third shows */
.ab-flags { left: 0; top: -128.3246%; width: 100.1438%; height: 202.8550%; }

/* the load-in, fellowship's choreography: three up from below, the flags
   down from above. Rest state declared once; the keyframes only say `from`. */
@media (prefers-reduced-motion: no-preference) {
  .ab-scene[data-banner-parallax] .ab-mountain, .ab-scene[data-banner-parallax] .ab-river,
  .ab-scene[data-banner-parallax] .ab-people,   .ab-scene[data-banner-parallax] .ab-flags {
    animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  .ab-scene[data-banner-parallax] .ab-mountain { animation-name: ab-slide-mountain; animation-duration: 1.0s; }
  .ab-scene[data-banner-parallax] .ab-river    { animation-name: ab-slide-river;    animation-duration: 1.0s; animation-delay: .16s; }
  /* the people arrive WITH the mountain, not after it (5 Oct 2026, the user:
     "align the people to come at the same time as the mark") — same start,
     same duration, so they land together */
  .ab-scene[data-banner-parallax] .ab-people   { animation-name: ab-slide-people;   animation-duration: 1.0s; animation-delay: 0s; }
  .ab-scene[data-banner-parallax] .ab-flags    { animation-name: ab-slide-flags;    animation-duration: 1.2s; animation-delay: .5s; }
  .ab-scene[data-banner-parallax]:not(.is-ready) .ab-mountain, .ab-scene[data-banner-parallax]:not(.is-ready) .ab-river,
  .ab-scene[data-banner-parallax]:not(.is-ready) .ab-people,   .ab-scene[data-banner-parallax]:not(.is-ready) .ab-flags {
    visibility: hidden; animation-name: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · THE LETTER — Figma 843:799 "Frame 8235" (6 Oct 2026). The section is
   the letter and nothing else.
   GEOMETRY: the frame is 1702 wide. --u is one frame px, scaled to the
   section's width (a container unit, so no scrollbar maths) and capped at 1
   above 1702, so every box below is the file's number times --u:
     the sheet    805 wide at x437, sage #B3C197, its text column x93 w660
     the holes    26px, x16, every 83px down the left edge — cut through the
                  sheet with a mask, so the page shows in them
     the photos   five, at the frame's own boxes, lying OVER the sheet's
                  edges where the file has them overlap
   The sheet's height is the letter's: the file's text was cut short, so the
   two lower photographs are pinned to the section's foot (as far from it as
   in the file) and the other three to its top.
   TYPE: the file's — DM Mono capitals for the date and the salutation (that
   one centred and underlined), Libertinus Serif 19/30.4 for the body, signed
   in Ms Madi and Playpen Sans ExtraLight. Floored at 16px so a small laptop
   keeps a readable body.
   ═══════════════════════════════════════════════════════════════════════ */
.ab-letter { container-type: inline-size; overflow: clip; }

.lt-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

.lt-stage {
  --u: calc(min(100cqw, 1702px) / 1702);
  position: relative; width: calc(var(--u) * 1702); margin: 0 auto;
  padding: calc(var(--u) * 67) 0 calc(var(--u) * 262);
}

/* with the photographs off (6 Oct 2026) the foot keeps only a section's gap */
.lt-stage:not(:has(.lt-print)) { padding-bottom: clamp(56px, 6vw, 104px); }

.lt-paper {
  position: relative; z-index: 1;
  width: calc(var(--u) * 805); margin-left: calc(var(--u) * 437);
  padding: calc(var(--u) * 34) calc(var(--u) * 52) calc(var(--u) * 64) calc(var(--u) * 93);
  background: #B3C197; color: var(--ink);
  font-family: var(--serif); font-size: max(16px, calc(var(--u) * 19)); line-height: 1.6;
  /* the punched holes: one per 83px tile, repeated down the sheet; the
     last strip is kept solid so no hole is ever cut by the sheet's foot */
  --hole: calc(var(--u) * 13);
  -webkit-mask: radial-gradient(circle var(--hole) at calc(var(--u) * 29) calc(var(--u) * 58.5), transparent 96%, #000 100%) 0 0 / 100% calc(var(--u) * 83) repeat-y,
    linear-gradient(#000, #000) 0 100% / 100% calc(var(--u) * 60) no-repeat;
          mask: radial-gradient(circle var(--hole) at calc(var(--u) * 29) calc(var(--u) * 58.5), transparent 96%, #000 100%) 0 0 / 100% calc(var(--u) * 83) repeat-y,
    linear-gradient(#000, #000) 0 100% / 100% calc(var(--u) * 60) no-repeat;
}

.lt-paper p { margin: 0 0 1.1em; }

.lt-date, .lt-to {
  font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0;
}

.lt-date { margin-bottom: 2.2em !important; }

.lt-to { text-align: center; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; margin-bottom: 1.4em !important; }

/* the body paragraphs are flush, as in the file (the indent was tried and
   dropped, 6 Oct 2026) */

.lt-close { margin-top: 1.6em; }

.lt-close > p { margin-bottom: .3em; }

.lt-sigs { display: flex; align-items: flex-start; gap: calc(var(--u) * 14); padding-left: calc(var(--u) * 3); }

.lt-sig {
  display: block; line-height: 66px; height: 66px; color: #000; white-space: nowrap;
  transform: rotate(4deg); transform-origin: 0 60%;
}

.lt-richa { font-family: 'Ms Madi', cursive; font-size: max(46px, calc(var(--u) * 58)); }

.lt-harsh { font-family: 'Playpen Sans', cursive; font-weight: 200; font-size: max(38px, calc(var(--u) * 48)); }

/* the photographs — plain prints, the file's boxes */
.lt-print { position: absolute; z-index: 2; display: block; object-fit: cover; margin: 0; }

.ph-desk    { left: calc(var(--u) * -33);  top: calc(var(--u) * 132); width: calc(var(--u) * 381); height: calc(var(--u) * 286); }
.ph-store   { left: calc(var(--u) * 1190); top: 0;                    width: calc(var(--u) * 387); height: calc(var(--u) * 292); }
.ph-field   { left: calc(var(--u) * 1311); top: calc(var(--u) * 531); width: calc(var(--u) * 391); height: calc(var(--u) * 293); }
.ph-village { left: calc(var(--u) * 140);  bottom: calc(var(--u) * 182); width: calc(var(--u) * 380); height: calc(var(--u) * 285); }   /* 70 in the file; brought further over the sheet (the user, 6 Oct) — its right edge stops short of the text column at 530 */
.ph-office  { left: calc(var(--u) * 1068); bottom: calc(var(--u) * 67);  width: calc(var(--u) * 347); height: calc(var(--u) * 260); }

/* ── typing ── */
.lt-r { color: transparent; }

.lt-caret {
  display: inline-block; width: 2px; height: 1.1em; margin-right: -2px; vertical-align: -.2em;
  background: rgba(35, 35, 35, .8); animation: lt-blink 1s steps(1) infinite;
}

@keyframes lt-blink { 50% { opacity: 0; } }

/* each signature is written left to right once "Regards," is typed */
.lt-paper.is-typing .lt-sig { clip-path: inset(-30px calc(100% + 30px) -30px -20px); }

.lt-paper.is-typing .lt-sig.is-signed {
  clip-path: inset(-30px -30px -30px -20px);
  transition: clip-path 1.4s cubic-bezier(.45, .05, .4, 1);
}

/* ── arrival ── the sheet slides in (date and salutation already on it), a
   touch askew, and settles; each photograph slides in from its own side —
   the two at the sheet's head with it, the rest as the reader reaches them */
.ph-desk, .ph-village { --dx: -90px; }
.ph-store, .ph-field, .ph-office { --dx: 90px; }

@media (prefers-reduced-motion: no-preference) {
  .lt-stage.will-land .lt-paper { opacity: 0; transform: translateY(120px) rotate(-1.5deg); }
  .lt-stage.will-land .lt-paper.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); }
  .lt-stage.will-land .lt-print { opacity: 0; transform: translateX(var(--dx, 0)); }
  .lt-stage.will-land .lt-print.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
}

@media (max-width: 900px) {
  /* THE PHONE: the sheet the width of the column, its holes smaller and
     closer; the five photographs follow it as a loose, staggered pile. */
  .ab-letter { container-type: normal; }
  .lt-stage { width: auto; margin: 0 var(--gutter); padding: 28px 0 56px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .lt-paper {
    grid-column: 1 / -1; width: auto; margin: 0 0 28px;
    padding: 26px 20px 34px 46px; font-size: 16px;
    --hole: 8px;
    -webkit-mask: radial-gradient(circle 8px at 20px 34px, transparent 96%, #000 100%) 0 0 / 100% 56px repeat-y,
    linear-gradient(#000, #000) 0 100% / 100% 40px no-repeat;
            mask: radial-gradient(circle 8px at 20px 34px, transparent 96%, #000 100%) 0 0 / 100% 56px repeat-y,
    linear-gradient(#000, #000) 0 100% / 100% 40px no-repeat;
  }
  .lt-date, .lt-to { font-size: 14px; }
  .lt-sigs { gap: 12px; padding-left: 0; }
  .lt-richa { font-size: 46px; }
  .lt-harsh { font-size: 36px; }
  .lt-print, .ph-desk, .ph-store, .ph-field, .ph-village, .ph-office {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 12px;
  }
  .ph-store, .ph-village { margin-top: 26px; margin-bottom: -14px; }
  .ph-office { grid-column: 1 / -1; width: 72%; justify-self: center; margin-top: 26px; }
  /* the pile's own sides: the left column from the left, the right from the right */
  .ph-desk, .ph-field { --dx: -60px; }
  .ph-store, .ph-village { --dx: 60px; }
  .ph-office { --dx: 0px; }
}