/* ============================================================
   The Careoperative — style.css (v2.0 Harmonized)
   Unified stylesheet for all 6 pages.
   Riso Palette with Light Teal (dark mode) standardization.
   ============================================================ */


/* ------------------------------------------------------------
   0. CSS Reset (minimal, box-sizing based)
   ------------------------------------------------------------ */

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

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

body {
  min-height: 100vh;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}

ul, ol {
  list-style: none;
}

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

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--riso-yellow);
  color: var(--riso-teal);
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}


/* ------------------------------------------------------------
   1. CSS Custom Properties — Light mode (default)
   ------------------------------------------------------------ */

:root {
  /* ── Riso Inks (primary brand colors) ── */
  --riso-coral:   #e8604c;
  --riso-teal:    #1d6b6b;
  --riso-yellow:  #f5c842;
  --riso-plum:    #6b3a6b;

  /* ── Navigation / Footer Background ── */
  --nav-bg:       #1d6b6b;

  /* ── Page Surfaces & Text (Light Mode) ── */
  --riso-bg:      #faf3e8;
  --riso-surface: #f0ebe0;
  --riso-ink:     #1a1a1a;
  --riso-ink-mid: #444;

  /* ── H2 Chip Styling ── */
  --chip-bg:      var(--riso-yellow);
  --chip-text:    var(--riso-teal);

  /* ── Forest SVG Base Colour ── */
  --forest-color: #1d6b6b;

  /* ── Card/Border Elements ── */
  --riso-border:         #d4cdc3;
  --riso-photo-bg:       #e8e0d4;
  --riso-shadow:         rgba(0,0,0,0.13);
  --riso-dim-filter:     brightness(0.72) saturate(0.6);

  /* ── Sleeping Member State ── */
  --riso-sleeping-bg: #f5f0e8;
  --riso-sleeping-dot: #b0a898;

  /* ── Badge Styling ── */
  --badge-bg:      rgba(29,107,107,0.10);
  --badge-border:  rgba(29,107,107,0.30);
  --badge-text:    #1d6b6b;

  /* ── Layout Tokens ── */
  --card-h:     140px;
  --photo-w:    110px;
  --peek-w:     24px;
  --card-gap:   12px;

  /* ── Typography Scale ── */
  --font-xs:   0.8rem;
  --font-sm:   0.9rem;
  --font-base: 1rem;
  --font-md:   1.2rem;
  --font-lg:   1.5rem;
  --font-xl:   2rem;
  --font-2xl:  2.75rem;
  --font-3xl:  3.5rem;

  /* ── Spacing Scale ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;

  /* ── Focus Ring ── */
  --color-focus: #1d6b6b;
}


/* ------------------------------------------------------------
   2. Dark mode — automatic via prefers-color-scheme
   ------------------------------------------------------------ */
/* ── GLOBAL VARIABLES (ALL MODES SHARE THESE) ── */
:root {
  /* RISO INKS - Constant across modes */
  --riso-coral:   #e8604c;
  --riso-teal:    #1d6b6b; 
  --riso-yellow:  #f5c842;  /* DO NOT CHANGE IN DARK MODE */
  --riso-plum:    #6b3a6b;  /* DO NOT CHANGE IN DARK MODE */
  
  /* LIGHT MODE BASES */
  --nav-bg:       #1d6b6b;
  --riso-bg:      #faf3e8;
  --riso-surface: #f0ebe0;
  --riso-ink:     #1a1a1a;
  --riso-ink-mid: #444;
  --chip-bg:      var(--riso-yellow);
  --chip-text:    var(--riso-teal);
  --forest-color: #1d6b6b;
}

/* ── DARK MODE OVERRIDES — system preference ── */
@media (prefers-color-scheme: dark) {
  :root {
    --riso-bg:      #1a1a18;
    --riso-surface: #252420;
    --riso-ink:     #e8e2d9;
    --riso-ink-mid: #b0a898;
    --riso-teal:    #5aadad;
    --nav-bg:       #1d6b6b;
    --chip-bg:      var(--riso-yellow);
    --chip-text:    #1a1a1a;
    --forest-color: #5aadad;
    --riso-border:         #3d3828;
    --riso-photo-bg:       #302d24;
    --riso-shadow:         rgba(0,0,0,0.4);
    --riso-dim-filter:     brightness(0.45) saturate(0.4);
    --riso-sleeping-bg:    #222018;
    --riso-sleeping-dot:   #5a5448;
    --badge-bg:            rgba(42,138,138,0.15);
    --badge-border:        rgba(42,138,138,0.35);
    --badge-text:          #2a8a8a;
  }
}

