/* albahrani.dev, second sheet: loaded after styles.css.
   1. the dark theme in graphite grey
   2. a top line that stays put
   3. one section on screen at a time, so nothing is a long scroll away */

/* 1. graphite */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #1E2023;
    --raised:    #26292D;
    --ink:       #E9EAEC;
    --ink-2:     #A7ABB3;
    --rule:      rgba(233, 234, 236, .18);
    --rule-2:    rgba(233, 234, 236, .40);
    --hand:      #B9C2F2;
    --hand-soft: #6B7BD0;
  }
}

/* 2. the top line follows you; the shadow paints its background edge to edge */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.top nav a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }

/* 3. views.js switches .is-on between the sections. Without scripts the
   page is simply one long page again. */
.js main > section:not(.is-on) { display: none; }
.js main > section.is-on:not(.hero) { padding-top: clamp(1rem, 4vh, 3rem); min-height: 70svh; }