/* One glass recipe for every V2 surface: the header, Herbert's card, the
   portrait frame and the small buttons. Tint, blur, a fine bright edge, a
   restrained reflection and a soft shadow, in the site's own palette.
   Loaded last on every page, so this file owns all glass decisions. */
:root {
  --glass-surface: rgba(255, 251, 240, .46);
  --glass-rim: rgba(255, 255, 250, .85);
  --glass-sheen: rgba(255, 255, 250, .55);
  --glass-edge: rgba(74, 88, 64, .17);
  --glass-shadow: rgba(58, 50, 32, .16);
  --glass-filter: blur(22px) saturate(1.2);
  --glass-radius: 22px;
  --dusk: rgba(126, 145, 93, .17);
}
:root[data-theme='dark'] {
  --glass-surface: rgba(58, 53, 42, .52);
  --glass-rim: rgba(240, 234, 214, .12);
  --glass-sheen: rgba(240, 234, 214, .05);
  --glass-edge: rgba(183, 190, 156, .2);
  --glass-shadow: rgba(0, 0, 0, .34);
  --dusk: rgba(153, 173, 111, .11);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --glass-surface: rgba(58, 53, 42, .52);
    --glass-rim: rgba(240, 234, 214, .12);
    --glass-sheen: rgba(240, 234, 214, .05);
    --glass-edge: rgba(183, 190, 156, .2);
    --glass-shadow: rgba(0, 0, 0, .34);
    --dusk: rgba(153, 173, 111, .11);
  }
}

.opening-nav,
.bio-portrait figcaption,
.glass-link,
.glass {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(150deg, var(--glass-sheen), transparent 44%), var(--glass-surface);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 14px 30px -24px var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.bio-portrait figcaption, .glass-link { border-radius: 999px; }
.glass-link { transition: border-color .18s ease; }
.glass-link:hover { border-color: var(--olive); }
.bio-portrait .portrait-wide { border-radius: var(--glass-radius); }

/* The same header on every page. It stays with the reader, so the glass
   has something to sit over, and steps aside while scrolling down. */
html { overflow-x: clip; scroll-padding-top: 104px; }
body { overflow-x: clip; }
.opening-nav {
  position: sticky;
  top: 14px;
  z-index: 40;
  border-radius: 18px;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.opening-nav.is-tucked { transform: translateY(calc(-100% - 20px)); opacity: 0; }
.opening-nav a[aria-current] {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-warm);
  text-underline-offset: 7px;
}
.essay-design .opening-nav { margin-bottom: 0; }
.essay-design .collection-shell, .essay-design .reader-shell { margin-top: 56px; }

/* Essays: the page takes on a little evening light. On the essay pages it
   begins at the top, behind the header, and fades into the cream; on the
   homepage it passes across the full width under the Essays section. */
body.essay-design {
  background:
    linear-gradient(to bottom, var(--dusk), color-mix(in srgb, var(--dusk) 55%, transparent) 45%, transparent) top / 100% var(--dusk-depth, 860px) no-repeat,
    var(--bg);
}
.essay-design .finish-surface .surface-light { display: none; }
[data-finish="4"] .home-essays .surface-light {
  inset: -72px auto -72px 50%;
  width: 100vw;
  margin-left: -50vw;
  background: linear-gradient(to bottom, transparent, var(--dusk) 32%, var(--dusk) 68%, transparent);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 760px) {
  :root { --glass-radius: 18px; }
  body.essay-design { --dusk-depth: 720px; }
  .essay-design .collection-shell, .essay-design .reader-shell { margin-top: 36px; }
  [data-finish="4"] .home-essays .surface-light { inset-block: -48px; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 84px; }
  .opening-nav { top: 10px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-nav { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .opening-nav, .bio-portrait figcaption, .glass-link, .glass {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media print {
  .opening-nav { display: none; }
  body.essay-design { background: none; }
  .bio-portrait figcaption, .glass-link { background: none; box-shadow: none; backdrop-filter: none; }
}