/* tokens.css */
/* pohuliaev.com — tokens. Dark mode later = one :root[data-theme="dark"] / @media block overriding the colour group only. */
:root {
  /* Colour */
  --c-bg:          #F6F8F8; /* page: bleached, cool white — hard Atlantic light */
  --c-surface:     #EDF1F1; /* facts panel rows, callouts: pale wet-sand grey */
  --c-text:        #1B2326; /* body text: dark wet rock (15.6:1 on bg) */
  --c-text-muted:  #56646A; /* dates, captions, labels (5.9:1 on bg, 5.4:1 on surface) */
  --c-border:      #CCD5D7; /* hairlines, table rules */
  --c-accent:      #2F6360; /* grey-green Atlantic water: links, active nav, rating marks (6.6:1) */
  --c-accent-soft: #E0EBE8; /* callout and tag backgrounds, filled-month tint */
  --c-warn:        #7A4B2E; /* «Що погано» heading: kelp brown, a colour not an alarm (7.4:1) */
  /* added */
  --c-rule:        #BFD0CD; /* notebook ruling in the verdict callout */
  --c-sand:        #E9E6DC; /* image placeholders only */
  --c-focus:       #1B2326; /* focus ring */
  /* The three below are not in .design/src/styles/tokens.css — the mockup uses these values but
     the design-system tokens don't define them. Keep them when re-syncing tokens.css from .design/. */
  --c-text-soft:   #3A474C; /* lede paragraph under h1 (mockup) */
  --c-sand-2:      #E1DED3; /* second stripe of the image placeholder (mockup) */
  --c-on-accent:   #FFFFFF; /* text on filled month cells */

  /* Type */
  --font-text:    "Literata", "PT Serif", Georgia, "Times New Roman", serif;
  --font-display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* added: labels, facts, dates */
  --fs-step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-step-0:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17 → 19px body */
  --fs-step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-step-2:  clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --fs-step-3:  clamp(2.125rem, 1.7rem + 2vw, 3.25rem);
  --lh-body:  1.62;  /* Cyrillic is vertical-heavy; more air than Latin needs */
  --lh-tight: 1.12;

  /* Space (4px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* Layout */
  --measure:   60ch;   /* Ukrainian words run long; shorter than 66ch */
  --w-content: 40rem;
  --w-wide:    72rem;
  --w-rail:    13rem;  /* added: metadata rail on wide screens */
  --radius:    2px;    /* nearly square: paper, not app */
  --tap:       44px;   /* added */
}

