/* A quiet reading surface. Shared header/footer geometry stays in home/works.css. */
html.about-night { scroll-padding-bottom: 140px; color-scheme: dark; background: #0b1215; color: #e8e7df; }
.about-page { background: #0b1215; position: relative; }
.about-page::before { z-index: 0; opacity: .025; }
.night-scene { position: fixed; inset: auto 0 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 70% 105%, #30372a 0%, #111c1b 36%, #0b1215 72%); }
.night-scene::before { content: ''; position: absolute; inset: 0; background: url('/assets/night-fallback.svg') bottom center / 100% 100% no-repeat; }
#night-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms ease; }
.night-scene[data-ready] #night-canvas { opacity: 1; }
.night-scene[data-ready]::before { opacity: 0; }
/* The scenery never becomes a texture behind small type. */
.night-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(11,18,21,.20), transparent 68%), linear-gradient(0deg, rgba(9,15,16,.20), transparent 13%); }
.about-page .site-header { color: #bfc3bf; }
.about-page .site-header::before { background: linear-gradient(#0b1215 65%, rgba(11,18,21,0)); }
.about-page .works-footer { position: fixed; inset: auto 0 max(30px, env(safe-area-inset-bottom)); padding: 0 32px; margin: 0; min-height: 44px; color: #d4d8c8; z-index: 3; }
.about-page .works-footer::before { content: ""; position: absolute; z-index: -1; inset: -42px 0 -50px; background: linear-gradient(transparent, #0b1215 30%, #0b1215); pointer-events: none; }
.about-page .works-navigation a { color: #9fa9a4; }
.about-page .works-navigation a[aria-current] { color: #ecece3; }
.about-page :focus-visible { outline-color: #e8e7df; }
.about-page .skip-link { color: #0b1215; }
.about-page ::selection { color: #0b1215; background: #e8e7df; }
.about-main { position: relative; z-index: 1; width: 100%; max-width: 850px; margin: auto; padding: clamp(92px, 10svh, 124px) 40px clamp(128px, 16svh, 170px); }
.about-letter h1 { margin: 0 0 28px; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(32px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -.045em; color: #f0eee4; text-wrap: balance; }
.about-letter h1 span { color: #c7cfc9; }
.about-copy { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(17px, 1.15vw, 19px); line-height: 1.65; letter-spacing: -.012em; color: #e2dfcf; text-wrap: pretty; }
.about-copy p { margin: 0 0 20px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy .about-founder { margin-top: 26px; color: #eeeee4; }
/* Hold the letter before its first paint; each paragraph joins the page reveal. */
html[data-about-pending] :is(.about-letter h1, .about-copy > p) { opacity: 0; }
@media (min-width: 1600px) and (min-height: 900px) { .about-main { padding-bottom: 190px; } }
@media (max-width: 600px) {
  .about-main { padding: 94px 24px 150px; max-width: 520px; }
  .about-letter h1 { font-size: clamp(29px, 7.5vw, 36px); margin-bottom: 29px; }
  .about-copy { font-size: 17px; line-height: 1.68; }
  .about-copy p { margin-bottom: 23px; }
  .about-copy .about-founder { margin-top: 29px; }
  .about-page .works-footer { bottom: max(16px, env(safe-area-inset-bottom)); padding: 0 24px; row-gap: 0; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .about-main { padding-top: 100px; padding-bottom: 120px; }
  .about-letter h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #night-canvas { transition: none; }
  html[data-about-pending] :is(.about-letter h1, .about-copy > p) { opacity: 1; }
}