/* about-v2.css: About page only (MVP-261105-02, Quick Lane fix after A-014).
   Restores the white Corebook-style surface Michael approved on 3 Nov 2026 (agency/approvals.md line 1)
   and applies the glass system in a light-surface variant. Loaded after chrome-v2.css and glass-v2.css.
   The shared header, draft bar and footer keep their A-014 dark styling (chrome-v2.css).
   Contrast (WCAG, worst case = text on the lightest glass tint over the strongest backdrop glow, no frost credit):
   ink #1D1D1F >= 13.9:1; muted #5F5F64 >= 5.26:1; letter-card text #3A3A3C 9.41:1; white on button #345D75 7.07:1. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;background:#fff}
body.about-light{
  --ink:#1D1D1F;--muted:#5F5F64;--card:#D3C8BF;--blue:#345D75;--blue-hover:#28495D;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* light glass: frosted white, crisp hairline edge, soft cool shadow */
  --lg-tint:rgba(255,255,255,.66);--lg-tint-fallback:rgba(255,255,255,.94);
  --lg-sheen:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 42%,rgba(255,255,255,0) 70%);
  --lg-edge:rgba(29,29,31,.12);--lg-edge-hi:inset 0 1px 0 rgba(255,255,255,.95);--lg-edge-lo:inset 0 -1px 0 rgba(29,29,31,.06);
  --lg-shadow:0 1px 2px rgba(16,24,32,.06),0 12px 32px rgba(16,24,32,.08);
  margin:0;background:#fff;color:var(--ink);font:400 1.0625rem/1.55 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased
}
.about-light main{display:block}
.about-light main p,.about-light main h1,.about-light main h2,.about-light main h3{margin:0}
.about-light main a{color:var(--blue);text-underline-offset:.18em}
.about-light main :focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* light glass panel */
.about-light .lglass{position:relative;background:var(--lg-sheen),var(--lg-tint);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--lg-edge);box-shadow:var(--lg-edge-hi),var(--lg-edge-lo),var(--lg-shadow);border-radius:22px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.about-light .lglass{background:var(--lg-sheen),var(--lg-tint-fallback)}}
/* soft glass light behind the panels, so the frost has something to catch (decorative, capped at .16) */
.about-light .glow{background:radial-gradient(48% 60% at 12% 18%,rgba(46,127,143,.12),rgba(46,127,143,0) 70%),radial-gradient(42% 55% at 88% 92%,rgba(240,180,63,.16),rgba(240,180,63,0) 70%),#fff}

/* glass icons on a light surface: solid back plates and a lighter floor shadow keep the edges crisp
   (plate vs white: amber 3.76:1, teal 10.32:1). Styles the shared sprite, so glass_build.py can still re-inject it. */
.about-light #gba>rect:first-of-type,.about-light #gbt>rect:first-of-type{fill-opacity:1}
.about-light #gba>ellipse,.about-light #gbt>ellipse{opacity:.16}
.about-light .gi{display:inline-block;width:40px;height:40px;flex:none;overflow:visible;vertical-align:middle}
.about-light .gi-56{width:56px;height:56px}

.about-light .label{font-size:.875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem}

/* Statement in a thin frame (approved Corebook structure), the frame is a light glass pane */
.cb-statement{padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,2rem)}
.about-light .frame{max-width:64rem;margin:auto;border:1.5px solid var(--ink);border-radius:22px;padding:clamp(2rem,6vw,5rem) clamp(1.5rem,5vw,4.5rem) clamp(2rem,5vw,3.5rem)}
.about-light .frame h1{font-weight:300;font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 clamp(2.5rem,6vw,4.5rem);max-width:17ch}
.about-light .values{display:grid;gap:clamp(1.5rem,4vw,2.5rem);margin:0;border-top:1.5px solid var(--ink);padding-top:clamp(1.5rem,3vw,2rem)}
.about-light .values>div{display:grid;gap:.6rem;align-content:start}
.about-light .values h2{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.about-light .values p{color:var(--muted);font-size:.98rem;line-height:1.5}

/* Places */
.cb-places{text-align:center;padding:clamp(3rem,8vw,6rem) 1.25rem}
.about-light .soft{font-weight:300;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.02em;line-height:1.1;color:var(--muted);margin:0 auto 1.5rem}
.about-light .route{display:block;width:min(100%,60rem);height:auto;margin:0 auto 1.5rem}
.about-light .places{display:grid;gap:var(--s4);max-width:62rem;margin:auto}
.about-light .places>div{display:grid;gap:.5rem;justify-items:center;align-content:start;padding:var(--s5)}
.about-light .places h3{font-weight:300;font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.01em;line-height:1.15}
.about-light .places p{color:var(--muted);margin:0 auto;max-width:16em;line-height:1.45}

/* Letter card: approved warm card, Michael's approved photo behind a glass pane (one reflection sweep) */
.cb-letter{padding:clamp(2rem,6vw,4rem) clamp(.75rem,2vw,1.25rem)}
.about-light .letter{position:relative;max-width:76rem;margin:auto;border-radius:22px;overflow:hidden;background:var(--card);display:block;gap:0}
.about-light .ph{position:relative}
.about-light .pane.me-pane{position:relative;display:block;width:min(80%,22rem);margin:2rem auto 0;max-width:none;border:0;border-radius:0;box-shadow:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 10%);mask-image:linear-gradient(transparent 0,#000 10%)}
.about-light .me-pane img{display:block;width:100%;height:auto}
/* reduced-motion and JS-off state: one fixed faint reflection band at the top-left corner (glass-v2 .pane::before) */
.about-light .me-pane::before{left:-6%;top:-4%;width:52%;height:34%;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.about-light .lt{position:relative;margin:var(--s4);padding:clamp(1.5rem,4vw,2.5rem);text-align:left}
.about-light .lt .gi-56{display:block;margin:0 0 1.25rem}
.about-light .lt h2{font-weight:300;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 1rem}
.about-light .lt p{margin:0 0 1.5rem;color:#3A3A3C;font-size:1.05rem;line-height:1.45}
.about-light .btns2{display:flex;flex-wrap:wrap;gap:1rem}

/* buttons: approved blue, as glass pills */
.about-light main a.sq,.about-light main a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8rem 1.5rem;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(52,93,117,.22);text-decoration:none;font:500 1.05rem/1.2 var(--font);transition:background-color 150ms}
.about-light main a.sq:hover,.about-light main a.btn:hover{background-color:var(--blue-hover);border-color:var(--blue-hover)}

/* The letter itself */
.cb-read{padding:clamp(2rem,6vw,5rem) 1.25rem clamp(4rem,9vw,7rem);scroll-margin-top:4.5rem}
.about-light .paper{max-width:40rem;margin:auto;display:block;padding:clamp(1.5rem,5vw,3rem);font-size:clamp(1.05rem,1.8vw,1.2rem);line-height:1.6}
.about-light .paper p{margin:0 0 1.15rem}
.about-light .paper p:last-child{margin-bottom:0}
.about-light .paper .sign{font-weight:500;font-size:1.3rem;margin-top:1.5rem}

@media(min-width:760px){.about-light .values{grid-template-columns:repeat(3,minmax(0,1fr))}.about-light .places{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Two columns from 900 px: the photo column is sized so the pane never sits under the text */
@media(min-width:900px){
  .about-light .letter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32rem);align-items:center;min-height:clamp(26rem,46vw,34rem)}
  .about-light .ph{align-self:stretch}
  .about-light .pane.me-pane{position:absolute;left:50%;bottom:0;height:108%;width:auto;margin:0;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 80%,transparent 100%),linear-gradient(transparent 0,#000 10%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 80%,transparent 100%),linear-gradient(transparent 0,#000 10%);mask-composite:intersect}
  .about-light .me-pane img{height:100%;width:auto;max-width:none}
  .about-light .lt{margin:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0}
}
@media(prefers-reduced-motion:reduce){.about-light main a.sq,.about-light main a.btn{transition:none}.about-light .me-pane::after{animation:none!important}}