/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --c-bg:         oklch(97.5% 0.005 85);
  --c-bg-muted:   oklch(93.5% 0.009 85);
  --c-surface:    oklch(99%   0.003 85);
  --c-text:       oklch(14%   0.008 265);
  --c-text-2:     oklch(42%   0.010 265);
  --c-text-3:     oklch(62%   0.008 265);
  --c-accent:     oklch(46%   0.162 28);
  --c-accent-lt:  oklch(91%   0.035 28);
  --c-border:     oklch(87%   0.008 85);
  --c-border-2:   oklch(76%   0.012 265);

  --f-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --f-body:    'Spectral', Georgia, serif;

  --t-2xs:  clamp(0.65rem,  0.60rem + 0.20vw, 0.75rem);
  --t-xs:   clamp(0.75rem,  0.70rem + 0.22vw, 0.875rem);
  --t-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --t-base: clamp(1rem,     0.94rem + 0.28vw, 1.125rem);
  --t-md:   clamp(1.125rem, 1.04rem + 0.40vw, 1.3rem);
  --t-lg:   clamp(1.25rem,  1.10rem + 0.70vw, 1.6rem);
  --t-xl:   clamp(1.5rem,   1.20rem + 1.30vw, 2.1rem);
  --t-2xl:  clamp(2rem,     1.50rem + 2.20vw, 3rem);
  --t-3xl:  clamp(2.75rem,  2.00rem + 3.50vw, 4.75rem);
  --t-hero: clamp(4.5rem,   3.00rem + 7.50vw, 10.5rem);

  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  24px; --sp-6:  32px; --sp-7:  48px;  --sp-8:  64px;
  --sp-9:  96px; --sp-10: 128px; --sp-11: 192px;

  --gutter: clamp(var(--sp-5), 5vw, var(--sp-8));
  --container: 1320px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast: 180ms;
  --t-med:  400ms;
  --t-slow: 700ms;

  /* Structural */
  --nav-h: 82px;

  /* Dark-section tokens (footer) */
  --c-dark-bg:     oklch(14%   0.008 265);
  --c-dark-bg-2:   oklch(18%   0.010 265);
  --c-dark-border: oklch(22%   0.008 265);
  --c-dark-text:   oklch(65%   0.010 265);

  /* Derived */
  --c-bg-ghost:    oklch(93%   0.006 85);
  --c-accent-dark: oklch(40%   0.165 28);
  --c-success:     oklch(42%   0.130 155);
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.7; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-pad { padding-block: clamp(var(--sp-9), 10vw, var(--sp-11)); }

/* ─── NAVIGATION ──────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-med) var(--ease-out),
    border-color     var(--t-med) var(--ease-out);
}
.nav.scrolled {
  background-color: color-mix(in oklch, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-color: var(--c-border);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.nav__logo {
  display: flex;
  align-items: center;
}
.nav__logo-img {
  height: 90px;
  width: auto;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}
.nav__link {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-2);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--c-text); }
.nav__join {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-surface);
  background: var(--c-accent);
  padding: 9px var(--sp-4);
  transition: background-color var(--t-fast) var(--ease-out);
}
.nav__join:hover { background: var(--c-accent-dark); }

/* Mobile nav toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--sp-2);
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--c-text);
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__drawer {
  display: none;
  flex-direction: column;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}
.nav__drawer.open { display: flex; }
.nav__drawer-link {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--c-text);
  padding: var(--sp-4) var(--gutter);
  border-bottom: 1px solid var(--c-border);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__drawer-link:hover { color: var(--c-accent); }

@media (max-width: 780px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--gutter);
  z-index: 200;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-accent);
  color: var(--c-surface);
  padding: var(--sp-2) var(--sp-4);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: var(--nav-h);
  position: relative;
  overflow: hidden;
}

/* Decorative background letterform — Swiss editorial touch */
.hero::before {
  content: 'RSSA';
  position: absolute;
  top: 50%;
  right: -0.05em;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: clamp(18rem, 35vw, 48rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--c-bg-ghost);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(var(--sp-8), 8vw, var(--sp-10));
}
.hero__eyebrow {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-6);
}
.hero__headline {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.91;
  color: var(--c-text);
  max-width: 12ch;
  margin-block-end: clamp(var(--sp-8), 6vw, var(--sp-10));
}
.hero__headline strong {
  font-weight: 700;
  font-style: italic;
}

.hero__footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-6);
}
.hero__footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-6);
}
.hero__desc {
  font-family: var(--f-body);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: 52ch;
}
.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.hero__location {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  text-align: right;
}

