:root {
  /* paper + ink — TemporalX bright mode */
  --paper:    #FDFCF0;
  --paper-2:  #F5F3E8;
  --ink:      #13140d;
  --ink-80:   rgba(19, 20, 13, 0.80);
  --ink-70:   rgba(19, 20, 13, 0.70);
  --ink-55:   rgba(19, 20, 13, 0.55);
  --ink-40:   rgba(19, 20, 13, 0.40);
  --ink-25:   rgba(19, 20, 13, 0.22);
  --ink-12:   rgba(19, 20, 13, 0.12);
  --ink-06:   rgba(19, 20, 13, 0.06);

  /* warm accent (the user's chosen default) */
  --accent:   #C2632F;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;

  --maxw: 1180px;
  --read: 60ch;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* main grows to fill the viewport so the hero centres and the footer
   settles to the bottom — keeps the short (hero-only) page balanced. */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; text-decoration: none; }

img { display: block; }

/* ---- shared type helpers ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.eyebrow--accent { color: var(--accent); }

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.body-lg {
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-70);
  font-weight: 400;
}

.rule {
  height: 1px;
  background: var(--ink-12);
  border: 0;
  width: 100%;
  margin: 0;
}

/* ---- gentle scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* keep focus ring honest */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- layout ---- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

/* ---- shared armillary motif (faint parchment watermark) ---- */
.globe { display: block; }
.globe-faint { opacity: 0.08; }

/* ---- header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px clamp(24px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand cell is pinned to the original row height (22px) so enlarging the logo
   never grows the header or shifts the menu items. The bigger logo is centered
   and simply overflows into the existing 16px padding (overflow stays < 16px,
   so it never reaches the hairline rule below). Tune --logo-h to taste. */
.brand {
  display: flex;
  align-items: center;
  height: 22px;
  flex: 0 0 auto;
}
.brand-logo {
  height: var(--logo-h, 40px);
  width: auto;
  max-width: none;
}
.header-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}
.header-label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}
.header-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* ---- hero ---- */
.hero {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 8vh, 96px) 0;
  overflow: hidden;
}
.globe-wrap {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; width: 100%; }

/* Two-column hero: the wordmark and the "watch this space" panel sit side by
   side on desktop, then stack on narrow screens. align-items:start lines the
   panel's label up with the eyebrow so both columns read off the same top edge. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.hero-lede { min-width: 0; }

.hero-word {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 300;
  margin: 0 0 26px;
  letter-spacing: -0.04em;
}
.pron {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--ink-55);
  margin-bottom: 0;
}
.pron-ipa { font-family: var(--font-display); color: var(--ink); font-weight: 400; }
.pron-dot { color: var(--ink-25); }
.pron-pos { font-style: italic; }

/* watch this space panel */
.hero-watch {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: clamp(20px, 1.6vw, 28px);
  border-left: 2px solid var(--ink-12);
  margin-bottom: clamp(4px, 0.8vw, 12px);
}
.watch-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.watch-copy {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.62;
  color: var(--ink-70);
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(34px, 6vw, 48px);
    align-items: start;
  }
  .hero-watch { max-width: 52ch; }
}

/* ---- keeper ---- */
.keeper {
  padding: clamp(70px, 11vh, 140px) 0;
  background: var(--paper);
}
.keeper-statement {
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0;
  color: var(--ink);
}
.em { font-style: italic; color: var(--accent); }
.poetic-list {
  list-style: none;
  padding: 0;
  margin: clamp(48px, 7vh, 80px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 30ch;
}
.poetic-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-80);
}
.poetic-tick {
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: var(--accent);
  transform: translateY(-7px);
}

/* ---- mapping ---- */
.mapping { padding: clamp(80px, 12vh, 150px) 0; }
.map-heading {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 300;
  margin: 0 0 28px;
  letter-spacing: -0.03em;
}
.map-intro { max-width: 46ch; margin: 0; }
.map-rows { margin-top: 64px; display: flex; flex-direction: column; }

.mini-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 10px;
}
.mini-label--accent { color: var(--accent); }

.map-row {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(34px, 5vh, 52px) 0;
  align-items: start;
}
.map-num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.map-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.1;
}
.map-seanchus {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-55);
  margin: 0;
  max-width: 34ch;
}
.map-right { padding-top: 6px; }
.map-temporal {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-80);
  margin: 0;
  max-width: 36ch;
}

/* ---- cta ---- */
.cta {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(90px, 15vh, 180px) 0 0;
  overflow: hidden;
  border-top: 1px solid var(--ink-12);
}
.cta-inner { text-align: center; }
.cta-globe {
  position: absolute;
  top: calc(50% - 60px);
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-fore { position: relative; z-index: 1; }
.cta-heading {
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 300;
  margin: 0 0 28px;
  letter-spacing: -0.03em;
}
.cta-sub {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 42ch;
  margin: 0 auto 48px;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 18px 38px;
  border-radius: 0;
  transition: background 0.25s cubic-bezier(0.16,1,0.3,1),
              color 0.25s cubic-bezier(0.16,1,0.3,1),
              border-color 0.25s cubic-bezier(0.16,1,0.3,1);
}
.cta-btn:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.cta-btn-arrow { margin-left: 10px; }

/* ---- footer ---- */
.footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--ink-12);
  padding: 26px clamp(24px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: var(--maxw);
}
.foot-label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}

/* ---- responsive: stack the mapping grid on small screens ---- */
@media (max-width: 720px) {
  .map-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .map-num { padding-top: 0; }
  .map-right { padding-top: 0; }
  .header-label { display: none; }
}