/* ============================================================
   JIM EXPORT & IMPORT - "The Trade Sheet"
   Prototype v4: light default, EN/ES, logo, revised builder.
   Sources: jimspanishalmonds.com EN + ES (SITE, client-QC'd),
   Almendrave "Almonds and Hazelnuts from Spain" (BOOK).
   ============================================================ */

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

/* Light is the default. Dark is opt-in only, via the toggle. */
:root {
  --bg:          #EDEEE7;
  --surface:     #F6F7F2;
  --surface-2:   #E2E4DA;
  --fg:          #16181A;
  --fg-muted:    #5C6157;
  --fg-faint:    #63665D;
  --rule:        #CDD0C4;
  --rule-strong: #A7AC9C;
  --accent:      #B8172A;
  --accent-fg:   #FFFFFF;
  --hull:        #647057;
  --leaf:        #4E7A3A;
  --bloom:       #E5CDD1;
  --oro:         #7E5F22;
  --sky-1:       #B9C6CE;
  --bar-season:  #6B7168;
  --bar-harvest: #5A6A45;
  --bar-plant:   #78846A;
  --bar-flower:  #AE6576;
  --bar-frost:   #9E2A2B;

  --font-display: Superclarendon, "Rockwell", "Roboto Slab", "Bookman Old Style", Georgia, serif;
  --font-text:    "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-data:    "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.375rem;
  --t-2xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --t-4xl:  clamp(2.25rem, 1rem + 4.2vw, 4rem);

  --shell:  1360px;
  --gut:    clamp(1.25rem, 4vw, 3.5rem);
  --band:   clamp(4rem, 8vw, 7.5rem);
  --radius: 2px;
}

:root[data-theme="dark"] {
  --bg: #121412; --surface: #191C19; --surface-2: #21241F;
  --fg: #E9EAE3; --fg-muted: #9BA192; --fg-faint: #878B80;
  --rule: #2E322C; --rule-strong: #474C42;
  --accent: #E0524F; --accent-fg: #14160F;
  --hull: #93A07C; --leaf: #7FA861; --bloom: #33262A; --oro: #C9A24E;
  --sky-1: #2C3740;
  --bar-season: #6E756B; --bar-harvest: #93A07C; --bar-plant: #6F7A5C;
  --bar-flower: #B4707C; --bar-frost: #D4645F;
}

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: var(--t-md); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Primitives ---------- */

.wrap { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.label { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-faint); font-weight: 500; }
.label--accent { color: var(--accent); }
.h-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.022em; line-height: 1.03; text-wrap: balance; margin: 0; }
.h-sec { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); letter-spacing: -0.018em; line-height: 1.1; text-wrap: balance; margin: 0; }
.prose { max-width: 62ch; color: var(--fg-muted); }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-data); font-size: var(--t-sm);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 0.85em 1.5em; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 84%, var(--fg)); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--sm { padding: 0.6em 1em; font-size: var(--t-xs); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Masthead ---------- */


.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 72px; }

/* ---------- Logo ---------- */

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.lg-globe { fill: none; stroke: var(--fg-muted); stroke-width: 2.6; opacity: 0.5; stroke-linecap: round; }
.lg-leaf  { fill: var(--leaf); }
.lg-arrow { fill: var(--accent); stroke: var(--accent); }
.brand__type { display: flex; flex-direction: column; gap: 0.12rem; }
.brand__jim { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: 0.005em; line-height: 1; color: var(--fg); }
.brand__sub { font-family: var(--font-data); font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); line-height: 1; }
.brand__sub em { font-style: normal; color: var(--hull); }

.nav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); align-items: center; }
.nav a {
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--fg-muted); padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

.masthead__end { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn { background: transparent; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--fg-muted); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--fg); border-color: var(--rule-strong); }
.icon-btn.nav-toggle { display: none; }
.lang { display: flex; font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.08em; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.lang button { background: transparent; border: 0; color: var(--fg-faint); padding: 0.42em 0.62em; cursor: pointer; font: inherit; }
.lang button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.nav-panel { display: none; border-top: 1px solid var(--rule); background: var(--bg); }
.nav-panel[data-open="true"] { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 0.5rem 0 1rem; display: flex; flex-direction: column; }
.nav-panel a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--font-data); font-size: var(--t-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }

