/* ============================================================================
   About (about.html). Grammar: editorial essay. Anchors vary on purpose:
   hero bottom-lead over a photo, essay 4/8, spec sheet 5/7, the struck
   ledger full width, contact ledger trail.
   ========================================================================== */

/* ---------------------------------------------------------------- hero -- */
/* Always-dark photo scene: light ink is hard-coded so it never flips with the theme. */
.ab-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1000px; overflow: hidden; isolation: isolate; background: #08070f; }
.ab-hero__photo { position: absolute; inset: -6% 0 -6%; z-index: 0; will-change: transform; }
.ab-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ab-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgb(8 7 15 / 0.92) 0%, rgb(8 7 15 / 0.74) 24%, rgb(8 7 15 / 0.2) 52%, rgb(8 7 15 / 0) 64%),
              linear-gradient(180deg, rgb(8 7 15 / 0.55) 0%, rgb(8 7 15 / 0) 18%); }
.ab-hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 1.5rem + 5vh, 6rem); z-index: 2; }
.ab-hero__copy .d-hero { max-width: 12ch; color: #efecf7; }
.ab-hero__copy .lede { margin-top: var(--s-5); max-width: 40ch; color: #c9c4dc; }

/* --------------------------------------------------------------- essay -- */
.ab-essay__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
.ab-essay__side { grid-column: 1 / span 2; }
.ab-essay__side .label { padding-top: 0.9em; }
.ab-essay__text { grid-column: 3 / span 6; max-width: 44rem; }
.ab-film { grid-column: 9 / span 4; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); margin: 0; }
.ab-film__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #0b0a14; border: 1px solid var(--line); box-shadow: var(--e3), var(--edge); }
.ab-film .vid { position: absolute; inset: 0; }
.ab-film .vid > img, .ab-film .vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.ab-film figcaption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-3); max-width: 34ch; }
@media (max-width: 1100px) {
  .ab-essay__side { grid-column: 1 / span 3; }
  .ab-essay__text { grid-column: 4 / span 9; }
  .ab-film { grid-column: 4 / span 9; position: static; margin-top: var(--s-7); }
  .ab-film__media { aspect-ratio: 16 / 9; }
}
.ab-essay__text > p { font-size: var(--t-lg); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ab-essay__text > * + * { margin-top: var(--s-5); }
.ab-essay__lead { font-family: var(--f-display); font-weight: 560; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem) !important; line-height: 1.2 !important; letter-spacing: -0.028em; color: var(--ink) !important; text-wrap: balance !important; }
.ab-essay__text > .ab-essay__lead + p { margin-top: var(--s-7); }
.ab-pull { margin: var(--s-8) 0 var(--s-8) calc(var(--s-8) * -1); padding: var(--s-6) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.ab-pull p { max-width: 20ch; }

/* ----------------------------------------------------- how it's built -- */
.ab-built__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.ab-built__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 32px); }
.ab-built__head .body { margin-top: var(--s-5); max-width: 36ch; }
.ab-orb { position: relative; margin-top: var(--s-7); aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #05040a; box-shadow: var(--e3); border: 1px solid rgb(239 236 247 / 0.08); }
.ab-orb img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.ab-spec { grid-column: 7 / span 6; margin: 0; border-top: 1px solid var(--line-2); }
.ab-spec > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s-5); padding: var(--s-5) 0 calc(var(--s-5) + 2px); border-bottom: 1px solid var(--line); }
.ab-spec dt { padding-top: 3px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.ab-spec dd { margin: 0; color: var(--ink-2); line-height: 1.6; }
.ab-spec dd b { display: block; margin-bottom: 2px; font-family: var(--f-display); font-weight: 620; font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--ink); }

