/* --- Palette -------------------------------------------------------------
   Deep Lapis Lazuli  #0F2C59  glazed madrasah tile
   Warm Terracotta    #C84B31  Silk Road clay and desert sand
   Steppe Gold        #D4A373  grassland and nomadic metalwork
   One accent per country of origin, carried through cards, tiles and tags.
   ------------------------------------------------------------------------ */
:root {
  --paper:      #fbf7f0;
  --paper-2:    #f4ede0;
  --paper-3:    #eae0cd;
  --ink:        #14223a;
  --ink-2:      #4c5c74;
  --ink-3:      #8291a5;
  --line:       #e3d7c1;

  --lapis:      #0f2c59;
  --terracotta: #c84b31;
  --gold:       #d4a373;
  --turquoise:  #1a7387;
  --pomegranate:#8e2c3c;

  --kz: #2c5f8a;  /* Kazakhstan  — steppe sky   */
  --kg: #c0442e;  /* Kyrgyzstan  — terracotta   */
  --uz: #0f2c59;  /* Uzbekistan  — lapis tile   */
  --tj: #3e7059;  /* Tajikistan  — Pamir green  */
  --tm: #9c5b2b;  /* Turkmenistan— carpet ochre */
  --af: #5b7a3c;  /* Afghanistan — Herat olive  */
  --ca: #a32e2e;  /* Canada                     */

  --accent: var(--terracotta);
  --radius: 14px;
  --maxw: 1140px;
  --gap: clamp(1rem, 3vw, 2rem);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 1px 2px rgba(15,44,89,.07), 0 4px 14px rgba(15,44,89,.05);
  --shadow-md: 0 2px 6px rgba(15,44,89,.10), 0 18px 40px rgba(15,44,89,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0d1526;
    --paper-2: #131e33;
    --paper-3: #1c2a44;
    --ink:     #eef2f8;
    --ink-2:   #b3c0d2;
    --ink-3:   #7d8ba1;
    --line:    #26344e;

    --lapis:      #4f7ec0;
    --terracotta: #e4714f;
    --gold:       #e2bb8d;
    --turquoise:  #4fb3c6;
    --pomegranate:#d4667a;

    --kz: #5e9fd0; --kg: #e0705a; --uz: #6d9ede;
    --tj: #6fae86; --tm: #d19255; --af: #94b567; --ca: #d96a6a;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.stack > * + * { margin-top: 1rem; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 62ch; }
.eyebrow {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--terracotta); margin-bottom: .9rem;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand__tag  { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-family: var(--font-body); font-weight: 500; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  text-decoration: none; padding: .5rem .8rem; border-radius: 999px;
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
}
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper-3); font-weight: 600; }

.lang { display: flex; gap: 2px; background: var(--paper-3); padding: 3px; border-radius: 999px; margin-left: .5rem; }
.lang button {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font: 600 .78rem/1 var(--font-body); letter-spacing: .06em;
  padding: .45rem .6rem; border-radius: 999px;
}
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

.nav-toggle {
  display: none; border: 1px solid var(--line); background: var(--paper);
  border-radius: 10px; padding: .45rem .6rem; cursor: pointer; color: var(--ink);
}
@media (max-width: 820px) {
  .nav-toggle { display: block; order: 3; }
  .nav {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: .75rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .7rem .8rem; border-radius: 10px; }
  .site-header__inner { flex-wrap: wrap; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--terracotta); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--terracotta) 85%, #000); }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper-3); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../img/ornament.svg");
  background-size: 120px 120px;
  opacity: .16; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 15% 0%, color-mix(in srgb, var(--saffron) 16%, transparent), transparent 62%),
              radial-gradient(70% 70% at 95% 30%, color-mix(in srgb, var(--turquoise) 18%, transparent), transparent 60%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); }
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--terracotta); }
.hero .lede { margin-top: 1.25rem; }

/* ---------- grid + cards ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
a.card { text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__rule { height: 4px; border-radius: 4px; background: var(--accent); width: 42px; margin-bottom: 1rem; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-2); font-size: .95rem; margin-bottom: 0; }
.card__meta {
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .78rem; color: var(--ink-3);
}

.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.tag--flag { background: var(--paper-3); color: var(--ink-2); border-color: var(--line); }
.badge-placeholder {
  position: absolute; top: .9rem; right: .9rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3); background: var(--paper-3); border: 1px dashed var(--line);
  padding: .2rem .45rem; border-radius: 6px;
}

/* country accent hooks */
[data-country="kz"] { --accent: var(--kz); }
[data-country="kg"] { --accent: var(--kg); }
[data-country="tj"] { --accent: var(--tj); }
[data-country="tm"] { --accent: var(--tm); }
[data-country="uz"] { --accent: var(--uz); }
[data-country="af"] { --accent: var(--af); }
[data-country="ca"] { --accent: var(--ca); }