/* ── DARK MODE OVERRIDES — manual toggle (.dark class on <html>) ── */
html.dark {
  --riso-bg:      #1a1a18;
  --riso-surface: #252420;
  --riso-ink:     #e8e2d9;
  --riso-ink-mid: #b0a898;
  --riso-teal:    #5aadad;
  --nav-bg:       #1d6b6b;
  --chip-bg:      var(--riso-yellow);
  --chip-text:    #1a1a1a;
  --forest-color: #5aadad;
  --riso-border:         #3d3828;
  --riso-photo-bg:       #302d24;
  --riso-shadow:         rgba(0,0,0,0.4);
  --riso-dim-filter:     brightness(0.45) saturate(0.4);
  --riso-sleeping-bg:    #222018;
  --riso-sleeping-dot:   #5a5448;
  --badge-bg:            rgba(42,138,138,0.15);
  --badge-border:        rgba(42,138,138,0.35);
  --badge-text:          #2a8a8a;
}

/* ------------------------------------------------------------
   4. Light mode — manual override (.light class on <html>)
   ------------------------------------------------------------ */

html.light {
  --riso-coral:   #e8604c;
  --riso-teal:    #1d6b6b;
  --riso-yellow:  #f5c842;
  --riso-plum:    #6b3a6b;
  --nav-bg:       #1d6b6b;
  --riso-bg:      #faf3e8;
  --riso-surface: #f0ebe0;
  --riso-ink:     #1a1a1a;
  --riso-ink-mid: #444;
  --chip-bg:      var(--riso-yellow);
  --chip-text:    var(--riso-teal);
  --forest-color: #1d6b6b;
  --riso-border:         #d4cdc3;
  --riso-photo-bg:       #e8e0d4;
  --riso-shadow:         rgba(0,0,0,0.13);
  --riso-dim-filter:     brightness(0.72) saturate(0.6);
  --riso-sleeping-bg: #f5f0e8;
  --riso-sleeping-dot: #b0a898;
  --badge-bg:      rgba(29,107,107,0.10);
  --badge-border:  rgba(29,107,107,0.30);
  --badge-text:    #1d6b6b;
}


/* ------------------------------------------------------------
   5. Body base styling
   ------------------------------------------------------------ */

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-base);
  line-height: 1.7;
  color: var(--riso-ink);
  background-color: var(--riso-bg);
  position: relative;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ------------------------------------------------------------
   6. Typography
   ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  line-height: 1.2;
  color: var(--riso-ink);
}

h1 { font-size: var(--font-2xl); font-weight: 700; }
h2 { font-size: var(--font-xl);  font-weight: 700; }
h3 { font-size: var(--font-lg);  font-weight: 600; }
h4 { font-size: var(--font-md);  font-weight: 600; }
h5 { font-size: var(--font-base); font-weight: 600; }
h6 { font-size: var(--font-sm);  font-weight: 600; }

p {
  max-width: 68ch;
  margin-bottom: var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

strong { font-weight: 600; }
em     { font-style: italic; }

small {
  font-size: var(--font-sm);
  color: var(--riso-ink-mid);
}

blockquote {
  border-left: 3px solid var(--riso-teal);
  padding-left: var(--space-md);
  color: var(--riso-ink-mid);
  font-style: italic;
  margin: var(--space-lg) 0;
}


/* ------------------------------------------------------------
   7. Links and focus states
   ------------------------------------------------------------ */

a {
  color: var(--riso-teal);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--riso-coral);
  text-decoration: underline;
}

a:visited {
  color: var(--riso-teal);
}

