/* ═══════════════════════════════════════════════════════════════════════════
   flag2vec — printed-atlas substrate.

   The page is paper. The interactive scene is a plate inset into it: a dark
   rectangle with a hairline frame, a plate number, and a caption, the way a
   figure sits in a book. Everything else is type, rules, and one ink.

   Rules of the house: no gradients, no glass, no glow, no pill buttons, and
   nothing rounder than 2px. Emphasis comes from size, weight, and space.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing: border-box }
html,body{ margin:0; padding:0 }

:root{
  /* Paper */
  --paper:      #f7f5f0;
  --paper-2:    #efece4;
  --ink:        #17171b;
  --ink-2:      #4a4952;
  --ink-3:      #86838d;
  --rule:       #d9d4c8;
  --rule-2:     #e8e4da;
  --accent:     #b4462f;   /* printer's red — the only accent on paper */

  /* Plate (the dark stage and its overlays) */
  --plate:      #14141a;
  --plate-2:    #1c1c24;
  --plate-ink:  #ebe9e4;
  --plate-ink-2:#a5a2ad;
  --plate-ink-3:#6d6a77;
  --plate-rule: #2e2e39;
  --plate-accent:#e0714f;

  /* Categorical inks — one considered set, used by the scene, the legend,
     and the filter chips alike. Separation comes from hue *and* value, not
     from cranking saturation on fifteen hues. Mirrored in js/app.js. */
  --c-tradition-nordic_cross:        #1f6fb2;
  --c-tradition-saltire:             #7ba7ce;
  --c-tradition-british_ensign:      #23356b;
  --c-tradition-stars_stripes:       #5b7fc7;
  --c-tradition-pan_slavic:          #7a4fa3;
  --c-tradition-communist_red:       #c0392b;
  --c-tradition-latin_charge:        #e07a3f;
  --c-tradition-pan_african:         #c9a227;
  --c-tradition-pan_arab:            #2e7d5b;
  --c-tradition-horizontal_tricolor: #6fa98a;
  --c-tradition-vertical_tricolor:   #b0567f;
  --c-tradition-star_crescent:       #157f73;
  --c-tradition-solid_emblem:        #8c3b4a;
  --c-tradition-heraldic:            #a8785a;
  --c-tradition-japanese_geometric:  #d08aa0;
  --c-tradition-swiss_canton:        #9e2b25;
  --c-tradition-us_state_seal:       #7f6a3c;
  --c-tradition-unique:              #8a8a85;

  --c-region-Africa:   #c9a227;
  --c-region-Americas: #e07a3f;
  --c-region-Asia:     #c0392b;
  --c-region-Europe:   #1f6fb2;
  --c-region-Oceania:  #2e7d5b;
  --c-region-Mars:     #b4462f;

  --c-kind-sovereign:   #1f6fb2;
  --c-kind-subdivision: #a8785a;
  --c-kind-historical:  #c9a227;
  --c-kind-mars:        #b4462f;

  --ff-display: "Fraunces", "Charter", Georgia, serif;
  --ff-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --col: 1360px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: var(--ink); text-decoration: none }
button{ font-family: inherit; cursor: pointer }
::selection{ background: var(--accent); color: var(--paper) }

.mono{ font-family: var(--ff-mono); font-size: .9em }

