/* ─── clues.life, Design System ─────────────────────────────────── */

:root {
  --bg:        #111418;
  --bg-2:      #161A20;
  --bg-3:      #1C2028;
  --text:      #F8F4EE;
  --text-2:    #DDD6CE;
  --muted:     #C8C2BB;
  --pale:      #9E9891;
  --faint:     #6E6862;
  --border:    rgba(255,255,255,.09);
  --border-2:  rgba(255,255,255,.15);
  --accent:    #E07038;
  --serif:     'Cormorant Garamond', serif;
  --sans:      'Inter', sans-serif;
  --w:         1080px;
  --px:        40px;
  --r:         8px;
  --r-lg:      12px;

  /* ─── Type scale ───────────────────────────────────────────────────
     RAISED 8 September 2026. Body copy was 15px site-wide, the size most
     sites use for captions, and lines ran 91 to 117 characters against a
     comfortable 60 to 75. The two problems compound: small text on long lines
     is the hardest combination to read, and raising the size fixes both at
     once, because larger letters in the same column mean fewer characters per
     line. Named here rather than left as 43 loose numbers so the next change
     is one edit and the scale cannot drift apart. */
  --fs-micro:  12px;   /* was 9-10px , chevrons, role labels */
  --fs-label:  12px;   /* was 11px   , uppercase tracking labels */
  --fs-xs:     14px;   /* was 12px   , footer copy, arrows */
  --fs-sm:     15px;   /* was 13px   , nav, card descriptions, form hints */
  --fs-md:     16px;   /* was 14px   , buttons */
  --fs-body:   18px;   /* was 15px   , everything people actually read */
  --fs-lede:   20px;   /* was 17px   , page intros */
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Layout ─────────────────────────────────────────────────────── */
.wrap {
  max-width: calc(var(--w) + var(--px) * 2);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ─── Typography ─────────────────────────────────────────────────── */
.t-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.t-serif {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.15;
}

/* ─── Nav ────────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(17,20,24,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 var(--px);
  max-width: calc(var(--w) + var(--px) * 2);
  margin: 0 auto;
}
.nav-brand {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--text);
  opacity: .9;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color .15s;
  letter-spacing: .02em;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--bg);
  letter-spacing: .02em;
  transition: opacity .15s;
}
.nav-cta:hover { opacity: .85; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle-bar {
  width: 22px;
  height: 1.5px;
  background: var(--muted);
  border-radius: 2px;
  transition: opacity .15s;
}

/* ─── Nav dropdown ───────────────────────────────────────────────── */
.has-dropdown { position: relative; }
.nav-dropdown-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: .02em;
  transition: color .15s;
}
.nav-dropdown-btn:hover { color: var(--text); }
.nav-chevron { font-size: 11px; opacity: .55; }
.nav-dropdown-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: calc(100% + 18px);
  left: -16px;
  min-width: 240px;
  background: rgba(22,26,32,.98);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 6px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
}
@media (min-width: 901px) {
  .has-dropdown:hover .nav-dropdown-menu { display: block; }
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-dropdown-menu li a {
  display: block;
  padding: 10px 18px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color .15s;
  white-space: nowrap;
}
.nav-dropdown-menu li a:hover { color: var(--text); }

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero {
  padding: 120px 0 0;
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 72px;
}
.hero-photo-wrap {
  flex-shrink: 0;
  margin-top: 10px;
}
.hero-photo {
  width: 140px;
  height: 176px;
  border-radius: var(--r-lg);
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-photo-placeholder {
  width: 140px;
  height: 176px;
  border-radius: var(--r-lg);
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo-placeholder span {
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-text {
  flex: 1;
  min-width: 0;
}
.hero-name {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 24px;
}
.hero-hl {
  font-family: var(--serif);
  font-size: clamp(52px, 7vw, 86px);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 28px;
}
.hero-hl em {
  font-style: italic;
  color: var(--text-2);
}
.hero-desc {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 36px;
}
.hero-desc strong {
  color: var(--accent);
  font-weight: 400;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-pill {
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  padding: 11px 24px;
  border-radius: 100px;
  letter-spacing: .02em;
  transition: opacity .15s;
  display: inline-block;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover { opacity: .85; }
.btn-outline {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border-2);
}
.btn-outline:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

/* ─── Homepage sections ──────────────────────────────────────────── */
.home-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.home-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.home-section-left .section-label { display: block; margin-bottom: 14px; }
.home-section-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
}
.home-section-desc {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 14px;
}
.work-item-role {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}
.work-item-link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent);
  opacity: .8;
  transition: opacity .15s;
}
.work-item-link:hover { opacity: 1; }

/* ─── Collaborations ─────────────────────────────────────────────── */
.collab-section { border-bottom: none; }
.collab-section-label { display: block; margin-bottom: 28px; }
.collab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.collab-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
}
.collab-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--text-2);
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 1.2;
}
.collab-desc {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--pale);
  margin-bottom: 12px;
}

