/* ===================================
   HOME — the list of names (Sha, Oct 14, 2026)
   The home page is a list in Timeless Serif, each name on one line. A name dims a little
   when the pointer rests on it, the way Maya's site and bringrecords.com answer (the 0.6s
   breath curve, after a 0.15s pause so a passing cursor doesn't flicker). A name for a part
   of this site opens it as an overlay at its own address (/#sheets…, js/spatial.js); the
   others are plain links.
   Under each name, a sentence about it, in gray, plain text, no box (Sha). On a computer it
   fades into the space left under the name while the pointer rests on the name. On a phone,
   which can't hover, the first tap shows it and puts an arrow after the name; the second tap
   goes (js/home.js).
   =================================== */

:root {
  --ease-breath: cubic-bezier(.22, .55, .3, 1);
  --t-pause: .15s;
  --t-answer: .6s;
}

.home-list {
  position: fixed;
  inset: 0;
  z-index: 10;                       /* above the canvas, below the social icons (15) and sections (50) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 54rem;
  margin: 0 auto;
  padding: max(4rem, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(6rem, calc(env(safe-area-inset-bottom) + 5rem)) max(16px, env(safe-area-inset-left));
  pointer-events: none;              /* only the names take the pointer; the ocean stays reachable */
  -webkit-tap-highlight-color: transparent;
}
.home-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Every name on one line: the size is whatever lets the longest name, "The Continuing Education
   Project" (14.87em in the Display style at 500, measured), fit the column, and the whole list,
   sentences' space included, fit the window's height. */
.home-list li {
  --col: min(54rem, 100vw);
  --fs: min(3.3rem, calc((var(--col) - 32px) / 15.1), calc((100vh - 10rem - 160px) / 8.3));
  /* the sentences: sized so the longest (rhapsode's, measured) fits the same column on one line */
  --about: min(1.15rem, calc((var(--col) - 32px) / 52.5));
  font-size: var(--fs);
  white-space: nowrap;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: var(--w-head);
  font-variation-settings: "STYL" 0;  /* the big names in the Display style, as on Maya's site */
}
.home-list a {
  pointer-events: auto;
  color: var(--color-text-active);
  text-decoration: none;
  transition: opacity var(--t-answer) var(--ease-breath) var(--t-pause);
}
.home-list a:hover { opacity: .55; }
.home-list a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* rhapsode's name is set as rhapsode sets its own wordmark: upright, 500, the Display
   style, the second alternate a, tracked in (the CE vault's Type.md). */
.home-list .wordmark-rhapsode {
  font-weight: 500;
  font-feature-settings: "ss02" 1;
  letter-spacing: -0.05em;
}

/* The sentence: the reading face, in gray. */
.home-about {
  margin: 0;
  font-size: var(--about);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: var(--w-read);
  font-variation-settings: "STYL" 100;
  font-feature-settings: var(--serif-alts);
  color: var(--color-text-muted);
}

/* A computer: the sentence's line is always kept under the name, so nothing moves; it fades
   in while the pointer rests on the name (or the name has keyboard focus), after the pause,
   and fades out at once when the pointer leaves. */
@media (hover: hover) {
  .home-about {
    height: 1.5em;
    margin-bottom: .55em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--t-answer) var(--ease-breath);
  }
  .home-list a:hover ~ .home-about,
  .home-list a:focus-visible ~ .home-about {
    opacity: 1;
    transition-delay: var(--t-pause);
  }
}

/* A phone: the list starts high so a sentence opening only pushes what's below it; the names
   leave room for the arrow; the sentence unfolds under its name (its height eases open, it
   never jumps). */
@media (hover: none) {
  .home-list { justify-content: flex-start; padding-top: max(7rem, 26vh, env(safe-area-inset-top)); }
  .home-list li {
    --fs: min(3rem, calc((100vw - 32px) / 16.3));
    --about: 1rem;
    margin-bottom: .18em;
  }
  .home-list a:active { opacity: .55; transition-duration: 0s; transition-delay: 0s; }
  .home-list a::after {              /* the arrow: tap again to go */
    content: "\00a0→";
    opacity: 0;
    transition: opacity var(--t-answer) var(--ease-breath);
  }
  .home-list li.open a::after { opacity: 1; }
  .home-about {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    white-space: normal;
    max-width: 30rem;
    transition: grid-template-rows var(--t-answer) var(--ease-breath), opacity var(--t-answer) var(--ease-breath);
  }
  .home-about > span { overflow: hidden; min-height: 0; }
  .home-list li.open .home-about {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .home-list li.open .home-about > span { padding: .15rem 0 .7rem; }
}

/* ===================================
   WEBSITES — the portfolio, newest first (an overlay like the others)
   =================================== */
.websites-section {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.websites-title {
  margin: 0 0 2.5rem;
  font-size: 28px;
  font-weight: var(--w-head);
  letter-spacing: 0.0375em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}
.websites-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.websites-list li {
  margin: 0 0 1.6rem;
}
.websites-list a {
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: var(--w-head);
  font-variation-settings: "STYL" 0;
  color: var(--color-text-active);
  text-decoration: none;
  transition: opacity var(--t-answer) var(--ease-breath) var(--t-pause);
}
.websites-list a:hover { opacity: .55; }
@media (pointer: coarse) {
  .websites-list a:active { opacity: .55; transition-duration: 0s; transition-delay: 0s; }
}
.websites-meta {
  display: block;
  margin-top: .2rem;
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .home-list a, .home-list a::after, .websites-list a, .home-about { transition: none; }
}