/* Caelum website. One screen on the Talisman Capital model: a dark hero whose second line types out the
   industries we work with, over a gold night sky, then a footer (and, once booking is on, a short closing section).
   Colours from the old caelum.cloud site (warm black, cream, gold); font from Talisman (Inter). */
:root {
  --bg: #0c0a08;
  --surface: #131110;
  --text: #f0eae0;
  --text-soft: rgba(240, 234, 224, 0.86);
  --dim: #8a7e70;
  --faint: #4a4238;
  --gold: #d4a64c;
  --gold-bright: #e8c878;
  --line: rgba(212, 166, 76, 0.14);
  --line-strong: rgba(212, 166, 76, 0.34);
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --side: max(24px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(212, 166, 76, 0.28); color: #fff; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 72px; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: var(--side);
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
@media (max-width: 560px) { :root { --side: max(20px, env(safe-area-inset-left, 0px)); } .wrap { padding-right: max(20px, env(safe-area-inset-right, 0px)); } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bg);
  background: var(--gold);
  padding: 12px 22px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--gold-bright); transform: translateY(-1px); }

/* Header: over the hero, darkens once the page scrolls */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s; }
.site-header.scrolled { background: rgba(12, 10, 8, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: max(18px, env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--gold-bright); line-height: 0; padding: 4px 0; text-decoration: none; }
.brand svg { width: auto; display: block; }
.brand .wordmark { height: 19px; }
.brand .archer { height: 28px; } /* the little archer from the old site, a mosaic of gold squares (scripts/website/archer.py) */
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 0.95rem; font-weight: 500; }
.site-nav a { color: var(--text-soft); text-decoration: none; transition: color 0.2s; }
.site-nav a:hover { color: var(--gold-bright); }
.lang { display: inline-grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 10px; color: var(--text-soft); text-decoration: none; transition: color 0.2s; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Hero: one screen, words left, the sky behind */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.glow { /* a sun just set below the bottom edge */
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: -2;
  background:
    radial-gradient(34% 30% at 50% 100%, rgba(242, 221, 184, 0.20), transparent),
    radial-gradient(70% 80% at 50% 100%, rgba(212, 166, 76, 0.20), rgba(160, 108, 44, 0.07) 55%, transparent);
}
.hero::before { /* keeps the words readable over the sky, as Talisman's left-to-right shade does */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12, 10, 8, 0.7), rgba(12, 10, 8, 0.2) 65%, transparent);
}
.hero-copy { padding-top: 112px; padding-bottom: 96px; display: grid; gap: 28px; justify-items: start; }
.hero h1 { font-size: clamp(2.05rem, 4.2vw, 3.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; color: var(--text); }
.hero h1 > span { display: block; text-wrap: balance; }
.typed-line { min-height: 1.12em; white-space: nowrap; color: var(--gold-bright); }
.caret { display: inline-block; width: 0.06em; min-width: 2px; height: 0.82em; margin-left: 0.05em; background: var(--gold-bright); vertical-align: -0.04em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .lead { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 200; line-height: 1.38; letter-spacing: -0.03em; color: var(--text-soft); max-width: 31em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .hero-copy { padding-top: 104px; padding-bottom: 72px; gap: 24px; }
  .hero .lead { font-weight: 300; letter-spacing: -0.02em; }
}

/* Closing: one line and the booking button, at the end of the page */
.closing { border-top: 1px solid var(--line); background: var(--surface); }
.closing .wrap { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px); }
.contact { display: grid; gap: 16px; justify-items: start; }
.email-line { font-size: 0.85rem; color: var(--dim); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
.site-footer .brand { gap: 10px; }
.site-footer .brand .wordmark { height: 15px; }
.site-footer .brand .archer { height: 21px; }
.site-footer small { font-size: 0.8rem; color: var(--dim); }
.site-footer .lang:hover { color: var(--gold-bright); }
.footer-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
}

/* Placeholders still to fill (website/README.md) */
.todo { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--bg); background: var(--gold); padding: 1px 6px; border-radius: 2px; margin-left: 6px; }

/* Until Antoine's Calendly link exists, the booking links (menu, hero, end of the page) stay hidden, and so do the
   hero's button row and the closing section, which hold nothing else. To turn booking on: put the link in every
   data-book link, then delete this block (website/README.md). */
[data-book], .actions, .closing { display: none !important; }

/* Until a contact inbox that names no one exists, the site shows no email address, rather than a guess
   (website/README.md). Delete this block then. */
.email-line, .todo { display: none !important; }