/* 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;
  /* font/accent colour on dark or coloured surfaces (buttons, section
     headings on navy/terracotta blocks, icon fills) — kept separate from
     --paper so it can move independently of the page's own background. */
  --paper-text: #faf4c7;
  --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;
  /* floors raised across h1/h2/h3/lede/body — the vw term barely
     contributes at phone widths, so the floor IS the mobile size; the
     previous floors (2rem/1.5rem/18px/15px/15.5px) read small on a
     phone even though they scaled fine on desktop. Upper bounds
     (desktop) are untouched. */
  --text-h1: clamp(2.4rem, 5.4vw, 4.4rem);
  --text-h2: clamp(1.75rem, 3.2vw, 3.2rem);
  --text-h3: clamp(20px, 2vw, 2.8rem);
  --text-lede: clamp(17px, 1.2vw, 22px);
  --text-body: 16.5px;
  --text-small: 14px;
  --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-text);
  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;
}

/* was max-width:640px — raised for the same reason the header-right
   label breakpoint above was raised to 580px: with a third header-right
   item now in play, the badge reappearing at 641px (while labels are
   already back to full length above 580px) reopened a narrow overflow
   gap around 641-670px. Hiding the badge a little longer closes it. */
@media (max-width: 700px) {
  .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;
}

/* language switcher — sits outside .navlinks (not part of the mobile
   full-screen colour-band menu, since it's a persistent toggle, not a
   page destination) so it stays visible in the header at every width. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 6px 12px;
  opacity: 0.82;
  transition: opacity .2s ease;
}

.lang-switch:hover {
  opacity: 1;
}

/* the Instagram follow button swaps to a shorter label under this
   breakpoint (see the media query below) — both spans live in the markup
   and only one is shown at a time, instead of truncating with an
   ellipsis. */
.ig-follow-short,
.lang-switch-short {
  display: none;
}

/* was max-width:480px — raised after adding a third header-right item
   (the "Cerita"/"Stories" page link, alongside the language switch and
   Instagram follow). With all three at full length, measured overflow
   actually starts at 481px and clears again only around 575-580px, so
   480px left a real gap (iPad-mini-portrait and similarly common
   tablet/small-laptop widths) where the header visibly overflowed. */
@media (max-width: 580px) {
  .header-right {
    gap: 8px;
  }

  .lang-switch {
    font-size: 11.5px;
    padding: 6px 10px;
  }

  .ig-follow-full {
    display: none;
  }

  .ig-follow-short {
    display: inline;
  }

  .lang-switch-full {
    display: none;
  }

  .lang-switch-short {
    display: inline;
  }
}

/* iPhone SE and similarly narrow phones — tightens spacing further. */
@media (max-width: 375px) {
  .header-right {
    gap: 6px;
  }

  .lang-switch {
    padding: 5px 8px;
  }
}

.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-text);
}

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

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

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

.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;
  color: var(--ink);
  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;
  /* currentColor, not a hardcoded var(--ink) — so pages that flip the
     button's own `color` for a light-on-dark header (e.g. the homepage's
     transparent floating header over its navy hero) also flip the bars,
     instead of leaving them a fixed dark colour invisible on a dark
     background. */
  background: currentColor;
  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: var(--paper-text);
    opacity: 1;
    border-bottom: 1px solid rgba(250, 244, 199, 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: 16px;
  padding: 16px 30px;
  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-text);
}

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

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

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

.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: var(--paper-text);
}

.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: var(--paper-text);
  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: var(--paper-text);
  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-weight: 400;
  margin: 0;
}

.linktile-media {
  aspect-ratio: 1/1;
  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.
     transparent fill with a white outline reads against any photo or
     colour panel behind it; fixed white regardless of theme, since
     var(--ink) would flip light in dark mode and disappear. */
  position: absolute;
  right: 20px;
  bottom: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--paper-text);
  color: var(--paper-text);
  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 {
  border-color: #221800;
  color: #221800;
}

/* ---------- community list cards — same visual language as the archive
   linktile cards (colour block, heading, arrow), just without a photo:
   the panel fills the whole card instead of overlaying an image below
   it, and a round placeholder stands in for a partner logo until real
   ones are ready to swap in. ---------- */
button.linktile-plain {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  color: var(--paper-text);
}