/* typography.css */
/*
  Fonts (all SIL Open Font License 1.1, self-hosted from src/assets/fonts/):
  - Literata (TypeTogether for Google) — body. Variable opsz/wght, roman + italic.
  - Commissioner (Kostas Bartsokas) — h1/h2, wordmark, nav. Variable wght.
  - IBM Plex Mono — kind labels, dates, facts labels. 400/500.
  Ukrainian check: each Cyrillic file covers U+0400–045F (є і ї Є І Ї) and U+0490–0491 (ґ Ґ).
  Verified by rendering «Щойно повернувся з Фалезії — ґедзі, їжа, лінь і жодної риби» in all three faces with no fallback.
*/
/* Cyrillic subset */
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-cyr-var.33ca48972e.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-cyr-var-italic.f23806cc60.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Commissioner"; src: url("/assets/fonts/commissioner-cyr-var.ad254e46b7.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-cyr-400.7b59d6bf7f.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-cyr-500.d524dc8ff6.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Latin subset (Portuguese place names, gear models) */
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-lat-var.55c10c2e81.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-lat-var-italic.07cc4f2be8.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Commissioner"; src: url("/assets/fonts/commissioner-lat-var.737ec8f280.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-lat-400.c36f509c0a.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-lat-500.a76f53ca66.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-text); font-size: var(--fs-step-0); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
h1, h2 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--fs-step-3); font-weight: 650; }
h2 { font-size: var(--fs-step-2); font-weight: 600; margin-block: var(--sp-10) var(--sp-3); }
h3 { font-family: var(--font-text); font-size: var(--fs-step-1); font-weight: 600; line-height: 1.3; margin-block: var(--sp-8) var(--sp-2); }
p, li { text-wrap: pretty; hyphens: auto; } /* html lang="uk" is required for hyphenation */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.label, time, .facts dt { font-family: var(--font-mono); font-size: var(--fs-step--1); letter-spacing: 0.02em; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* components.css */
/* Reusable components. Values follow the mockup's inline styles; colours only via tokens. */

/* ── BaseLayout ── */
.skip { position: absolute; left: var(--sp-4); top: -100px; background: var(--c-text); color: var(--c-bg); padding: var(--sp-3) var(--sp-4); }
.skip:focus { top: var(--sp-2); }
.wrap { max-width: var(--w-wide); margin-inline: auto; padding-inline: clamp(var(--sp-4), 4vw, var(--sp-10)); }
.glyph { color: var(--c-text); width: 1ch; }

/* ── Header ── */
.site-header { border-bottom: 1px solid var(--c-border); }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-8); padding-block: var(--sp-3); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--sp-3); min-height: var(--tap); padding-top: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--c-text); text-decoration: none; }
.wordmark:hover { color: var(--c-text); }
.wordmark__coords { font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0; color: var(--c-text-muted); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: flex; align-items: center; min-height: var(--tap); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--c-text); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--c-border); }
.site-nav a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--c-border); }
.site-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-8); padding-block: var(--sp-6) var(--sp-12); font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); }
.site-footer__copy { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── EntryCard — kind carried by glyph + word + kind-specific meta, never colour alone ── */
.entry { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-8); padding: var(--sp-5) 0; border-top: 1px solid var(--c-border); }
.entry__rail { flex: 1 1 10rem; max-width: 11rem; display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5; color: var(--c-text-muted); }
.entry__kind { display: flex; gap: var(--sp-2); align-items: baseline; }
.entry__date { padding-left: calc(1ch + var(--sp-2)); font-size: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.entry__body { flex: 999 1 18rem; min-width: 0; }
.entry__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-step-1); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.entry[data-kind="note"] .entry__title { font-family: var(--font-text); font-style: italic; }
.entry__title a { color: var(--c-text); text-decoration: none; }
.entry__title a::after { content: ""; position: absolute; inset: 0; } /* whole card tappable */
.entry:hover .entry__title a { text-decoration: underline; text-decoration-color: var(--c-accent); }
.entry__desc { margin: var(--sp-1) 0 0; max-width: var(--measure); hyphens: manual; } /* mockup: short feed lines unhyphenated */
.entry__meta { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); }

/* ── TagList ── */
.tags { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); list-style: none; margin: 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-border); font-family: var(--font-mono); font-size: 0.875rem; }
.tags--spaced { margin-top: var(--sp-10); }
.tags a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.tags a:hover { text-decoration: underline; }
.tags__hash { color: var(--c-text-muted); }

/* ── Detail (spot/gear/…): rail + article ── */
.detail { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); padding: var(--sp-8) 0 var(--sp-16); }
.rail { flex: 1 1 11rem; max-width: var(--w-rail); display: flex; flex-direction: column; gap: 0.15rem; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5; color: var(--c-text-muted); }
.rail__kind { display: flex; gap: var(--sp-2); }
.rail__link { color: inherit; }
.detail__article { flex: 999 1 20rem; min-width: 0; max-width: var(--w-content); }
.detail__title { margin: 0; font: 650 var(--fs-step-3)/1.08 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: var(--sp-3) 0 0; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); color: var(--c-text-soft); }

/* ── FactsPanel ── */
.facts { margin: 0; background: var(--c-surface); border-radius: var(--radius); }
.facts > div { display: flex; flex-wrap: wrap; gap: 0.1rem var(--sp-6); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-bg); }
.facts dt { flex: 0 0 9.5rem; padding-top: 0.15em; font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); }
.facts dd { flex: 1 1 14rem; margin: 0; font-size: 1rem; line-height: 1.5; }

/* ── MonthStrip (season availability) ── */
.season { margin-top: var(--sp-5); }
.season__head { margin: 0 0 var(--sp-2); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); }
.months { display: flex; flex-wrap: wrap; gap: 3px; }
.months__half { flex: 1 1 15rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; list-style: none; margin: 0; padding: 0; }
.months__m { display: grid; place-items: center; min-height: var(--tap); font-family: var(--font-mono); font-size: 0.875rem; border-radius: var(--radius); border: 1px solid var(--c-border); color: var(--c-text-muted); font-weight: 400; }
.months__m[data-good] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-weight: 500; }

/* ── Prose (markdown body) — base .prose lives in typography.css ── */
.prose { margin-top: var(--sp-10); hyphens: auto; }
.prose p { margin: 1em 0 0; }
.prose > :first-child { margin-top: 0; }