/* Small-caps mono label — the workhorse of every piece of furniture here. */
.plate-no,
.mast__spec,
.mast__nav,
.title__over,
.find__no,
.page-foot{
  font-family: var(--ff-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─── Masthead ─────────────────────────────────────────────────────────── */
.mast{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .9rem var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.mast__brand{
  font-family: var(--ff-display);
  font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.02em;
}
.mast__spec{ color: var(--ink-3); flex: 1 }
.mast__nav{ display: flex; gap: 1.4rem; flex-wrap: wrap }
.mast__nav a{ white-space: nowrap }
.mast__nav a{ color: var(--ink-2) }
.mast__nav a:hover{ color: var(--accent) }
.mast__nav .ext{ color: var(--ink-3) }
@media (max-width: 820px){ .mast__spec{ display: none } }

/* ─── Title page ───────────────────────────────────────────────────────── */
.title{
  max-width: var(--col); margin: 0 auto;
  padding: clamp(4rem, 10vw, 8.5rem) var(--pad) clamp(2.5rem, 5vw, 4rem);
}
.title__over{ color: var(--accent); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) }
.title__h{
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 18ch;
  text-wrap: balance;
}
.title__h em{ font-style: italic; font-weight: 400 }
.title__dek{
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  text-wrap: pretty;
}
.title__dek em{ color: var(--ink); font-style: italic }

.colophon{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.colophon > div{ padding: .9rem 1.25rem .9rem 0 }
.colophon > div + div{ padding-left: 1.25rem; border-left: 1px solid var(--rule-2) }
.colophon dt{
  font-family: var(--ff-mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .35rem;
}
.colophon dd{
  margin: 0;
  font-size: .875rem; line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 860px){
  .colophon{ grid-template-columns: 1fr 1fr }
  .colophon > div:nth-child(odd){ padding-left: 0; border-left: none }
  .colophon > div:nth-child(n+3){ border-top: 1px solid var(--rule-2) }
}

/* ─── Plate I · the specimen strip ─────────────────────────────────────── */
.specimen{ margin: clamp(2.5rem, 5vw, 4.5rem) 0 0 }
.specimen__strip{
  overflow: hidden;
  height: 104px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
#hero-strip{
  display: flex; gap: 26px; height: 100%; align-items: center;
  padding: 0 26px;
  animation: marquee 110s linear infinite;
  will-change: transform;
}
#hero-strip img{
  height: 58px; width: auto; flex-shrink: 0;
  border: 1px solid var(--rule);
}
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ #hero-strip{ animation: none } }

.specimen figcaption{
  max-width: var(--col); margin: 0 auto;
  padding: .85rem var(--pad) 0;
  display: flex; align-items: baseline;
  font-size: .875rem; line-height: 1.5;
  color: var(--ink-3);
}
.specimen figcaption .cap-text{ max-width: 62ch }
.plate-no{ color: var(--accent); margin-right: .9rem }

/* ─── Plate II · the atlas ─────────────────────────────────────────────── */
.plate{
  max-width: var(--col); margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding: 0 var(--pad);
  scroll-margin-top: 64px;
}
.plate__rule{
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--ink);
}
.plate__hint{
  font-family: var(--ff-mono);
  font-size: .6875rem; letter-spacing: .08em;
  color: var(--ink-3);
}
.plate__cap{
  padding: .85rem 0 0;
  max-width: 62ch; margin: 0;
  font-size: .9375rem; line-height: 1.5;
  color: var(--ink-2);
  border-top: 1px solid var(--rule-2);
  margin-top: .85rem;
}

#canvas-wrap{
  position: relative;
  margin-top: 1.25rem;
  height: min(80vh, 880px);
  min-height: 580px;
  background: var(--plate);
  border: 1px solid var(--ink);
  overflow: hidden;
  color: var(--plate-ink);
}
#scene{ display: block; width: 100%; height: 100% }
#canvas-wrap:fullscreen{ margin: 0; height: 100vh; max-height: none; border: none }

/* Toolbar — flat text controls on a hairline slab, no pills, no blur. */
.toolbar{
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  flex-wrap: wrap;
  padding: .55rem .85rem;
  background: var(--plate);
  border-bottom: 1px solid var(--plate-rule);
  z-index: 5;
}
.seg{ display: flex; align-items: baseline; gap: .1rem }
.seg-label{
  font-family: var(--ff-mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plate-ink-3);
  margin-right: .6rem;
}
.seg-btn{
  background: none; border: none;
  border-bottom: 1px solid transparent;
  padding: .15rem .1rem; margin: 0 .55rem 0 0;
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--plate-ink-2);
  transition: color .14s ease, border-color .14s ease;
}
.seg-btn:hover{ color: var(--plate-ink) }
.seg-btn.active{ color: var(--plate-ink); border-bottom-color: var(--plate-accent) }
.toolbar__end{ margin-left: auto; display: flex; align-items: center; gap: .5rem }
button.ghost{
  background: none;
  border: 1px solid var(--plate-rule);
  border-radius: 2px;
  padding: .28rem .6rem;
  font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--plate-ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .14s ease, border-color .14s ease;
}
button.ghost:hover{ color: var(--plate-ink); border-color: var(--plate-ink-3) }
button.ghost.on{ color: var(--plate-accent); border-color: var(--plate-accent) }
.ghost--icon{ padding: .28rem .4rem }
.ghost--icon svg{ display: block }
button.ghost-small{
  background: none;
  border: 1px solid var(--plate-rule);
  border-radius: 2px;
  padding: .25rem .55rem;
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--plate-ink-3);
}
button.ghost-small:hover{ color: var(--plate-ink) }