@media (max-width: 1120px) { .nav { display: none; } .icon-btn.nav-toggle { display: grid; } }
@media (max-width: 560px) {
  .brand__sub { display: none; }
  .masthead__end .btn { display: none; }
  .brand__jim { font-size: 1.02rem; }
  .brand__mark { width: 34px; height: 34px; }
  .brand { gap: 0.5rem; }
  .masthead__inner { gap: 0.6rem; }
}

/* ---------- Router ---------- */
.page { display: none; }
.page[data-active="true"] { display: block; }

/* ---------- Hero ---------- */

.hero { border-bottom: 1px solid var(--rule); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); align-items: start; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--oro), transparent); }
.hero h1 { font-size: var(--t-4xl); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.hero__lede { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.5; color: var(--fg-muted); max-width: 48ch; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.panel { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--rule); }
.panel__title { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.panel__note { font-family: var(--font-data); font-size: var(--t-xs); color: var(--fg-faint); }
.stage { display: grid; grid-template-columns: auto 1fr; }
.stage__k, .stage__v { font-family: var(--font-data); font-size: var(--t-sm); padding: 0.72rem 1.1rem; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.stage__k { color: var(--fg); white-space: nowrap; }
.stage__v { color: var(--fg-muted); text-align: right; }
.panel__foot { padding: 0.9rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
.ledger__cell { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--rule); }
.ledger__cell:first-child { border-left: 0; }
@media (max-width: 760px) { .ledger__cell:nth-child(3) { border-left: 0; } .ledger__cell:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.ledger__icon { color: var(--hull); margin-bottom: 0.65rem; }
.ledger__icon svg { width: clamp(30px, 2.4vw, 38px); height: auto; }
.ledger__fig { font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 0.5rem; }
.ledger__cap { color: var(--fg-muted); font-size: var(--t-sm); max-width: 24ch; margin: 0; }

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

.section { padding-block: var(--band); border-bottom: 1px solid var(--rule); }
.section__head { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
@media (max-width: 880px) { .section__head { grid-template-columns: 1fr; align-items: start; } }
.section__head .label { display: block; margin-bottom: 0.9rem; }

.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .services { grid-template-columns: 1fr; } }
.svc { padding: 1.6rem 1.5rem 1.75rem; border-left: 1px solid var(--rule); }
.svc:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1000px) { .svc { border-top: 1px solid var(--rule); } .svc:nth-child(-n+2) { border-top: 0; } .svc:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .svc { border-left: 0; padding-left: 0; } .svc:nth-child(2) { border-top: 1px solid var(--rule); } }
.svc__t { font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.015em; margin: 0 0 0.55rem; font-weight: 400; }
.svc__d { font-size: var(--t-sm); color: var(--fg-muted); margin: 0; }

/* ---------- Plate ---------- */

.plate {
  --plate-fg: #F2EFE9; --plate-accent: #E9857C;
  position: relative; overflow: hidden; border-radius: var(--radius); color: var(--plate-fg);
  background:
    radial-gradient(120% 90% at 82% 6%,  rgba(180, 112, 124, 0.55) 0%, transparent 58%),
    radial-gradient(90% 70% at 10% 100%, rgba(103, 115, 90, 0.45) 0%, transparent 62%),
    linear-gradient(155deg, #33414B 0%, #3E3630 48%, #14161A 100%);
}
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.42'/></svg>");
}
/* Plate 01 - the orchard in bloom. Photograph fills the plate; the quote sits in the
   right-hand column, over sky and sierra, where a scrim can hold it without covering
   the tree. */
.plate--photo { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; min-height: 22rem; }
.plate__media { position: absolute; inset: 0; }
.plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.plate__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to left, rgba(20, 22, 26, 0.80) 0%, rgba(20, 22, 26, 0.74) 45%, rgba(20, 22, 26, 0.58) 60%, rgba(20, 22, 26, 0.26) 75%, rgba(20, 22, 26, 0.06) 90%, transparent 100%),
    linear-gradient(to top, rgba(20, 22, 26, 0.45) 0%, transparent 34%);
}
.plate__inner { position: relative; z-index: 3; padding: clamp(2.5rem, 6vw, 4.5rem); max-width: 40rem; }
.plate--photo .plate__inner { margin-left: auto; max-width: min(40rem, 56%); }
/* Narrow: the photograph stacks above the quote rather than sitting behind it, and fades
   into the plate's own ground so the two read as one block. */
@media (max-width: 860px) {
  .plate--photo { display: block; aspect-ratio: auto; min-height: 0; }
  .plate--photo .plate__media { position: relative; inset: auto; }
  .plate--photo .plate__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .plate--photo .plate__scrim { background: linear-gradient(to bottom, transparent 38%, rgba(20, 22, 26, 0.3) 68%, rgba(20, 22, 26, 0.8) 90%, #14161A 100%); }
  .plate--photo .plate__inner { margin-left: 0; max-width: none; padding-top: clamp(1.5rem, 5vw, 2.25rem); }
  .plate--photo .plate__brief { position: relative; left: auto; z-index: 3; }
}
.pull { font-family: var(--font-display); font-size: clamp(1.3rem, 0.95rem + 1.7vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0.9rem 0 1.4rem; text-wrap: balance; color: var(--plate-fg); }
.pull__attr { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--plate-fg) 82%, #14161A); margin: 0; }
.plate .label--accent { color: var(--plate-accent); }
.plate__brief {
  position: absolute; right: 1.75rem; bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--plate-fg) 82%, #14161A);
  text-align: right; max-width: min(24rem, 55vw); margin: 0;
}
.plate__brief svg { flex: none; }
.plate--photo .plate__brief { right: auto; left: 1.75rem; text-align: left; z-index: 3; }
@media (max-width: 860px) { .plate__brief { position: static; padding: 0 clamp(2.5rem,6vw,4.5rem) 2rem; justify-content: flex-start; text-align: left; max-width: none; } }

/* ---------- Varieties ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.chip { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; padding: 0.5em 0.9em; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; color: var(--fg-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--rule-strong); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.vgroup + .vgroup { margin-top: clamp(2.5rem, 5vw, 4rem); }
.vgroup__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.vgroup__t { font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.015em; margin: 0; font-weight: 400; }
.vgroup__n { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.12em; color: var(--fg-faint); }
.vgroup__d { font-size: var(--t-sm); color: var(--fg-muted); margin: 0 0 1.5rem; max-width: 62ch; }
.varieties { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); border-top: 1px solid var(--rule-strong); }
.variety { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; transition: background-color .18s ease; }
.variety:hover { background: var(--surface); }
.variety[hidden] { display: none; }
.variety__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.variety__name { font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.015em; margin: 0; font-weight: 400; }
.variety__code { font-family: var(--font-data); font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.variety__desc { font-size: var(--t-sm); color: var(--fg-muted); margin: 0; flex: 1; }

.variety__view {
  position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface-2); overflow: hidden;
  display: block; padding: 0; cursor: pointer; width: 100%; font: inherit; color: inherit;
}
.variety__view canvas, .variety__view img { width: 100%; height: 100%; object-fit: cover; }
.variety__illus { object-fit: contain !important; padding: 8%; background: var(--surface-2); }
.variety__badge {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 2;
  font-family: var(--font-data); font-size: 0.5625rem; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 0.3em 0.5em; border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg) 88%, transparent); color: var(--fg-muted);
  border: 1px solid var(--rule);
}
.variety__badge--gap { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: color-mix(in oklab, var(--bg) 96%, transparent); }
:root[data-theme="dark"] .variety__badge--gap { color: #F0736E; }

.spec { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-family: var(--font-data); font-size: var(--t-xs); margin: 0; }
.spec dt { color: var(--fg-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.spec dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag { font-family: var(--font-data); font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.28em 0.5em; border: 1px solid color-mix(in oklab, var(--hull) 45%, transparent); color: var(--hull); border-radius: var(--radius); }
.tag--type { border-color: color-mix(in oklab, var(--oro) 60%, transparent); color: var(--oro); }
.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--fg-muted); font-size: var(--t-sm); border-bottom: 1px solid var(--rule); }

/* ---------- Crop strip ---------- */

.cal-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.cal { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--font-data); }
.cal caption { text-align: left; padding-bottom: 0.9rem; }
.cal th { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); text-align: center; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-strong); }
.cal th:first-child { text-align: left; width: 210px; }
.cal td { border-bottom: 1px solid var(--rule); padding: 0; height: 46px; }
.cal td:first-child { font-family: var(--font-text); font-size: var(--t-sm); color: var(--fg); padding-right: 1rem; }
.cal__cell { position: relative; border-left: 1px solid var(--rule); }
.cal .bar { position: absolute; left: 1px; right: 1px; top: 15px; height: 14px; border-radius: var(--radius); }
.bar--flower  { background: var(--bar-flower); }
.bar--frost   { background: var(--bar-frost); }
.bar--mature  { background: var(--bar-plant); }
.bar--harvest { background: var(--bar-harvest); }
.bar--season  { background: var(--bar-season); }
.cal-key { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; }
.cal-key span { display: flex; align-items: center; gap: 0.5rem; }
.cal-key i { width: 22px; height: 10px; border-radius: var(--radius); flex: none; }

