/* ============================================================
   The Sonder Vibes — stylesheet
   Dark by default, light when the visitor's system prefers it.
   Tweak the tokens below and the whole page follows.
   ============================================================ */

/* Palette taken from the logo: warm cream ground, dark brown ink, rose gold.
   The site commits to this one warm look rather than following the visitor's
   light/dark preference — a dark page would fight the logo's cream ground. */
:root {
  /* Sampled from the corners of sondervibes-logo.jpg. The logo is a JPEG with
     no transparency, so the page background must match its ground exactly or
     the image reads as a pasted rectangle. */
  --bg:        #e9e1d6;
  --bg-raised: #f6f2ec;
  --bg-quiet:  #ded3c4;
  --text:      #3b2318;   /* the logo's script brown */
  --text-dim:  #7c6355;
  --line:      #d3c5b4;
  --accent:    #b57f5d;   /* rose gold */
  --accent-dim:#c9a184;

  /* The gold used over the night photograph. */
  --gold:      #f0b44a;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 62ch;
  --page:    68rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- links & buttons ---------- */

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { border-color: var(--accent); color: var(--text); }

/* Brown on cream rather than rose gold on cream — the rose gold is too light to
   carry button text at an accessible contrast ratio. */
.btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-raised);
  font-weight: 550;
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- header ---------- */

.site-header {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

/* The logo image carries the wordmark. Its alt text renders in its place if the
   file is ever missing, so the header never collapses. */
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.05rem;
  text-decoration: none;
}
.wordmark img {
  display: block;
  height: 3.25rem;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.94rem;
}
.site-header nav a { color: var(--text-dim); text-decoration: none; }
.site-header nav a:hover { color: var(--text); }

/* ---------- hero ---------- */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) 1.5rem clamp(3rem, 7vw, 5.5rem);
}

/* Homepage hero: the logo lockup carries the branding, so it leads and the
   type underneath stays quiet. */
.hero-brand { text-align: center; }

.hero-logo {
  display: block;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  width: min(20rem, 68vw);
  height: auto;
}

.hero-brand .lede { margin-inline: auto; }
.hero-brand .actions { justify-content: center; }

/* ---------- photograph band ---------- */

/* Full-bleed night photograph with the definition set over it in live text.
   The image is positioned high so the caption burned into the bottom of the
   original is cropped away and does not compete with the real text. */
.plate {
  position: relative;
  isolation: isolate;
  padding: clamp(4.5rem, 14vw, 9rem) 1.5rem;
  background-color: #1b1a2a;   /* holds the band together before the image loads */
  background-image: url("/assets/sondervibes-bund.jpg");
  background-size: cover;
  background-position: 50% 22%;
  color: #f6f1e8;
}

/* Scrim: keeps the text legible over the bright buildings. */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(12, 11, 20, 0.55) 0%,
    rgba(12, 11, 20, 0.35) 40%,
    rgba(12, 11, 20, 0.82) 100%
  );
}

.plate > * {
  position: relative;
  max-width: var(--page);
  margin-inline: auto;
}

.plate .eyebrow { color: var(--gold); }
.plate .pronounce {
  margin: 0 0 1.4rem;
  color: rgba(246, 241, 232, 0.72);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}

.plate blockquote {
  margin: 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1rem + 2.9vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.plate blockquote em { color: var(--gold); font-style: italic; }

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow .pos { font-style: italic; text-transform: none; letter-spacing: 0; }

.hero h1 {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero h1 em { color: var(--accent); font-style: italic; }

.lede {
  margin: 1.6rem 0 0;
  max-width: 48ch;
  color: var(--text-dim);
  font-size: 1.1rem;
}

.actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- bands ---------- */

.band {
  border-top: 1px solid var(--line);
  padding: clamp(2.75rem, 6vw, 4.5rem) 1.5rem;
}
.band > * { max-width: var(--page); margin-inline: auto; }
.band-quiet { background: var(--bg-quiet); }

.band h2 {
  margin: 0 0 1.75rem;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }

.fine { color: var(--text-dim); font-size: 0.9rem; }

code {
  padding: 0.15em 0.4em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.87em;
}

/* ---------- link rows (Follow) ---------- */

.links {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
  display: grid;
  gap: 0.6rem;
}

.links a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.links a:hover { border-color: var(--accent); transform: translateX(3px); }

.links .platform {
  font-family: var(--serif);
  font-size: 1.15rem;
}
.links .handle {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.links .arrow {
  color: var(--accent);
  font-size: 1.05rem;
  transition: transform 0.18s ease;
}
.links a:hover .arrow { transform: translateX(3px); }

/* A platform that isn't live yet: visibly present, not clickable. */
.links a.is-pending {
  cursor: default;
  opacity: 0.55;
}
.links a.is-pending:hover {
  border-color: var(--line);
  transform: none;
}
.links a.is-pending:hover .arrow { transform: none; }

@media (max-width: 26rem) {
  .links a { grid-template-columns: 1fr auto; }
  .links .handle { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.site-footer p { margin: 0 0 0.35rem; }