/* Global focus ring */
:focus-visible {
  outline: 2px solid var(--riso-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove focus ring on mouse click, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}


/* ------------------------------------------------------------
   8. Layout utilities
   ------------------------------------------------------------ */

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.clip-wrap {
  overflow-x: hidden;
}

main {
  position: relative;
  z-index: 1;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.section {
  padding: var(--space-2xl) 0;
}

.section + .section {
  border-top: 1px solid var(--riso-border);
}

.section-heading {
  margin-bottom: var(--space-lg);
}

.section-heading h2 {
  margin-bottom: var(--space-sm);
}

.section-intro {
  font-size: var(--font-md);
  color: var(--riso-ink-mid);
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}


/* ------------------------------------------------------------
   9. Header & Navigation
   ------------------------------------------------------------ */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #1d6b6b;
  background-color: var(--nav-bg, #1d6b6b);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 56px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
   gap: 0.5rem;
}

.nav-home {
  display: flex;
  align-items: center;
}

.nav-home:hover {
  opacity: 0.8;
}

/* Desktop page links */
.nav-page-links {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 0;
}

.nav-page-link {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  transition: background-color 0.15s, color 0.15s;
}

.nav-page-link:hover {
  background-color: var(--riso-coral);
  color: #fff;
}

.nav-page-link.active {
  color: var(--riso-yellow);
  border-bottom: 2px solid var(--riso-yellow);
}
.nav-page-link:visited {
  color: rgba(255,255,255,0.85);
}
/* Dark mode toggle button */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 40px;
  font-size: 1.25rem;
  color: var(--riso-yellow);
  margin-right: 4px;
  transition: all 0.2s;
}

.dark-mode-toggle:hover {
  background: var(--riso-coral);
  color: #fff;
  transform: scale(0.95);
}

/* Icon visibility controls */
.icon-moon { display: none; }
.icon-sun  { display: block; }

html.dark  .icon-sun  { display: none   !important; }
html.dark  .icon-moon { display: block  !important; }
html.light .icon-sun  { display: block  !important; }
html.light .icon-moon { display: none   !important; }

@media (prefers-color-scheme: dark) {
  .icon-moon { display: block; }
  .icon-sun  { display: none; }
}

/* Hamburger button */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  padding: 4px;
  border-radius: 3px;
  transition: color 0.15s;
}

.nav-icon-btn:hover {
  color: var(--riso-yellow);
}

.nav-hamburger {
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* Hamburger animation to X */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel */
.nav-panel {
  display: none;
  flex-direction: column;
  background-color: #1d6b6b;
  background-color: var(--nav-bg, #1d6b6b);
  border-top: 2px solid rgba(255,255,255,0.15);
}

.nav-panel.nav-open {
  display: flex;
}

.nav-link {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  text-transform: lowercase;
  color: rgba(255,255,255,0.9);
  padding: 0.6rem var(--space-lg);
  border-left: 3px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

.nav-link:hover {
  background-color: rgba(255,255,255,0.1);
  border-left-color: var(--riso-yellow);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--riso-yellow);
  border-left-color: var(--riso-yellow);
  background-color: rgba(255,255,255,0.05);
}
.nav-link:visited {
  color: rgba(255,255,255,0.9);
}
/* Hide desktop nav on mobile */
@media (max-width: 760px) {
  .nav-page-links {
    display: none;
  }
}


/* ------------------------------------------------------------
   10. Hero sections
   ------------------------------------------------------------ */

.page-hero {
  padding: 4.5rem 0 3rem;
  position: relative;
  text-align: center;
}

.page-hero h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--riso-teal);
  margin-bottom: 1.25rem;
}

.page-hero .lead {
  font-size: 1.05rem;
  color: var(--riso-ink-mid);
  max-width: 62ch;
  margin: 0 auto;
}

.hero {
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
}

.hero-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--riso-teal);
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
}

.hero-tagline {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--riso-coral);
  margin-bottom: 0;
}

.hero-intro {
  margin-top: 3rem;
  text-align: left;
  border-left: 4px solid var(--riso-yellow);
  padding-left: 1.5rem;
  position: relative;
  z-index: 1;
}

.hero-intro p {
  max-width: 100%;
  margin-bottom: 1rem;
  color: var(--riso-ink-mid);
}

.hero-intro strong {
  color: var(--riso-teal);
  font-weight: 700;
}

.hero-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}

.hero-value {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--riso-teal);
  border: 1px solid var(--riso-teal);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
}


/* ------------------------------------------------------------
   11. Labyrinth decorative SVG
   ------------------------------------------------------------ */

.page-labyrinth {
  position: absolute;
  right: -60px;
  top: 640px;
  width: 300px;
  height: 274px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  color: var(--riso-coral);
}

