/* ============================================================
   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');
}
/* The artist's wordmark. Self-hosted rather than pulled from
   fonts.googleapis.com as the brand guideline suggests: nothing on
   these pages requests anything from a third party, and that is
   worth keeping. Same typeface, same weight. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/cormorant-garamond-600.woff2') format('woff2');
}
@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;
  /* The artist's wordmark only — never body text, never labels. */
  --brand: 'Cormorant Garamond', Cormorant, Garamond, serif;

  --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: .82rem;
  letter-spacing: .12em;
  text-decoration: none;
}
.masthead__home:hover { color: var(--gold-hi); }
.masthead nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
/* Not uppercased: the artist's name appears here, and the brand
   guideline rules out all-caps forms of it. */
.masthead nav a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  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;
  }
}