/* Filter panel */
.panel{
  position: absolute; top: 44px; left: 0;
  width: 264px; max-height: calc(100% - 44px);
  background: var(--plate);
  border-right: 1px solid var(--plate-rule);
  border-bottom: 1px solid var(--plate-rule);
  display: flex; flex-direction: column;
  z-index: 4;
}
.panel header{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .75rem .9rem .55rem;
  border-bottom: 1px solid var(--plate-rule);
}
.panel-title{
  font-family: var(--ff-mono);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plate-ink-3);
}
.counter{
  font-family: var(--ff-mono); font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--plate-accent);
}
.search-wrap{ padding: .7rem .9rem .2rem }
#search{
  width: 100%; padding: .4rem 0;
  background: none;
  border: none; border-bottom: 1px solid var(--plate-rule);
  border-radius: 0;
  color: var(--plate-ink);
  font-family: var(--ff-mono); font-size: .8125rem;
}
#search::placeholder{ color: var(--plate-ink-3) }
#search:focus{ outline: none; border-bottom-color: var(--plate-accent) }

.panel > .filter-group{ padding: .35rem .9rem; border-top: 1px solid var(--plate-rule) }
.filter-group:first-of-type{ border-top: none }
.filter-group summary{
  cursor: pointer; padding: .45rem 0;
  display: flex; justify-content: space-between; align-items: baseline;
  list-style: none;
  font-family: var(--ff-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--plate-ink);
}
.filter-group summary::-webkit-details-marker{ display: none }
.filter-group summary::after{
  content: '+'; color: var(--plate-ink-3); margin-left: .5rem;
  font-size: .9rem; line-height: 1;
}
.filter-group[open] summary::after{ content: '–' }
.filter-group .count{
  color: var(--plate-ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.chips{
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: .2rem 0 .6rem;
  max-height: 208px; overflow-y: auto;
}
.chips::-webkit-scrollbar{ width: 5px }
.chips::-webkit-scrollbar-thumb{ background: var(--plate-rule) }
.chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: .2rem .4rem;
  background: none;
  border: 1px solid var(--plate-rule);
  border-radius: 2px;
  color: var(--plate-ink-2);
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .04em;
  user-select: none;
  transition: color .12s ease, border-color .12s ease;
}
.chip:hover{ color: var(--plate-ink); border-color: var(--plate-ink-3) }
.chip.on{ color: var(--plate-ink); border-color: var(--plate-ink-2) }
.chip .dot-color{ width: 7px; height: 7px; background: var(--plate-ink-3); flex-shrink: 0 }
.panel-footer{
  padding: .6rem .9rem;
  border-top: 1px solid var(--plate-rule);
  display: flex; justify-content: flex-end;
}

/* Legend */
.legend{
  position: absolute; right: 0; bottom: 0;
  background: var(--plate);
  border-left: 1px solid var(--plate-rule);
  border-top: 1px solid var(--plate-rule);
  padding: .7rem .9rem;
  display: grid; grid-template-columns: auto auto; gap: .25rem 1.1rem;
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .04em;
  z-index: 4; max-width: 300px;
}
.legend .row{ display: flex; align-items: center; gap: 6px; color: var(--plate-ink-2) }
.legend .swatch{ width: 8px; height: 8px; flex-shrink: 0 }

/* Tooltip */
.tooltip{
  position: absolute; pointer-events: none;
  background: var(--plate-2);
  border: 1px solid var(--plate-ink-3);
  padding: 8px;
  display: flex; gap: 10px;
  z-index: 10; max-width: 280px;
}
/* Must come after .tooltip — the class selector alone sets display:flex,
   which beats the browser's default [hidden]{display:none} on a source-order
   tie. Without this the tooltip never hides. */
.tooltip[hidden]{ display: none !important }
.detail[hidden]{ display: none !important }
.tooltip img{
  width: 88px; height: 60px; object-fit: contain;
  background: #fff; flex-shrink: 0;
}
.tip-name{
  font-family: var(--ff-display); font-weight: 500;
  font-size: .9375rem; line-height: 1.2; color: var(--plate-ink);
  margin-bottom: 4px;
}
.tip-meta{
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--plate-ink-3); line-height: 1.5;
}
.tip-palette{ margin-top: 7px; display: flex; gap: 2px }
.tip-palette span{ width: 15px; height: 7px; display: inline-block }