@media (max-width: 640px) {
  .hero::before { display: none; }
  .hero__footer-inner { grid-template-columns: 1fr; }
  .hero__cta-group { align-items: flex-start; }
  .hero__location { text-align: left; }
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color            var(--t-fast) var(--ease-out),
    border-color     var(--t-fast) var(--ease-out);
}
.btn-dark {
  background: var(--c-text);
  color: var(--c-bg);
}
.btn-dark:hover { background: var(--c-accent); }
.btn-ghost {
  border: 1px solid var(--c-border-2);
  color: var(--c-text-2);
}
.btn-ghost:hover { border-color: var(--c-text); color: var(--c-text); }
.btn-ghost-light {
  border: 1px solid color-mix(in oklch, var(--c-surface) 35%, transparent);
  color: color-mix(in oklch, var(--c-surface) 80%, transparent);
}
.btn-ghost-light:hover {
  border-color: var(--c-surface);
  color: var(--c-surface);
}

/* ─── SECTION HEADER ──────────────────────────────────────── */
.sec-hd {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sp-5);
  padding-block-end: var(--sp-7);
  border-bottom: 1px solid var(--c-border);
  margin-block-end: var(--sp-8);
}
.sec-num {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.sec-title {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.sec-more {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--t-fast);
}
.sec-more:hover { color: var(--c-text); }

@media (max-width: 500px) {
  .sec-hd { grid-template-columns: auto 1fr; }
  .sec-more { display: none; }
}

/* ─── ABOUT ───────────────────────────────────────────────── */
.about__layout {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: clamp(var(--sp-7), 6vw, var(--sp-10));
  align-items: start;
}
.about__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
/* Pull quote — compact, sits above the stats */
.about__pull {
  border-top: 2px solid var(--c-accent);
  padding-block-start: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.about__pull-text {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-text-2);
}
.about__pull-attr {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
  line-height: 1.6;
}
.about__pull-attr strong {
  font-weight: 600;
  color: var(--c-text-2);
}
/* Stat numbers — bold typographic column */
.about__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about__stat {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.about__stat:first-child {
  border-top: 1px solid var(--c-border);
  padding-block-start: var(--sp-5);
}
.about__stat:last-child { border-bottom: none; padding-block-end: 0; }
.about__stat-val {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-accent);
}
.about__stat-lbl {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-block-start: var(--sp-2);
}
.about__prose {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.about__lead {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--c-text);
}
.about__body {
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--c-text-2);
  max-width: 62ch;
}
.about__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  margin-block-start: var(--sp-8);
}
.about__pillar {
  background: var(--c-bg);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  transition: background-color var(--t-fast);
}
.about__pillar:hover { background: var(--c-bg-muted); }
.about__pillar-title {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin-block-end: var(--sp-2);
}
.about__pillar-body {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-text-2);
}
@media (max-width: 1100px) {
  .about__layout { grid-template-columns: 200px 1fr; }
  .about__photo-wrap { display: none; }
}
@media (max-width: 960px) {
  .about__layout { grid-template-columns: 1fr; }
  .about__sidebar { flex-direction: row; gap: var(--sp-8); align-items: flex-start; }
  .about__pull { flex: 1; }
  .about__stats { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .about__sidebar { flex-direction: column; }
  .about__stats { width: 100%; }
  .about__pillars { grid-template-columns: 1fr; }
}
.about__photo-wrap {}
.about__photo {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── MANIFESTO ───────────────────────────────────────────── */
.manifesto {
  background: var(--c-accent);
  padding-block: clamp(var(--sp-9), 10vw, var(--sp-11));
  overflow: hidden;
}
.manifesto__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-7), 8vw, var(--sp-10));
  align-items: center;
}
.manifesto__quote {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--c-surface);
}
.manifesto__quote em {
  font-style: italic;
  font-weight: 700;
}
.manifesto__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-6);
}
.manifesto__aside-text {
  font-family: var(--f-body);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: color-mix(in oklch, var(--c-surface) 72%, var(--c-accent));
  text-align: right;
  max-width: 36ch;
}
@media (max-width: 720px) {
  .manifesto__layout { grid-template-columns: 1fr; }
  .manifesto__aside { align-items: flex-start; }
  .manifesto__aside-text { text-align: left; }
}


/* ─── TEAM ────────────────────────────────────────────────── */
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  overflow: hidden;
  transition: background-color var(--t-fast);
}
.team-card:hover { background: var(--c-accent-lt); }
.team-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--c-bg-muted);
  overflow: hidden;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.team-card:hover .team-card__photo img {
  transform: scale(1.03);
}
.team-card__body { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
.team-card__role {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-2);
}
.team-card__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--c-text);
  margin-block-end: var(--sp-4);
}
.team-card__bio {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-text-2);
}
.team-card__socials {
  display: flex;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.team-card__social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  transition: color var(--t-fast);
}
.team-card__social:hover { color: var(--c-accent); }
.team-card__social svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 860px) {
  .team__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .team__grid { grid-template-columns: 1fr; }
}

/* ─── LATEST ─────────────────────────────────────────────── */
.latest { background: var(--c-bg-muted); }
.latest .sec-hd { border-color: var(--c-border); }


/* Fallback text shown until Juicer loads / is configured */
.latest__fallback {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  color: var(--c-text-3);
  text-align: center;
  padding-block: var(--sp-8);
  display: none; /* hidden by default; shown via JS if feed ID not set */
}
.latest__fallback a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.latest__fallback--visible { display: block; }