.hero-labyrinth {
  position: absolute;
  top: 445px;
  right: 100px;
  width: 340px;
  height: 310px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
  color: var(--riso-coral);
}

html.dark .hero-labyrinth {
  opacity: 0.12;
}

@media (max-width: 560px) {
  .page-labyrinth {
    width: 220px;
    height: 200px;
    top: 520px;
    right: -10px;
    opacity: 0.07;
  }
  .hero-labyrinth {
    width: 220px;
    height: 200px;
    top: 380px;
    right: 10px;
    opacity: 0.07;
  }
}


/* ------------------------------------------------------------
   12. Content sections
   ------------------------------------------------------------ */

.content-section {
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}

.content-section h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--chip-text);
  display: inline-block;
  background-color: var(--chip-bg);
  padding: 0.1rem 0.6rem;
  margin-bottom: 1.25rem;
}

.content-section p {
  color: var(--riso-ink-mid);
  max-width: 65ch;
  margin-bottom: 1rem;
}


/* ------------------------------------------------------------
   13. Publication cards
   ------------------------------------------------------------ */

.pub-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pub-card {
  background-color: var(--riso-surface);
  border-left: 3px solid var(--riso-teal);
  padding: 1.4rem 1.6rem;
}

.pub-card.internal {
  border-left-color: var(--riso-coral);
}

.pub-card.internal .pub-year {
  color: var(--riso-coral);
}

.pub-card-inner {
  max-width: 62ch;
}

.pub-year {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--riso-teal);
  opacity: 0.7;
  margin-bottom: 0.35rem;
}

.pub-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.pub-title a {
  color: var(--riso-ink);
  text-decoration: underline;
  text-decoration-color: rgba(29,107,107,0.35);
  transition: 0.15s;
}

.pub-title a:hover {
  color: var(--riso-teal);
  text-decoration-color: var(--riso-teal);
}

.pub-meta {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--riso-ink-mid);
  margin-bottom: 0.9rem;
}

.pub-summary {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--riso-ink-mid);
  margin-bottom: 0.9rem;
}

.pub-doi {
  font-size: 0.8rem;
  color: var(--riso-teal);
}

.pub-doi a {
  color: var(--riso-teal);
  text-decoration: underline;
}

.pub-doi a:hover {
  color: var(--riso-coral);
}

.oCare-note {
  margin-bottom: 0.5rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--riso-surface);
  border-left: 4px solid var(--riso-coral);
}

.oCare-note p {
  font-size: 0.95rem;
}


/* ------------------------------------------------------------
   14. Value cards grid (About page)
   ------------------------------------------------------------ */

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 0.5rem;
}

.value-card {
  padding: 1.2rem 1.4rem;
}

.value-card:nth-child(1) {
  background-color: var(--riso-teal);
  box-shadow: 4px 4px 0 var(--riso-coral);
}

.value-card:nth-child(2) {
  background-color: var(--riso-coral);
  box-shadow: 4px 4px 0 var(--riso-teal);
}

.value-card:nth-child(3) {
  background-color: var(--riso-plum);
  box-shadow: 4px 4px 0 var(--riso-yellow);
}

.value-card:nth-child(4) {
  background-color: var(--riso-yellow);
  box-shadow: 4px 4px 0 var(--riso-plum);
}

.value-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.value-card:nth-child(1) .value-name,
.value-card:nth-child(2) .value-name,
.value-card:nth-child(3) .value-name {
  color: #fff;
}

.value-card:nth-child(4) .value-name {
  color: var(--riso-teal);
}

.value-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.6;
}

.value-card:nth-child(1) .value-text,
.value-card:nth-child(2) .value-text,
.value-card:nth-child(3) .value-text {
  color: rgba(255,255,255,0.92);
}

.value-card:nth-child(4) .value-text {
  color: var(--riso-teal);
}

