/* ==========================================================================
   BODEGALAND — site stylesheet.

   Every colour, face, radius and duration below resolves to a --bd-* custom
   property generated from bodegaland-brand/tokens/tokens.json at build time.
   There is no hex in this file, and `npm run check` fails the build if one
   appears. If a value looks wrong, the token is wrong.

   Layout follows BRAND section 2: ink and paper, orange used as a highlighter.
   The two dark bands — hero and contact — are the brand surfaces, and they
   are the only places a field of orange is allowed near.
   ========================================================================== */

/* -- Local aliases -------------------------------------------------------
   Motion goes through a local name so the reduced-motion override has one
   place to land instead of being repeated at every transition. */

:root {
  --dur: var(--bd-duration-base);
  --ease: var(--bd-ease-standard);
  --wrap: 1080px;
  --gutter: var(--bd-space-6);

  /* ---- Mediodia, mapped to the roles this page actually has ------------
     The kit gives nine named colours and no ramp, which is the right call
     for a brand and not enough for an interface: a page needs rules,
     muted text and input fills that sit between the named tones. Those are
     derived with color-mix from Arena and Cafe rather than invented, so
     every value on the page still traces back to the palette. */

  --paper: var(--bd-arena);
  --ink: var(--bd-cafe);
  --accent: var(--bd-mango);
  --depth: var(--bd-tostado);
  --link: var(--bd-mar);
  --night: var(--bd-cafe);
  --jungle: var(--bd-selva);

  /* On paper */
  --ink-muted: color-mix(in oklab, var(--bd-cafe) 62%, var(--bd-arena));
  --rule: color-mix(in oklab, var(--bd-cafe) 16%, var(--bd-arena));
  --card: color-mix(in oklab, var(--bd-cafe) 4%, var(--bd-arena));

  /* On night */
  --on-night: var(--bd-arena);
  --on-night-muted: color-mix(in oklab, var(--bd-arena) 72%, var(--bd-cafe));
  --on-night-dim: color-mix(in oklab, var(--bd-arena) 52%, var(--bd-cafe));
  --night-rule: color-mix(in oklab, var(--bd-arena) 22%, var(--bd-cafe));
  --night-field: color-mix(in oklab, var(--bd-arena) 7%, var(--bd-cafe));

  --accent-hover: color-mix(in oklab, var(--bd-mango) 82%, var(--bd-sol));

  /* The footer is Selva, so its text has to be derived against green rather
     than against Cafe — the Cafe-derived tone measured 1.98:1 there. */
  --on-jungle: color-mix(in oklab, var(--bd-arena) 82%, var(--bd-selva));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: var(--bd-duration-instant);
  }
}

/* -- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--bd-font-sans);
  color: var(--ink);
  background: var(--paper);
  /* The kit's body scale: 17-18px at 1.55, 65-75 characters a line. */
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
picture {
  max-width: 100%;
}

a {
  color: inherit;
}

/* Line breaking.

   `pretty` stops a paragraph ending on a single stranded word — the one rag
   fault a reader always notices. `balance` evens the line lengths of short
   headings instead, which is right for display type and wrong for body copy:
   balancing a long paragraph would make every line the same awkward length.

   Both fall back to normal wrapping where unsupported, so there is nothing
   to guard. */
p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* -- Skip link ------------------------------------------------------------
   Keyboard users land on the header before four sections of navigation.
   Give them the door. */

.skip {
  position: absolute;
  left: var(--bd-space-4);
  top: calc(var(--bd-space-4) * -6);
  z-index: 10;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--bd-font-display);
  font-size: var(--bd-text-xs);
  letter-spacing: var(--bd-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--bd-space-3) var(--bd-space-5);
  border-radius: var(--bd-radius-md);
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: var(--bd-space-4);
}

/* -- Shared primitives ---------------------------------------------------- */

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

.display {
  font-family: var(--bd-font-display);
  /* Outfit is a variable face — 400 is regular, not black. Archivo Black had
     one weight and was heavy at it, which is why this used to say regular and
     still looked like a headline. The kit asks for ExtraBold 800. */
  font-weight: 800;
  letter-spacing: var(--bd-tracking-display);
  text-transform: uppercase;
  line-height: 0.95;
}

