/*
 * Home page styles.
 *
 * Typography and the gradient come from the ciar-an.co homepage extraction
 * (assets/index-9LQLEGaD.css); the rule each value was copied from is named
 * in a comment. Everything that served the retired 3D panel -- canvas,
 * left/right split, footer, socials -- was deleted on 2026-07-25 when the
 * page became a single centered composition. Only the weights this page
 * actually renders are declared below; the unused Helvetica Neue faces
 * (Light, Medium, Black, and the italic pairs of each) went with them.
 */

/* Arimo (SIL OFL, self-hosted): the display voice since 2026-07-26,
   replacing the unlicensed Helvetica Neue woffs inherited from the
   mirror. Metrically Arial-compatible, visually a near-twin. License:
   /fonts/arimo/OFL.txt */
@font-face {
  font-family: "Arimo";
  src: url(/fonts/arimo/Arimo-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url(/fonts/arimo/Arimo-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url(/fonts/arimo/Arimo-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The homepage joined the site's two-surface system on 2026-07-25:
   /js/theme.js sets data-surface (toggle > OS preference > dark default)
   and injects the pill switch. Reds are surface-keyed like everywhere
   else: pure red on dark, crimson on paper. */
html[data-surface="dark"] {
  --page-bg: linear-gradient(54deg, #050505, #000 48%, #060606);
  --text-color: red;
  /* solid gray at 5.90:1 per the 2026-07-25 design review */
  --text-muted: #8a8a8a;
  --bg: #050505;
  --ink: #ebebeb;
  --red: red;
}

html[data-surface="paper"] {
  --page-bg: #faf7f2;
  --text-color: #c00f29;
  --text-muted: #666666;
  --bg: #faf7f2;
  --ink: #1a1a1a;
  --red: #c00f29;
}

html {
  background: var(--page-bg);
}

body {
  margin: 0;
  font-family: var(--font);
}

.home-page {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2.75rem, 8vh, 5.5rem);
  padding: 6vh 6vw;
  display: flex;
}

.home-mark {
  text-align: center;
}

/* ._title_1iq7n_74, minus the link affordances -- the wordmark names the
   page, it does not navigate. The box hugs the word (rather than filling
   the block) so the 1.9x stretch cannot throw a 400px-wide invisible box
   past the viewport edge on a phone; text-indent cancels the trailing
   letter-space so the caps sit on the centre axis. */
.home-wordmark {
  color: var(--text-color);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  font-size: max(14px, 1.5vw);
  font-weight: 700;
  line-height: 1;
  width: max-content;
  margin: 0 auto;
  transform: scaleX(1.9);
}

/* Each word stretches rightward from its own left edge so all four share
   that edge. The painted block therefore runs 0.7x its layout width past
   the right side, and the pull-back is half of that: (1.7 - 1) / 2. */
.home-nav {
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  transform: translateX(-35%);
  display: flex;
}

/* ._nav_name_1iq7n_301; font-size is one step down from the source's
   clamp(48px, 6vw, 88px) because this site's section names run longer
   (ARCHIVE, LEXICON, CONTACT vs AUDIO, LOGS) */
.home-nav-name {
  color: var(--text-color);
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transform-origin: left center;
  transform: scaleX(1.7);
}

.home-nav-name:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 0.18em;
}

/* Sibling dim + nudge, pointer devices only: on touch, :hover latches
   after a tap and would leave a word displaced. */
@media (hover: hover) {
  .home-nav:hover .home-nav-name {
    opacity: 0.45;
  }
  .home-nav:hover .home-nav-name:hover {
    opacity: 1;
  }
  .home-nav-name:hover {
    transform: translate(1vw) scaleX(1.7);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-nav-name {
    transition:
      opacity 0.25s cubic-bezier(0, 0.742, 0.34, 1),
      transform 1s cubic-bezier(0, 0.742, 0.34, 1);
  }
}

/* === Theme pill (same component inner.css defines; duplicated here since
   the homepage does not load inner.css) === */
.theme-pill {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1000;
}
.theme-pill__track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
  position: relative;
  transition: background-color 200ms ease;
}
.theme-pill__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--bg);
  border-radius: 50%;
  transition:
    transform 200ms ease,
    background-color 200ms ease;
}
html[data-surface="dark"] .theme-pill__thumb {
  transform: translateX(20px);
}
.theme-pill:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 999px;
}

@media (width <= 700px) {
  .home-page {
    gap: clamp(2rem, 6vh, 3.5rem);
  }
  .home-nav {
    gap: 6px;
  }
  /* CONTACT paints 8.78x its font-size once stretched, so 9.5vw is the
     largest step that clears the 6vw side padding on a 320px phone; the
     40px cap meets the wide rule's floor so nothing jumps at 700px. */
  .home-nav-name {
    font-size: clamp(22px, 9.5vw, 40px);
  }
}