/* Chong Jin Nursery — field-guide / lab-report layer over the original brand.
   Paper + ink + nursery greens. Mono = specimen data only. Motion respects reduced-motion. */
:root {
  --green: #3f7a1f;
  --green-dark: #2d5a14;
  --leaf: #5ea32e;
  --lime: #b7e08a;
  --ink: #1c2a12;
  --muted: #56664d;
  --line: #d7e4c8;
  --hair: #c3d3ad;
  --paper: #f4f7ea;
  --paper-2: #ebf1dc;
  --card: #ffffff;
  --wa: #128c7e;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
/* clip (not hidden): hidden turns body into a scroll container and breaks the sticky header. */
html, body { overflow-x: clip; max-width: 100%; }
body {
  font-family: "Plus Jakarta Sans", "Noto Sans SC", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
h1, h2, h3, h4, .font-display {
  font-family: Sora, "Noto Sans SC", "Plus Jakarta Sans", system-ui, sans-serif;
}
html:not(.lang-zh):not(.lang-en) .lang-zh,
html:not(.lang-zh):not(.lang-en) .lang-en { display: none !important; }
html.lang-zh .lang-ms,
html.lang-zh .lang-en { display: none !important; }
html.lang-en .lang-ms,
html.lang-en .lang-zh { display: none !important; }
.lang-switch {
  display: flex;
  align-items: stretch;
  height: 44px;
  min-height: 44px;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
/* Real links to /, /zh, /en (per-language URLs since go-live 2026-09-23). */
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.55rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"] { background: var(--ink); color: #fff; }
img, svg { max-width: 100%; }
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(244, 247, 234, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
section[id] { scroll-margin-top: 5.5rem; }
html { scroll-padding-top: 5.5rem; }
@media (max-width: 1023px) {
  html { scroll-padding-bottom: 6.5rem; }
  section[id] { scroll-margin-bottom: 5.5rem; }
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- Wordmark ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-family: Sora, system-ui, sans-serif;
  color: var(--green);
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark img { height: 40px; width: auto; display: block; }
.wordmark .wm-text {
  display: flex; flex-direction: column;
  font-weight: 700; letter-spacing: 0.04em; line-height: 1.05;
  font-size: 15px; color: var(--green-dark);
}
.wordmark .wm-text small {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--muted); margin-top: 3px;
}
@media (max-width: 380px) {
  .wordmark img { height: 34px; }
  .wordmark .wm-text { font-size: 13px; }
  .wordmark .wm-text small { font-size: 9px; letter-spacing: 0.1em; }
}
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- Dock ---------- */
.site-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: transparent; border: 0;
}
.site-dock .dock-island {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(28,42,18,0.16);
  padding: 4px;
}
.site-dock .dock-item {
  flex: 1 1 0;
  min-height: 56px; min-width: 44px;
  padding: 4px 2px 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
}
.site-dock .dock-item:hover { color: var(--ink); }
.dock-ico { width: 20px; height: 20px; }
.dock-wa {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 56px;
  border-radius: 18px; background: var(--wa); color: #fff;
  margin-left: 4px;
}
.cjt-map {
  width: 100%; height: 18rem; border: 0; border-radius: 6px; display: block;
  background: var(--paper-2);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Type helpers ---------- */
.mono { font-family: var(--mono); }
.latin, i.latin, .geno { font-family: var(--serif); font-style: italic; font-weight: 500; }
.geno { letter-spacing: 0.01em; }
.sec-tag {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--green-dark); letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}
.sec-tag::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hair); }
.sec-tag b { font-weight: 600; }
.on-ink .sec-tag { color: var(--lime); }
.on-ink .sec-tag::after { background: rgba(183,224,138,0.25); }
.h1 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
}
html.lang-zh .h1 { letter-spacing: 0; line-height: 1.2; }
.h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
html.lang-zh .h2 { letter-spacing: 0; line-height: 1.25; max-width: 18em; }
.lede { font-size: 1.0625rem; color: var(--muted); max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; text-align: center;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { border: 1px solid var(--hair); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: #fff; border-color: var(--green); }
.btn-sm { min-height: 44px; padding: 0 1rem; font-size: 0.875rem; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--paper); }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #cfe0f2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.hero-copy { position: relative; padding: 1.75rem 1rem 2.25rem; max-width: 44rem; }
.hero-copy .lede { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 30px; padding: 0.2rem 0.65rem 0.2rem 0.55rem;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--hair); border-radius: 4px; background: rgba(255,255,255,0.7);
  color: var(--ink); white-space: nowrap;
}
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0.7; flex-shrink: 0;
}
.hero .chip { min-height: 44px; }
a.chip-link { text-decoration: none; }
a.chip-link:hover { border-color: var(--green); background: #fff; }
.hero-kicker { font-family: var(--mono); font-size: 12px; color: var(--green-dark); margin-bottom: 0.9rem; }
@media (min-width: 768px) {
  .hero { min-height: clamp(580px, 86vh, 820px); display: flex; align-items: center; background: #1c2a12; }
  .hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-media img { object-position: 50% 68%; }
  .hero-media::after {
    content: ""; position: absolute; inset: 0;
    /* Floor of ~0.55 dark behind the whole copy column (text stays >= 4.5:1 on bright sky), fading after it. */
    background:
      linear-gradient(100deg, rgba(20,32,12,0.86) 0%, rgba(20,32,12,0.74) 38%, rgba(20,32,12,0.58) 62%, rgba(20,32,12,0.3) 80%, rgba(20,32,12,0.12) 100%),
      linear-gradient(0deg, rgba(20,32,12,0.4) 0%, rgba(20,32,12,0) 34%);
  }
  .hero-inner { position: relative; width: 100%; }
  .hero-copy { padding: 4rem 2rem 4.5rem; color: #fff; max-width: 48rem; }
  .hero .h1 { font-size: clamp(2.4rem, 4.2vw, 3.3rem); }
  .hero-copy .lede { color: rgba(255,255,255,0.92); }
  .hero-kicker { color: var(--lime); }
  .hero .chip { background: rgba(20,32,12,0.55); border-color: rgba(255,255,255,0.45); color: #fff; }
  .hero a.chip-link:hover { background: rgba(20,32,12,0.75); border-color: #fff; }
  .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.7); background: rgba(20,32,12,0.35); }
  .hero .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Copy spans the full width here, so keep the >=0.55 floor all the way across. */
  .hero-media::after {
    background:
      linear-gradient(100deg, rgba(20,32,12,0.86) 0%, rgba(20,32,12,0.7) 45%, rgba(20,32,12,0.58) 100%),
      linear-gradient(0deg, rgba(20,32,12,0.4) 0%, rgba(20,32,12,0) 34%);
  }
}
@media (min-width: 1024px) { .hero-copy { padding-left: 2.5rem; } }

/* ---------- Stats band ---------- */
.stats {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(183,224,138,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,224,138,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #fff;
}
.stat { border-left: 1px solid rgba(183,224,138,0.28); padding-left: 1rem; }
.stat-val { font-family: Sora, sans-serif; font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--lime); }
.stat-unit { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.66); margin-top: 0.55rem; line-height: 1.45; }
.stat-copn { display: flex; align-items: center; gap: 0.6rem; }
.stat-link { display: block; min-height: 44px; color: inherit; text-decoration: none; }
.stat-link .stat-unit { display: block; }
.stat-link:hover .stat-unit { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stat-copn img { height: 52px; width: 52px; background: #fff; border-radius: 50%; }
@media (max-width: 380px) { .stat-copn { gap: 0.4rem; } .stat-copn img { height: 44px; width: 44px; } }

/* ---------- Services ---------- */
.svc {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.svc-media { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-media .tag {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.94); color: var(--ink); padding: 3px 8px; border-radius: 3px;
}
/* Logo plate grows past 4:3 when the variety names need the room (overflow visible = aspect-ratio min-content). */
.svc-media-plate { overflow: visible; }
/* Rows of 2, 2, then 1 (last centred) at every width — client round 5. */
.logo-plate {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-items: center;
  gap: 1rem 0.75rem; height: 100%; padding: 1rem 0.75rem; background: #fff;
}
.logo-plate span { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem; min-width: 0; max-width: 100%; }
.logo-plate span:last-child { grid-column: 1 / -1; max-width: 50%; }
.logo-plate img { height: 54px; width: auto; max-width: 100%; object-fit: contain; }
.logo-plate small {
  display: block; max-width: 100%;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; line-height: 1.35;
  color: var(--muted); text-align: center; overflow-wrap: break-word;
}
@media (min-width: 1024px) {
  .logo-plate { gap: 1.25rem 1rem; }
  .logo-plate img { height: 58px; }
  .logo-plate small { font-size: 11.5px; }
}
@media (max-width: 480px) {
  .logo-plate img { height: 44px; }
  .logo-plate small { font-size: 10px; }
}
.svc-body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1 1 auto; }
.svc-body h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.svc-body p, .svc-body li { color: var(--muted); font-size: 0.95rem; }
.svc-specs { display: grid; gap: 0.6rem; }
.svc-specs li { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.svc-specs b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--green-dark); }
.svc-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Document tag (certs captions) ---------- */
.fig-no {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 3px; padding: 0 6px; margin-right: 0.5rem;
}

/* ---------- Process (stages) ---------- */
.stages { position: relative; display: grid; gap: 2.5rem; margin-top: 3rem; }
.stages::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 1px;
  background: repeating-linear-gradient(180deg, var(--hair) 0 6px, transparent 6px 10px);
}
.stage { position: relative; display: grid; gap: 1rem; padding-left: 3.4rem; }
.stage-num {
  position: absolute; left: 0; top: 0;
  width: 43px; height: 43px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green-dark);
}
.stage-big {
  font-family: Sora, sans-serif; font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 6.5rem); line-height: 0.8; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--green);
  display: none; user-select: none;
}
.stage-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage h3 { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.stage p { color: var(--muted); max-width: 46ch; }
.spec {
  position: relative; display: inline-flex; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--ink); background: #fff;
  border: 1px solid var(--ink); border-radius: 3px;
  padding: 5px 10px 5px 24px; line-height: 1.45;
}
.spec::before {
  content: ""; position: absolute; left: 8px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper);
}
.ruler { position: relative; height: 26px; margin-top: 0.35rem; max-width: 420px; }
.ruler-track {
  position: absolute; left: 0; right: 0; top: 4px; height: 9px;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px calc(100% / 12));
  background-size: calc(100% + 1px) 100%;
}
.ruler-mark {
  position: absolute; top: 2px; height: 11px;
  left: calc(var(--from) / 12 * 100%);
  width: max(6px, calc((var(--to) - var(--from)) / 12 * 100%));
  background: var(--leaf); opacity: 0.85; border-radius: 2px;
}
.ruler-lab {
  position: absolute; top: 15px; font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.ruler-lab.l { left: 0; }
.ruler-lab.r { right: 0; }
@media (min-width: 1024px) {
  .stages { gap: 4.5rem; margin-top: 4rem; }
  .stages::before { left: 50%; }
  .stage { grid-template-columns: 1fr 1fr; column-gap: 5rem; padding-left: 0; align-items: center; }
  .stage-num { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 15px; height: 15px; font-size: 0; background: var(--leaf); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); }
  .stage-big { display: block; margin-bottom: 1rem; }
  .stage:nth-child(even) .stage-photo { order: 2; }
  .stage:nth-child(even) .stage-text { order: 1; text-align: right; justify-self: end; }
  .stage:nth-child(even) .stage-text p { margin-left: auto; }
  .stage:nth-child(even) .ruler { margin-left: auto; }
}

