/* Hallmark · macrostructure: Split Studio · tone: utilitarian-editorial · anchor hue: leaf-green 140°
 * Shared stylesheet for kenyancoffee.co.ke. Tokens live in tokens.css.
 * Motion primitives (3 max): rule-draw · figure-settle · link-underline.
 */

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

html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--color-maize); color: var(--color-accent-deep); }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 2px;
  /* never transitioned — a focus ring that fades in is a focus ring that is late */
}

/* ── Layout ───────────────────────────────────────────────────────── */

.wrap {
  width: min(100% - var(--space-lg) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--space-lg) * 2, var(--wrap-narrow)); }

@media (max-width: 600px) {
  .wrap, .wrap--narrow { width: min(100% - var(--space-md) * 2, var(--wrap)); }
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Type ─────────────────────────────────────────────────────────── */

.display, .head, .subhead {
  font-family: var(--font-display);
  font-style: normal;            /* italic display type is the tell — never */
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
.display        { font-size: var(--text-display);   line-height: var(--leading-tight); }
.display--s     { font-size: var(--text-display-s); line-height: var(--leading-tight); }
.head           { font-size: var(--text-3xl);       line-height: var(--leading-snug); }
.subhead        { font-size: var(--text-xl);        line-height: var(--leading-snug); }

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  max-width: var(--measure);
  color: var(--color-ink-2);
  text-wrap: pretty;
}
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

.rubric {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: var(--measure);
}

.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-deep); }

/* ── Masthead (N6) ────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;                    /* über Zweig (2) und Bildern (3) */
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: 0 1px 8px oklch(21.5% 0.018 140 / 0.06);
}

.masthead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm) var(--space-2xs);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-accent-deep);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--color-accent); }

.masthead__meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-align: right;
  letter-spacing: 0.04em;
}

.masthead__rules { border-top: var(--rule-thick) solid var(--color-accent); }

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.masthead__nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;          /* nav links never wrap to two lines */
  padding-block: var(--space-3xs);
  border-bottom: var(--rule-thick) solid transparent;
}
.masthead__nav a:hover { color: var(--color-accent); border-bottom-color: var(--color-maize); }
.masthead__nav a[aria-current="page"] { color: var(--color-accent-deep); border-bottom-color: var(--color-accent); }

@media (max-width: 560px) {
  .masthead__top { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
  .masthead__meta { text-align: left; }
  .masthead__nav { gap: var(--space-sm); }
}

/* ── Split Studio: the alternating diptych ────────────────────────── */

.band { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.band--tight { padding-block: var(--space-xl); }
.band--sunk  { background: var(--color-paper-2); }
.band--deep  { background: var(--color-accent-deep); color: var(--color-paper); border-bottom: 0; }
.band--deep .rubric,
.band--deep .note   { color: var(--color-on-deep-3); }
.band--deep .lede   { color: var(--color-on-deep-2); }
.band--deep a       { color: var(--color-maize); }

.duo {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-xl);
  align-items: start;
}
.duo--flip > :first-child { order: 2; }
.duo--even { grid-template-columns: 1fr 1fr; }

@media (max-width: 860px) {
  .duo, .duo--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .duo--flip > :first-child { order: 0; }
}

.duo__aside {
  border-left: var(--rule-thick) solid var(--color-accent);
  padding-left: var(--space-md);
}
@media (max-width: 860px) {
  .duo__aside { border-left: 0; border-top: var(--rule-thick) solid var(--color-accent); padding-left: 0; padding-top: var(--space-md); }
}

.stack > * + * { margin-top: var(--space-sm); }
.stack--lg > * + * { margin-top: var(--space-md); }

/* ── Figures ──────────────────────────────────────────────────────── */

figure { margin: 0; }
figure img { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); }
figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
  font-family: var(--font-data);
}

/* A photo slot that is honest about being empty rather than filled with stock. */
.plate {
  border: var(--rule-hair) dashed var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(135deg,
      var(--color-hatch) 0 6px,
      transparent 6px 13px);
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  text-align: center;
}
.plate p {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  max-width: 28ch;
}

/* ── Data tables — the part a competitor cannot copy ──────────────── */

