/* --------------------------------------------------------- Section index */

/* The right margin is 26–36px wide and nothing in the grid reaches into it,
   so the labels run down the edge like a spine. The index sits inside the
   difference-blended nav: it reads on paper and on the contact section
   alike, and goes inert with the nav while the drawer is open. */

.sections { display: none; }

@media (min-width: 1024px) and (min-height: 640px) and (hover: hover) and (pointer: fine) {
  .nav .sections {
    position: fixed;
    top: 50%;
    right: calc(var(--margin) / 2);
    display: block;
    transform: translate(50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s var(--ease-out);
  }
  /* Out of the way until the hero has gone; the keyboard can still reach it. */
  .nav .sections.is-shown,
  .nav .sections:focus-within { opacity: 1; pointer-events: auto; }
}

.sections ol { display: flex; flex-direction: column; align-items: center; }

/* Vertical spacing (here and on the ticks) follows the viewport height, so
   the whole index fits short laptop screens. */
.sections a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(3px, 0.55vh, 5px) 4px;
  /* Dim, but still 5:1 or better on paper and night in both themes. */
  opacity: 0.6;
  transition: opacity 0.5s var(--ease-out);
}
.sections a:hover,
.sections a:focus-visible,
.sections a[aria-current] { opacity: 1; }
.sections a:focus-visible { outline-offset: 1px; }
@media (prefers-contrast: more) { .sections a { opacity: 1; } }

/* A tick before each label; the section being read gets the long one.
   A border rather than a fill, so it survives forced colours. */
.sections__line {
  width: 0;
  height: clamp(14px, 2.2vh, 20px);
  border-left: 1px solid;
  transform: scaleY(0.35);
  transform-origin: 50% 100%;
  transition: transform 0.8s var(--ease-out);
}
.sections a[aria-current] .sections__line { transform: none; }

.sections__label {
  font-family: var(--font-wide);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* The marquee runs edge to edge; where it crosses, the index ducks under it.
   extras.js sets the band's top and bottom, relative to the list. */
.sections.is-cut ol {
  -webkit-mask-image: linear-gradient(#000 calc(var(--cut-a) - 8px), transparent var(--cut-a), transparent var(--cut-b), #000 calc(var(--cut-b) + 8px));
          mask-image: linear-gradient(#000 calc(var(--cut-a) - 8px), transparent var(--cut-a), transparent var(--cut-b), #000 calc(var(--cut-b) + 8px));
}

/* -------------------------------------------------------- Bengaluru, now */

/* Tucked under the email, in the same voice as the note above it. */
.contact__now { margin-top: -12px; font-variant-numeric: tabular-nums; text-wrap: pretty; }

/* --------------------------------------------------------------- Pen nib */

/* On the hero the pointer writes (main.js draws the ink trail from it), so it
   becomes a nib in the trail's ink. The tip is the hotspot, at (3, 29). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero:has(> .ink-trail) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(3 29) rotate(45)'%3E%3Cpath d='M0 0C1.4-3.4 5-9.6 5-15.4C5-18.2 3.7-19.8 3.7-21.6V-26.5H-3.7V-21.6C-3.7-19.8-5-18.2-5-15.4C-5-9.6-1.4-3.4 0 0Z' fill='%230a0a0a' stroke='%23fff' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M0-2.8V-11.9' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cy='-13.5' r='1.6' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") 3 29, auto;
  }
  [data-theme="dark"] .hero:has(> .ink-trail) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(3 29) rotate(45)'%3E%3Cpath d='M0 0C1.4-3.4 5-9.6 5-15.4C5-18.2 3.7-19.8 3.7-21.6V-26.5H-3.7V-21.6C-3.7-19.8-5-18.2-5-15.4C-5-9.6-1.4-3.4 0 0Z' fill='%23f2f2f2' stroke='%230b0b0b' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M0-2.8V-11.9' stroke='%230b0b0b' stroke-width='1.1'/%3E%3Ccircle cy='-13.5' r='1.6' fill='%230b0b0b'/%3E%3C/g%3E%3C/svg%3E") 3 29, auto;
  }
}