/* ── Gallery ── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-6) var(--sp-4); margin: var(--sp-10) 0; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: var(--sp-2); font-size: 0.9375rem; line-height: 1.45; color: var(--c-text-muted); }
.ph { aspect-ratio: 4/3; border-radius: var(--radius); background: repeating-linear-gradient(135deg, var(--c-sand) 0 10px, var(--c-sand-2) 10px 20px); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text-muted); padding: 0 var(--sp-4); text-align: center; }

/* ── Verdict callout (gear) ── */
.verdict { margin: var(--sp-8) 0; padding: var(--sp-5) var(--sp-5) var(--sp-6); background: var(--c-surface); border-top: 3px solid var(--c-text); border-radius: 0 0 var(--radius) var(--radius); }
.verdict__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.verdict__label { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--c-text-muted); }
.verdict__text { margin: var(--sp-3) 0 0; font-style: italic; font-size: var(--fs-step-1); line-height: 1.7; max-width: 34em; hyphens: manual; background: repeating-linear-gradient(to bottom, transparent 0 calc(1.7em - 1px), var(--c-rule) calc(1.7em - 1px) 1.7em); } /* mockup: verdict text unhyphenated */
.rating { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-mono); }
.rating__n { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-step-2); line-height: 1; color: var(--c-text); }
.rating__of { font-size: 0.55em; color: var(--c-text-muted); font-weight: 500; }
.rating__marks { color: var(--c-accent); letter-spacing: 0.15em; font-size: 0.9375rem; }

/* ── ProsCons (gear) ── */
.proscons { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-10); margin: var(--sp-10) 0; }
.proscons > section { flex: 1 1 15rem; min-width: 0; }
.proscons h2 { margin: 0 0 var(--sp-1); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); font-size: var(--fs-step-1); line-height: 1.2; }
.cons h2 { color: var(--c-warn); }
.proscons ul { list-style: none; margin: 0; padding: 0; }
.proscons li { display: grid; grid-template-columns: 1.25rem 1fr; padding: var(--sp-2) 0; line-height: 1.5; hyphens: manual; } /* mockup: pros/cons items unhyphenated */
.pros li::before { content: "+"; font-family: var(--font-mono); color: var(--c-text-muted); }
.cons li::before { content: "\2212"; font-family: var(--font-mono); color: var(--c-text-muted); }

/* site.css */
/* Page-level layout. Values follow the mockup's inline styles; colours only via tokens. */
body { margin: 0; }

/* ── Home ── */
.home { padding: var(--sp-10) 0 var(--sp-16); max-width: 52rem; }
.home__tagline { margin: 0; max-width: 30em; font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; hyphens: manual; }
.home__byline { margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); text-wrap: wrap; }

/* Mono section label ("Останні записи", later "Коротко"): an h2 dressed as a label. */
.section-label { margin: 3.5rem 0 var(--sp-2); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; line-height: var(--lh-body); letter-spacing: 0.02em; color: var(--c-text-muted); text-wrap: wrap; }
.section-label--tight { margin: 0 0 var(--sp-2); }

/* ── Spot ── */
.spot-facts { margin-top: var(--sp-8); }

/* ── Gear — body starts with an h2 right after pros/cons ── */
.prose > h2:first-child { margin-top: 0; }

/* ── Index pages (spots/gear/blog/notes/tags/about/contacts/404) — the Home column ── */
.index { padding: 2.5rem 0 4rem; max-width: 52rem; }
.index__title { margin: 0 0 1rem; font: 650 var(--fs-step-3)/1.08 var(--font-display); letter-spacing: -0.015em; }
.index__group .section-label { margin-top: 2.5rem; }

/* ── Notes (river of anchors) ── */
.note { padding: 1.25rem 0; border-top: 1px solid var(--c-border); scroll-margin-top: 1rem; }
.note:target { background: var(--c-accent-soft); padding-inline: 1rem; }
.note__meta { margin: 0; font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text-muted); }
.note__title { margin: 0.25rem 0 0; font-family: var(--font-text); font-style: italic; font-weight: 600; font-size: var(--fs-step-1); }
.prose--note, .prose--page { margin-top: 0.75rem; }

/* ── Tags index ── */
.tag-index { list-style: none; padding: 0; columns: 14rem; font-family: var(--font-mono); }
.tag-index__n { color: var(--c-text-muted); }