.ledger { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ledger th, .ledger td {
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.ledger th {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  font-weight: 600;
  border-bottom-color: var(--color-rule-strong);
  white-space: nowrap;
}
.ledger td.n { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger tbody tr:hover { background: var(--color-accent-soft); }

/* ── Definition rows (spec, but BGI's own values) ─────────────────── */

.spec { border-top: var(--rule-thick) solid var(--color-ink); }
.spec__row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec__row dt {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-top: 0.2em;
}
.spec__row dd { font-size: var(--text-base); }
@media (max-width: 620px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}

/* ── Buttons & links ──────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-thick) solid var(--color-accent-deep);
  border-radius: var(--radius-md);
  background: var(--color-accent-deep);
  color: var(--color-paper);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover  { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--ghost { background: transparent; color: var(--color-accent-deep); }
.btn--ghost:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.arrowlink {
  display: inline-block;
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border-bottom: var(--rule-thick) solid var(--color-maize);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arrowlink:hover { border-bottom-color: var(--color-accent); }

/* ── Video ────────────────────────────────────────────────────────── */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-accent-deep);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Form ─────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink-muted); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-focus); }
.field textarea { min-height: 7rem; resize: vertical; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ── Footer (Ft4 dense typographic colophon) ──────────────────────── */

.colophon {
  background: var(--color-accent-deep);
  color: var(--color-on-deep);
  padding-block: var(--space-xl);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.75;
}
.colophon a { color: var(--color-maize); text-decoration: none; border-bottom: 1px solid var(--color-maize-rule); }
.colophon a:hover { color: var(--color-paper); border-bottom-color: var(--color-paper); }
.colophon__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 780px) { .colophon__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }
.colophon h2 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-maize);
  margin-bottom: var(--space-2xs);
}
.colophon ul { list-style: none; }

/* ── Motion: rule-draw · figure-settle (both opacity/transform only) ── */

@media (prefers-reduced-motion: no-preference) {
  /* Scoped to .js: without JavaScript nothing would ever add .in, and the
     section would stay invisible forever. The class is set by an inline
     script in <head>, so there is no flash of hidden content. */
  .js .settle { opacity: 0; transform: translateY(10px); }
  .js .settle.in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .settle { opacity: 1; transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--color-accent-deep); color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm); z-index: 10;
}
.skip:focus { left: var(--space-sm); top: var(--space-sm); }

.colophon__base {
  margin-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-deep-rule);
  padding-top: var(--space-sm);
}
.colophon__base p { max-width: none; }

/* ── Masthead, single row — no company block, no monospace ────────── */

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  flex-wrap: wrap;
}
.masthead__bar .masthead__nav { border-top: 0; padding-block: 0; gap: var(--space-md); }
.masthead__bar .wordmark { font-size: 1.5rem; }
@media (max-width: 620px) {
  .masthead__bar { gap: var(--space-2xs); padding-block: var(--space-2xs) var(--space-xs); }
  .masthead__bar .masthead__nav { gap: var(--space-sm); }
}
/* Seit dem Blog-Link (2026-09-27) sind es sechs Eintraege. Bei 16 px Abstand
   rutschte der Kontaktknopf auf 390 px in eine eigene Zeile, und die klebende
   Kopfzeile wuchs von 99 auf 144 px. Etwas enger, dann bleibt es eine Zeile. */
@media (max-width: 480px) {
  .masthead__bar .masthead__nav { gap: 11px; }
  .masthead__nav a { font-size: 12.5px; letter-spacing: 0; }
  .masthead__nav .btn--nav { padding-inline: 10px; }
}
@media (max-width: 400px) {
  .masthead__bar .masthead__nav { gap: 8px; }
  .masthead__nav a { font-size: 12px; }
  .masthead__nav .btn--nav { padding-inline: 8px; }
}

/* ── Hero: the photograph carries it ──────────────────────────────── */

.hero {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl) var(--space-2xl);
  background:
    radial-gradient(120% 90% at 88% 8%, var(--color-accent-soft) 0%, transparent 60%),
    var(--color-paper);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero__fig { margin: 0; position: relative; }
.hero__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 0;
  box-shadow: var(--shadow-photo);
}
/* One deliberate flourish: a maize keyline offset behind the photograph. It
   needs its own stacking context — on z-index:-1 it painted behind the section
   background and disappeared. */
