/* ==========================================================================
   Berbincang Seni — Masters Project crowdfunding site
   Single stylesheet. Mobile first. No framework.

   Palette and type are taken from the Canva design:
   deep brown grounds, gold display type, cream body text.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Grounds */
  --ink-950: #0E0806;
  --ink-900: #1A0F0A;
  --ink-850: #22130C;
  --ink-800: #2B1810;
  --ink-700: #3D2418;
  --ink-600: #55351F;

  /* Ink */
  --cream-100: #F2E8D8;
  --cream-300: #C9BBA6;
  --cream-500: #9C8B77;

  /* Accents */
  --gold-500: #C99A3F;
  --gold-400: #D6B15E;
  --gold-300: #E0C07A;
  --rose-200: #EBC8C8;

  /* Semantic */
  --page-bg: var(--ink-950);
  --panel-bg: var(--ink-850);
  --panel-border: var(--ink-700);
  --text: var(--cream-100);
  --text-muted: var(--cream-300);
  --accent: var(--gold-400);
  --accent-strong: var(--gold-300);
  --focus: var(--gold-300);

  /* Type */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: 0.9375rem;   /* 15px — UI labels */
  --step-0: 1.1875rem;    /* 19px — body (serif needs more size) */
  --step-1: 1.375rem;     /* 22px — lead */
  --step-2: 1.75rem;      /* 28px — h3 */
  --step-3: clamp(1.9rem, 5.5vw, 2.75rem);   /* h2 */
  --step-4: clamp(3rem, 15vw, 6.5rem);       /* hero */

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  --measure: 34rem;
  --measure-wide: 62rem;

  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold-500); color: var(--ink-950); }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 100;
  background: var(--gold-400);
  color: var(--ink-950);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-sm);
  position: relative;
}

/* "How you can support" is laid over the photograph from the Cour Carrée.
   Same three layers as the hero: a gradient underneath so a missing file never
   shows as a hole, the photograph over it, then a scrim dark enough to hold the
   type at AA. */
.section--photo {
  isolation: isolate;
  overflow: hidden;
}

.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(165deg, #3F2717 0%, #1A0F0A 55%, #0E0806 100%);
}

.section__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../img/support-louvre.jpg');
  background-size: cover;
  /* Favours the lower half of the frame, where the cobbles and the figure are.
     The facade still fills the top on a wide screen. */
  background-position: center 62%;
}

.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(14, 8, 6, 0.90) 0%,
      rgba(14, 8, 6, 0.64) 32%,
      rgba(14, 8, 6, 0.70) 68%,
      rgba(14, 8, 6, 0.94) 100%);
}

.section--alt { background: var(--ink-900); }

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wrap--wide { max-width: var(--measure-wide); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.section h2 {
  font-size: var(--step-3);
  font-style: italic;
  color: var(--cream-100);
}

.section h3 {
  font-size: var(--step-2);
  color: var(--accent-strong);
  margin-top: var(--space-sm);
}

.lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  font-style: italic;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prose strong { color: var(--accent-strong); font-weight: 600; }

/* About: the portrait sits in a sidebar next to the text once there are two
   columns to be had. Below that it drops between the name and the prose, which
   is the order it reads best in on a phone, and crops to 4:5 so it does not
   take the whole screen before a word has been read. */
.about {
  display: grid;
  gap: var(--space-md);
}

.about__aside { margin: 0; }

.about__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Keeps the face in frame while the crop takes off the top of the facade. */
  object-position: center 56%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
}

/* Ornamental divider, redrawn from the deck */
.ornament {
  display: block;
  width: min(100%, 20rem);
  margin: var(--space-md) auto 0;
  color: var(--gold-500);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.65rem var(--space-sm);
  background: rgba(14, 8, 6, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header[data-scrolled="true"] { border-bottom-color: var(--ink-700); }

.site-header__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lang-switch a {
  color: var(--cream-500);
  text-decoration: none;
  padding: 0.6rem 0.25rem;
  min-width: 2.25rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease);
}
.lang-switch a:hover { color: var(--accent-strong); }
.lang-switch a[aria-current="true"] { color: var(--accent); }
.lang-switch span[aria-hidden="true"] { color: var(--cream-500); opacity: 0.5; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--gold-500);
  color: var(--accent-strong);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover { background: rgba(214, 177, 94, 0.12); border-color: var(--gold-300); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--ink-950);
  padding-inline: 1.75rem;
}
.btn--primary:hover { background: var(--gold-300); border-color: var(--gold-300); }

.btn--lg { font-size: 1rem; min-height: 3.25rem; padding: 0.9rem 2rem; }