@media (max-width: 560px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   15. Member cards (Careoperative page)
   ------------------------------------------------------------ */

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.member-card {
  cursor: pointer;
  background: var(--riso-surface);
  border: 1px solid var(--riso-border);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.member-card:hover {
  box-shadow: 0 4px 18px var(--riso-shadow);
  transform: translateY(-2px);
}

.member-card.is-open {
  border-color: var(--riso-teal);
  box-shadow: 0 6px 24px var(--riso-shadow);
  transform: translateY(-2px);
}

.member-photo {
  aspect-ratio: 1 / 1;
  background-color: var(--riso-photo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--riso-teal);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.member-card:hover .member-photo::after,
.member-card.is-open .member-photo::after {
  opacity: 0.12;
}

.member-photo-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--riso-sleeping-dot);
}

.member-body {
  padding: 0.75rem 0.85rem 0.85rem;
  border-top: 2px solid var(--riso-teal);
}

.member-badge {
  display: inline-block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.58rem;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--badge-text);
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-border);
  padding: 1px 5px;
  margin-bottom: 0.35rem;
}

.member-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--riso-ink);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

.member-affiliation {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--riso-ink-mid);
  line-height: 1.35;
}

.member-bio {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  opacity: 0;
}

.member-card.is-open .member-bio {
  max-height: 500px;
  opacity: 1;
}

.member-bio p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--riso-ink-mid);
  padding-top: 0.65rem;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .member-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sleeping-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.5rem;
}

.sleeping-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.95rem;
  color: var(--riso-ink-mid);
  background-color: var(--riso-sleeping-bg);
  border: 1px solid var(--riso-border);
  padding: 0.25rem 0.7rem;
}

.alumni-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: 0.5rem;
}

.alumni-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9rem;
  color: var(--riso-sleeping-dot);
}

.alumni-name + .alumni-name::before {
  content: '·';
  margin: 0 0.6rem;
  color: var(--riso-sleeping-dot);
}
/* ------------------------------------------------------------
   16. Conference entries (Work page)
   ------------------------------------------------------------ */

.conf-list {
  display: flex;
  flex-direction: column;
}

.conf-entry {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(29,107,107,0.18);
  max-width: 62ch;
}

.conf-entry:last-child {
  border-bottom: 1px solid rgba(29,107,107,0.18);
}

.conf-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--riso-coral);
  margin-bottom: 0.3rem;
}

.conf-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--riso-ink);
}

.conf-venue {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--riso-ink-mid);
  margin-bottom: 0.35rem;
}

.conf-authors {
  font-size: 0.82rem;
  color: var(--riso-ink-mid);
}


/* ------------------------------------------------------------
   17. Forest SVG navigation (About page interactive)
   ------------------------------------------------------------ */

.forest-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  user-select: none;
}

.forest-top-row,
.forest-bottom-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 460px;
}

.forest-top-row {
  padding: 0 0 0.6rem 0;
}

.forest-bottom-row {
  padding: 0.6rem 0 0 0;
}

.forest-link {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--forest-color);
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.forest-link:hover {
  color: var(--riso-coral);
}

.forest-nav-svg a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.forest-nav-svg a:focus {
  outline: none;
}

.forest-nav-svg a:focus-visible {
  outline: 2px solid var(--riso-yellow);
  outline-offset: 2px;
}

.forest-link.bottom-left  { flex-direction: row; }
.forest-link.bottom-right { flex-direction: row-reverse; }
.forest-link.top-left     { flex-direction: row; }
.forest-link.top-right    { flex-direction: row-reverse; }

.forest-link .arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}

.forest-link:hover .arrow {
  opacity: 1;
}

.forest-link.bottom-left:hover .arrow  { transform: translateX(2px); }
.forest-link.bottom-right:hover .arrow { transform: translateX(-2px); }
.forest-link.top-left:hover .arrow    { transform: translateX(2px); }
.forest-link.top-right:hover .arrow   { transform: translateX(-2px); }

#forest-nav-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

#forest-nav-svg .layer-ground,
#forest-nav-svg .layer-under,
#forest-nav-svg .layer-trees,
#forest-nav-svg .layer-roots {
  transition: opacity 0.25s, color 0.25s;
  opacity: 1;
  color: var(--riso-teal);
}

/* Roots highlighted */
.forest-nav.highlight-roots #forest-nav-svg .layer-ground,
.forest-nav.highlight-roots #forest-nav-svg .layer-under,
.forest-nav.highlight-roots #forest-nav-svg .layer-trees {
  opacity: 0.18;
}

.forest-nav.highlight-roots #forest-nav-svg .layer-roots {
  opacity: 1;
  color: var(--riso-coral);
}