/* ---------- Specifications ---------- */

.almond-cols { max-width: none; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.almond-cols p { break-inside: avoid; }
@media (max-width: 720px) { .almond-cols { columns: 1; } }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--rule-strong); }
.spec-block { padding: 1.75rem; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec-block:first-child { border-left: 0; padding-left: 0; }
.spec-block h3 { font-family: var(--font-display); font-size: var(--t-lg); margin: 0 0 1rem; letter-spacing: -0.015em; font-weight: 400; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dotted var(--rule); font-size: var(--t-sm); color: var(--fg-muted); }
.spec-list li:last-child { border-bottom: 0; }
/* Values wrap rather than overflow: Spanish runs longer than English, and
   "Laminas, palitos, cubitos, harina" broke out of its column when set nowrap. */
.spec-list b { font-family: var(--font-data); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }

.cal-table-scroll { overflow-x: auto; }
.ctable { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--font-data); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ctable caption { text-align: left; padding-bottom: 0.9rem; }
.ctable th { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); text-align: right; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule-strong); }
.ctable th:first-child { text-align: left; }
.ctable td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule); text-align: right; color: var(--fg-muted); }
.ctable td:first-child { text-align: left; color: var(--fg); }
.ctable .dim { color: var(--fg-faint); }

/* ---------- Stage box ---------- */

