/* Alter Imaginaries — "euphemia" visual variant
   Same content/structure as /Development/site, restyled after euphemia.com:
   bold full-bleed colour blocks, oversized rounded-sans headlines, a stacked
   full-screen colour-band nav menu, and flat geometric shape accents. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Italic-Variable.woff2') format('woff2');
}

:root {
  --paper: #faf6ee;
  --paper-dim: #f1ead9;
  --surface: #faf6ee;
  --ink: #1c1712;
  --ink-soft: #4a4238;
  --ink-faint: #8a7f6c;
  --accent: #d98c2b;
  --accent-dark: #b06f1e;
  --accent-soft: #ecd9b8;
  --line: #ded2b8;
  --line-soft: #e9e0cb;
  --chip-bg: #f1ead9;

  /* bold block colours — borrowed structural idea from euphemia.com
     (many saturated full-bleed hues), values are Alter Imaginaries' own */
  --c-terracotta: #c1543f;
  --c-teal: #2d6a63;
  --c-navy: #1f3350;
  --c-mustard: #e0a04a;
  --c-olive: #6b7a4a;
  --c-plum: #7d6474;
  --c-cream: #ede3c8;

  --shadow: 0 1px 2px rgba(28, 23, 18, 0.04), 0 8px 24px -12px rgba(28, 23, 18, 0.14);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* ---------- typography scale — one shared source, every page pulls from
     these instead of hand-tuning font-size per page. Change a value here
     and it updates everywhere that role is used. ---------- */
  --text-eyebrow: 13px;
  --text-h1: clamp(2rem, 5.4vw, 4.4rem);
  --text-h2: clamp(1.5rem, 3.2vw, 2.8rem);
  --text-h3: clamp(1.05rem, 1.6vw, 1.25rem);
  --text-lede: clamp(15px, 1.2vw, 18px);
  --text-body: 15.5px;
  --text-small: 13.5px;
  --lh-tight: 1.05;
  --lh-heading: 1.3;
  --lh-body: 1.65;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17130f;
    --paper-dim: #1f1a13;
    --surface: #221c15;
    --ink: #f3ecdd;
    --ink-soft: #cabfa9;
    --ink-faint: #90856f;
    --accent: #e0a04a;
    --accent-dark: #f0b566;
    --accent-soft: #3a2d18;
    --line: #382e21;
    --line-soft: #2b2319;
    --chip-bg: #241e15;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --paper: #17130f;
  --paper-dim: #1f1a13;
  --surface: #221c15;
  --ink: #f3ecdd;
  --ink-soft: #cabfa9;
  --ink-faint: #90856f;
  --accent: #e0a04a;
  --accent-dark: #f0b566;
  --accent-soft: #3a2d18;
  --line: #382e21;
  --line-soft: #2b2319;
  --chip-bg: #241e15;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

p {
  font-weight: 500;
}

/* ---------- TYPOGRAPHY — the shared scale every page pulls from, so a
   page heading looks like the same "voice" as the homepage hero instead of
   each page hand-tuning its own font-size. Component-level headings (card
   titles, tile titles, small in-card h3s) intentionally sit below this and
   keep their own sizing next to their component — this covers page-level
   text only: h1/h2/h3, eyebrow labels, and lede paragraphs. ---------- */
h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

h3,
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  display: block;
  margin: 0 0 8px;
}

.lede,
.hero-lede,
.pagehead p,
.section-intro {
  font-size: var(--text-lede);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
}

/* fluid container — scales continuously with the viewport/frame instead of
   snapping at a fixed max-width, matching euphemia.com's layout behaviour */
/* spacing from the viewport edge comes purely from the 94vw cap below —
   no extra inner padding, so .wrap's own edge is where content starts */