/* Groundcover / understorey highlighted */
.forest-nav.highlight-under #forest-nav-svg .layer-trees,
.forest-nav.highlight-under #forest-nav-svg .layer-roots {
  opacity: 0.18;
}

.forest-nav.highlight-under #forest-nav-svg .layer-ground,
.forest-nav.highlight-under #forest-nav-svg .layer-under {
  opacity: 1;
  color: var(--riso-coral);
}

/* Trees / canopies highlighted */
.forest-nav.highlight-trees #forest-nav-svg .layer-ground,
.forest-nav.highlight-trees #forest-nav-svg .layer-under,
.forest-nav.highlight-trees #forest-nav-svg .layer-roots {
  opacity: 0.18;
}

.forest-nav.highlight-trees #forest-nav-svg .layer-trees {
  opacity: 1;
  color: var(--riso-coral);
}


/* ------------------------------------------------------------
   18. Placeholder blocks (practices/sites pages)
   ------------------------------------------------------------ */

.placeholder-note {
  margin: 2rem 0;
  padding: 2rem;
  background-color: var(--riso-surface);
  border-left: 4px solid var(--riso-coral);
  color: var(--riso-ink-mid);
}

.illus-placeholder {
  margin: 0 0 3rem;
  max-width: 600px;
  height: 200px;
  border: 1px dashed var(--riso-teal);
  background-color: var(--riso-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.illus-placeholder-caption {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--riso-ink-mid);
  text-align: center;
  padding: 0 2rem;
}


/* ------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------ */

.site-footer {
  width: 100%;
  background-color: #1d6b6b;
  background-color: var(--nav-bg, #1d6b6b);
  padding: 3rem 0;
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.footer-invitation {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--riso-yellow);
}

.footer-bottom-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}


/* ------------------------------------------------------------
   20. Utility classes
   ------------------------------------------------------------ */

.text-muted    { color: var(--riso-ink-mid); }
.text-subtle   { color: var(--riso-sleeping-dot); }
.text-primary  { color: var(--riso-teal); }
.text-accent   { color: var(--riso-coral); }

.font-serif-display {
  font-family: 'Lora', Georgia, serif;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.divider {
  border: none;
  border-top: 1px solid var(--riso-border);
  margin: var(--space-lg) 0;
}


/* ------------------------------------------------------------
   21. Responsive adjustments (< 640px)
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  :root {
    --font-3xl: 2.4rem;
    --font-2xl: 2rem;
    --font-xl:  1.6rem;
    --font-lg:  1.3rem;
    --space-2xl: 4rem;
    --space-xl:  2.5rem;
  }

  .container,
  .container-wide {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .nav-inner {
    padding: 0 var(--space-md);
  }

  .nav-link {
    font-size: var(--font-base);
    padding: var(--space-sm) var(--space-md);
  }

  .page-hero {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .page-hero h1 {
    font-size: var(--font-2xl);
  }

  .illus-placeholder {
    height: 200px;
  }
}


/* ------------------------------------------------------------
   22. Practices page
   ------------------------------------------------------------ */

/* Section divider */
.section-rule {
  border: none;
  border-top: 1px solid rgba(29,107,107,0.18);
  margin: 0;
}

/* Practice cards */
.practice-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
}

.practice-card {
  background-color: var(--riso-surface);
  border-left: 3px solid var(--riso-teal);
  padding: 1.4rem 1.6rem;
}

.practice-card-inner {
  max-width: 62ch;
}

.practice-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--riso-coral);
  margin-bottom: 0.3rem;
}

.practice-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--riso-ink);
  margin-bottom: 0.65rem;
}

.practice-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.95rem;
  color: var(--riso-ink-mid);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 0.75rem;
}

.practice-body:last-child { margin-bottom: 0; }

.practice-body a {
  color: var(--riso-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.practice-body a:hover { color: var(--riso-coral); }

/* Membership table */
.membership-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.membership-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.85rem;
  color: var(--riso-ink-mid);
}

.membership-table th {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  color: var(--riso-teal);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--riso-teal);
  text-align: left;
  white-space: nowrap;
}

.membership-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(29,107,107,0.12);
  vertical-align: top;
  line-height: 1.5;
}

.membership-table tr:last-child td { border-bottom: none; }

.membership-table .tier-name {
  font-weight: 600;
  color: var(--riso-ink);
  white-space: nowrap;
}