/* ------------------------------------------- signature: what we won't do */
.ab-wont__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: end; margin-bottom: var(--s-8); }
.ab-wont__head .d-1 { grid-column: 1 / span 7; }
.ab-wont__head .body { grid-column: 8 / span 4; }
.ab-wont__list { border-top: 1px solid var(--line-2); }
.wont { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) 0; border-bottom: 1px solid var(--line); }
.wont__no { grid-column: 1 / span 6; position: relative; justify-self: start; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.wont__no span { display: inline-block; transition: opacity var(--d-4) var(--ease-out); }
.wont__no i { position: absolute; left: -0.06em; right: -0.06em; top: 43.5%; height: max(2px, 0.055em); border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 640ms var(--ease-out); }
.wont__do { grid-column: 8 / span 5; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--t-base); line-height: 1.55; color: var(--ink-2); opacity: 0; transform: translateY(12px); transition: opacity 560ms var(--ease-out) 260ms, transform 560ms var(--ease-out) 260ms; }
.wont__do .i { width: 20px; height: 20px; margin-top: 2px; color: var(--accent-text); }
.wont__do b { display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.wont__do a { color: var(--ink); }
.wont.is-done .wont__no span { opacity: 0.46; }
.wont.is-done .wont__no i { transform: scaleX(1); }
.wont.is-done .wont__do { opacity: 1; transform: none; }
.no-js .wont__do, html:not(.js) .wont__do { opacity: 1; transform: none; }

/* --------------------------------------------------------------- close -- */
.ab-close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.ab-close__head { grid-column: 1 / span 4; }
.ab-close__head .body { margin-top: var(--s-5); }
.ab-close__photo { margin: var(--s-6) 0 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--e2), var(--edge); background: #0b0a14; }
.ab-close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.ab-ledger { grid-column: 6 / span 7; border-top: 1px solid var(--line-2); }
.ab-ledger a { display: grid; grid-template-columns: 8.5rem 1fr auto; grid-template-rows: auto auto; column-gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ab-ledger__k { grid-row: 1 / span 2; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.ab-ledger__v { font-family: var(--f-display); font-weight: 620; font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.ab-ledger__d { grid-column: 2; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.ab-ledger a .i { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; color: var(--ink-3); transition: transform var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ab-ledger a:hover .i { color: var(--accent-text); transform: translate(3px, -3px); }
  .ab-ledger a:hover .ab-ledger__v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
}
.ab-close__trial { grid-column: 6 / span 7; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-7); color: var(--ink-2); }

/* --------------------------------------------------------------- phone -- */
@media (max-width: 900px) {
  .ab-essay__side { grid-column: 1 / -1; }
  .ab-essay__side .label { position: static; padding: 0; }
  .ab-essay__text { grid-column: 1 / -1; }
  .ab-film { grid-column: 1 / -1; }
  .ab-pull { margin-left: 0; }
  .ab-built__head { grid-column: 1 / -1; position: static; }
  .ab-spec { grid-column: 1 / -1; margin-top: var(--s-7); }
  .ab-wont__head .d-1, .ab-wont__head .body { grid-column: 1 / -1; }
  .wont__no, .wont__do { grid-column: 1 / -1; }
  .wont { row-gap: var(--s-4); }
  .ab-close__head, .ab-ledger, .ab-close__trial { grid-column: 1 / -1; }
  .ab-ledger { margin-top: var(--s-6); }
  .ab-close__photo { max-width: 560px; aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .ab-hero { min-height: 560px; }
  .ab-hero__photo img { object-position: 54% 40%; }
  .ab-hero__copy .d-hero { font-size: clamp(2.5rem, 11.4vw, 3.4rem); }
  .ab-hero__copy .lede { font-size: var(--t-base); }
  .ab-hero__scrim { background: linear-gradient(0deg, rgb(8 7 15 / 0.94) 0%, rgb(8 7 15 / 0.8) 32%, rgb(8 7 15 / 0.2) 62%, rgb(8 7 15 / 0) 72%), linear-gradient(180deg, rgb(8 7 15 / 0.55) 0%, rgb(8 7 15 / 0) 18%); }
  .ab-spec > div { grid-template-columns: 1fr; gap: 6px; }
  .ab-ledger a { grid-template-columns: 1fr auto; }
  .ab-ledger__k { grid-row: auto; grid-column: 1; margin-bottom: 6px; }
  .ab-ledger__v { grid-column: 1; }
  .ab-ledger__d { grid-column: 1; }
  .ab-ledger a .i { grid-column: 2; grid-row: 1 / span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .wont__no span, .wont__no i, .wont__do { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}