.wrap {
  max-width: min(1600px, 94vw);
  margin: 0 auto;
  padding: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 200;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- header ---------- */
.sitehead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.sitehead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.wordmark-group {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 210;
  position: relative;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 3px 8px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wordmark-badge {
    display: none;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navlinks {
  display: flex;
  gap: 32px;
}

.navlinks a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.82;
}

.navlinks a:hover {
  opacity: 1;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  position: relative;
  z-index: 210;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--ink);
  color: var(--paper);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-moon {
  display: none;
}

.theme-toggle .icon-moon circle:last-child {
  fill: var(--paper);
}

.theme-toggle:hover .icon-moon circle:last-child {
  fill: var(--ink);
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

.navtoggle {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
}

.navtoggle span,
.navtoggle span::before,
.navtoggle span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: absolute;
  transition: transform .25s ease, opacity .25s ease;
}

.navtoggle span::before {
  transform: translateY(-6px);
}

.navtoggle span::after {
  transform: translateY(6px);
}

body.nav-open .navtoggle span {
  background: transparent;
}

body.nav-open .navtoggle span::before {
  transform: rotate(45deg);
}

body.nav-open .navtoggle span::after {
  transform: rotate(-45deg);
}

body.nav-open .navtoggle {
  border-color: var(--ink);
}

/* full-screen stacked colour-band nav overlay — euphemia's menu pattern */
@media (max-width: 860px) {
  .navtoggle {
    display: flex;
  }

  .navlinks {
    position: fixed;
    inset: 0;
    z-index: 190;
    flex-direction: column;
    gap: 0;
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.6, 0, .2, 1);
    padding-top: 76px;
  }

  body.nav-open .navlinks {
    transform: translateY(0);
  }

  .navlinks a {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 28px;
    font-size: 34px;
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .navlinks a:nth-child(1) {
    background: var(--c-terracotta);
  }

  .navlinks a:nth-child(2) {
    background: var(--c-navy);
  }

  .navlinks a:nth-child(3) {
    background: var(--c-teal);
  }

  .navlinks a:nth-child(4) {
    background: var(--c-olive);
  }

  .navlinks a:nth-child(5) {
    background: var(--accent-dark);
  }

  .navlinks a:nth-child(6) {
    background: var(--c-plum);
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--ink-soft);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- hero ---------- */
.hero-section {
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.hero {
  padding: clamp(36px, 7vw, 64px) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}

.hero .eyebrow {
  margin-bottom: 18px;
}

.hero h1 {
  max-width: 12ch;
  margin: 0 0 40px;
}

.hero-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  margin: 0 0 14px;
  color: var(--ink);
}

.hero-lede {
  max-width: 50ch;
  margin: 0 0 14px;
}

.hero-lede:last-of-type {
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: clamp(32px, 6vw, 86px);
}

.hero-mosaic {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  min-height: 420px;
}

.hero-mosaic i {
  display: block;
  opacity: 0;
  transform: scale(0.6);
  animation: mosaic-in 0.5s ease forwards;
}

@keyframes mosaic-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mosaic i {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

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

  .hero-mosaic {
    min-height: 260px;
  }
}

/* ---------- sections / blocks ---------- */
section.block {
  padding: clamp(48px, 8vw, 84px) 0;
  border-bottom: 1px solid var(--line-soft);
}

section.block.dim {
  background: var(--paper-dim);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.section-head .eyebrow {
  margin-bottom: 6px;
}

.section-intro {
  max-width: 60ch;
  margin: 12px 0 clamp(24px, 4vw, 40px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

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

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

/* ---------- milestone cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.milestone-card {
  gap: 12px;
}

.milestone-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  text-transform: uppercase;
}

.pill-upcoming {
  background: var(--c-mustard);
  color: #221800;
}

.pill-done {
  background: var(--c-olive);
  color: #fff;
}

.milestone-date {
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
}

.milestone-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.card-excerpt {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.card-links {
  margin-top: 6px;
}

.card-links a.dim,
.card-body .dim {
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--accent-dark);
}

.card-links a.dim:hover {
  text-decoration: underline;
}

/* ---------- article / post cards ---------- */
.grid-posts {
  grid-template-columns: repeat(3, 1fr);
}

a.card.card-post,
.grid-posts>a.card {
  padding: 0;
  overflow: hidden;
}

.card-media {
  aspect-ratio: 4/3;
  position: relative;
  background: linear-gradient(135deg, var(--ph-a, var(--c-cream)) 0%, var(--ph-b, var(--c-terracotta)) 100%);
  display: flex;
  align-items: flex-end;
}

.card-media .ph {
  position: absolute;
  inset: 0;
}

.ph-tag {
  position: relative;
  margin: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  padding: 6px 11px;
}

.card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.card-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  line-height: 1.32;
}

.card-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

/* ---------- link tiles — euphemia.com's "linkTiles" story-card pattern:
   a bold colour panel (eyebrow + headline) stacked on a photo, with a round
   arrow button straddling the seam. Used for Event and Tulisan. ---------- */
.linktiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

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

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

.linktile {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.linktile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* overflow:hidden here only rounds the OUTER corners of the card. The arrow
   sits at the internal panel/media seam (via .linktile-panel below), which
   stays inside this box the whole time, so it never gets clipped. */
.linktile-body {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

/* panel overlays the media rather than pushing it down — a long title grows
   downward and covers more of the photo instead of growing the card taller,
   so every card in a row keeps the same height regardless of text length. */
.linktile-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 26px) clamp(30px, 4vw, 38px);
}

.linktile-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  display: block;
  margin-bottom: 10px;
}

.linktile-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 1.8rem);
  font-weight: 400;
  line-height: 1.32;
  margin: 0;
}

.linktile-media {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--ph-a, var(--c-cream)) 0%, var(--ph-b, var(--c-terracotta)) 100%);
  position: relative;
  overflow: hidden;
}
.linktile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.linktile:hover .linktile-media img { transform: scale(1.04); }
.linktile-media img { transition: transform .4s ease; }