.membership-table .check {
  color: var(--riso-teal);
  font-weight: 600;
  text-align: center;
}

/* Radial decision diagram */
.radial-wrap   { display: block; }
.accordion-wrap { display: none; }

/* Override SVG presentation attributes so dark mode takes effect */
.node-circle { fill: var(--riso-surface); }
.lab-bg      { fill: var(--riso-surface); }

.node-num {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  fill: rgba(29,107,107,0.55);
  transition: fill 0.18s;
  pointer-events: none;
  user-select: none;
}

.node-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.58rem;
  font-weight: 600;
  fill: rgba(85,85,85,0.6);
  transition: fill 0.18s;
  pointer-events: none;
  user-select: none;
}

.step-node { cursor: pointer; }

.step-node:focus-visible .node-circle {
  stroke: var(--riso-yellow);
  stroke-width: 2.5;
  stroke-dasharray: none;
}

.step-node.active .node-halo   { stroke-width: 2 !important; }
.step-node.active .node-circle {
  fill:            var(--riso-teal) !important;
  stroke:          var(--riso-teal) !important;
  stroke-dasharray: none          !important;
}
.step-node.active .node-num    { fill: var(--riso-yellow)        !important; }
.step-node.active .node-label  { fill: rgba(255,255,255,0.88)    !important; }

.spoke.active {
  stroke:          var(--riso-teal) !important;
  stroke-width:    1.5              !important;
  stroke-dasharray: none           !important;
}

/* Radial detail card (revealed on hover/click) */
#radial-detail {
  min-height: 5rem;
  max-width: 400px;
  margin: 0.5rem auto 0;
  padding: 1rem 1.2rem;
  background: var(--riso-surface);
  border-left: 3px solid var(--riso-teal);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

#radial-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--riso-coral);
  margin-bottom: 0.4rem;
}

#radial-detail-text {
  font-size: 0.88rem;
  color: var(--riso-ink-mid);
  line-height: 1.72;
  margin: 0;
}

/* GEFNSETT note */
.gefnsett-note {
  background: var(--riso-surface);
  border-left: 3px solid var(--riso-coral);
  padding: 0.9rem 1.1rem;
  margin-top: 2rem;
}

.gefnsett-note p {
  font-size: 0.88rem;
  color: var(--riso-ink-mid);
  line-height: 1.72;
  max-width: 62ch;
  margin: 0;
}

/* Accordion (used in guiding principles, decision-making, and authorship) */
.acc-list {
  display: flex;
  flex-direction: column;
}

.content-section .acc-list {
  margin-top: 1.25rem;
}

.acc-item {
  border-left: 3px solid rgba(29,107,107,0.18);
  border-bottom: 1px solid rgba(29,107,107,0.12);
  transition: border-color 0.15s;
}

.acc-item.open {
  border-left-color: var(--riso-teal);
  background: var(--riso-surface);
}

.acc-btn {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.8rem 1rem;
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
  color: inherit;
}

.acc-num {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--riso-teal);
  min-width: 1rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.acc-label {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--riso-ink);
  flex-shrink: 0;
}

.acc-short {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.83rem;
  color: var(--riso-ink-mid);
  font-style: italic;
  flex: 1;
}

.acc-chevron {
  font-size: 0.7rem;
  color: var(--riso-teal);
  opacity: 0.6;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.acc-item.open .acc-chevron { transform: rotate(180deg); }

.acc-body {
  padding: 0 1rem 0.9rem 2.7rem;
}

.acc-body p {
  font-size: 0.88rem;
  color: var(--riso-ink-mid);
  line-height: 1.72;
  margin: 0;
  border-top: 1px solid rgba(29,107,107,0.12);
  padding-top: 0.6rem;
  max-width: 100%;
}

.acc-body p + p {
  margin-top: 0.6rem;
  border-top: none;
  padding-top: 0;
}

/* Principles / authorship accordion — no step number, tighter indent */
.acc-principles .acc-body {
  padding-left: 1rem;
}

.acc-principles .acc-label {
  color: var(--riso-teal);
}

/* Swap radial ↔ accordion on small screens */
@media (max-width: 500px) {
  .radial-wrap    { display: none; }
  .accordion-wrap { display: block; }
}

@media (max-width: 640px) {
  .practice-card { padding: 1rem 1.1rem; }
}