/* ════════════════════════════════════════════════════════════════════════
   The splash — two rooms, one doorway each.

   A blank page divided down the middle by a line you can't see. Hovering a
   side grows it to three quarters of the screen and lets a blurred,
   out-of-focus glimpse of what's inside rise behind the title.
   On narrow screens the division turns horizontal: teaching above, work below.
   ═══════════════════════════════════════════════════════════════════════ */

.splash {
  height: 100dvh;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Brand & foot: small, centered, out of the way ───────────────────── */
.splash-brand,
.splash-foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
  padding: clamp(1.1rem, 3vh, 2rem) var(--gutter);
  text-align: center;
}

.splash-brand h1 { font-weight: 400; }
.splash-brand a {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}
.splash-brand .label { color: var(--ink-dim); }

.splash-foot { color: var(--ink-dim); flex-wrap: wrap; }
.splash-foot a { color: inherit; text-decoration: none; }
.splash-foot a:hover { color: var(--accent); }
.splash-foot .theme-toggle { color: var(--ink-dim); }
.splash-dot { color: var(--rule); }

/* ── The split ──────────────────────────────────────────────────────── */
.split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* The invisible line. It sits *between* the panels in flow, so it travels
   with the boundary as the sides resize. It only ever whispers. */
.split-seam {
  flex: 0 0 1px;
  background: var(--rule-soft);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
}
.split:hover .split-seam,
.split:focus-within .split-seam { opacity: 1; }

.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  container-type: inline-size;
  color: inherit;
  text-decoration: none;
  transition: flex-grow var(--slow) var(--ease), background var(--slow) var(--ease);
}
.panel--teaching { background: var(--paper); }
.panel--work { background: color-mix(in srgb, var(--wall) 55%, var(--paper)); }

/* ── The blurred glimpse ────────────────────────────────────────────── */
.panel-veil {
  position: absolute;
  inset: -8%;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(26px);
  transition: opacity var(--slow) var(--ease), transform 1.2s var(--ease);
  /* Fade the glimpse out at the edges so it never reads as a picture. */
  -webkit-mask-image: radial-gradient(115% 90% at 50% 50%, #000 35%, transparent 82%);
  mask-image: radial-gradient(115% 90% at 50% 50%, #000 35%, transparent 82%);
  pointer-events: none;
}

/* Teaching: pages of something being read over your shoulder. */
.preview-lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55em;
  height: 100%;
  padding: 8% 12%;
  font-size: clamp(0.9rem, 3.4cqw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-mid);
  overflow: hidden;
}
.preview-lines span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.preview-lines .is-head {
  font-family: var(--display);
  font-size: 1.7em;
  color: var(--accent);
}

/* Work: canvases seen from the far end of the hall. */
.preview-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 5%;
  height: 100%;
  padding: 7%;
}
.preview-tiles > * {
  min-height: 0;
  background: var(--wall);
  background-size: cover;
  background-position: center;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.5);
}
.preview-tiles > :nth-child(3n + 1) { transform: translateY(-9%); }
.preview-tiles > :nth-child(3n) { transform: translateY(7%); }
/* Before the images land (and if they never do), the frames are colour fields. */
.preview-tiles > :nth-child(odd) {
  background-image: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 35%, transparent),
    color-mix(in srgb, var(--link) 25%, transparent));
}

/* ── The face ───────────────────────────────────────────────────────── */
.panel-face {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  text-align: center;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.panel-title {
  font-family: var(--display);
  /* cqw, not vw: when the panel shrinks to a quarter the title shrinks with
     it instead of being clipped by the panel's overflow. */
  font-size: clamp(1.5rem, 9cqw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 11ch;
}
.panel-title em {
  display: block;
  font-size: 0.42em;
  font-style: italic;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.panel-cue {
  color: var(--ink-dim);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.panel-cue::after { content: " \2192"; }

/* ── Hover: grow to three quarters, dim the other side ──────────────── */
@media (hover: hover) {
  .panel:hover,
  .panel:focus-visible { flex-grow: 3; }

  .panel:hover .panel-veil,
  .panel:focus-visible .panel-veil { opacity: 0.62; transform: scale(1); }

  .panel:hover .panel-cue,
  .panel:focus-visible .panel-cue { color: var(--accent); border-color: var(--accent); }

  .split:has(.panel:hover) .panel:not(:hover) .panel-face,
  .split:has(.panel:focus-visible) .panel:not(:focus-visible) .panel-face {
    opacity: 0.32;
    transform: scale(0.94);
  }
}

/* Touch: nothing to hover, so let both sides keep a faint glimpse. */
@media (hover: none) {
  .panel-veil { opacity: 0.3; transform: scale(1); }
  .split-seam { opacity: 1; }
}

/* ── Stacked: teaching above, work below ────────────────────────────── */
@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
  .split { flex-direction: column; }
  .split-seam { flex: 0 0 1px; width: 100%; }
  .panel-title { max-width: none; }
  .preview-tiles { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
}

@media (max-height: 560px) {
  .splash { height: auto; min-height: 100dvh; }
  .panel { padding-block: 2.5rem; }
}