.btn--ghost { border-color: var(--ink-700); color: var(--text-muted); }
.btn--ghost:hover { border-color: var(--gold-500); color: var(--accent-strong); }

.btn--header { padding: 0.55rem 0.95rem; font-size: 0.78rem; flex: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* Type sits high on phones, the way the Canva cover is laid out. Centred
     again once there is room. */
  align-items: start;
  padding: var(--space-xl) var(--space-sm) var(--space-lg);
  isolation: isolate;
  overflow: hidden;
}

/* No photograph here: the hero is colour alone. A warm off-centre glow over a
   diagonal base keeps it from reading as a flat swatch, and the ::after fade
   carries the bottom edge into the first section. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(120% 90% at 22% 18%, rgba(201, 154, 63, 0.20) 0%, rgba(201, 154, 63, 0) 58%),
    linear-gradient(160deg, #4A2E1C 0%, #2B1810 45%, #120906 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(14, 8, 6, 0) 55%, rgba(14, 8, 6, 0.85) 100%);
}

.hero__inner {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  line-height: 0.92;
  color: var(--gold-300);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(14, 8, 6, 0.6);
}

.hero__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-1);
  color: rgba(242, 232, 216, 0.78);
  letter-spacing: 0.02em;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius);
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: rgba(14, 8, 6, 0.35);
  transition: background var(--dur) var(--ease);
}
.hero__pill:hover { background: rgba(214, 177, 94, 0.16); }
.hero__pill svg { flex: none; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-500);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, var(--gold-500), transparent);
  animation: drift 2.4s var(--ease) infinite;
}

@keyframes drift {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* --------------------------------------------------------------------------
   7. Chapter band — full-bleed painting between sections
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  min-height: 42vh;
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space-sm);
  isolation: isolate;
  background-image: linear-gradient(140deg, #3A2415 0%, #1A0F0A 100%);
  background-size: cover;
  background-position: center;
}
/* The painting is a real <img> rather than a CSS background: a url() inside a
   custom property resolves against the stylesheet, not the page, and the image
   deserves an alt text anyway. If the export is missing the img removes itself
   and the gradient above stands in. */
.band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 8, 6, 0.6);
}
.band__caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--cream-100);
  text-align: center;
  max-width: 28rem;
  text-shadow: 0 2px 18px rgba(14, 8, 6, 0.8);
}
/* Credit for the painting, tucked into the corner so it never competes with
   the caption. Small, but a research project should name its sources. */
.band__credit {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-xs);
  text-align: right;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(242, 232, 216, 0.6);
  text-shadow: 0 1px 12px rgba(14, 8, 6, 0.9);
}

/* --------------------------------------------------------------------------
   8. Funding
   -------------------------------------------------------------------------- */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
}

.progress__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.progress__raised {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent-strong);
}

.progress__goal {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-muted);
}

.progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--ink-800);
  overflow: hidden;
  border: 1px solid var(--ink-700);
}

.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transition: width 900ms var(--ease);
}

.progress__meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-500);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

table.funding {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
}

table.funding th,
table.funding td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink-700);
  vertical-align: top;
}

table.funding thead th {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-500);
  white-space: nowrap;
}

table.funding td.amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  color: var(--accent-strong);
}

table.funding tfoot td {
  border-bottom: 0;
  font-weight: 600;
  color: var(--cream-100);
}

table.funding tbody tr:last-child td { border-bottom: 1px solid var(--ink-700); }

/* Category heading inside the budget table. Matched with the element so the
   large gold `.section h3` treatment cannot reach it. */
table.funding .funding__group th {
  background: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.7rem 1rem;
}

.note {
  font-size: 1rem;
  color: var(--cream-500);
  font-style: italic;
}

/* A donor has to act on this one, so it is marked rather than italicised into
   the background the way .note is. */
.bank-note {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--gold-500);
  background: rgba(201, 154, 63, 0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
  font-family: var(--font-ui);
  line-height: 1.5;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   9. Support / transfer details
   -------------------------------------------------------------------------- */

.support-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  text-align: center;
  align-items: center;
}

.support-card .btn--primary { width: 100%; max-width: 22rem; }

.disclosure {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  overflow: hidden;
}

.disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem var(--space-sm);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--accent-strong); }

.disclosure > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.disclosure__body {
  padding: 0 var(--space-sm) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bank-group { display: flex; flex-direction: column; gap: var(--space-2xs); }

/* Specificity note: `.section h3` sets a large gold serif. This is a label,
   not a heading in that sense, so it is matched with the element to win. */
h3.bank-group__title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink-700);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

