/* Flower department guides: one reading column, clear before / during / after blocks. LES earthy style. */
:root {
  --bg: #F1EFE7; --surface: #FFFDF8; --fg: #1B1A15; --muted: #625D52; --line: rgba(31,61,43,.16);
  --pine: #1F3D2B; --accent: #2F6B4A; --ochre: #A9772A; --red: #9A3B2E; --blue: #2E5E7E;
  --before: #E3EBE0; --during: #F6E4D6; --after: #DFE8EE; --now: #F3E9CC;
  --valley: linear-gradient(120deg, #1F3D2B 0%, #2F6B4A 28%, #6E9B4E 55%, #C7B26A 80%, #E7DDB4 100%);
  --sans: "Archivo", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130F; --surface: #1D1B16; --fg: #ECE8DD; --muted: #A39E90; --line: rgba(200,220,200,.14);
    --accent: #8FC7A0; --ochre: #D9A85A; --red: #E08A7B; --blue: #8DB8D6;
    --before: #1F2E24; --during: #33241C; --after: #1C2A33; --now: #2E2615; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14130F; --surface: #1D1B16; --fg: #ECE8DD; --muted: #A39E90; --line: rgba(200,220,200,.14);
  --accent: #8FC7A0; --ochre: #D9A85A; --red: #E08A7B; --blue: #8DB8D6;
  --before: #1F2E24; --during: #33241C; --after: #1C2A33; --now: #2E2615; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--sans); }
.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); overflow-wrap: anywhere; }
ul, ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
code { font-family: var(--mono); font-size: .85em; }
blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; font-size: .95rem; }
.label { font: 500 .78rem/1.3 var(--mono); color: var(--muted); letter-spacing: .02em; }
.muted { color: var(--muted); }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 5; background: var(--pine); color: #F4F1E6; border-bottom: 4px solid transparent; border-image: var(--valley) 1; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.bar a { color: #F4F1E6; text-decoration: none; }
.mark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-style: italic; font-size: .95rem; }
@media (max-width: 560px) { .mark span { display: none; } }
.crumbs { display: flex; gap: 8px; align-items: center; font: 500 .82rem var(--mono); color: #CFDAC9; flex-wrap: wrap; justify-content: flex-end; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }

main.wrap { display: grid; gap: 20px; padding-block: 28px 40px; }
.head { display: grid; gap: 10px; }
.head h1 { font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 500; font-style: italic; letter-spacing: -.015em; }
.head h1 .local { display: block; font-size: .5em; font-style: normal; color: var(--muted); margin-top: 6px; letter-spacing: 0; }
.head p { font-size: 1.05rem; }
.switch { font-size: .95rem !important; color: var(--muted); }

/* Root: choose a country */
.countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; }
.country { display: grid; gap: 4px; padding: 26px 22px; border-radius: 20px; text-decoration: none; color: #F4F1E6; background: var(--valley); min-height: 170px; align-content: end; }
.country strong { font-size: 1.7rem; font-weight: 500; font-style: italic; }
.country .local { font-size: 1rem; opacity: .85; }
.country em { font-style: normal; font-weight: 600; margin-top: 8px; }

/* Country index */
.overview { background: var(--now); border-radius: 16px; padding: 4px 18px; }
.overview[open] { padding-bottom: 18px; }
.overview > summary { cursor: pointer; font-weight: 600; padding: 14px 0; }
.overview h3 { font-size: 1.05rem; margin: 14px 0 8px; }
.overview ul, .overview ol, .overview p { margin-bottom: 8px; }
.group { display: grid; gap: 12px; }
.group h2 { font: 500 .8rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; }
.card { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); align-content: start; }
.card:hover { border-color: var(--accent); }
.card strong { font-weight: 600; font-size: 1.05rem; }
.card span { color: var(--muted); font-size: .92rem; line-height: 1.45; }

/* A guide */
.guide { display: grid; gap: 16px; }
.jump { position: sticky; top: 60px; z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; background: var(--bg); scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); font-size: .9rem; font-weight: 600; }
.box { border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; border: 1px solid var(--line); background: var(--surface); }
.box h2 { font: 500 .8rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sec { border-radius: 18px; padding: 20px 18px 22px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); }
.sec h2 { font-size: 1.45rem; font-weight: 500; font-style: italic; }
.sec h3 { font-size: 1.05rem; font-weight: 600; margin-top: 6px; }
.sec h4 { font-size: 1rem; font-weight: 600; color: var(--muted); }
.sec p strong:only-child { display: block; margin-top: 6px; }
.tag { justify-self: start; font: 600 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--accent); }
.sec.now { background: var(--now); border-color: transparent; }
.sec.now .tag { background: var(--ochre); }
.sec.before { background: var(--before); border-color: transparent; }
.sec.during { background: var(--during); border-color: transparent; }
.sec.during .tag { background: var(--red); }
.sec.after { background: var(--after); border-color: transparent; }
.sec.after .tag { background: var(--blue); }
.sec.better .tag { background: var(--pine); }
.check { background: var(--surface); }
.btn { display: inline-flex; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font: 500 .76rem/1.3 var(--mono); color: var(--muted); }
.sources { border-radius: 14px; padding: 4px 16px; border: 1px solid var(--line); font-size: .88rem; }
.sources > summary { cursor: pointer; font-weight: 600; padding: 12px 0; font-size: .95rem; }
.sources[open] { padding-bottom: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pager a { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .95rem; }
.pager a.next { text-align: right; }

.foot { padding-block: 8px 40px; color: var(--muted); font-size: .85rem; }