/* ==========================================================================
   MR GANT — The Digital House (centered, typed title)
   Approved palette only. Background is unchanged from the previous version:
   a Remembrance glow dissolving into Gents Black.
   ========================================================================== */

:root {
  /* Identity color */
  --remembrance: #1C030E;   /* MR GANT — The Philosophy */

  /* Universal colors */
  --gents-black: #000000;
  --holy:        #FFFFFF;

  --font-caslon: "Libre Caslon Condensed", "Frank Ruhl Libre", "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--gents-black);
}

body {
  margin: 0;
  background: var(--gents-black);
  color: var(--holy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Page: Remembrance glow dissolving into Gents Black (unchanged) ------ */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  background:
    radial-gradient(135% 100% at 20% 30%, var(--remembrance) 0%, var(--remembrance) 40%, var(--gents-black) 92%),
    var(--gents-black);
}

/* --- Wordmark ------------------------------------------------------------ */
.wordmark {
  font-family: var(--font-caslon);
  font-weight: 500;
  /* Sized so the widest state, MONSIEUR GANT, fits every screen. */
  font-size: clamp(1.5rem, 8vw, 6.5rem);
  line-height: 1.1;
  letter-spacing: .05em;
  white-space: nowrap;
  text-align: center;
}

.wordmark__visual {
  display: inline-flex;
  align-items: baseline;
}

/* Exactly one real space between the cursor and GANT, in whatever font loads. */
.gap { white-space: pre; }

/* The whole line stays centered as the typed word grows and shrinks.
   The script sets the slot's width to fit its content; the transition makes
   the line glide to its new size instead of jumping with every letter. */
.slot {
  display: inline-flex;
  justify-content: flex-end;
  align-items: baseline;
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
.slot__inner {
  flex: none;
  display: inline-flex;
  align-items: baseline;
}

/* --- Caret --------------------------------------------------------------- */
/* The caret stands exactly on the baseline and is as tall as the capitals,
   so it never hangs below the letters. */
.caret {
  display: inline-block;
  flex: none;
  width: .04em;
  height: .7em;
  margin-inline-start: .1em;
  background: var(--holy);
  animation: blink 1.2s ease-in-out infinite;
}
/* Solid while typing or erasing; blinks only at rest. */
.caret.is-typing { animation: none; opacity: 1; }

@keyframes blink {
  0%, 40%   { opacity: 1; }
  60%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* --- Reduced motion: static "MR GANT", no caret, no cycling -------------- */
@media (prefers-reduced-motion: reduce) {
  .caret { display: none; }
}