/* ============================================
   VISUAL IDENTITY — edit these variables to
   change colours or fonts across the whole site.
   Nothing else in this file needs to change.
   ============================================ */
:root {
  --color-bg: #F6EEE3;          /* soft cream background */
  --color-bg-alt: #EFE4D4;      /* slightly deeper cream, for alternating sections */
  --color-text: #241C16;        /* warm near-black */
  --color-muted: #8C7864;       /* taupe wood, secondary text */
  --color-accent: #A6673F;      /* tea-cup amber, primary CTA / links */
  --color-accent-dark: #7B4C2E; /* hover state for accent */
  --color-contrast: #5F7FA6;    /* lake blue, used sparingly */
  --color-border: rgba(36, 28, 22, 0.12);

  /* Sapphic Sauna Club teaser only */
  --ssc-terracotta: #EA785B;
  --ssc-grape: #3F0013;
  --ssc-lilac: #EDBEE4;
  --ssc-cream: #F3D0C5;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --max-width: 1040px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { color: var(--color-accent-dark); text-decoration: underline; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 80px 0; }
section.alt { background: var(--color-bg-alt); }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 238, 227, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.site-nav .brand {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
}
.site-nav .brand:hover { text-decoration: none; }
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-text);
  font-size: 0.9rem;
}
.nav-links a:hover { color: var(--color-accent); }
.nav-toggle { display: none; }

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
  }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text);
    cursor: pointer;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 56px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .photo { order: -1; }
}
.hero .eyebrow {
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero p.sub {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 46ch;
}
.hero .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 8px;
  transition: transform 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-dark); color: var(--color-bg); }
.btn-outline { border: 1.5px solid var(--color-accent); color: var(--color-accent); }
.btn-outline:hover { background: var(--color-accent); color: var(--color-bg); }

.hero .photo img {
  width: 100%;
  border-radius: 16px;
  display: block;
  object-fit: cover;
}

/* ---------- Featured / appearances ---------- */
.appearances {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 0;
}
.appearances .label {
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
  margin-bottom: 16px;
}
.appearances-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.appearance-card {
  display: block;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
}
.appearance-card:hover { color: var(--color-accent); text-decoration: none; }
.appearance-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-color: var(--color-bg-alt);
  background-size: cover;
  background-position: center;
  margin-bottom: 8px;
}
.appearance-card.upcoming {
  color: var(--color-muted);
  font-style: italic;
  cursor: default;
}

/* ---------- Affiliations & brands worked with ---------- */
.affiliations, .brands-worked-with { padding: 40px 0; }
.affiliations h3, .brands-worked-with h3 { margin-bottom: 20px; }

.brands-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) {
  .brands-grid { grid-template-columns: 1fr; }
  .brands-photo { order: -1; }
}
.brands-photo {
  width: 100%;
  border-radius: 16px;
  display: block;
  object-fit: cover;
}

.affiliation-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.affiliation-badge:last-child { margin-bottom: 0; }

/* Logos aren't on transparent backgrounds yet, so each sits in its own
   white chip rather than floating loose against the cream page background.
   Once transparent versions are dropped in, this chip can be removed. */
.logo-chip {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-chip img {
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
/* CSB and BSS logos are genuinely transparent now, so they sit straight
   on the page with no white card behind them. LIS still uses .logo-chip
   above until a transparent version is provided. */
.round-logo {
  height: 56px;
  width: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Compact card/pill per organisation, tighter than the plain affiliation-badge row */
.org-card {
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.org-card:last-child { margin-bottom: 0; }
.org-card .round-logo {
  height: 44px;
  width: 44px;
}
.org-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.affiliation-badge p {
  margin: 0;
  max-width: 55ch;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; }
}
.about-grid img {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.about-grid figcaption {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 8px;
}

/* ---------- Publications & Research ---------- */
.pub-entry {
  border-top: 1px solid var(--color-border);
  padding: 32px 0;
}
.pub-entry:first-of-type { border-top: none; padding-top: 0; }
.pub-entry .venue {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.pub-entry blockquote {
  margin: 16px 0;
  padding-left: 18px;
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text);
}
.pub-entry blockquote p { margin: 0 0 8px; }
.pub-entry blockquote .quote-attribution {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0;
}
.pub-entry .links a { margin-right: 18px; font-weight: 500; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.stat-card {
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 18px 16px;
}
.stat-card .num {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--color-accent);
  display: block;
}
.stat-card .label {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.research-photo {
  width: 100%;
  max-width: 440px;
  display: block;
  border-radius: 16px;
  margin: 32px auto 8px;
}

/* ---------- Collaborate ---------- */
.collab-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.collab-list li {
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 0.95rem;
}

/* ---------- Coming soon teaser (site accent, not the SSC palette) ---------- */
.coming-soon-teaser {
  margin-top: 32px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
}
.coming-soon-teaser h3 {
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}
.coming-soon-teaser p {
  margin: 0;
  color: var(--color-muted);
}

/* ---------- SSC teaser ---------- */
.ssc-teaser {
  background: linear-gradient(135deg, var(--ssc-terracotta), var(--ssc-grape));
  border-radius: 20px;
  padding: 40px;
  color: var(--ssc-cream);
  text-align: center;
}
.ssc-teaser h3 {
  color: #fff;
  font-size: 1.6rem;
}
.ssc-teaser p {
  color: var(--ssc-lilac);
  max-width: 46ch;
  margin: 0 auto 20px;
}
.ssc-teaser .btn-outline {
  border-color: var(--ssc-lilac);
  color: #fff;
}
.ssc-teaser .btn-outline:hover {
  background: var(--ssc-lilac);
  color: var(--ssc-grape);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
form input, form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  margin-bottom: 14px;
}
form label {
  font-size: 0.85rem;
  color: var(--color-muted);
  display: block;
  margin-bottom: 6px;
}
.socials {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.socials a {
  color: var(--color-text);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
}
.socials a:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--color-border);
  padding: 32px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
}