/* ---------- stylised region map ---------- */
.mapboard {
  display: grid; gap: .6rem; grid-template-columns: repeat(6, 1fr);
  /* every named area must be a rectangle or the whole declaration is invalid */
  grid-template-areas:
    "kz kz kz kz kz kz"
    "tm tm uz uz uz kg"
    "tm tm tj tj tj kg"
    "af af af af af af";
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem;
}
.mapboard__tile {
  border-radius: 10px; padding: .9rem; min-height: 92px; text-decoration: none;
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background .16s ease;
}
.mapboard__tile:hover { background: color-mix(in srgb, var(--accent) 26%, var(--paper)); }
.mapboard__tile b { font-family: var(--font-display); font-size: 1rem; }
.mapboard__tile span { font-size: .75rem; color: var(--ink-2); }
@media (max-width: 620px) {
  .mapboard { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; }
  .mapboard__tile { grid-area: auto !important; }
}

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; }
.filters__group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filters__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-right: .3rem; }
.chip {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: .38rem .85rem; font: 500 .85rem/1.2 var(--font-body); cursor: pointer;
}
.chip:hover { background: var(--paper-3); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.results-count { font-size: .85rem; color: var(--ink-3); margin-bottom: 1rem; }
.empty-state { border: 1px dashed var(--line); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; color: var(--ink-3); }

/* ---------- prose blocks ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; color: var(--ink-2); }
blockquote.pull {
  margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--terracotta);
  background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.note {
  border: 1px solid var(--line); border-left: 4px solid var(--turquoise);
  background: var(--paper-2); border-radius: 0 10px 10px 0; padding: 1rem 1.25rem;
  font-size: .92rem; color: var(--ink-2);
}

/* ---------- form ---------- */
.form { display: grid; gap: 1.1rem; max-width: 620px; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field .hint { font-size: .8rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.checkline { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.checkline input { margin-top: .25rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: 3rem 0 2rem; margin-top: 2rem; }
.site-footer .grid { align-items: start; }
.site-footer h4 { font-family: var(--font-body); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.colophon {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  font-size: .82rem; color: var(--ink-3);
}
.langs-line { display: flex; flex-wrap: wrap; gap: .4rem; }


/* ---------- ikat edging ----------
   A woven band down the outer margins. Decorative only, so it is hidden from
   assistive tech and dropped on narrow screens where there is no margin. */
.ikat-edge {
  position: fixed; top: 0; bottom: 0; width: 26px; z-index: 1; pointer-events: none;
  background: url("../img/ikat.svg") repeat-y center / 26px 156px;
  opacity: .5;
}
.ikat-edge--left  { left: 0; }
.ikat-edge--right { right: 0; transform: scaleX(-1); }
@media (max-width: 1280px) { .ikat-edge { display: none; } }

/* ---------- country motifs ----------
   Original line drawings, tinted by the country accent through a CSS mask so
   one file works in both themes.

   The url() has to be declared *here* rather than passed in from the markup:
   a relative url() inside a custom property resolves against the stylesheet
   that declares it, so an inline `--motif: url(assets/…)` would resolve
   against /assets/css/ and 404. */
[data-country="kz"] .motif { --motif: url("../img/country/kz.svg"); }
[data-country="kg"] .motif { --motif: url("../img/country/kg.svg"); }
[data-country="uz"] .motif { --motif: url("../img/country/uz.svg"); }
[data-country="tj"] .motif { --motif: url("../img/country/tj.svg"); }
[data-country="tm"] .motif { --motif: url("../img/country/tm.svg"); }
[data-country="af"] .motif { --motif: url("../img/country/af.svg"); }
.motif {
  width: 100%; height: 54px; margin-bottom: .9rem;
  background-color: var(--accent);
  -webkit-mask: var(--motif) left center / auto 100% repeat-x;
  mask: var(--motif) left center / auto 100% repeat-x;
  opacity: .85;
}
.mapboard__tile .motif { height: 34px; margin-bottom: .5rem; opacity: .7; }

/* ---------- form status ---------- */
.form-status {
  margin: 0; padding: .85rem 1.1rem; border-radius: 10px; font-size: .92rem;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
}
.form-status--ok {
  background: color-mix(in srgb, var(--turquoise) 14%, transparent);
  border-color: color-mix(in srgb, var(--turquoise) 38%, transparent); color: var(--ink);
}
.form-status--err {
  background: color-mix(in srgb, var(--pomegranate) 13%, transparent);
  border-color: color-mix(in srgb, var(--pomegranate) 38%, transparent); color: var(--ink);
}
.field input[type="file"] {
  padding: .55rem; font-size: .9rem; background: var(--paper-2);
}

/* ---------- published essays ---------- */
.essay__title { max-width: 20ch; }
.essay__byline {
  font-size: .85rem; letter-spacing: .04em; color: var(--ink-3);
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem;
}
.essay__body { font-size: 1.06rem; line-height: 1.8; }
.essay__body > p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.1em; line-height: .84;
  float: left; margin: .06em .09em 0 0; color: var(--terracotta);
}
.essay__body blockquote {
  margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--gold);
  color: var(--ink-2); font-style: italic;
}
.essay__body table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.essay__body td, .essay__body th { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.essay__rights { margin-top: 2.5rem; }

/* ---------- editorial: reading progress ---------- */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
  z-index: 60; transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

/* ---------- editorial: essay layout with a sticky contents rail ---------- */
.essay-layout { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .essay-layout { grid-template-columns: 200px minmax(0, 1fr); } }

.toc { position: sticky; top: 92px; font-size: .88rem; }
.toc__label {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: .75rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc li.toc--sub a { padding-left: 1.5rem; font-size: .84rem; }
.toc a {
  display: block; padding: .35rem 0 .35rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; line-height: 1.35;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--terracotta); font-weight: 600; }
@media (max-width: 999px) {
  .toc { position: static; margin-bottom: 2rem; padding: 1rem 1.25rem; background: var(--paper-2);
         border: 1px solid var(--line); border-radius: var(--radius); }
}

/* ---------- editorial: featured story ---------- */
.featured {
  display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm);
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease;
}
.featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (min-width: 820px) { .featured { grid-template-columns: 300px minmax(0, 1fr); } }
.featured__art {
  background: color-mix(in srgb, var(--accent) 16%, var(--paper-2));
  border-bottom: 1px solid var(--line); min-height: 180px;
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
@media (min-width: 820px) { .featured__art { border-bottom: 0; border-right: 1px solid var(--line); } }
.featured__art .motif { height: 90px; margin: 0; }
.featured__text { padding: clamp(1.5rem, 3vw, 2.25rem); }
.featured__text h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .6rem; }
.featured__text p { color: var(--ink-2); margin-bottom: 0; }
.featured__kicker {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-bottom: .75rem;
}

/* ---------- editorial: archive with a sidebar ---------- */
.with-rail { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .with-rail { grid-template-columns: minmax(0, 1fr) 260px; } }
.rail { display: grid; gap: 1rem; }
@media (min-width: 980px) { .rail { position: sticky; top: 92px; } }
.rail__box { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; background: var(--paper-2); }
.rail__box h3 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em;
                text-transform: uppercase; color: var(--ink-3); margin-bottom: .85rem; }
.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__list li { margin-bottom: .4rem; }
.rail__list a {
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
  color: var(--ink-2); font-size: .9rem; padding: .25rem 0;
}
.rail__list a:hover { color: var(--ink); }
.rail__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); flex: none; }

