/* Mindoro Coffee brand system. Every page on mindorocoffee.com loads this file.
   The values come straight from the printed business card (Oct 2026); the
   brand kit at /brand/ explains each one. Change a colour here, not per page. */

:root{
  /* Grounds: the two card backs */
  --espresso:#2A1F18;   /* card front, page background */
  --roast:#33261D;      /* card back, raised panels */
  --ink:#1C1410;        /* deepest tone, text on cream */
  /* Paper */
  --cream:#F5F0E6;      /* wordmark, bubbles, light sections */
  --sand:#D8CBB6;       /* secondary text on dark */
  --rule:#7B736A;       /* dashed frame, hairlines */
  --kraft:#C8A27A;      /* print substrate only, never text */
  /* The four cherries. Graphic accents; only --arabica is safe as text (on cream) */
  --robusta:#7D1C17;
  --arabica:#A8241C;
  --excelsa:#B9832F;    /* also the accent for text on dark */
  --liberica:#C45A24;
  --leaf:#7FA36B;

  --serif:'DM Serif Display',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:'DM Sans',-apple-system,'Segoe UI',sans-serif;

  --radius:6px;
  --pill:999px;
  --wrap:1120px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.65;background:var(--espresso);color:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--excelsa);color:var(--ink)}
:focus-visible{outline:2px dashed var(--excelsa);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Type */
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.005em}
h2{font-size:clamp(2rem,5vw,3.25rem)}
h3{font-size:1.6rem}
h2 em,h1 em{font-style:italic}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.coords{font-family:var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--sand)}
.lede{font-size:1.15rem;color:var(--sand);max-width:40em}
.mono{font-family:var(--mono)}

/* Sections: espresso by default, cream "paper" for rhythm */
section{padding:112px 0}
.paper{background:var(--cream);color:var(--ink)}
.paper .eyebrow,.paper .lede{color:#5C4E42}
.paper a{color:var(--arabica)}
.roast{background:var(--roast)}

/* The dashed origin-tag frame from the card front */
.frame{border:2px dashed var(--rule);border-radius:var(--radius)}

/* Spec sheet: label left, value right, like the card back */
.spec{font-family:var(--mono);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.spec .row{display:flex;justify-content:space-between;gap:24px;padding:10px 0}
.spec .row dt{color:var(--sand)}
.spec .row dd{text-align:right}
.spec hr{border:0;border-top:2px solid var(--rule);margin:6px 0}
.paper .spec .row dt{color:#5C4E42}
.paper .spec hr{border-color:#B9AFA2}

/* Speech bubble from the card back */
.bubble{position:relative;display:inline-block;background:var(--cream);color:var(--ink);border-radius:28px;padding:22px 32px;font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.bubble.tail-left::before{content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%);border:14px solid transparent;border-right:24px solid var(--cream);border-left:0}
.bubble.tail-down::after{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);border:10px solid transparent;border-top:16px solid var(--cream);border-bottom:0}

/* Buttons: cream pill (the SCAN ME tag) and dashed ghost */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:var(--pill);padding:15px 26px;cursor:pointer;border:2px solid var(--cream);background:var(--cream);color:var(--ink);transition:transform .15s ease,background .15s ease}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--cream);border-style:dashed;border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--cream)}
.paper .btn{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn svg{width:18px;height:18px}

/* Cherry dot, for marking a species anywhere */
.cherry{display:inline-block;width:14px;height:14px;border-radius:50%;position:relative;flex-shrink:0}
.cherry::after{content:"";position:absolute;width:7px;height:4px;border-radius:50%;background:var(--leaf);top:-4px;right:-3px;transform:rotate(-30deg)}
.c-robusta{background:var(--robusta)}.c-arabica{background:var(--arabica)}.c-excelsa{background:var(--excelsa)}.c-liberica{background:var(--liberica)}

/* Pixel mascot: always crisp */
.carabao{image-rendering:pixelated;image-rendering:crisp-edges}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (max-width:640px){section{padding:80px 0}body{font-size:16px}.spec{font-size:.82rem}}