.linktile-arrow {
  /* anchored to the PANEL's own bottom edge — i.e. the panel/media seam,
     not the card's outer bottom edge — so it never pokes past the card.
     fixed dark regardless of theme — var(--ink) would flip light in dark
     mode and disappear against the photo/colour panels it sits on. */
  position: absolute;
  right: 20px;
  bottom: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1c1712;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
  transition: transform .25s ease;
}

.linktile:hover .linktile-arrow {
  transform: scale(1.08);
}

.linktile.bg-terracotta .linktile-panel {
  background: var(--c-terracotta);
}

.linktile.bg-teal .linktile-panel {
  background: var(--c-teal);
}

.linktile.bg-navy .linktile-panel {
  background: var(--c-navy);
}

.linktile.bg-olive .linktile-panel {
  background: var(--c-olive);
}

.linktile.bg-plum .linktile-panel {
  background: var(--c-plum);
}

.linktile.bg-mustard .linktile-panel {
  background: var(--c-mustard);
  color: #221800;
}

.linktile.bg-mustard .linktile-arrow {
  background: #221800;
}

/* ---------- community cards ---------- */
.community-card {
  gap: 10px;
}

.community-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.community-card h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 21px);
  font-weight: 600;
  margin: 0;
}

.community-excerpt {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- bold colour-block utility (euphemia stat-block pattern) ---------- */
.blockband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

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

.blockband-cell {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.blockband-cell .eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.blockband-cell .big {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

/* two size tiers used everywhere a .blockband-cell .big carries an actual
   community name instead of the bare default scale above — short names
   (ARC UI, Anotasi) vs. longer ones that need to wrap (Jaringan Etnografi
   Terbuka, Critical Girlhood Studies). Previously set inline per instance
   with drifting values between about.html and communities.html (28px vs
   26px, 24px vs 22px) — unified here so every instance of each tier
   matches exactly, on every page. */
.blockband-cell .big.big-md {
  font-size: 26px;
}

.blockband-cell .big.big-sm {
  font-size: 22px;
  line-height: 1.15;
}

.blockband-cell p {
  font-size: var(--text-small);
  max-width: 26ch;
  opacity: .92;
  margin: 8px 0 0;
}

.blockband-cell .shape {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 96px;
  height: 96px;
  opacity: 0.95;
}

/* ---------- Tenun Aksara homepage promo ---------- */
.tenun-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) {
  .tenun-promo {
    grid-template-columns: 1fr;
  }
  .tenun-visual {
    order: -1;
    max-width: 200px;
  }
}
.tenun-steps {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tenun-steps li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.tenun-steps li span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-dark);
  flex: none;
  width: 2ch;
}
.tenun-visual {
  aspect-ratio: 1 / 2;
  max-width: 260px;
  margin: 0 auto;
  width: 100%;
  border: 1.5px solid var(--line);
  overflow: hidden;
}
.tenun-visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

a.blockband-cell {
  text-decoration: none;
}

a.blockband-cell:hover .big {
  text-decoration: underline;
}

button.blockband-cell {
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}

button.blockband-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

button.blockband-cell:hover .big {
  text-decoration: underline;
}

.bg-terracotta {
  background: var(--c-terracotta);
}

.bg-teal {
  background: var(--c-teal);
}

.bg-navy {
  background: var(--c-navy);
}

.bg-olive {
  background: var(--c-olive);
}

.bg-plum {
  background: var(--c-plum);
}

.bg-mustard {
  background: var(--c-mustard);
  color: #221800;
}

/* ---------- subscribe band ---------- */
.subscribe-band {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.subscribe-band h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  max-width: 22ch;
}

.subform {
  display: flex;
  gap: 10px;
}

.subform input {
  padding: 12px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  min-width: 220px;
}

.subform.on-surface input {
  border-color: var(--line);
  color: var(--ink);
}

.subform input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.subform.on-surface input::placeholder {
  color: var(--ink-faint);
}

.toast {
  font-size: 13px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity .3s ease;
}

.toast.show {
  opacity: 1;
}

/* ---------- footer ---------- */
/* fixed dark band regardless of theme, so the light-on-dark input styling
   below always has correct contrast (var(--ink) inverts in dark mode, a
   plain swap would put light text on a light footer) */
.sitefoot {
  background: #1c1712;
  color: #faf6ee;
  padding: 64px 0 28px;
}

.footcols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

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

.sitefoot h4 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 14px;
}

.footcols p {
  font-size: var(--text-small);
  color: #faf6ee;
  opacity: .75;
  margin: 0;
}

.sitefoot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sitefoot a {
  text-decoration: none;
  opacity: 0.8;
  font-size: 14.5px;
}

.sitefoot a:hover {
  opacity: 1;
}