/* square and equal height across every card, regardless of description
   length — aspect-ratio ties height to width, so a 4-up or 3-up grid of
   equal-width columns comes out equal-height for free. */
.linktile-plain .linktile-body {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
}

/* a full-width single-column card forced into a 1:1 square gets far
   taller than its content needs (the description/arrow end up
   stranded with a lot of empty space below) — let it size to content
   instead at the width .linktiles itself drops to one column. */
@media (max-width: 620px) {
  .linktile-plain .linktile-body {
    aspect-ratio: auto;
  }
}

.linktile-plain .linktile-panel {
  position: static;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* clamped instead of left to overflow — a square card has a fixed
   budget of vertical space, so a long description is truncated with an
   ellipsis rather than spilling out or shrinking the card's neighbours. */
.linktile-plain .linktile-panel p {
  font-size: var(--text-lede);
  line-height: var(--lh-body);
  opacity: 0.92;
  margin: 12px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* the single-column card above isn't square-height-constrained anymore,
   so it has room to show more of the description before truncating. */
@media (max-width: 620px) {
  .linktile-plain .linktile-panel p {
    -webkit-line-clamp: 4;
  }
}

.linktile-plain .linktile-arrow {
  position: static;
  align-self: flex-end;
  margin-top: auto;
}

/* white chip regardless of card colour, so it works both for a plain
   text placeholder (initials) and a real logo file dropped in later —
   most partner logos ship on their own white/opaque background. */
/* fluid instead of a fixed 90px + 50px margin — at 3-up widths below
   desktop (e.g. 1024px) the square card gets short enough that a fixed
   140px logo block left almost no room for the description, crushing
   it down to a sliver. Scaling both with viewport width keeps the logo
   proportionate to the card at every width instead of just at a couple
   of hard breakpoints. */
.community-logo-placeholder {
  width: clamp(56px, 7vw, 90px);
  height: clamp(56px, 7vw, 90px);
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  padding: 6px;
  flex-shrink: 0;
  margin-bottom: clamp(16px, 3.5vw, 50px);
}

.community-logo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 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: var(--paper-text);
  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;
}

/* at the 2-column tablet width, narrower cells wrap the paragraph onto
   more lines — since the text block is bottom-aligned in the same
   corner as .shape, a long wrapped line can run under the icon. Same
   breakpoint .blockband itself switches columns at. */
@media (max-width: 900px) {
  .blockband-cell p {
    max-width: 18ch;
  }

  .blockband-cell .shape {
    width: 64px;
    height: 64px;
  }
}

/* ---------- 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: var(--paper-text);
  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;
  flex-wrap: wrap;
  gap: 10px;
}

/* below ~360px of available row width, input (min-width:220px) + the
   now-bigger button (padding:16px 30px) no longer both fit on one line
   — wrap lets them stack instead of overflowing the viewport. */
@media (max-width: 480px) {
  .subform {
    flex-direction: column;
    align-items: stretch;
  }

  .subform input {
    min-width: 0;
    width: 100%;
  }
}

.subform input {
  padding: 12px 16px;
  border: 1.5px solid rgba(250, 244, 199, 0.5);
  background: transparent;
  color: var(--paper-text);
  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(250, 244, 199, 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;
}

.footcredits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(250, 246, 238, 0.16);
}

.footcredits-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.footcredits-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .2s ease;
}

.footcredits-logo:hover {
  opacity: .8;
}

.footcredits-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.footcredits-designer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  opacity: .8;
  text-decoration: none;
  white-space: nowrap;
}

.footcredits-designer:hover {
  opacity: 1;
}

.footcredits-designer img {
  height: 28px;
  width: auto;
}

@media (max-width: 640px) {
  .footcredits {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 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: var(--paper-text);
  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;
}

/* article body copy and milestone timeline text are fixed px (not part
   of the fluid --text-* scale above), so they need their own mobile
   bump — same reasoning: fine on desktop, small on a phone. */
@media (max-width: 640px) {
  .prose {
    font-size: 17px;
  }

  .timeline-item h3 {
    font-size: 20px;
  }

  .timeline-item p {
    font-size: 15.5px;
  }
}

.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-text);
  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-text);
  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-text);
  border-color: var(--paper-text);
}

.cta-band .btn-secondary:hover {
  background: var(--paper-text);
  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-text);
}

.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;
  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-text);
  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-text);
  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);
}