/* BORVEC v26 — Two-stage editorial scroll chevrons, brand scrollbar,
   and coordinated navbar handoff. No third-party library. */
:root {
  scrollbar-color: #74ffed #10232d;
}
html[data-theme="light"] {
  scrollbar-color: #087d77 #dce8e4;
}
/* WebKit fallback; browsers with standard scrollbar-color may prefer that rule. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #10232d; }
::-webkit-scrollbar-thumb { background: #74ffed; border-radius: 10px; border: 3px solid #10232d; }
::-webkit-scrollbar-thumb:hover { background: #a8fff2; }
html[data-theme="light"]::-webkit-scrollbar-track { background: #dce8e4; }
html[data-theme="light"]::-webkit-scrollbar-thumb { background: #087d77; border-color: #dce8e4; }
html[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: #00665f; }

/* v27: keep the chevrons visibly within the first viewport, not at the
   bottom of an oversized hero. The desktop coordinate is relative to the
   header-adjacent .v10-hero-inner (94px below the section top). */
@media (min-width:981px) {
  .v10-opening .v10-copy { position:static; }
}
.v10-opening { position:relative; }
.v10-opening .v10-hero-inner { position:relative; }
.v10-opening .v10-hero-lower {
  display:contents;
  margin:0;
  padding:0;
  min-height:0;
}
.v10-opening .v23-scroll-arrow {
  position:absolute;
  left:49%;
  top:clamp(380px,calc(100svh - 230px),580px);
  bottom:auto;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:52px;
  height:64px;
  padding:0;
  margin:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--v10-fg);
  opacity:.88;
  z-index:6;
  cursor:pointer;
  transition:opacity .24s ease;
}
.v10-opening .v23-scroll-arrow:hover,
.v10-opening .v23-scroll-arrow:focus-visible {
  transform:translateX(-50%);
  opacity:1;
  background:none;
  border:0;
  box-shadow:none;
}
.v10-opening .v23-scroll-arrow:focus-visible {
  outline:2px solid var(--v10-trace);
  outline-offset:2px;
  border-radius:5px;
}
.v10-opening .v23-scroll-arrow svg,
.v10-opening .v23-scroll-arrow:hover svg,
.v10-opening .v23-scroll-arrow:focus-visible svg {
  width:42px;
  height:63px;
  animation:none!important;
  transform:none;
  transition:none;
  overflow:visible;
}
.v10-opening .v23-scroll-arrow .v26-chevron {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.75;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
}
.v10-opening .v26-chevron-upper { stroke:currentColor; opacity:.66; }
.v10-opening .v26-chevron-lower { stroke:var(--v10-trace); opacity:.95; stroke-width:1.9; }
@media (prefers-reduced-motion:no-preference) {
  .v10-opening .v26-chevron-upper { animation:v26-chevron-one 2.6s ease-in-out infinite; }
  .v10-opening .v26-chevron-lower { animation:v26-chevron-two 2.6s ease-in-out infinite; }
}
@keyframes v26-chevron-one {
  0%,100% { transform:translateY(-3px); opacity:.38; }
  50% { transform:translateY(4px); opacity:.78; }
}
@keyframes v26-chevron-two {
  0%,100% { transform:translateY(-2px); opacity:.55; }
  50% { transform:translateY(5px); opacity:1; }
}
@media (max-width:980px) {
  /* Center between the headline and sculpture when the columns stack. */
  .v10-opening .v10-hero-lower { display:flex; justify-content:center; margin:14px 0 0; min-height:64px; }
  .v10-opening .v23-scroll-arrow { position:relative; left:auto; top:auto; bottom:auto; transform:none; margin-left:auto; margin-right:auto; }
  .v10-opening .v23-scroll-arrow:hover,
  .v10-opening .v23-scroll-arrow:focus-visible { transform:none; }
}
@media (max-width:600px) {
  .v10-opening .v10-hero-lower { margin:8px 0 0; min-height:51px; }
  .v10-opening .v23-scroll-arrow { width:44px; height:50px; }
  .v10-opening .v23-scroll-arrow svg,
  .v10-opening .v23-scroll-arrow:hover svg,
  .v10-opening .v23-scroll-arrow:focus-visible svg { width:32px; height:49px; }
}
@media (prefers-reduced-motion:reduce) {
  .v10-opening .v26-chevron { animation:none!important; }
}

/* The compact header starts as a transparent, non-interactive layer rather
   than display:none. It arrives immediately as the initial header leaves. */
.reading-nav.v26-prepared {
  display:grid;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,-15px,0) scale(.985);
  transition:transform .42s cubic-bezier(.16,1,.3,1),
             opacity .32s ease, visibility .42s;
}
.reading-nav.v26-prepared.v26-visible {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
}
@media (prefers-reduced-motion:reduce) {
  .reading-nav.v26-prepared { transition:none!important; transform:none; }
}