/* Detail (selection) */
.detail{
  position: absolute; top: 44px; right: 0;
  width: 312px; max-height: calc(100% - 44px);
  background: var(--plate);
  border-left: 1px solid var(--plate-rule);
  border-bottom: 1px solid var(--plate-rule);
  padding: 1.1rem 1.1rem 1.25rem;
  z-index: 4; overflow-y: auto;
}
.detail .close{
  position: absolute; top: .5rem; right: .6rem;
  width: 22px; height: 22px;
  background: none; border: 1px solid var(--plate-rule); border-radius: 2px;
  color: var(--plate-ink-3); font-size: 1rem; line-height: 1;
}
.detail .close:hover{ color: var(--plate-ink) }
.detail img{
  width: 100%; aspect-ratio: 3/2; object-fit: contain;
  background: #fff; border: 1px solid var(--plate-rule);
  margin-bottom: 1rem;
}
.detail h3{
  margin: 0 0 .9rem;
  font-family: var(--ff-display); font-weight: 500;
  font-size: 1.35rem; line-height: 1.1; letter-spacing: -.015em;
  color: var(--plate-ink);
}
.kvs{
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
  margin-bottom: 1rem;
  font-family: var(--ff-mono); font-size: .75rem;
}
.kvs .k{
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--plate-ink-3);
}
.kvs .v{ color: var(--plate-ink) }
.palette-row{ display: flex; gap: 2px; margin-bottom: 1rem }
.palette-row span{ flex: 1; height: 16px }
.detail-actions{ display: flex; gap: .6rem }
.cta-small{
  font-family: var(--ff-mono); font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--plate-accent);
  border-bottom: 1px solid var(--plate-accent);
  padding-bottom: 2px;
}
.cta-small:hover{ color: var(--plate-ink); border-bottom-color: var(--plate-ink) }

/* Boot */
.boot{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--plate); z-index: 20;
  transition: opacity .35s ease;
}
.boot.gone{ opacity: 0; pointer-events: none }
/* A filling rule, not a spinner. */
.boot-ring{
  width: 180px; height: 1px;
  background: var(--plate-rule);
  position: relative; overflow: hidden;
}
.boot-ring::after{
  content: ''; position: absolute; inset: 0;
  background: var(--plate-accent);
  transform-origin: left;
  animation: sweep 1.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep{
  0%  { transform: scaleX(0);   opacity: 1 }
  60% { transform: scaleX(1);   opacity: 1 }
  100%{ transform: scaleX(1);   opacity: 0 }
}
.boot-text{
  margin-top: 1rem;
  font-family: var(--ff-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--plate-ink-3);
}

/* ─── Findings ─────────────────────────────────────────────────────────── */
.findings{
  max-width: var(--col); margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) var(--pad) 0;
  scroll-margin-top: 64px;
}
.findings__h,
.method__h{
  font-family: var(--ff-display);
  font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}
.finds{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink) }

.find{
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 8rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .18s ease;
}
.find:hover{ background: var(--paper-2) }
.find__no{ color: var(--accent); padding-top: .45rem }
.find h3{
  font-family: var(--ff-display);
  font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
.find p{
  margin: 0; color: var(--ink-2);
  font-size: .9375rem; line-height: 1.6;
  max-width: 62ch;
}
.find p b{ color: var(--ink); font-weight: 600 }
.tour-btn{
  justify-self: end;
  background: none; border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 3px;
  margin-top: .45rem;
  font-family: var(--ff-mono);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.tour-btn::after{ content: ' →' }
.find:hover .tour-btn{ color: var(--accent); border-bottom-color: var(--accent) }
@media (max-width: 780px){
  .find{ grid-template-columns: 2.5rem minmax(0,1fr); }
  .tour-btn{ grid-column: 2; justify-self: start; margin-top: .9rem }
}

/* ─── Method ───────────────────────────────────────────────────────────── */
.method{
  max-width: var(--col); margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) var(--pad) clamp(3rem, 6vw, 5rem);
  scroll-margin-top: 64px;
}
.spec{
  width: 100%; border-collapse: collapse;
  border-top: 1px solid var(--ink);
}
.spec th, .spec td{
  text-align: left; vertical-align: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec th{
  width: 11rem; padding-right: 2rem;
  font-family: var(--ff-mono); font-weight: 400;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.spec td{ font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 68ch }
.spec a{ color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 1px }
.spec a:hover{ border-bottom-color: var(--accent) }
@media (max-width: 640px){
  .spec th, .spec td{ display: block; width: auto; max-width: none }
  .spec th{ border-bottom: none; padding-bottom: .3rem }
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
.page-foot{
  max-width: var(--col); margin: 0 auto;
  padding: 1.5rem var(--pad) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}
.page-foot b{ color: var(--ink); font-weight: 500 }
.page-foot__links{ display: flex; gap: 1.4rem }
.page-foot a{ color: var(--ink-3) }
.page-foot a:hover{ color: var(--accent) }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px){
  #canvas-wrap{ height: 76vh }
  .panel{ width: 232px }
  .detail{ width: 272px }
  .legend{ max-width: 220px }
}
@media (max-width: 720px){
  .toolbar{ gap: .6rem }
  .panel{
    position: relative; top: auto; left: auto;
    width: 100%; max-height: 300px;
    margin-top: 88px;
    border-right: none;
  }
  .detail{
    position: fixed; top: auto; right: 0; left: 0; bottom: 0;
    width: auto; max-height: 62vh;
    border-left: none; border-top: 1px solid var(--plate-ink-3);
  }
  #canvas-wrap{ height: 74vh; min-height: 460px }
}