/* ---------- Science ---------- */
.fact-grid { display: grid; gap: 2.25rem; }
@media (min-width: 768px) { .fact-grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 2.75rem; } }
.fact { border-top: 1px solid var(--ink); padding-top: 0.9rem; }
.fact h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.fact p { color: var(--muted); margin-top: 0.35rem; font-size: 0.975rem; max-width: 52ch; }
.fact .fact-val { font-family: Sora, sans-serif; font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--green-dark); margin-bottom: 0.4rem; }
.cite { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 0.5rem; }

/* ---------- Fruit comparison (dura / pisifera / tenera) ---------- */
.fruit-compare { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 0.75rem; }
.fruit-panel { display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: center; }
.fruit-panel figure { margin: 0; }
.fruit-panel img { width: 100%; height: auto; display: block; border-radius: 6px; background: var(--paper-2); }
.fruit-panel figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
.fruit-name { font-size: 1.05rem; line-height: 1.2; }
.fruit-name .fruit-geno { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 0.45rem; font-style: normal; letter-spacing: 0.01em; }
.fruit-note { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.fruit-op { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 1.3rem; color: var(--muted); padding: 0.05rem 0; }
.fruit-panel--result img { box-shadow: 0 0 0 3px var(--green); }
.fruit-chip { align-self: flex-start; margin-bottom: 0.15rem; border-color: var(--green); color: var(--green-dark); background: rgba(183,224,138,0.35); }
.fruit-disclaimer { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; margin: 0 0 2.5rem; }
@media (min-width: 641px) {
  .fruit-compare { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; column-gap: 1.5rem; row-gap: 0; }
  .fruit-panel { grid-template-columns: 1fr; row-gap: 0.65rem; }
  .fruit-op { font-size: 1.85rem; align-self: center; }
}

/* ---------- Seeds ---------- */
.seed-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; }
.brand-row { display: flex; align-items: center; gap: 0.8rem; min-height: 60px; margin-bottom: 0.25rem; }
.brand-mark { height: 56px; width: auto; max-width: 132px; object-fit: contain; flex-shrink: 0; background: #fff; }
.brand-name { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--green-dark); }
.variety + .variety { border-top: 1px dashed var(--hair); margin-top: 0.9rem; padding-top: 0.9rem; }
.variety h3 { font-size: 1.1rem; font-weight: 600; }
.variety p { color: var(--muted); font-size: 0.925rem; margin-top: 0.35rem; }
.seed-note { border: 1px dashed var(--green); border-radius: 14px; padding: 1.25rem; background: transparent; }