.field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(61, 36, 24, 0.55);
}
.field:last-child { border-bottom: 0; }

.field__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }

.field__label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-500);
}

.field__value {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--cream-100);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.copy-btn {
  flex: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.copy-btn:hover { color: var(--accent-strong); border-color: var(--gold-500); }
.copy-btn[data-copied="true"] {
  color: var(--ink-950);
  background: var(--gold-400);
  border-color: var(--gold-400);
}
.copy-btn svg { flex: none; }

/* --------------------------------------------------------------------------
   10. Contact + footer
   -------------------------------------------------------------------------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--cream-100);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  transition: color var(--dur) var(--ease);
}
.contact-list a:hover { color: var(--accent-strong); }
.contact-list svg { flex: none; color: var(--accent); }

.site-footer {
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  border-top: 1px solid var(--ink-800);
  background: var(--ink-950);
}

.site-footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.site-footer__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
}

.site-footer__note {
  font-size: 1rem;
  color: var(--cream-500);
}

.site-footer__legal {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cream-500);   /* 5.7:1 on the page ground; --ink-600 was 1.8:1 */
}

/* --------------------------------------------------------------------------
   11. Language gate (index.html)
   -------------------------------------------------------------------------- */

.gate {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-sm);
  position: relative;
  isolation: isolate;
}

.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(110% 80% at 50% 22%, rgba(201, 154, 63, 0.16) 0%, rgba(201, 154, 63, 0) 60%),
    linear-gradient(165deg, #3F2717 0%, #1A0F0A 55%, #0E0806 100%);
}

.gate__head {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gate__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.75rem, 13vw, 4.5rem);
  line-height: 0.95;
  color: var(--gold-300);
}

.gate__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gate__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1rem 1.25rem;
  min-height: 4rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  background: rgba(43, 24, 16, 0.72);
  text-decoration: none;
  color: var(--cream-100);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gate__link:hover {
  border-color: var(--gold-500);
  background: rgba(61, 36, 24, 0.85);
  transform: translateY(-1px);
}
.gate__link[data-suggested="true"] { border-color: var(--gold-500); }

.gate__lang { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; }
.gate__lang b {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
}
.gate__lang span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.gate__flag {
  flex: none;
  width: 3rem;
  height: 2rem;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(242, 232, 216, 0.2);
}

.gate__hint {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-500);
}

/* --------------------------------------------------------------------------
   12. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. Desktop
   -------------------------------------------------------------------------- */

/* Phones: drop the decorative slashes and tighten the switcher so the wordmark,
   the three languages and the Support button all survive at 375px. */
@media (max-width: 29.99rem) {
  .lang-switch span[aria-hidden="true"] { display: none; }
  .lang-switch a { min-width: 2rem; padding-inline: 0.15rem; }
}

/* Very narrow phones: the wordmark yields before the language switcher or the
   Support button, which are the two things a visitor needs. */
@media (max-width: 20rem) {
  .site-header__mark { font-size: 0; }
  .site-header__mark::after {
    content: "BS";
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

@media (min-width: 48rem) {
  :root {
    --step-0: 1.25rem;
    --measure: 38rem;
  }

  .site-header__mark { font-size: 1.15rem; }
  .site-header__right { gap: var(--space-xs); }

  .section { padding-block: var(--space-2xl); padding-inline: var(--space-md); }
  .site-header { padding-inline: var(--space-md); }
  .hero { padding-inline: var(--space-md); align-items: center; }
  .support-card { padding: var(--space-lg) var(--space-md); }
  .site-footer { padding-inline: var(--space-md); }

  .hero__inner { gap: var(--space-md); }

  .gate__list { max-width: 30rem; }
}

@media (min-width: 56.25rem) {
  .about {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: var(--space-lg);
    align-items: start;
  }
  .about__head  { grid-column: 1; grid-row: 1; }
  .about__prose { grid-column: 1; grid-row: 2; }
  .about__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Follows the reader down the three paragraphs. Offset clears the sticky
       header. */
    position: sticky;
    top: calc(3.5rem + var(--space-md));
  }
  .about .ornament { grid-column: 1 / -1; }

  /* Full frame, no crop, once it has a column of its own. */
  .about__portrait { aspect-ratio: 2 / 3; }

  .funding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .support-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .support-card { text-align: left; align-items: flex-start; }
  .support-card .btn--primary { width: auto; }

  .site-footer__inner {
    max-width: var(--measure-wide);
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

/* --------------------------------------------------------------------------
   14. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .progress__fill { transition: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .hero__scroll, .band { display: none; }
  .disclosure__body { display: flex !important; }
}