/* ---------- editorial: related stories ---------- */
.related { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 2.5rem; }
.related h2 { font-size: 1.25rem; }


/* ---------- flags ----------
   Used for identification — map tiles, country tags, the archive rail. The
   ornament motifs stay for decoration, where a flag would be the wrong register.
   Drawn by tools/make-flags.py; regenerate rather than editing the SVGs. */
.flag {
  display: inline-block; flex: none;
  /* Fixed height, natural width. These flags run from 2:1 (Uzbekistan) to 2:3
     (Turkmenistan); forcing them into one box and cropping would cut the
     hoist-side emblems clean off. */
  height: 16px; width: auto; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 34, 58, .22);
  vertical-align: -3px;
  /* inside a column flexbox the default `stretch` would pull these to the full
     width of the tile, squashing the proportions back out of shape */
  align-self: flex-start;
}
@media (prefers-color-scheme: dark) { .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); } }
.flag--lg { height: 26px; width: auto; border-radius: 3px; }
.mapboard__tile .flag { margin-bottom: .5rem; }
.tag .flag { margin-right: .1rem; }

/* ---------- craft photographs ----------
   Objects, not people: on this site a photograph of a woman would read as a
   contributor. Credits under the grid are a licence condition for the CC BY
   and CC BY-SA images, not decoration — do not remove them. */
.craft-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.craft {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
/* direct child only — the caption also contains an <img>, the country flag */
.craft > img {
  display: block; width: 100%; height: 210px; object-fit: cover;
  background: var(--paper-3);
  border-bottom: 3px solid var(--accent);
}
.craft figcaption { padding: 1rem 1.15rem 1.25rem; }
.craft__country {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  margin-bottom: .35rem;
}
.craft__note { display: block; font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.craft-credits {
  margin-top: 1.75rem; font-size: .78rem; color: var(--ink-3); line-height: 1.7;
}
.craft-credits a { color: var(--ink-3); }
.craft-credits a:hover { color: var(--ink); }