.stage-box {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: radial-gradient(70% 60% at 50% 38%, color-mix(in oklab, var(--surface) 85%, transparent) 0%, transparent 72%), var(--surface-2);
  overflow: hidden;
}
.stage-box__img {
  position: absolute; left: 50%; top: 46%;
  width: 76%; max-width: none; transform-origin: 50% 50%;
  translate: -50% -50%;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.16,.84,.44,1), opacity .2s ease;
  filter: drop-shadow(0 10px 18px color-mix(in oklab, var(--fg) 18%, transparent));
}
.variety__none {
  display: grid; place-items: center; height: 100%; width: 100%;
  font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-faint); background: var(--surface-2);
}
/* Photograph mode: the stage becomes a photographic plate, filling edge to edge exactly
   as the variety cards do, instead of floating a rectangle where a cutout belongs. The
   caption and any provisional note sit on a scrim so they stay legible over the image. */
.stage-box[data-kind="photo"] .stage-box__img {
  left: 0; top: 0; width: 100%; height: 100%;
  translate: none; object-fit: cover; filter: none;
}
.stage-box__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48%; display: none;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(18, 20, 24, 0.55) 46%, rgba(18, 20, 24, 0.88) 100%);
}
.stage-box[data-kind="photo"] .stage-box__scrim { display: block; }
.stage-box[data-kind="photo"] .stage-box__cap { color: #F2F4EE; }
.stage-box__cap { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; margin: 0; font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }

.picker { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .picker { grid-template-columns: 1fr; } }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 1.5rem; }
.pick { text-align: left; background: transparent; cursor: pointer; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 0.9rem; color: var(--fg-muted); font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.06em; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.pick:hover { border-color: var(--rule-strong); color: var(--fg); }
.pick[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pick b { display: block; font-family: var(--font-display); font-size: var(--t-base); letter-spacing: -0.01em; font-weight: 400; margin-bottom: 0.15rem; }

/* ---------- Builder ---------- */

.builder > * { min-width: 0; }
.builder { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 980px) { .builder { grid-template-columns: 1fr; } }
.builder__stage { position: sticky; top: 100px; }
@media (max-width: 980px) { .builder__stage { position: static; } }

.stepper { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.step-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45em 0.75em; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; color: var(--fg-faint); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.step-chip[data-state="current"] { border-color: var(--accent); color: var(--accent); }
.step-chip[data-state="open"] { color: var(--fg); border-color: var(--rule-strong); }
.step-chip[data-state="locked"] { cursor: not-allowed; opacity: 0.55; }
.step-chip[data-state="skipped"] { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.step-chip i { font-style: normal; font-variant-numeric: tabular-nums; }

.step { display: none; }
.step[data-active="true"] { display: block; }
.step__q { font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 0.6rem; font-weight: 400; text-wrap: balance; }
.step__help { color: var(--fg-muted); font-size: var(--t-sm); margin: 0 0 1.5rem; max-width: 54ch; }

.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.opt { text-align: left; background: transparent; cursor: pointer; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; color: var(--fg-muted); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.opt:hover { border-color: var(--rule-strong); color: var(--fg); }
.opt[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.opt b { display: block; font-family: var(--font-display); font-size: var(--t-base); letter-spacing: -0.01em; font-weight: 400; margin-bottom: 0.2rem; }
.opt span { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.06em; }

.toggle-row { display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.toggle-row + .toggle-row { border-top: 0; padding-top: 0; margin-top: 0.9rem; }
.switch { position: relative; width: 44px; height: 24px; flex: none; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--surface); cursor: pointer; padding: 0; margin-top: 0.15rem; transition: background-color .18s ease, border-color .18s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg-muted); transition: transform .18s ease, background-color .18s ease; }
.switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-pressed="true"]::after { transform: translateX(20px); background: var(--accent-fg); }
.toggle-txt b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--t-base); }
.toggle-txt span { display: block; font-size: var(--t-sm); color: var(--fg-muted); }

.step-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.qty-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 560px) { .qty-grid { grid-template-columns: 1fr; } }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step-nav__end { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lotlist { list-style: none; margin: 0; padding: 0; }
.lotlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem;
  align-items: baseline; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--rule); }