.eyebrow {
  font-family: var(--bd-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  max-width: calc(var(--wrap) - var(--gutter) * 2);
}

.btn {
  display: inline-block;
  font-family: var(--bd-font-display);
  font-size: var(--bd-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--bd-space-4) var(--bd-space-6);
  border-radius: var(--bd-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  border-color: var(--ink-muted);
  color: var(--on-night);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* -- Header and hero — dark, the brand's native state --------------------- */

.hero {
  background: var(--night);
  color: var(--on-night);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bd-space-6);
  flex-wrap: wrap;
  padding: var(--bd-space-8) 0 0;
}

.lockup {
  display: flex;
  align-items: center;
  gap: var(--bd-space-3);
  text-decoration: none;
  color: var(--accent);
}

.lockup .mark {
  height: 46px;
  width: auto;
  display: block;
}

/* The lockup proportion is not a taste call — it comes out of
   bodegaland-lockup-horizontal.svg. In v3 the tile stands 20% larger than it
   did in v2: the wordmark is scaled to 44 units against a 120-unit tile,
   which is 0.367, where v2 put it at 0.44 against a 100-unit tile. The gap
   is unchanged at half the mark's width.

   With a 46px mark that gives a 17px wordmark and a ~12px gap, which is
   var(--bd-space-3) on .lockup above. Change the mark height and both follow.

   Getting this from the asset rather than by eye is the whole point: v3
   changed the ratio, and a hand-tuned value would have silently stayed at
   the v2 proportion. */
.lockup .wordmark {
  height: 17px;
  width: auto;
  display: block;
}

nav.site {
  display: flex;
  gap: var(--bd-space-6);
  flex-wrap: wrap;
}

nav.site a {
  font-family: var(--bd-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-night-muted);
  transition: color var(--dur) var(--ease);
  font-weight: 600;
}

nav.site a:hover {
  color: var(--accent);
}

.hero-inner {
  padding: var(--bd-space-24) 0 var(--bd-space-20);
}

.hero h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.1rem);
  color: var(--paper);
  max-width: 16ch;
}

.hero h1 .hl {
  color: var(--accent);
}

.hero .lede {
  margin-top: var(--bd-space-8);
  max-width: 56ch;
  color: var(--rule);
  font-size: var(--bd-text-lg);
}

.hero-ctas {
  margin-top: var(--bd-space-10);
  display: flex;
  gap: var(--bd-space-3);
  flex-wrap: wrap;
}

/* -- Scene band ----------------------------------------------------------- */

.scene {
  background: var(--night);
  line-height: 0;
}

.scene img {
  width: 100%;
  height: min(64vh, 640px);
  min-height: 340px;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* -- Sections ------------------------------------------------------------- */

section {
  padding: var(--bd-space-20) 0;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--bd-space-4);
  margin-bottom: var(--bd-space-8);
}

.sec-head .eyebrow {
  color: var(--depth);
}

.sec-head .n {
  font-family: var(--bd-font-display);
  font-size: 0.6875rem;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  font-weight: 600;
}

h2.display {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  max-width: 20ch;
}

h2 .dot {
  color: var(--accent);
}

.prose {
  max-width: 68ch;
}

.prose p + p {
  margin-top: 1.1em;
}

.prose strong {
  font-weight: var(--bd-weight-semibold);
}

.lead-in {
  margin-top: var(--bd-space-5);
  color: var(--ink-muted);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--bd-space-12);
  align-items: start;
}

/* Founder bio row */

.bio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bd-space-6);
  align-items: start;
  margin-top: 1.4em;
}

/* The bio grew from one paragraph to three. Without a wrapper the second and
   third would land in the photo's grid column instead of beside it. */
.bio-text p + p {
  margin-top: 1.1em;
}

.bio img {
  width: 124px;
  height: 124px;
  border-radius: var(--bd-radius-full);
  object-fit: cover;
  border: 3px solid var(--accent);
}

/* Capacities */

.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bd-space-10);
  margin-top: var(--bd-space-12);
}

.cap-item {
  border-top: 2px solid var(--ink);
  padding-top: var(--bd-space-5);
}

.cap-item .n {
  font-family: var(--bd-font-display);
  font-size: var(--bd-text-sm);
  color: var(--depth);
  font-weight: 600;
}

.cap-item h3 {
  font-family: var(--bd-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--bd-tracking-tight);
  font-size: var(--bd-text-xl);
  line-height: 1.12;
  margin: var(--bd-space-3) 0 var(--bd-space-3);
}

.cap-item p {
  font-size: var(--bd-text-sm);
  color: var(--ink-muted);
}

/* Who we serve */

.serve {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--bd-space-10);
}

.serve > div {
  background: var(--card);
  padding: var(--bd-space-8);
}

.serve h3 {
  font-family: var(--bd-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--bd-tracking-tight);
  font-size: var(--bd-text-lg);
  line-height: 1.15;
  margin-bottom: var(--bd-space-3);
}

.serve p {
  font-size: var(--bd-text-sm);
  color: var(--ink-muted);
}