/* ─── Writing section ────────────────────────────────────────────── */
.writing {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.section-head {
  margin-bottom: 40px;
}
.section-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pale);
  display: block;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
}
.writing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.writing-card {
  background: var(--bg-2);
  padding: 28px 28px 24px;
  transition: background .15s;
}
.writing-card:hover { background: var(--bg-3); }
.writing-card-date {
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--faint);
  margin-bottom: 12px;
}
.writing-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.25;
  margin-bottom: 10px;
}
.writing-card:hover .writing-card-title { color: var(--text); }
.writing-card-desc {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--pale);
  margin-bottom: 16px;
}
.writing-card-arrow {
  font-size: var(--fs-xs);
  color: var(--accent);
  opacity: .7;
}
.writing-footer {
  margin-top: 32px;
  text-align: center;
}

/* ─── About strip ────────────────────────────────────────────────── */
.about-strip {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.about-label-block .section-label { margin-bottom: 16px; }
.about-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
}
.about-body {
  font-size: var(--fs-body);
  line-height: 1.82;
  color: var(--muted);
}
.about-body p + p { margin-top: 18px; }

/* ─── CTA section ────────────────────────────────────────────────── */
.cta-section {
  padding: 72px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cta-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
}
.cta-heading em { font-style: italic; color: var(--text-2); }
.cta-sub {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 32px;
}
.cta-section .btn-primary { font-size: var(--fs-md); padding: 13px 28px; }

/* ─── Footer ─────────────────────────────────────────────────────── */
footer {
  padding: 40px 0;
  border-top: 3px solid var(--accent);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--text-2);
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: var(--fs-sm);
  color: var(--pale);
}
.footer-links a { transition: color .15s; }
.footer-links a:hover { color: var(--text); }
.footer-copy {
  font-size: var(--fs-xs);
  color: var(--faint);
}

/* ─── Project pages ─────────────────────────────────────────────── */
.proj-hero {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--border);
}
.proj-hero-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 20px;
}
.proj-hero-title {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: 20px;
}
.proj-hero-sub {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 28px;
}
.proj-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.proj-section-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  margin-top: 12px;
  margin-bottom: 28px;
}
.proj-body {
  max-width: 680px;
}
.proj-body p {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--muted);
}
.proj-body p + p { margin-top: 20px; }
.proj-body strong { color: var(--text-2); font-weight: 500; }
.proj-body em { color: var(--text-2); font-style: italic; }
.proj-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 36px 0;
}
.proj-stat {
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.proj-stat-num {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.proj-stat-label {
  font-size: var(--fs-label);
  color: var(--pale);
  line-height: 1.45;
}
.proj-cta {
  padding: 64px 0;
}

/* ─── Inline links in prose ──────────────────────────────────────────
   ADDED 8 September 2026. `.text-link` was used on three pages, five links, to
   storiesofawakening.org, imhu.org and heroicheartsproject.org, sitting inside
   body paragraphs, and was defined NOWHERE. The global reset sets `a { color:
   inherit; text-decoration: none }`, so every one of them rendered as ordinary
   prose with nothing to say it was clickable.

   Underlined as well as coloured, not coloured alone: colour by itself is not a
   reliable signal for a reader who does not distinguish it, and these are the
   links that carry people to the rest of the work. */
.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(224, 112, 56, .45);
  transition: text-decoration-color .15s ease;
}
.text-link:hover {
  text-decoration-color: var(--accent);
}

/* ─── Closing CTA strip ──────────────────────────────────────────────
   MOVED HERE FROM about.html's page-level <style>, 8 September 2026. Four pages
   use this component (about, stories-of-awakening, imhu and heroic-hearts)
   and its CSS lived inside one of them, so on the other three it rendered with
   no styling at all: the heading is a <div>, so it came out at body size with
   the paragraph jammed against it and the buttons against that.

   A component used on four pages belongs in the file all four load. */
.about-cta {
  padding: 64px 0;
}
.about-cta-inner {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.about-cta-text {
  flex: 1;
  min-width: 240px;
}
.about-cta-heading {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 10px;
}
.about-cta-sub {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted);
}
.about-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-cta-inner { flex-direction: column; align-items: flex-start; }
  :root { --px: 28px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: rgba(17,20,24,.97);
    border-bottom: 1px solid var(--border);
    padding: 24px var(--px);
    gap: 20px;
  }
  .nav-toggle { display: flex; }
  .nav-dropdown-btn { font-size: var(--fs-sm); }
  .nav-dropdown-menu {
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    padding: 6px 0 0 12px;
    min-width: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .has-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu li a { padding: 6px 0; font-size: var(--fs-sm); color: var(--pale); white-space: normal; }
  .proj-stat-row { grid-template-columns: 1fr; }
  .hero-inner { gap: 32px; }
  .home-section-inner { grid-template-columns: 1fr; gap: 20px; }
  .collab-grid { grid-template-columns: 1fr; }
  .writing-grid { grid-template-columns: 1fr; gap: 2px; }
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .about-cta { padding: 48px 0; }
  :root { --px: 20px; }
  .hero { padding: 80px 0 0; }
  .hero-inner { flex-direction: column; gap: 28px; padding-bottom: 52px; }
  .hero-photo, .hero-photo-placeholder { width: 100px; height: 126px; }
  .hero-hl { font-size: 52px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}