/* 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); }
}

/* ── 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; }