/* -- Contact — dark ------------------------------------------------------- */

.contact {
  background: var(--night);
  color: var(--on-night);
}

.contact h2 {
  color: var(--paper);
}

.contact .sec-head .eyebrow {
  color: var(--accent);
}

.contact .sec-head .n {
  color: var(--on-night-muted);
}

.contact .intro {
  color: var(--on-night-muted);
  /* Wide enough that the three short sentences sit on one line at desktop.
     At 52ch the last word wrapped alone, which is the one rag fault a reader
     always notices. */
  max-width: 64ch;
  margin-top: var(--bd-space-2);
}

.contact .intro a {
  color: var(--accent);
  text-decoration: none;
}

.contact .intro a:hover {
  text-decoration: underline;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--bd-space-12);
  margin-top: var(--bd-space-10);
  align-items: start;
}

.contact-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52ch;
}

.contact-aside .slot {
  border-top: 1px solid var(--night-rule);
  padding: var(--bd-space-5) 0;
}

.contact-aside .slot:first-child {
  border-top: 0;
  padding-top: var(--bd-space-1);
}

.contact-aside .eyebrow {
  color: var(--on-night-dim);
  display: block;
  margin-bottom: var(--bd-space-2);
}

.contact-aside p {
  font-size: var(--bd-text-sm);
  color: var(--rule);
}

.contact-aside .mail {
  font-family: var(--bd-font-display);
  font-size: var(--bd-text-lg);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.contact-aside .mail:hover {
  text-decoration: underline;
}

/* Form */

form .field {
  margin-bottom: var(--bd-space-5);
}

form label {
  display: block;
  font-family: var(--bd-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-night-muted);
  margin-bottom: var(--bd-space-2);
}

form label .opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
}

form input,
form textarea {
  width: 100%;
  background: var(--night-field);
  border: 1px solid var(--night-rule);
  border-radius: var(--bd-radius-md);
  color: var(--paper);
  font-family: var(--bd-font-sans);
  font-size: var(--bd-text-sm);
  padding: var(--bd-space-3);
  transition: border-color var(--dur) var(--ease);
}

form input:focus,
form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

form textarea {
  min-height: 150px;
  resize: vertical;
}

.form-note {
  font-size: var(--bd-text-sm);
  color: var(--on-night-dim);
  margin-top: var(--bd-space-3);
}

/* The honeypot. Off-screen rather than display:none, which some bots check
   for. Every form provider worth using treats a filled hidden field as spam;
   the field name differs between them, so it is set in the page, not here. */
.hp {
  position: absolute;
  left: -9999px;
}

/* -- Footer --------------------------------------------------------------- */

footer {
  background: var(--jungle);
  color: var(--on-jungle);
  padding: var(--bd-space-8) 0;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bd-space-4);
  flex-wrap: wrap;
  font-family: var(--bd-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.foot .mark-s {
  height: 20px;
  width: auto;
  vertical-align: middle;
  margin-right: var(--bd-space-2);
  color: var(--accent);
}

/* -- Standalone card pages — thanks, 404 ---------------------------------- */

.card-page {
  background: var(--night);
  color: var(--on-night);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bd-space-6);
}

.card {
  max-width: 520px;
}

.card .mark {
  height: 72px;
  width: auto;
  display: block;
  margin-bottom: var(--bd-space-8);
  color: var(--accent);
}

.card h1 {
  font-size: var(--bd-text-4xl);
  color: var(--paper);
}

.card h1 .dot {
  color: var(--accent);
}

.card p {
  margin-top: var(--bd-space-5);
  color: var(--on-night-muted);
}

.card .btn {
  margin-top: var(--bd-space-8);
}

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .caps {
    grid-template-columns: 1fr;
    gap: var(--bd-space-8);
  }

  .two-col,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--bd-space-8);
  }

  .serve {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* The nav stays. Hiding it left the four sections unreachable on a phone,
     which is the device most of this site's readers will be on. */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bd-space-4);
  }

  nav.site {
    gap: var(--bd-space-4);
  }

  section {
    padding: var(--bd-space-16) 0;
  }

  .hero-inner {
    padding: var(--bd-space-16) 0 var(--bd-space-16);
  }

}

/* The bio portrait stacks above its text well before the page does. Beside a
   three-paragraph bio, the remaining column drops to roughly 34 characters a
   line between 860 and 1000px — readable at a glance, tiring to actually
   read. Comfortable measure is 45 to 75. */
@media (max-width: 1000px) {
  .bio {
    grid-template-columns: 1fr;
    gap: var(--bd-space-4);
  }
}