.sitefoot .subform input {
  border-color: rgba(250, 246, 238, 0.3);
}

.footbottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(250, 246, 238, 0.16);
  padding-top: 22px;
  font-size: 13px;
  opacity: 0.7;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- misc page scaffolding shared across subpages ---------- */
.pagehead {
  padding: 56px 0 40px;
}

.pagehead .eyebrow {
  margin-bottom: 14px;
}

.pagehead h1 {
  max-width: 18ch;
  margin: 0 0 50px;
}

.pagehead p {
  max-width: 60ch;
}

/* ---------- ported subpage components (about, article, contact,
   communities, participate, and the *-detail pages) — same structural
   patterns as the original site, values switched to this stylesheet's
   fluid tokens and bold accents ---------- */

.back {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.back:hover {
  color: var(--accent-dark);
}

.meta-line {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.detail-image {
  position: relative;
  margin-top: clamp(20px, 3vw, 26px);
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-cream);
}

.detail-image .ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ph-a, var(--c-cream)) 0%, var(--ph-b, var(--c-terracotta)) 100%);
}

.detail-image .ph-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  padding: 6px 11px;
}

.prose {
  margin-top: clamp(20px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}

.prose strong {
  color: var(--ink);
}

.tag {
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* cta band + callout — recurring end-of-page prompts */
.cta-band {
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}

.cta-band h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  max-width: 420px;
  color: var(--paper);
  margin: 0;
  font-weight: 600;
}

.cta-band .btn-primary {
  background: var(--c-mustard);
  color: #221800;
  border-color: var(--c-mustard);
}

.cta-band .btn-primary:hover {
  opacity: 0.85;
}

.cta-band .btn-secondary {
  color: var(--paper);
  border-color: var(--paper);
}

.cta-band .btn-secondary:hover {
  background: var(--paper);
  color: var(--ink);
}

.callout {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-dim);
  padding: clamp(22px, 4vw, 30px) clamp(22px, 4vw, 32px);
  margin-top: 8px;
}

.callout h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 600;
}

.callout p {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 520px;
  margin: 0 0 18px;
}

/* timeline (About > Milestones) — horizontal: a line runs across the top,
   each milestone is a column underneath its own marker on that line */
.timeline {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  position: relative;
  padding: 26px 4px 12px;
  margin-top: 4px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--line);
}

.timeline-item {
  position: relative;
  flex: 0 0 260px;
  padding-top: 40px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4.5px;
  width: 11px;
  height: 11px;
  background: var(--c-terracotta);
  border: 2px solid var(--paper);
}

.timeline-date {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-top: 4px;
  font-weight: 600;
}

.timeline-item p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 5px;
}

.timeline-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  flex-wrap: wrap;
}

.timeline-links a {
  text-decoration: underline;
  text-decoration-color: var(--c-terracotta);
  text-underline-offset: 3px;
  color: var(--ink);
}

/* team list (About > Team) — plain left-aligned list, no photos */
.team-group {
  margin-bottom: 34px;
}

.team-group:last-child {
  margin-bottom: 0;
}

.team-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.team-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.member {
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.team-row .member:first-child {
  border-top: none;
  padding-top: 0;
}

.member .name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.member .role {
  font-size: 13px;
  color: var(--ink-faint);
}

/* about page subnav layout — subnav sits above the (full-width) description */
.about-layout {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.subnav {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}

/* pill row (About > Communities teaser) */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.pill-btn:hover {
  border-color: var(--ink);
  background: var(--chip-bg);
}

/* article tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: clamp(20px, 3vw, 26px);
}

.tab {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 17px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}

.tab:hover {
  border-color: var(--ink);
}

.tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* communities: modal-triggering cards + native <dialog> */
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

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

.card-trigger {
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 26px;
  margin: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
}

.card-trigger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.supporter-tile {
  align-items: center;
  justify-content: center;
  padding: 26px 10px;
  flex-direction: row;
}

.supporter-tile span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-align: center;
}

.community-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 40px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.community-modal::backdrop {
  background: rgba(28, 23, 18, 0.5);
  backdrop-filter: blur(2px);
}

.community-modal-inner {
  position: relative;
  padding: 28px;
}

.community-modal-inner p {
  color: var(--ink-soft);
  line-height: 1.65;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* contact form */
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(22px, 4vw, 28px);
  box-shadow: var(--shadow);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-terracotta);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-row a {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
}

.social-row a:hover {
  border-color: var(--c-terracotta);
}

/* small section subheads within contact.html's single content column —
   was three near-identical inline styles (font-family/weight/size
   repeated, margin-bottom drifting 12/14/8px each time); unified to one
   class and one margin. */
.contact-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 12px;
}

/* small print under a contact-subhead */
.contact-note {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 46ch;
}

.embed-box {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 34px 26px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13.5px;
  background: var(--surface);
}