/* Namcovi Naturals — design system.
   Four colours only (owner's palette, Oct 3 2026): white, black, deep red, green.
   A white page, black text and lines, deep-red headings, whole sections flooded red, green or black.
   Fonts come from fonts.css. Pairing B is the site's (chosen Oct 3 2026); .type-a is kept only
   so the style page can still show the comparison. */

:root {
  /* colour */
  --paper: #FFFFFF;      /* white: the page */
  --card: #FFFFFF;       /* white: tiles, inputs, text on colour sections */
  --ink: #000000;        /* black: body text, lines (the logo's black) */
  --red: #730D10;        /* deep red, measured from the Amazon banner headline: headings, main button, loud sections */
  --green: #1E4621;      /* green, measured from the Amazon banner headings: second button, farm sections */

  /* these two switch inside a colour section so headings and drawings take its text colour */
  --head: var(--red);    /* headings + the giant wordmark */
  --art-ink: var(--red); /* drawings + the small flower ornament */

  /* line + shape */
  --rule: 1.5px;
  --radius: 18px;
  --radius-pill: 999px;
  --stamp: 3px 4px 0 var(--ink);        /* offset "stamped" shadow */

  /* space */
  --gutter: clamp(18px, 5vw, 72px);
  --section: clamp(56px, 9vw, 128px);
  --measure: 62ch;
}

/* pairing B (the site's): one variable serif squeezed narrow + a plain mono.
   Oct 8 2026: plain text moved to a solid sans (--font-text, owner wanted it darker and bolder, like FGO);
   the mono (--font-body) stays for small labels, tags, buttons and the menu. */
:root, .type-b {
  --font-display: "Roboto Serif", Georgia, serif;
  --font-body: "IBM Plex Mono", Consolas, monospace;
  --font-text: "Hanken Grotesk", Arial, sans-serif;
  --font-mark: "Roboto Serif", Georgia, serif;
  --display-weight: 380;
  --display-stretch: 58%;
  --display-tracking: -0.03em;
  --mark-weight: 800;
  --mark-stretch: 72%;
  --mark-tracking: -0.035em;
  --mark-fit: 21.4vw;
  --body-size: clamp(0.94rem, 0.6rem + 0.42vw, 1.1rem);
}

/* pairing A (not chosen): tall narrow serif + typewriter, chunky wordmark */
.type-a {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Courier Prime", "Courier New", monospace;
  --font-text: "Courier Prime", "Courier New", monospace;
  --font-mark: "Caprasimo", "Cooper Black", serif;
  --display-weight: 400;
  --display-stretch: 100%;
  --display-tracking: -0.022em;
  --mark-weight: 400;
  --mark-stretch: 100%;
  --mark-tracking: -0.01em;
  --mark-fit: 18.2vw;        /* NAMCOVI fills the screen width in this font */
  --body-size: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--body-size);
  line-height: 1.62;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; max-width: var(--measure); }

/* ---------- type ---------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 0.96;
  margin: 0;
  text-wrap: balance;
  color: var(--head);
}
.display, h1 { font-size: clamp(2.9rem, 8.2vw, 7.4rem); }
h2 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.02; }

/* small typed label, flanked by the hibiscus ornament */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.bloom { width: 1.05em; height: 1.05em; flex: none; fill: var(--art-ink); }

/* the name, set huge */
.wordmark {
  font-family: var(--font-mark);
  font-weight: var(--mark-weight);
  font-stretch: var(--mark-stretch);
  letter-spacing: var(--mark-tracking);
  font-size: min(var(--mark-fit), 27rem);
  line-height: 0.8;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  color: var(--head);
}

/* ---------- layout ---------- */
.wrap { padding-inline: var(--gutter); max-width: 1480px; margin-inline: auto; }
.section { padding-block: var(--section); }
.rule { border: 0; border-top: var(--rule) dashed var(--ink); margin: 0; }

/* a whole block of colour; text colour flips with it */
.flood { background: var(--flood, var(--red)); color: var(--card); --head: currentColor; --art-ink: currentColor; }
.flood--red { --flood: var(--red); }
.flood--green { --flood: var(--green); }
.flood--black { --flood: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--card);
  box-shadow: var(--stamp);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(1px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--green { background: var(--green); color: var(--card); }
.btn--paper { background: var(--card); color: var(--ink); }
.btn--wide { width: 100%; }

/* ---------- origin strip ---------- */
.strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  padding: 0.7em 1.2em;
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}
.strip span + span::before { content: "/"; margin-right: 1.4em; font-weight: 400; }
@media (max-width: 720px) {
  .strip { flex-direction: column; gap: 0.1em; border-radius: 20px; }
  .strip span + span::before { content: none; }
}

/* ---------- cards + tiles ---------- */
.card {
  background: var(--card);
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.tile {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0;
  border: var(--rule) solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.tiles--sizes { grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 560px) { .tiles--sizes { grid-template-columns: repeat(3, 1fr); } }
.tile__badge {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35em 0.4em;
  min-height: 1.9em;
}
.tile__badge:empty { background: transparent; }
.tile__big { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.7rem; line-height: 1; padding-top: 0.25em; }
.tile__small { font-size: 0.78rem; padding-bottom: 0.7em; }
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.tile[aria-pressed="true"] { background: var(--red); color: var(--card); }

/* one-time vs subscribe rows */
.choice {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.85em 0;
  border-top: var(--rule) dashed var(--ink);
  cursor: pointer;
}
.choice input { appearance: none; width: 1.15em; height: 1.15em; margin: 0; border: var(--rule) solid var(--ink); border-radius: 50%; background: var(--card); flex: none; }
.choice input:checked { background: var(--red); box-shadow: inset 0 0 0 3px var(--card); }
.choice__price { margin-left: auto; font-weight: 700; }
.choice s { opacity: 0.6; font-weight: 400; margin-right: 0.4em; }

/* product card */
.product { display: grid; gap: 0.9em; text-align: center; }
.product__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product__shot img { width: 62%; }
.product__tag { position: absolute; top: 12px; left: 12px; padding: 0.3em 0.8em; border: var(--rule) solid var(--ink); border-radius: var(--radius-pill); background: var(--card); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.product__price { position: absolute; top: 12px; right: 12px; padding: 0.3em 0.8em; border: var(--rule) solid var(--ink); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 0.82rem; font-weight: 700; }
.product__name { color: var(--head); font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.9rem; line-height: 1; letter-spacing: var(--display-tracking); }
.product p { margin: 0 auto; font-size: 0.9rem; }

/* ---------- drawings: one alpha mask, any ink colour ---------- */
.art {
  display: block;
  background: var(--art-ink);
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}
.art--flower { --art: url("../illustrations/flower.png"); aspect-ratio: 673 / 714; }
.art--farmer { --art: url("../illustrations/farmer.png"); aspect-ratio: 645 / 924; }
.art--teapot { --art: url("../illustrations/teapot.png"); aspect-ratio: 784 / 875; }
.art--turmeric { --art: url("../illustrations/turmeric.png"); aspect-ratio: 605 / 748; }
.art--neem { --art: url("../illustrations/neem.png"); aspect-ratio: 639 / 800; }
.art--moringa { --art: url("../illustrations/moringa.png"); aspect-ratio: 754 / 834; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}