/* ============================================================
   Kaexa / Kaethia — shared base
   Edit here only. `./sync.sh` copies this into each site.

   Two typographic voices, inherited from the world itself:
   Newsreader is what Kaethia_ is and says.
   IBM Plex Mono is what the site says about her — labels, dates,
   credits, navigation. The humanari trailing underscore is a
   monospace artifact, so the names live in the mono voice too.
   The two never mix inside one sentence.
   ============================================================ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/newsreader-latin.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/newsreader-latin-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/plex-mono-500.woff2') format('woff2');
}

/* ---------- tokens ---------------------------------------- */
/* Colour is taken from the record sleeve, not invented:
   the gold is the flower, the foam is the sky behind it. */
:root {
  --night:      #0B0A09;
  --night-2:    #15110D;
  --night-3:    #201A14;
  --paper:      #F4EEE5;
  --ash:        #8E8478;
  --gold:       #E9B46B;
  --gold-hi:    #F7C883;
  --gold-deep:  #B68137;
  --foam:       #ADCCC8;

  --serif: 'Newsreader', Iowan Old Style, Palatino, Georgia, serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --rule: 1px solid rgba(244, 238, 229, .12);

  --lamp-strength: 1;
}

/* ---------- reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.05rem, .8rem + .55vw, 1.24rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- the lamp -------------------------------------- */
/* One light, fixed to the viewport, identical on every page of
   both sites. The page scrolls through it, so what is near the
   top is lit and what is far from it falls into the room.
   This is the whole visual idea: same light. */
.lamp {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    62vmax 44vmax at 50% -7vmax,
    rgba(247, 200, 131, calc(.21 * var(--lamp-strength))) 0%,
    rgba(233, 180, 107, calc(.115 * var(--lamp-strength))) 27%,
    rgba(182, 129, 55, calc(.05 * var(--lamp-strength))) 52%,
    rgba(182, 129, 55, 0) 74%
  );
  opacity: 0;
  animation: lamp-warm 1500ms cubic-bezier(.22, .61, .21, 1) 100ms forwards;
}
@keyframes lamp-warm { to { opacity: 1; } }

.page { position: relative; z-index: 1; }

/* ---------- typographic voices ----------------------------- */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ash);
}
.label--lit { color: var(--gold); }
.label--soon { color: var(--foam); }

/* A humanari name always carries its underscore, and the
   underscore is the reason these are set in mono. */
.name { font-family: var(--mono); font-weight: 500; letter-spacing: .01em; }

.display {
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  font-size: clamp(2.5rem, 1rem + 6.4vw, 5rem);
  font-variation-settings: 'opsz' 60;
}
.display--md {
  font-size: clamp(1.85rem, 1rem + 3.2vw, 3rem);
  line-height: 1.06;
  font-variation-settings: 'opsz' 40;
}
.display--sm {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 26;
}

.prose { max-width: var(--measure); }
.prose > p + p { margin-top: 1.1em; }
.lead { font-size: 1.14em; line-height: 1.55; }
.dim { color: var(--ash); }

/* Her own closing line. Set as a voice, not as a heading. */
.voice {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-hi);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem);
  line-height: 1.18;
  font-variation-settings: 'opsz' 34;
}

/* ---------- layout ---------------------------------------- */
.wrap {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Generous, but not so generous that a short section is mostly
   padding — these pages have several small sections in a row. */
.section { padding-block: clamp(2.5rem, 5.5vw, 5rem); }
.section + .section { border-top: var(--rule); }

/* ---------- links ----------------------------------------- */
/* Underline is drawn, not inherited, so it can be lit on hover. */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: .1em;
  transition: background-size 220ms ease, color 220ms ease;
}
.link:hover { color: var(--gold-hi); background-size: 100% 2px; }

/* The one call to action. A lit edge, not a filled button —
   nothing in this room is plastic. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night);
  background: var(--gold);
  padding: .95em 1.6em;
  border-radius: 1px;
  transition: background 200ms ease, transform 200ms ease;
}
.cta:hover { background: var(--gold-hi); transform: translateY(-1px); }
.cta__arrow { transition: transform 200ms ease; }
.cta:hover .cta__arrow { transform: translateX(3px); }

.cta--quiet {
  color: var(--paper);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244, 238, 229, .22);
}
.cta--quiet:hover {
  background: transparent;
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ---------- masthead / footer ------------------------------ */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.6rem;
}
.masthead__home {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.masthead__home:hover { color: var(--gold-hi); }
.masthead nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  transition: color 180ms ease;
}
.masthead nav a:hover, .masthead nav a[aria-current='page'] { color: var(--paper); }

.colophon {
  border-top: var(--rule);
  padding-block: 2.6rem 3.4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ash);
  line-height: 1.9;
}
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--paper); }
.colophon ul { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- quality floor ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; opacity: 1; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}