/* ============================================================
   BCA EU — "Kirchberg" design system
   Paste into Tilda: Site Settings → More → HEAD code, inside a STYLE element.
   (Never write a literal closing style tag in a comment here — it would end the element early.)
   Everything is namespaced .bca-* so it cannot collide with Tilda's .t-* classes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Public+Sans:wght@300;400;500&display=swap");

:root {
  /* ink field */
  --bca-ink:        #0C1A2B;
  --bca-ink-rule:   #24374B;
  --bca-on-ink:     #FFFFFF;
  --bca-on-ink-2:   #A8B2BE;   /* 8.0:1 on ink  */
  --bca-on-ink-3:   #8695A6;   /* 5.7:1 on ink  */

  /* paper */
  --bca-paper:      #FFFFFF;
  --bca-paper-2:    #F5F6F8;
  --bca-text:       #14181D;
  --bca-text-2:     #4E5764;
  --bca-text-3:     #6A7280;   /* 4.9:1 on white — contrast floor */
  --bca-rule:       #E4E7EB;

  /* brass — never fills an area; figures, 34px rules and outlined buttons only */
  --bca-brass:      #9A7B3F;   /* large text and rules only */
  --bca-brass-pap:  #7E6431;   /* 5.6:1 — brass carrying small text on paper */
  --bca-brass-ink:  #C4A467;   /* 6.9:1 — brass carrying small text on ink   */

  /* rhythm */
  --bca-gutter:     80px;
  --bca-maxw:       1440px;
}

@media (max-width: 1024px) { :root { --bca-gutter: 40px; } }
@media (max-width: 640px)  { :root { --bca-gutter: 24px; } }

/* ---------- reset, scoped ---------- */
.bca *, .bca *::before, .bca *::after { box-sizing: border-box; }
.bca { margin: 0; color: var(--bca-text); background: var(--bca-paper);
  font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; }
.bca img { max-width: 100%; height: auto; display: block; }
.bca p { margin: 0 0 1.1em; }
.bca ul { margin: 0; padding: 0; list-style: none; }

/* ---------- type scale ---------- */
.bca-d1, .bca-d2, .bca-d3, .bca-d4, .bca-d5 {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400; margin: 0; text-wrap: balance; }
.bca-d1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.012em; }
.bca-d2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.10; }
.bca-d3 { font-size: clamp(25px, 2.4vw, 36px); line-height: 1.18; }
.bca-d4 { font-size: clamp(23px, 1.9vw, 28px); line-height: 1.28; }
.bca-d5 { font-size: 22px; line-height: 1.35; }
.bca-fig { font-family: "EB Garamond", Georgia, serif; font-weight: 400;
  font-size: 40px; line-height: 1; color: var(--bca-brass); }
.bca-fig small { font-size: 22px; }

.bca-b1 { font-size: 17px; line-height: 1.65; font-weight: 300; }
.bca-b2 { font-size: 15px; line-height: 1.65; font-weight: 300; }
.bca-b3 { font-size: 13.5px; line-height: 1.6;  font-weight: 300; }
.bca-label { font-size: 12px; letter-spacing: 0.07em; font-weight: 400;
  text-transform: uppercase; color: var(--bca-text-2); }
.bca-muted   { color: var(--bca-text-2); }
.bca-muted-2 { color: var(--bca-text-3); }
.bca-measure { max-width: 34em; }

/* ---------- layout ---------- */
.bca-wrap { max-width: var(--bca-maxw); margin: 0 auto;
  padding-left: var(--bca-gutter); padding-right: var(--bca-gutter); }