/* ─── JUICER OVERRIDES ────────────────────────────────────── */
/* Bring the widget into the design language as much as the
   free tier allows — no rounded cards, match the colour palette */
.j-poster,
.juicer-feed .j-poster {
  border: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--c-surface) !important;
  transition: border-color var(--t-fast) !important;
}
.j-poster:hover,
.juicer-feed .j-poster:hover {
  border-color: var(--c-border-2) !important;
  box-shadow: none !important;
}
.juicer-feed .j-text,
.juicer-feed .j-date {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif !important;
}
.juicer-feed .j-paginate {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif !important;
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  border-radius: 0 !important;
  border: none !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  padding: 12px 24px !important;
  transition: background-color var(--t-fast) !important;
}
.juicer-feed .j-paginate:hover {
  background: var(--c-accent) !important;
}

/* ─── CONNECT ─────────────────────────────────────────────── */
.connect { background: var(--c-accent-lt); }
.connect .sec-hd { border-color: color-mix(in oklch, var(--c-accent) 20%, transparent); }
.connect__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 8vw, var(--sp-11));
  align-items: start;
}
.connect__hed {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--c-text);
  margin-block-end: var(--sp-5);
}
.connect__body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-text-2);
  max-width: 50ch;
  margin-block-end: var(--sp-7);
}
.connect__channels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: color-mix(in oklch, var(--c-accent) 15%, transparent);
}
.channel {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in oklch, var(--c-surface) 95%, transparent);
  text-decoration: none;
  transition: background-color var(--t-fast);
}
.channel:hover { background: var(--c-surface); }
.channel__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
}
.channel__icon svg { width: 22px; height: 22px; fill: currentColor; }
.channel__info { overflow: hidden; }
.channel__name {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}
.channel__handle {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel__arr {
  font-size: var(--t-md);
  color: var(--c-text-3);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.channel:hover .channel__arr { color: var(--c-text); transform: translateX(3px); }

.connect__shoutout {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6);
  border-top: 1px solid color-mix(in oklch, var(--c-accent) 15%, transparent);
}
.connect__shoutout-label {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-block-end: var(--sp-3);
}
.channel--aside {
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--c-border-2) 50%, transparent);
}
.channel--aside:hover {
  background: color-mix(in oklch, var(--c-surface) 80%, transparent);
}
.channel--aside .channel__name { color: var(--c-text-2); }
.channel--aside .channel__icon { color: var(--c-text-3); }

/* Contact Form */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.form-field {
  width: 100%;
  padding: 13px var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  line-height: 1.5;
  outline: none;
  border-radius: 0;
  appearance: none;
  transition: border-color var(--t-fast);
}
.form-field:focus { border-color: var(--c-accent); }
.form-field::placeholder { color: var(--c-text-3); }
textarea.form-field { resize: vertical; min-height: 130px; }

.form-status {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  color: var(--c-text-2);
  min-height: 1.4em;
  margin-block-start: var(--sp-3);
  transition: color var(--t-med) var(--ease-out);
}
.form-status.success { color: var(--c-success); }
.form-status.error { color: var(--c-accent); }

@media (max-width: 820px) {
  .connect__layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ─── FOOTER ──────────────────────────────────────────────── */
.footer {
  background: var(--c-text);
  padding-block: var(--sp-9) var(--sp-7);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-8);
  padding-block-end: var(--sp-7);
}
.footer__logo {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-bg);
  margin-block-end: var(--sp-4);
}
.footer__tagline {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--c-text-3);
  max-width: 38ch;
}
.footer__col-label {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-block-end: var(--sp-4);
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer__nav-link {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  color: var(--c-dark-text);
  transition: color var(--t-fast);
}
.footer__nav-link:hover { color: var(--c-bg); }
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--c-dark-border);
}
.footer__copy {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  color: var(--c-text-3);
}
.footer__disclaimer {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  font-weight: 400;
  color: oklch(42% 0.008 265);
  line-height: 1.6;
  margin-block-start: var(--sp-4);
  max-width: 38ch;
}
.footer__address {
  font-family: var(--f-display);
  font-size: var(--t-2xs);
  color: var(--c-text-3);
  text-align: right;
  line-height: 1;
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__address { text-align: left; }
}

/* ─── JUICER: suppress injected body-level elements ──────── */
/* Juicer appends a keyword/content-signature node after <footer>;
   this keeps it from rendering visibly */
footer ~ * { display: none !important; }

/* ─── SCROLL REVEAL ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity  var(--t-slow) var(--ease-out),
      transform var(--t-slow) var(--ease-out);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 80ms; }
  .reveal[data-delay="2"] { transition-delay: 160ms; }
  .reveal[data-delay="3"] { transition-delay: 240ms; }
  .reveal[data-delay="4"] { transition-delay: 320ms; }
  .reveal[data-delay="5"] { transition-delay: 400ms; }
  .reveal[data-delay="6"] { transition-delay: 480ms; }
}