/* ---------- Certificates ---------- */
.cert-frame { display: block; background: #fff; padding: 10px; border: 1px solid var(--hair); border-radius: 4px; box-shadow: 0 24px 48px -28px rgba(28,42,18,0.45); }
.cert-frame img { display: block; width: 100%; height: auto; }
.doc-row { display: grid; gap: 2rem; }
.doc { margin: 0; width: 100%; max-width: 22rem; justify-self: center; }
.doc figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.doc .doc-no { display: block; margin: 0.35rem 0 0.1rem; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-word; }
@media (min-width: 640px) {
  .doc-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
  .doc { max-width: none; }
}
@media (min-width: 1024px) { .doc-row { gap: 2rem; } }
.register > div { border-top: 1px solid var(--ink); padding: 1rem 0 1.1rem; }
.register > div:last-child { border-bottom: 1px solid var(--ink); }
@media (min-width: 768px) {
  .register { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
  .register > div { border-bottom: 1px solid var(--ink); }
}
.register dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.register .reg-no { font-family: var(--mono); font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600; color: var(--ink); letter-spacing: 0.01em; word-break: break-word; }
.register dd p { color: var(--muted); margin-top: 0.3rem; font-size: 0.95rem; }
.register .code { font-family: var(--mono); font-size: 11.5px; color: var(--green-dark); margin-top: 0.35rem; }
/* ---------- Key facts (quotable dl; mono labels, hairline rules) ---------- */
.facts { border-top: 1px solid var(--ink); }
.facts > div { display: grid; gap: 0.15rem 2rem; padding: 0.8rem 0 0.85rem; border-bottom: 1px solid var(--hair); }
.facts > div:last-child { border-bottom-color: var(--ink); }
@media (min-width: 768px) { .facts > div { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.facts dt { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.facts dd { color: var(--ink); font-size: 0.975rem; line-height: 1.55; overflow-wrap: anywhere; }
.facts .mono { font-family: var(--mono); font-size: 0.92em; }
.facts a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.facts a:hover { color: var(--ink); }
.trace-line { font-family: Sora, sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.35; border-left: 3px solid var(--leaf); padding-left: 0.9rem; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.gallery .g-wide, .gallery .g-pano { grid-column: span 2; }
@media (max-width: 639px) {
  .gallery figure { aspect-ratio: 1 / 1; }
  .gallery figure.g-wide { aspect-ratio: 3 / 2; }
}
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--paper-2); aspect-ratio: 4 / 3; }
.gallery figure.g-pano { aspect-ratio: 1080 / 330; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Caption overlays: BM + EN only (client round 5) — in 中文 mode the caption AND its scrim are hidden. */
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.8rem 0.6rem;
  background: linear-gradient(0deg, rgba(20,32,12,0.72), rgba(20,32,12,0));
  color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
}
@media (max-width: 639px) {
  .gallery figcaption { font-size: 0.75rem; padding: 1.4rem 0.55rem 0.45rem; }
}
html.lang-zh .gallery figcaption { display: none !important; }
@media (min-width: 640px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .g-wide, .gallery .g-pano { grid-column: span 2; }
  .gallery .g-wide { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px 250px 300px; }
  .gallery figure, .gallery .g-wide, .gallery figure.g-pano { aspect-ratio: auto; height: 100%; }
  .gallery .g-wide { grid-column: span 2; }
  .gallery .g-pano { grid-column: span 3; }
}

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: 0.9rem 0;
  font-family: Sora, "Noto Sans SC", sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  width: 30px; height: 30px; border: 1px solid var(--hair); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: 16px; color: var(--green-dark);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 2.6rem 1.2rem 0; color: var(--muted); max-width: 68ch; }

/* ---------- Contact ---------- */
.person {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem;
}
.person-name { font-family: Sora, sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.person-name small { display: block; font-family: "Noto Sans SC", sans-serif; font-size: 1rem; font-weight: 500; color: var(--muted); margin-top: 0.3rem; }
.addr { font-style: normal; }
.addr-label { font-family: var(--mono); font-size: 12px; color: var(--green-dark); margin-bottom: 0.3rem; }
.gps { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--paper-2); border-radius: 3px; padding: 1px 6px; }
.map-frame { border: 1px solid var(--hair); border-radius: 8px; padding: 6px; background: #fff; }

/* ---------- Footer ---------- */
.foot-logo { display: inline-flex; background: var(--paper); border-radius: 8px; padding: 6px 10px; }
.foot-logo img { height: 36px; width: auto; display: block; }
.copn-inline { display: inline-flex; align-items: center; gap: 0.45rem; vertical-align: middle; }
.copn-inline img { height: 28px; width: 28px; background: #fff; border-radius: 50%; flex-shrink: 0; }

/* ---------- Motion (kept small) ---------- */
a, button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.dock-wa { transition: transform 0.2s ease, background-color 0.2s ease; }
.dock-wa:hover { transform: scale(1.04); }
.hero-media img { animation: heroEase 16s ease-out both; }
@keyframes heroEase { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 0.65s ease both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.28s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.36s; }
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { animation: rise 0.55s ease both; }
.svc, .seed-card { transition: box-shadow 0.22s ease, border-color 0.22s ease; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover, .seed-card:hover { border-color: #b7d59a; box-shadow: 0 12px 28px rgba(28, 42, 18, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-media img,
  .hero-copy > *,
  .reveal,
  .reveal.is-in,
  .dock-wa {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .site-nav a::after, .faq summary::after { transition: none !important; }
}