/* The figure reserves the offset as padding so the keyline lives inside its own
   box — offsetting with negative insets pushed it 16px past the container. */
.hero__fig { isolation: isolate; padding: 0 var(--offset) var(--offset) 0; --offset: 16px; }
.hero__fig::after {
  content: "";
  position: absolute;
  inset: var(--offset) 0 0 var(--offset);
  border: var(--rule-thick) solid var(--color-maize);
  border-radius: var(--radius-md);
  z-index: 0;
}
.hero__fig img { position: relative; z-index: 1; }
.hero .display { margin-bottom: var(--space-2xs); }
.hero .btn + .btn { margin-left: var(--space-2xs); }

@media (max-width: 860px) {
  .hero { padding-block: var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero__fig { --offset: 10px; }
}

/* content images inside the alternating bands */
.duo figure img, .band figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 0;
  box-shadow: var(--shadow-photo-sm);
}
/* landscape intro figures (locations): a wider crop so a short paragraph
   beside them is not left floating over dead space */
figure.fig-wide img { aspect-ratio: 16 / 9; }

/* buttons sit on one line together */
.hero p:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: none; }

/* nav contact button. The colour is restated because `.masthead__nav a` is a
   more specific selector than `.btn` and was overriding the button's own text
   colour to dark ink on the dark green fill. */
.masthead__nav .btn--nav {
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--text-xs);
  border-width: var(--rule-hair);
  color: var(--color-paper);
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
}
.masthead__nav .btn--nav:hover {
  color: var(--color-paper);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Botanische Tafel (Köhler 1887) — Illustration, kein Foto ─────── */
/* figure.botanical muss die generische .band figure img Regel schlagen
   (gleiche Spezifität, aber später im Stylesheet = gewinnt) */
.duo figure.botanical img,
.band figure.botanical img,
figure.botanical img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;   /* weißer Tafelgrund verschmilzt mit dem Papier */
}
figure.botanical figcaption { text-align: right; }

/* ── Kaffeezweig-Hintergrund (Köhler 1887, vektorisiert) ──────────── */
/* Handgezeichnete Line-Art als Alpha-Maske, eingefärbt über currentColor.
   Wächst beim Scrollen von unten auf (--p wird per JS gesetzt, Default 1 =
   ohne JS steht der Zweig fertig da). multiply lässt ihn auf den dunklen
   Bändern natürlich abtauchen. */
:root { --p: 0; }
.branch-bg {
  position: fixed;
  left: -52px;
  bottom: -28px;
  width: 440px;
  height: 76vh;
  z-index: 2;
  pointer-events: none;
  color: var(--color-accent-deep);
  opacity: 0.17;
  mix-blend-mode: multiply;
  /* permanent sichtbar; ein sehr leises Driften gegen die Scrollrichtung
     gibt Tiefe, ohne eine Wachstums-Illusion zu behaupten */
  transform: scaleX(-1) translateY(calc(var(--p) * -30px));
}
/* Tiefenstaffelung: Fotos, Video und Formular liegen VOR dem Zweig */
main figure,
main .video,
main form,
main .scroll-x {
  position: relative;
  z-index: 3;
}
.branch-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url("/IMG/coffea-line.svg") no-repeat left bottom / contain;
  -webkit-mask: url("/IMG/coffea-line.svg") no-repeat left bottom / contain;
}
@media (max-width: 1279px) { .branch-bg { display: none; } }
@media (prefers-reduced-motion: reduce) { :root { --p: 1 !important; } }

/* ── Cupping-Leiste: Kontaktabzug, keine Masonry ──────────────────── */
.collage { margin: 0; }
.collage__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
  gap: var(--space-2xs);
}
.band figure.collage img,
figure.collage img {
  width: 100%;
  height: 300px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 1px 2px oklch(21.5% 0.018 140 / 0.08);
}
/* das Bowls-Bild zeigt unten die Reihe — Ausschnitt entsprechend */
figure.collage img.crop-low { object-position: center 75%; }
@media (max-width: 860px) {
  .collage__grid { grid-template-columns: 1fr 1fr; }
  .band figure.collage img, figure.collage img { height: 200px; }
}


/* Sticky-Nav verdeckt sonst angesprungene Anker (#about, #contact) */
[id] { scroll-margin-top: 5.5rem; }