/* ===========================================================================
   THE BODY — About page components (Figma 256:26 "About fin", 1440 x 8072).
   Uses the shared engine in base.css; per-element geometry is generated into
   about.css. Hero frame here is 933 tall (home: 876).
   =========================================================================== */

/* ---------- 01 hero: full-bleed photo card, no gradient in Figma ---------- */
.hero--about { --hero-h: 933; }
.hero-banner {
  position: absolute;
  left: calc(21 * var(--u)); right: calc(20 * var(--u));   /* <- 21 / 1440-21-1399 */
  top: calc(26 * var(--u)); bottom: calc(52 * var(--u));   /* <- 26 / 933-26-855 */
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  background: #d8d4c4;
}
.hero-banner > img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.btn-ghost-light { border: 1px solid var(--paper); }

/* ---------- 02 what we are not ---------- */
.k-ghost { color: #b5ae9e; }
.strike { position: absolute; height: 2px; background: var(--body); }
/* Arina 2026-10-27: the strikes are drawn, one after another. Each line is set dark,
   then a bar sweeps across it left to right and the words fade to ghost grey behind it.
   Driven by reveal.js: when a line's text shows (.is-visible), its strike (the next
   sibling) draws. Replays on every re-entry, like the other reveals. Phones draw a bar
   on the text itself (css/m-about.css). */
[data-f="258:5"] { --sd: .35s; }
[data-f="258:6"] { --sd: 1.05s; }
[data-f="258:7"] { --sd: 1.75s; }
[data-f="258:2"] .k-ghost { color: var(--body); transition: opacity .9s cubic-bezier(.22,.7,.25,1), transform .9s cubic-bezier(.22,.7,.25,1), color .5s ease; }
[data-f="258:2"] .k-ghost.is-visible { color: #b5ae9e; transition: opacity .9s cubic-bezier(.22,.7,.25,1), transform .9s cubic-bezier(.22,.7,.25,1), color .6s ease;
  transition-delay: 0s, 0s, calc(var(--sd) + .3s) !important; }   /* reveal.js staggers with an inline delay; the strike order wins */
[data-f="258:2"] .strike { transform-origin: left center; scale: 0 1; transition: opacity .3s ease, scale .3s ease; }
[data-f="258:2"] .k-ghost.is-visible + .strike { opacity: 1; scale: 1 1; transition: opacity .2s ease, scale .7s cubic-bezier(.65,0,.35,1); transition-delay: var(--sd) !important; }
[data-f="258:5"] + .strike { --sd: .35s; }
[data-f="258:6"] + .strike { --sd: 1.05s; }
[data-f="258:7"] + .strike { --sd: 1.75s; }
@media (prefers-reduced-motion: reduce) {
  [data-f="258:2"] .k-ghost, [data-f="258:2"] .strike { transition: none !important; }
  [data-f="258:2"] .k-ghost { color: #b5ae9e; }
  [data-f="258:2"] .strike { scale: 1 1; }
}

/* ---------- 04 same concern ---------- */
.ccard {
  position: absolute; height: calc(var(--h) * var(--u));
  background: #f6f5ec; border: 1px solid var(--hair);
  border-radius: calc(20 * var(--u)); overflow: hidden;
}
.ccard .a { margin-left: -1px; margin-top: -1px; }   /* Figma child coords are from the outer edge, CSS from inside the border */
.crow-rule { background: var(--hair); }

/* ---------- 07 brand line: photo card with a 20% black wash ---------- */
.band {
  position: absolute; left: calc(24 * var(--u)); top: 0;
  width: calc(1392 * var(--u)); height: calc(640 * var(--u));
  border-radius: calc(30 * var(--u)); overflow: hidden;
}
.band > img.band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.band > .a { z-index: 1; }

/* ---------- 05 toolbox grid: hairlines #A9B5A6 ---------- */
.k-sage { color: #97a596; }
.tline  { position: absolute; background: #a9b5a6; }
.tline--h { height: 1px; }
.tline--v { width: 1px; }

/* ---------- 08 cedar barrel ---------- */
.arch {
  border-radius: calc(220 * var(--u)) calc(220 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
}
.stage-line { background: #a9b5a6; height: 1px; }
.stage-ring {
  position: absolute; width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 999px; background: #e1efdf; border: 1px solid #97a596;
  display: flex; align-items: center; justify-content: center;
}
.stage-ring--on { border: 1.5px solid var(--clay); }
.stage-ring span { margin-right: calc(-1 * var(--u)); }   /* Figma drops the trailing tracking */

/* ---------- 10 four directions ---------- */
.world {
  position: absolute; width: calc(308 * var(--u)); height: calc(380 * var(--u));
  border: 1px solid #97a596; border-radius: calc(20 * var(--u)); overflow: hidden;
  background: var(--paper);
}
.world .a { margin-left: -1px; margin-top: -1px; }
.explore { border-bottom: 1px solid var(--ink); }

/* ---------- 12 closing collage ---------- */
.ph.detail { background: var(--paper); }   /* Figma 8px inside stroke in paper: photo inset 8, inner radius 12 */
.ph.detail > img {   /* replaced elements don't stretch to insets: size explicitly */
  position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u));
  width: calc(100% - 16 * var(--u)); height: calc(100% - 16 * var(--u)); object-fit: cover; border-radius: calc(12 * var(--u));
}