/* about.html: Built by tools/page_mockups/build.py from tools/page_mockups/about-*.html. Edit that file, not this one. */

/* shared section styles from the hero mockups */
.pm-h2{ font-size: clamp(2.3rem,4.8vw,4.4rem); line-height:.95; letter-spacing:-.025em; }
.pm-lede{ margin-top: 1.1rem; max-width: 36em; font-size: clamp(1.02rem,1.2vw,1.15rem); color: var(--ink-soft); }
.pm-sec{ padding: clamp(4.5rem,9vw,7.5rem) 0; }

/* One photo, never moved. A green veil with "4:8" cut out of it sits on top; scrolling grows the cut-out until it
   covers the screen, so you are always looking at the same picture (2026-10-23, Lucas: "seamless"). */
.ab1{ position:relative; height: 240svh; background: var(--forest); }
.ab1 .stick{ position:sticky; top:0; height:100svh; overflow:hidden; background: var(--forest); }
.ab1 .photo{ position:absolute; inset:0; margin:0; }
.ab1 .photo img{ width:100%; height:100%; object-fit:cover; object-position: 50% 42%; }
.ab1 .photo figcaption{ position:absolute; left: var(--gutter); bottom: 1.6rem; color:#fff; font-family: var(--font-display); font-style:italic; font-size:1.3rem; opacity:0; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.ab1 .veil{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.js-anim .ab1 .veil text{ animation: ab1-in 1.8s var(--ease) both; }
@keyframes ab1-in{ from{ opacity:0; } }
.ab1 .copy{ position:absolute; left:0; right:0; bottom: clamp(2.4rem, 8vh, 5rem); color: var(--paper); }
.ab1 h1{ color: var(--paper); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height:.95; letter-spacing:-.03em; max-width: 13ch; }
.ab1 .sub{ margin-top: 1.1rem; max-width: 34em; color: rgba(250,250,247,.8); }
.js-anim .ab1 .copy .container{ animation: ab1-rise 1.3s var(--ease) both .3s; }
@keyframes ab1-rise{ from{ opacity:0; transform: translateY(30px); } }
.ab1 .cue{ position:absolute; right: var(--gutter); bottom: clamp(2.4rem, 8vh, 5rem); color: rgba(250,250,247,.6); font-size:.9rem; }
.ab1-verse{ background: var(--white); }
.ab1-verse .statement-text{ max-width: 26ch !important; }
.ab1-verse cite{ display:block; margin-top: 1.6rem; font-style:normal; color: var(--muted); }
/* the bracelet beside the verse (#23) */
.ab1-verse .container{ position:relative; }
.bracelet{ position:absolute; right:0; top:50%; transform:translateY(-55%); width: 380px; margin:0; text-align:center; }
.b3{ position:relative; height: 300px; cursor: grab; touch-action: none; outline:none; border-radius: 2px; }
.b3:active{ cursor: grabbing; }
.b3:focus-visible{ box-shadow: 0 0 0 2px var(--accent); }
.b3 canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.b3-photo{ position:absolute; inset:10% 0; width:100%; height:80%; object-fit:cover; opacity:0; transition: opacity .4s; }
.bracelet.no-gl .b3-photo{ opacity:1; }
.bracelet.no-gl .b3{ cursor:default; }
.bracelet.no-gl .b3-hint{ visibility:hidden; }
.b3-hint{ margin-top:-.4rem; font-size:.8rem; letter-spacing:.04em; color: var(--muted); transition: opacity .6s; }
.bracelet.moved .b3-hint{ opacity:0; }
.bracelet figcaption{ margin-top:.9rem; font-size:.92rem; line-height:1.55; color: var(--ink-soft); }
.bracelet figcaption b{ color: var(--ink); letter-spacing:.08em; }
.bracelet .btn{ margin-top:1.2rem; }
@media (max-width: 1100px){ .bracelet{ position:static; transform:none; margin: 3rem auto 0; max-width: 380px; width:100%; } }
.ab1-verse .mission{ margin-top: clamp(2.6rem,5vw,4rem); font-family: var(--font-display); font-size: clamp(1.4rem,2.2vw,1.9rem); line-height:1.25; max-width: 30em; color: var(--ink); }
.ab1-verse .mission a{ display:block; margin-top: .8rem; font-family: var(--font-body); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); }
.ab1-founder{ padding: clamp(4.5rem,9vw,7.5rem) 0; }
.ab1-founder .grid2{ display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,5vw,5rem); align-items:center; }
.ab1-founder img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
.ab1-founder h2{ font-size: clamp(2.3rem,4.8vw,4.4rem); line-height:.95; letter-spacing:-.025em; }
.ab1-founder p{ margin-top: 1.1rem; max-width: 36em; font-size: clamp(1.02rem,1.2vw,1.15rem); color: var(--ink-soft); }
.ab1-founder .link-arrow{ margin-top: 1.6rem; }
/* Paul 2026-10-24: firm content (old site wording) in place of the founder write-up */
.ab1-founder img.conf{ aspect-ratio: 4/3; object-position: 50% 50%; }
.ab1-founder .fit-h{ margin-top: 2rem; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--muted); padding-bottom:.6rem; border-bottom:1px solid var(--rule); }
.ab1-founder .fit li{ padding: .8rem 0; border-bottom:1px solid var(--rule); color: var(--ink); font-size: 1.02rem; }
@media (max-width: 760px){
  .ab1-founder .grid2{ grid-template-columns: 1fr; }
  .ab1 .cue{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .ab1{ height: 100svh; } }