*,*::before,*::after{box-sizing:border-box}
/* Палитра варианта берётся из токенов темы: --bg/--ink переключаются вместе
   со светлой и тёмной темой, поэтому оформление следует за ними само. */
[data-site-variant="field_journal"]{
  --field-paper:var(--bg);
  --field-ink:var(--ink);
  --field-blue:#476b83;
  --field-honey:var(--honey, #d79b22);
  background:var(--field-paper);
  color:var(--field-ink);
}
/* Синий «фактологический» акцент на тёмном фоне тонет — осветляем. */
[data-theme="dark"] [data-site-variant="field_journal"]{--field-blue:#8FB6CE}
[data-site-variant="field_journal"] .nav{background:color-mix(in srgb, var(--bg) 91%, transparent);border-bottom:1px solid color-mix(in srgb, var(--ink) 18%, transparent)}
[data-site-variant="field_journal"] .eyebrow{color:var(--field-blue)}

/* ---------- герой: ботанический вид слева и соты с пчелиным маршрутом справа —
   оба взяты напрямую из references/00-home-and-packaging.png (см.
   static/img/field-journal-8003/hero-*.png), без кодовой пересборки сцены и
   без второго слоя поверх картинки. ---------- */
.field-hero{position:relative;padding:64px 0 48px;overflow:clip}
.field-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,1fr);gap:48px;align-items:center;padding-left:150px}
.field-copy{max-width:620px}
.field-kicker{font:600 12px/1.3 var(--font-voice, Unbounded, sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--field-blue)}
.field-copy h1{font-family:Literata,serif;font-weight:600;font-size:clamp(38px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em;margin:18px 0}
.field-accent{position:relative;font-style:italic;color:var(--field-honey);white-space:nowrap}
.field-accent svg{position:absolute;left:-2%;right:-2%;bottom:-.28em;width:104%;height:.4em;color:var(--field-honey);overflow:visible}
.field-copy>p{font:400 clamp(16px,1.4vw,18px)/1.6 Literata,serif;color:var(--ink-soft);max-width:520px}
.field-actions{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.field-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;padding-top:18px;border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);gap:0 6px}
.field-facts div{padding-inline:16px;border-left:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.field-facts div:first-child{padding-left:0;border-left:0}
.field-facts dt{font:700 22px/1.1 Literata,serif;margin:0}
.field-facts dd{font-size:12px;color:var(--ink-soft);margin:6px 0 0}

.field-hero-margin{position:absolute;left:14px;top:36px;width:150px;height:calc(100% - 56px);object-fit:contain;object-position:top;pointer-events:none}
.field-hero-comb{display:block;width:100%;max-width:460px;height:auto;margin:auto}

/* ---------- фасовка ---------- */
.field-packaging{padding:64px 0 76px;background:var(--bg-sunk, #F0E9D8);border-block:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.field-packaging header{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px;flex-wrap:wrap;gap:10px}
.field-packaging h2{font:500 clamp(28px,3.6vw,42px) Literata,serif;margin:10px 0 0}
.field-packaging__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:end}
.field-pack{position:relative;text-align:center;padding:28px 16px 20px;border-top:1px solid color-mix(in srgb, var(--ink) 25%, transparent);min-width:0;transition:transform .2s var(--ease-out,ease)}
.field-pack:hover{transform:translateY(-3px)}
.field-pack__num{position:absolute;top:8px;left:0;font:600 12px var(--font-mono, monospace);color:var(--field-blue)}
.field-pack>b,.field-pack>span{display:block}
.field-pack>b{font:600 19px Literata,serif;margin-top:16px}
.field-pack>span:last-child{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.field-vessel{width:min(100%,150px);margin:auto}
.field-vessel img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain}

@media(max-width:1100px){.field-hero__grid{padding-left:100px}.field-hero-margin{width:100px}}
@media(max-width:960px){.field-hero__grid{grid-template-columns:1fr;padding-left:90px}.field-hero-comb{max-width:400px;margin-inline:auto}}
@media(max-width:720px){.field-hero{padding-top:48px}.field-hero__grid{padding-left:20px}.field-hero-margin{position:static;width:120px;height:200px;margin-bottom:8px}.field-packaging__grid{grid-template-columns:repeat(2,1fr)}.field-packaging header{display:block}.field-facts{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.field-copy h1{font-size:34px}.field-actions{align-items:flex-start;flex-direction:column}.field-packaging__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Каталог мёда — карточка-планшет (UI-UX-MANIFEST §2, references/01-honey-
   catalogue.png + crops/cards/honey-*-card-reference.png). Ботанический
   вид и банка — растровые кропы одной пасты, поэтому фон
   плашки подобран под их бумагу (--fj-plate), а не под общий --paper —
   иначе на стыке был бы виден прямоугольник кропа.
   Область действия — только сетка каталога (#grid), чтобы не задеть
   карусель на главной, использующую тот же .card. ========================= */
[data-site-variant="field_journal"] #grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:26px; }

[data-site-variant="field_journal"] #grid .card {
  --fj-plate: #F3EEE5;
  background:var(--s-raise);
  border:1px solid var(--wax-deep);
  border-radius:var(--r-l);
  box-shadow:none;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
[data-site-variant="field_journal"] #grid .card.clickable:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 0 -8px var(--wax-deep), 0 14px 22px -18px rgb(var(--shadow-rgb) / .35);
}
[data-site-variant="field_journal"] #grid .card.clickable:hover .card__img .vessel { transform:none; }

.fj-plate {
  /* Кроп — растровая иллюстрация на светлой бумаге и тёмной темой не
     перекрашивается, поэтому переменные ниже фиксируют «светлый» набор для
     всего, что лежит поверх неё (тексты, рамка бейджа, тень банки) —
     иначе --ink-soft и переключился бы на тёмный текст на светлой плашке. */
  --ink-soft:#5A4C3A; --ink-faint:#8A7B66; --wax-deep:#DAD2C0; --s-raise:#FDFCF9;
  --shadow-rgb:36 28 18; --meadow:#5E6B4A; --honey-deep:#A85E06;
  background:
    radial-gradient(120% 90% at 30% 8%, color-mix(in srgb, var(--fj-plate) 100%, transparent), transparent 60%),
    var(--fj-plate);
  aspect-ratio:4/3.1;
  padding:18px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:1fr;
  column-gap:10px;
  align-items:start;
}
.fj-plate__specimen {
  grid-column:1; grid-row:1;
  align-self:start; justify-self:start;
  height:80%; width:auto; max-width:100%; aspect-ratio:1/2;
  object-fit:contain; object-position:left top;
  -webkit-mask-image:radial-gradient(ellipse 82% 78% at 38% 34%, #000 55%, transparent 92%);
  mask-image:radial-gradient(ellipse 82% 78% at 38% 34%, #000 55%, transparent 92%);
}
.fj-plate__jar {
  grid-column:1 / -1; grid-row:1 / -1;
  justify-self:center; align-self:end;
  height:86%; width:auto; max-width:60%; aspect-ratio:2/3;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgb(var(--shadow-rgb) / .22));
}
.fj-plate__locate {
  grid-column:2; grid-row:1;
  align-self:start; justify-self:end;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:64px;
}
.fj-plate__map { width:44px; height:44px; overflow:visible; }
.fj-plate__map rect { fill:none; stroke:var(--ink-faint); stroke-width:1; opacity:.55; }
.fj-plate__map path:not(.fj-plate__pin) { fill:none; stroke:var(--ink-faint); stroke-width:.75; opacity:.4; }
.fj-plate__pin { fill:var(--field-blue, #476B83); }
.fj-plate__pin-halo { fill:var(--field-blue, #476B83); opacity:.16; }
.fj-plate__point {
  font:600 10.5px/1.25 var(--font-ui); letter-spacing:.01em; color:var(--ink-soft);
  text-align:center; text-wrap:balance;
}
.fj-plate .avail {
  position:absolute; top:auto; right:16px; bottom:16px; left:auto;
  background:color-mix(in srgb, var(--s-raise) 92%, transparent);
  border:1px solid var(--wax-deep);
}

[data-site-variant="field_journal"] #grid .card__body { padding:20px 22px 22px; }
[data-site-variant="field_journal"] #grid .card__body h3 {
  font-family:var(--font-read); font-weight:600; font-size:21px;
  position:relative; display:inline-block; padding-bottom:8px;
}
[data-site-variant="field_journal"] #grid .card__body h3::after {
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--honey);
}
.fj-hcard__flora { font:italic 400 13.5px/1.4 var(--font-read); color:var(--ink-soft); margin-top:10px; }
.fj-hcard__harvest { font-style:normal; font-family:var(--font-ui); font-size:11.5px; color:var(--ink-faint); }
[data-site-variant="field_journal"] #grid .card__desc { font-family:var(--font-ui); }
[data-site-variant="field_journal"] #grid .card__foot .more {
  font:600 13.5px/1 var(--font-ui); color:var(--on-honey); background:var(--honey);
  padding:9px 16px; border-radius:var(--r-pill); box-shadow:none;
  transition:transform .18s var(--ease-out);
}
[data-site-variant="field_journal"] #grid .card.clickable:hover .card__foot .more { transform:translateY(-2px); }

[data-site-variant="field_journal"] #sortFilter .fchip,
[data-site-variant="field_journal"] #packFilter .fchip {
  border:1.5px solid var(--wax-deep); background:var(--s-raise); border-radius:var(--r-pill);
}
[data-site-variant="field_journal"] .fchip[aria-pressed="true"] {
  background:color-mix(in srgb, var(--honey) 15%, var(--s-raise));
  color:var(--ink); border-color:var(--honey);
  transform:translateY(-2px);
}

@media(max-width:560px){
  .fj-plate { aspect-ratio:4/3.6; padding:14px; }
  .fj-plate__locate { width:52px; }
  .fj-plate__map { width:36px; height:36px; }
}

/* ==========================================================================
   Подарочный сертификат — ботанический край и соты из crops/cards/gift-
   certificate-card-reference.png поверх уже готового .cert (main.css),
   вместо пустого CSS-поля. Один слой на каждый мотив, без наложения. ====== */
[data-site-variant="field_journal"] .cert__paper { padding-left:80px; }
[data-site-variant="field_journal"] .cert__botanical {
  position:absolute; left:10px; top:10px; bottom:10px; width:60px;
  object-fit:cover; object-position:left center; z-index:1;
  -webkit-mask-image:linear-gradient(to right, #000 55%, transparent 96%);
  mask-image:linear-gradient(to right, #000 55%, transparent 96%);
}
[data-site-variant="field_journal"] .cert__comb {
  position:absolute; right:14px; top:14px; width:92px; height:auto; z-index:1; opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 60% 40%, #000 45%, transparent 92%);
  mask-image:radial-gradient(ellipse 78% 78% at 60% 40%, #000 45%, transparent 92%);
}
@media(max-width:560px){
  [data-site-variant="field_journal"] .cert__paper { padding-left:60px; }
  [data-site-variant="field_journal"] .cert__botanical { width:44px; }
  [data-site-variant="field_journal"] .cert__comb { width:70px; }
}

/* ---------- активация подарка: восковая печать из того же референса,
   код остаётся обычным полем — формат HD-2026-XXXX не режется на 6 ячеек ---------- */
[data-site-variant="field_journal"] .activate-wrap { max-width:480px; text-align:center; }
[data-site-variant="field_journal"] .activate-seal { display:block; width:104px; height:auto; margin:0 auto 8px; }
[data-site-variant="field_journal"] .activate-form { display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
[data-site-variant="field_journal"] .activate-form .inp { flex:1 1 220px; max-width:260px; }

/* ==========================================================================
   Конфигуратор улья — references/05-hive-selector.png: список участков,
   иллюстрированная карта, сводка — три колонки вместо двух. Карта не
   переключается по участку (в модели нет координат под три реальных
   точка) — общая, поясняющая иллюстрация, не интерактивный геопикер. ====== */
[data-site-variant="field_journal"] #calc {
  grid-template-columns:minmax(0,.86fr) minmax(220px,.72fr) minmax(0,.92fr);
}
[data-site-variant="field_journal"] #calc .loc {
  grid-template-columns:72px 1fr auto; padding:12px 16px 12px 12px;
}
[data-site-variant="field_journal"] .loc__map {
  position:relative; width:72px; height:58px; border-radius:var(--r-s); overflow:hidden;
  border:1px solid var(--wax-deep);
}
[data-site-variant="field_journal"] .loc__map img { display:block; width:100%; height:100%; object-fit:cover; }
[data-site-variant="field_journal"] .loc__dot {
  position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:0;
  background:var(--s-raise); border:none;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform:translate(-50%,-50%); box-shadow:0 0 0 1.5px var(--ink-faint);
  transition:background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
[data-site-variant="field_journal"] #calc .loc[aria-pressed="true"] .loc__dot {
  background:var(--honey); box-shadow:0 0 0 1.5px var(--honey-deep), 0 0 0 5px color-mix(in srgb, var(--honey) 25%, transparent);
}
[data-site-variant="field_journal"] .calc__map {
  display:block; width:100%; height:auto; border-radius:var(--r-l);
  border:1px solid var(--wax-deep); position:sticky; top:calc(var(--nav-h) + 20px);
}
@media(max-width:960px){
  [data-site-variant="field_journal"] #calc { grid-template-columns:1fr; }
  [data-site-variant="field_journal"] .calc__map { position:static; max-width:420px; margin:0 auto; }
}
@media(max-width:420px){
  [data-site-variant="field_journal"] #calc .loc { grid-template-columns:56px 1fr auto; }
  [data-site-variant="field_journal"] .loc__map { width:56px; height:46px; }
}

/* ---------- Тёмная тема ----------
   Иллюстрации варианта — растр на светлой бумаге без прозрачности. Края уже
   растворены масками, но на тёмном фоне середина светилась бы светлым пятном,
   поэтому в тёмной теме приглушаем их яркость и слегка снимаем насыщенность.
   Трогаем только эти картинки: фотографии пасеки должны остаться как есть. */
[data-theme="dark"] [data-site-variant="field_journal"] .field-hero-margin,
[data-theme="dark"] [data-site-variant="field_journal"] .field-hero-comb,
[data-theme="dark"] [data-site-variant="field_journal"] .cert__botanical,
[data-theme="dark"] [data-site-variant="field_journal"] .cert__comb,
[data-theme="dark"] [data-site-variant="field_journal"] .activate-seal,
[data-theme="dark"] [data-site-variant="field_journal"] .calc__map,
[data-theme="dark"] [data-site-variant="field_journal"] .loc__map img,
[data-theme="dark"] [data-site-variant="field_journal"] .fj-plate {
  filter: brightness(.78) saturate(.88) contrast(1.04);
}