.bca-section { padding: 72px 0 0; }
.bca-split { display: flex; gap: 80px; align-items: flex-start; }
.bca-split > .bca-aside { width: 300px; flex-shrink: 0; }
.bca-split > .bca-body  { flex: 1 1 auto; min-width: 0; }
.bca-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.bca-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
@media (max-width: 1024px) {
  .bca-split { gap: 44px; }
  .bca-split > .bca-aside { width: 240px; }
  .bca-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 768px) {
  .bca-section { padding-top: 52px; }
  .bca-split { flex-direction: column; gap: 28px; }
  .bca-split > .bca-aside { width: 100%; }
  .bca-grid-3, .bca-grid-2 { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- hero ---------- */
.bca-hero { padding-top: 82px; gap: 90px; }
.bca-hero__rail { width: 300px; flex-shrink: 0; }
@media (max-width: 1024px) { .bca-hero { padding-top: 60px; gap: 44px; } }
@media (max-width: 768px)  { .bca-hero { padding-top: 46px; gap: 34px; }
  .bca-hero__rail { width: 100%; } }

/* ---------- ink field ---------- */
.bca-ink, .bca-panel--ink { background: var(--bca-ink); color: var(--bca-on-ink-2); }
.bca-ink .bca-d1, .bca-ink .bca-d2, .bca-ink .bca-d3, .bca-ink .bca-d4, .bca-ink .bca-d5,
.bca-panel--ink .bca-d1, .bca-panel--ink .bca-d2, .bca-panel--ink .bca-d3,
.bca-panel--ink .bca-d4, .bca-panel--ink .bca-d5 { color: var(--bca-on-ink); }
.bca-ink .bca-muted,   .bca-panel--ink .bca-muted   { color: var(--bca-on-ink-2); }
.bca-ink .bca-muted-2, .bca-panel--ink .bca-muted-2 { color: var(--bca-on-ink-3); }
.bca-ink .bca-label,   .bca-panel--ink .bca-label   { color: var(--bca-on-ink-3); }
.bca-panel--ink .bca-btn { border-color: var(--bca-brass-ink); color: var(--bca-brass-ink); }
.bca-panel--ink .bca-btn:hover, .bca-panel--ink .bca-btn:focus-visible {
  background: var(--bca-brass-ink); color: var(--bca-ink); }
.bca-panel--ink .bca-link { color: var(--bca-brass-ink); border-bottom-color: var(--bca-brass-ink); }

/* ---------- marks ---------- */
.bca-tick { height: 1px; width: 34px; background: var(--bca-brass); margin-bottom: 16px; }
.bca-rule { height: 1px; background: var(--bca-rule); border: 0; margin: 0; }
.bca-rule--strong { background: var(--bca-text); }

/* ---------- actions: ONE primary per screen; secondary is a text link ---------- */
.bca-btn { display: inline-block; font-size: 13.5px; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; padding: 15px 30px;
  min-height: 44px; border: 1px solid var(--bca-brass-pap); color: var(--bca-brass-pap);
  background: transparent; transition: background-color .18s ease, color .18s ease; }
.bca-btn:hover, .bca-btn:focus-visible { background: var(--bca-brass-pap); color: #fff; }
.bca-ink .bca-btn { border-color: var(--bca-brass-ink); color: var(--bca-brass-ink); }
.bca-ink .bca-btn:hover, .bca-ink .bca-btn:focus-visible { background: var(--bca-brass-ink); color: var(--bca-ink); }
.bca-btn--solid { background: var(--bca-ink); border-color: var(--bca-ink); color: #fff; }
.bca-btn--solid:hover, .bca-btn--solid:focus-visible { background: #16293f; border-color: #16293f; color: #fff; }

.bca-link { font-size: 15px; font-weight: 300; color: var(--bca-brass-pap);
  text-decoration: none; border-bottom: 1px solid var(--bca-brass); padding-bottom: 2px; }
.bca-link:hover { color: #5C4922; }
.bca-ink .bca-link { color: var(--bca-brass-ink); border-bottom-color: var(--bca-brass-ink); }

.bca a:focus-visible, .bca button:focus-visible {
  outline: 2px solid var(--bca-brass); outline-offset: 3px; }
.bca-skip { position: absolute; left: -9999px; }
.bca-skip:focus { left: var(--bca-gutter); top: 10px; z-index: 100;
  background: var(--bca-ink); color: #fff; padding: 12px 18px; }

/* ---------- header ---------- */
.bca-header { background: var(--bca-ink); }
.bca-header__bar { display: flex; align-items: center; justify-content: space-between;
  padding-top: 26px; padding-bottom: 26px; }
.bca-logo { font-family: "EB Garamond", Georgia, serif; font-size: 25px;
  letter-spacing: 0.06em; color: var(--bca-on-ink); text-decoration: none; }
.bca-nav ul { display: flex; gap: 38px; }
.bca-nav a { font-size: 13.5px; font-weight: 300; color: var(--bca-on-ink-2);
  text-decoration: none; padding: 12px 0; display: inline-block; }
.bca-nav a:hover { color: var(--bca-on-ink); }
.bca-nav a[aria-current="page"] { color: var(--bca-on-ink);
  border-bottom: 1px solid var(--bca-brass-ink); }
.bca-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 6px; }
.bca-burger span { display: block; width: 24px; height: 1px; background: var(--bca-on-ink-2); }
@media (max-width: 900px) {
  .bca-burger { display: flex; }
  .bca-nav { display: none; width: 100%; }
  .bca-header--open .bca-nav { display: block; padding-bottom: 22px; }
  .bca-header--open .bca-header__bar { flex-wrap: wrap; }
  .bca-nav ul { flex-direction: column; gap: 0; }
  .bca-nav a { padding: 14px 0; font-size: 16px; min-height: 44px;
    border-bottom: 1px solid var(--bca-ink-rule); width: 100%; }
}

/* ---------- footer ---------- */
.bca-footer { border-top: 1px solid var(--bca-rule); padding: 40px 0 34px; margin-top: 72px; }
.bca-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.bca-footer__cols h2 { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 400; color: var(--bca-text-3); margin: 0 0 14px; }
.bca-footer a { font-size: 15px; font-weight: 300; color: var(--bca-text-2); text-decoration: none;
  display: inline-block; padding: 5px 0; }
.bca-footer a:hover { color: var(--bca-text); }
.bca-footer__legal { display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--bca-rule); }
@media (max-width: 900px) { .bca-footer__cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .bca-footer__cols { grid-template-columns: 1fr; } }

/* ---------- cards, panels, figures ---------- */
.bca-panel { background: var(--bca-paper-2); padding: 48px 56px; }
.bca-panel--ink { padding: 44px 56px; }
@media (max-width: 640px) { .bca-panel, .bca-panel--ink { padding: 30px 24px; } }
.bca-stat + .bca-stat { margin-top: 30px; }
.bca-stat__label { font-size: 13.5px; line-height: 1.6; font-weight: 300;
  color: var(--bca-text-3); margin-top: 8px; }
.bca-ink .bca-stat__label { color: var(--bca-on-ink-3); }
.bca-rail { border-left: 1px solid var(--bca-ink-rule); padding-left: 44px; }
@media (max-width: 900px) { .bca-rail { border-left: 0; padding-left: 0;
  border-top: 1px solid var(--bca-ink-rule); padding-top: 30px; margin-top: 30px; } }

.bca-cta { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.bca-cta > *:nth-child(2) { flex: 1 1 260px; }

/* ---------- portrait slot ---------- */
.bca-portrait { background: var(--bca-paper-2); border: 1px solid var(--bca-rule);
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; color: var(--bca-text-2); font-size: 13.5px; }
.bca-portrait img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { .bca * { transition: none !important; } }