/* ==========================================================================
   VIEWS

   The page shows one section at a time instead of scrolling through all of
   them. Home is the landing frame; the nav swaps in the others.

   Progressive enhancement matters here: the hiding is scoped to `.js`, so
   without JavaScript every section is simply visible in document order and
   the anchor links behave the way they always did. Print does the same.
   ========================================================================== */

.js [data-view] { display: none; }
.js [data-view].is-view-active { display: block; }

/* Home is the one that has to sit in a single frame. */
.js .intro[data-view] { display: none; }
.js .intro[data-view].is-view-active { display: flex; }

/* The switch is a cross-fade rather than a jump, so it does not feel like a
   page load. Kept short: this fires on every nav click. */
.js [data-view].is-view-active {
  animation: view-in var(--dur-3) var(--ease-out);
}

@keyframes view-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-view].is-view-active { animation: none; }
}

/* Sections other than home no longer need a full viewport of top padding,
   since nothing scrolls into them. */
.js .section[data-view] {
  padding-block: clamp(var(--sp-8), 7vh, var(--sp-10)) var(--sp-9);
  min-height: 100svh;
}

/* --------------------------------------------------------------------------
   Home has to land in a single frame.

   The old padding was sized for a hero you scrolled past, where generous
   air above the name was the point. Here it is dead space competing with
   the content, so it comes down hard, and the footer tightens with it.
   -------------------------------------------------------------------------- */

.js .intro[data-view] {
  padding-block: clamp(4.25rem, 8vh, 5.5rem) clamp(1rem, 2vh, 1.75rem);
}

@media (min-width: 900px) {
  /* No top bar on desktop, so nothing to clear. */
  .js .intro[data-view] {
    padding-block: clamp(3rem, 6vh, 4.5rem) clamp(1.5rem, 3vh, 2.5rem);
  }
}

/* Home and the footer share the frame. Pinning the footer to a known height
   lets home subtract exactly that much, so the two add up to one viewport
   instead of one-viewport-plus-a-footer. */
.js { --foot-h: 3.5rem; }

.js .foot { padding-block: 0; }

.js .foot__inner {
  padding-block: 0;
  min-height: var(--foot-h);
  display: flex;
  align-items: center;
}

.js .intro[data-view] { min-height: calc(100svh - var(--foot-h)); }

/* Short desktop viewports (laptops at 768-860px tall, and anything with a
   lot of browser chrome) run out of room before the content does. Tighten
   the rhythm rather than the type, and only where it is actually needed. */
@media (min-width: 900px) and (max-height: 900px) {
  .js .intro[data-view] { padding-block: clamp(3rem, 5vh, 4rem) var(--sp-4); }
  .js .intro .intro__wrap { gap: var(--sp-4); }
  .js .intro .intro__block { gap: 6px; }
  .js .intro .intro__list { gap: 7px; }
}

/* The hairline that used to separate stacked sections is meaningless when
   only one is on screen. */
.js .section[data-view] + .section[data-view]::before { display: none; }

/* --------------------------------------------------------------------------
   Rail + menu current state
   -------------------------------------------------------------------------- */

.rail__item[aria-current='page'] .rail__via {
  border-color: var(--copper);
  background: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-wash), 0 0 14px var(--copper-wash);
}

.rail__item[aria-current='page'] .rail__no { color: var(--copper); }

.menu__list a[aria-current='page'] { color: var(--copper); }

/* The rail's scroll-progress trace measured how far down a long page you
   were. With views there is no such distance, so it goes away. */
.js .rail__trace { display: none; }
.js .scroll-progress { display: none; }

/* --------------------------------------------------------------------------
   Everything visible again when it needs to be
   -------------------------------------------------------------------------- */

@media print {
  [data-view] { display: block !important; }
  .intro[data-view] { display: block !important; }
  [data-view].is-view-active { animation: none !important; }
}