.lotlist__n { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--fg-faint); }
.lotlist__d { font-size: var(--t-sm); color: var(--fg); }
.lotlist__acts { display: flex; gap: 0.35rem; }
.lotlist__acts button { background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--fg-muted); font-family: var(--font-data); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.3em 0.5em; cursor: pointer; }
.lotlist__acts button:hover { border-color: var(--fg); color: var(--fg); }
.lotcur__end { display: flex; align-items: center; gap: 0.6rem; }
.lotcur__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 1.1rem 0.2rem; }
.lotcur__n { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--fg); }
.lottable-wrap { overflow-x: auto; margin-bottom: 1.25rem; min-width: 0; max-width: 100%; }
.lottable { width: 100%; min-width: 620px; border-collapse: collapse; font-family: var(--font-data); font-size: var(--t-sm); }
.lottable caption { text-align: left; padding-bottom: 0.75rem; }
.lottable th { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint); text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule-strong); }
.lottable td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); color: var(--fg-muted); vertical-align: top; }
.lottable td:first-child { color: var(--fg-faint); }
.lottable__total td { font-weight: 500; color: var(--fg); border-bottom: 0; }
.lottable tbody tr[data-editing="true"] td { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.lottable th:last-child, .lottable td:last-child {
  position: sticky; right: 0; background: var(--bg);
  box-shadow: -8px 0 8px -8px color-mix(in oklab, var(--fg) 22%, transparent);
}
.lottable tbody tr[data-editing="true"] td:last-child { background: color-mix(in oklab, var(--accent) 10%, var(--bg)); }
.summary { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); margin-top: 1.5rem; }
.summary__head { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; }
.summary__rows { display: grid; grid-template-columns: auto 1fr; }
.summary__k, .summary__v { font-family: var(--font-data); font-size: var(--t-sm); padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--rule); }
.summary__k { color: var(--fg-faint); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.summary__v { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Market ---------- */

.notes-list { border-top: 1px solid var(--rule-strong); }
.note-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 720px) { .note-row { grid-template-columns: 1fr; gap: 0.5rem; } }
.note-row__date { font-family: var(--font-data); font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.note-row__t { font-family: var(--font-display); font-size: var(--t-lg); margin: 0 0 0.35rem; letter-spacing: -0.015em; font-weight: 400; }
.note-row__d { font-size: var(--t-sm); color: var(--fg-muted); margin: 0; max-width: 60ch; }
.note-row__tag { font-family: var(--font-data); font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.subscribe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 2rem; max-width: 520px; align-items: end; }
@media (max-width: 520px) { .subscribe { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.req { color: var(--accent); }
input, select, textarea { font-family: var(--font-text); font-size: var(--t-base); color: var(--fg); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.72em 0.85em; width: 100%; transition: border-color .15s ease; }
select { font-family: var(--font-data); font-size: var(--t-sm); }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--fg-muted); }
textarea { resize: vertical; min-height: 96px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--accent); }
.err { font-family: var(--font-data); font-size: var(--t-xs); color: var(--accent); margin: 0; }
.err[hidden] { display: none; }

.enquiry { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .enquiry { grid-template-columns: 1fr; } }
.hero__form { display: flex; flex-direction: column; }
.enquiry__form--hero { padding: clamp(1rem, 2.4vw, 1.5rem); gap: 0.75rem; }
.enquiry__form--hero textarea { min-height: 72px; }
.enquiry__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); }
@media (max-width: 560px) { .enquiry__form { grid-template-columns: 1fr; } }
.span-2 { grid-column: 1 / -1; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.contact-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.contact-list li { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: baseline; }
.contact-list .k { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.contact-list .v { font-family: var(--font-data); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.contact-list .v a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.contact-list .v a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.form-msg { grid-column: 1 / -1; font-family: var(--font-data); font-size: var(--t-sm); color: var(--hull); border: 1px solid color-mix(in oklab, var(--hull) 45%, transparent); background: color-mix(in oklab, var(--hull) 8%, transparent); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0; }
.form-msg[hidden] { display: none; }
.form-msg[data-blocked="true"] { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 8%, transparent); }

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

.footer { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
/* The footer carries the mark and the tagline only; the link columns duplicated the nav. */
.footer__grid { padding-bottom: 3rem; }
.footer__bar { border-top: 1px solid var(--rule); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-data); font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.05em; }

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .72s cubic-bezier(.16,.84,.44,1) forwards; }
  .rise:nth-child(1) { animation-delay: .04s; }
  .rise:nth-child(2) { animation-delay: .12s; }
  .rise:nth-child(3) { animation-delay: .2s; }
  .rise:nth-child(4) { animation-delay: .28s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* Legal links in the footer bar, added by the static build. */
.footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer__legal a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* Legal links in the footer bar, added by the static build. */
.footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer__legal a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* Grid children default to min-width:auto, so a long value cannot shrink and pushes the row
   wider than the viewport. Spanish labels are longer than English, which is where this showed
   up ("1 septiembre - 31 agosto"). Same fix as the builder track. */
.stage > * { min-width: 0; }
.stage__v { text-wrap: pretty; }

/* Legal links in the footer bar, added by the static build. */
.footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer__legal a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* Grid children default to min-width:auto, so a long value cannot shrink and pushes the row
   wider than the viewport. Spanish labels are longer than English, which is where this showed
   up ("1 septiembre - 31 agosto"). Same fix as the builder track. */
.stage > * { min-width: 0; }
.stage__v { text-wrap: pretty; }

/* The language switcher is a pair of links in the static build (each page is one language),
   where the prototype used buttons. Same appearance, and the current language is marked with
   aria-current rather than aria-pressed. */
.lang a {
  background: transparent; border: 0; color: var(--fg-faint);
  padding: 0.42em 0.62em; font: inherit; text-decoration: none; display: block;
}
.lang a:hover { color: var(--fg); }
.lang a[aria-current="true"] { background: var(--fg); color: var(--bg); }