/* ============================================================
   @boring_spaces — Swiss Photographic Archive
   Design tokens (spec §26) + base archive components (spec §27)
   Fonts: Instrument Sans (helvetic neo-grotesque, per user reference),
          IBM Plex Mono (technical), Instrument Serif (§3.3 only)
   ============================================================ */

/* ============================================================
   ШРИФТЫ ЛЕЖАТ У НАС (2026-07-27)
   ============================================================
   Раньше обе страницы тянули <link> на шрифтовой CSS Google, а тот —
   бинарники с его же CDN. Значит IP каждого посетителя архива уходил к
   Google, и вид сайта зависел от чужой доступности. Теперь файлы лежат
   в prototype/fonts/ и наружу страница не ходит вообще. Имена этих двух
   хостов намеренно не пишутся здесь текстом: deploy/publish.sh ищет их
   подстрокой и роняет сборку, если они где-то снова появились.

   Файлы — БАЙТ В БАЙТ те же, что Google отдавал браузеру: скачаны по
   тем самым ссылкам из css2?family=… (проверено сигнатурой wOF2), а
   @font-face ниже повторяет присланный Google CSS дословно — те же
   font-weight, font-style, font-stretch, font-display и unicode-range.
   Это и есть гарантия «выглядит как раньше»: другого шрифта, другого
   веса и другого курсива взяться неоткуда — это те же самые байты.

   Поднаборы: только latin и latin-ext. Google присылал ещё cyrillic,
   cyrillic-ext и vietnamese — они выброшены как мёртвый вес (архив на
   английском). Из-за unicode-range браузер и раньше их не качал, так
   что видимое поведение не меняется; меняется только вес выгрузки.

   ПРО font-weight:450 (используется .arch-code / .arch-caption /
   .arch-coordinates / .arch-image-metadata и парой правил на страницах):
   такого начертания у IBM Plex Mono НЕТ и никогда не было — Google на
   запрос wght@400;450;500;600 молча присылает только 400, 500 и 600.
   То есть 450 и раньше разрешался правилами подбора CSS (для желаемого
   веса в диапазоне 400–500 сначала просматриваются веса вверх до 500) и
   рисовался пятисотым. Здесь ровно те же три файла — значит и результат
   ровно тот же. Добавлять «настоящий» 450 из переменной версии IBM Plex
   НЕЛЬЗЯ: это тихо изменило бы всю мелкую техническую типографику.

   Имена файлов несут sha256 содержимого (первые 8 hex). Это не
   украшение: /fonts/* отдаётся с immutable на год (deploy/_headers), а
   immutable честен только тогда, когда URL адресует конкретные байты —
   ровно тот же довод, что у /photos/med/* там же. Замена шрифта даёт
   новое имя, старый файл никто не переписывает.

   Лицензии — SIL OFL 1.1 у всех трёх семейств, тексты лежат рядом:
   prototype/fonts/OFL-instrumentsans.txt, OFL-ibmplexmono.txt,
   OFL-instrumentserif.txt (OFL требует прикладывать лицензию к копии).
   ============================================================ */

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/instrument-sans-400-700-latin.6219bc4b.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/instrument-sans-400-700-latin-ext.21fac8da.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-latin.c36f509c.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-latin-ext.f1050dc5.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin.a76f53ca.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin-ext.77f03e26.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-600-latin.ad4580d8.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-600-latin-ext.1b6b18fd.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-400-latin.60c06664.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-400-latin-ext.a8c4bd7c.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-400-italic-latin.6ee678c3.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-400-italic-latin-ext.a04fc7ed.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* --- type families (§26 / §3) --- */
  --font-sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Geist Mono","SFMono-Regular",Consolas,monospace;
  --font-serif:"Instrument Serif",Georgia,serif; /* §3.3: one opening / one closing phrase only */

  /* --- colour: neutral light-grey archive ground (§5/§26) --- */
  --color-paper:#ececec;
  --color-paper-bright:#f2f2f2;
  --color-ink:#111111;
  --color-ink-soft:#333333;
  --color-muted:#777771;
  --color-red:#d71920;
  --color-red-dark:#a80f15;
  --color-dark:#0b0b0b;
  --color-dark-soft:#141414;
  --color-light:#f2f1ec;                 /* ink on dark scenes */
  --color-light-muted:rgba(242,241,236,.56);

  --line-light:rgba(17,17,17,.18);
  --line-medium:rgba(17,17,17,.42);
  --line-inverse:rgba(242,241,236,.18);
  --line-inverse-medium:rgba(242,241,236,.42);

  --ink-72:rgba(17,17,17,.72);           /* caption primary (§4) */
  --ink-44:rgba(17,17,17,.44);           /* caption secondary (§4) */
  --ink-giant:rgba(17,17,17,.08);        /* giant year (§4/§22) */
  --light-giant:rgba(245,244,239,.08);

  /* --- layout (§8/§26) --- */
  --page-margin:clamp(18px,2.5vw,48px);
  --grid-gap:clamp(12px,1.4vw,24px);

  /* --- type scale (§12/§26) --- */
  --type-display-xl:clamp(8rem,26vw,30rem);    /* L01 giant year / country */
  --type-display-lg:clamp(5rem,15vw,18rem);    /* L02 date number */
  --type-display-md:clamp(3rem,9vw,11rem);     /* L02 city */
  --type-heading:clamp(1.8rem,4vw,4.5rem);     /* L03 month / section */
  --type-subhead:clamp(1.15rem,2vw,2rem);      /* L04 day / series */
  --type-body:clamp(.9rem,1.1vw,1.1rem);
  --type-meta:clamp(.6rem,.68vw,.75rem);       /* L05 mono metadata */
  --type-stamp:.58rem;                         /* §10 */

  /* neo-grotesque sits wider than Inter Tight — display tracking relaxed */
  --tracking-display:-.045em;
  --tracking-heading:-.025em;
  --tracking-meta:.07em;

  --radius-none:0;
  --radius-system:2px;                         /* small system elements only */

  /* --- motion (§26, aligned with motion spec §22) --- */
  --duration-fast:280ms;
  --duration-normal:650ms;
  --duration-slow:1100ms;
  --ease-reveal:cubic-bezier(.22,1,.36,1);     /* ~power4.out */
  --ease-transition:cubic-bezier(.65,0,.35,1); /* ~power3.inOut */

  /* --- photograph as physical object (§14): almost invisible shadow --- */
  --shadow-print:0 1px 2px rgba(17,17,17,.07),0 6px 18px rgba(17,17,17,.06);
  --shadow-print-dark:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}

/* ============================================================
   BASE ARCHIVE COMPONENTS (§27) — pure CSS classes
   All values reference tokens; no arbitrary sizes or colours.
   ============================================================ */

/* --- ArchiveLabel: small technical mono label (L05) --- */
.arch-label{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:500;
  line-height:1.4;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--color-muted);
  font-variant-numeric:tabular-nums;
}
.arch-label--ink{color:var(--ink-72)}
.arch-label--red{color:var(--color-red)}

/* --- ArchiveCode: archive index, KEY / VALUE pair (§7/§13) --- */
.arch-code{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:450;
  line-height:1.45;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--ink-72);
  font-variant-numeric:tabular-nums;
}
.arch-code .k{color:var(--ink-44)}       /* key   — FRAME /   */
.arch-code .v{color:var(--ink-72)}       /* value — 00482     */
.arch-code .v--red{color:var(--color-red)}

/* --- ArchiveStamp (§10) --- */
.arch-stamp{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--type-stamp);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-72);
  border:1px solid currentColor;
  padding:4px 6px;
  border-radius:var(--radius-none);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.arch-stamp--red{color:var(--color-red)}
.arch-stamp--inverse{color:var(--color-light-muted)}

/* --- ArchiveDivider: thin technical rule (§9) --- */
.arch-divider{
  border:0;
  border-top:1px solid var(--line-light);
  margin:0;
}
.arch-divider--medium{border-top-color:var(--line-medium)}
.arch-divider--red{border-top-color:var(--color-red)}
.arch-divider--inverse{border-top-color:var(--line-inverse)}
/* divider with a label sitting on the line */
.arch-divider-row{
  display:flex;align-items:center;gap:var(--grid-gap);
}
.arch-divider-row::before,.arch-divider-row::after{
  content:"";flex:1;height:1px;background:var(--line-light);
}
.arch-divider-row--inverse::before,.arch-divider-row--inverse::after{background:var(--line-inverse)}

/* --- ArchiveMarker: small red geometric mark (§9/§19) --- */
.arch-marker{
  display:inline-block;width:6px;height:6px;
  background:var(--color-red);border-radius:var(--radius-none);
  vertical-align:middle;
}
.arch-marker--dot{width:5px;height:5px;border-radius:50%}
.arch-marker--line-v{width:1px;height:1em;background:var(--color-red)}
.arch-marker--line-h{width:1.6em;height:1px;background:var(--color-red)}
.arch-marker--ink{background:var(--color-ink)}

/* corner registration mark ┌ (§9) */
.arch-corner{
  position:absolute;width:10px;height:10px;pointer-events:none;
  border:0 solid var(--line-medium);
}
.arch-corner--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.arch-corner--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.arch-corner--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.arch-corner--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.arch-corner--red{border-color:var(--color-red)}
.arch-corner--inverse{border-color:var(--line-inverse-medium)}

/* registration cross + (§9/§28) */
.arch-cross{
  position:relative;display:inline-block;width:11px;height:11px;
}
.arch-cross::before,.arch-cross::after{
  content:"";position:absolute;background:var(--line-medium);
}
.arch-cross::before{left:5px;top:0;width:1px;height:11px}
.arch-cross::after{left:0;top:5px;width:11px;height:1px}
.arch-cross--inverse::before,.arch-cross--inverse::after{background:var(--line-inverse-medium)}

/* --- ArchiveCaption: museum label under / beside a print (§4/§15A) --- */
.arch-caption{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:450;
  line-height:1.45;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--ink-72);
  font-variant-numeric:tabular-nums;
}
.arch-caption .sec{color:var(--ink-44)}
/* Template A: 00482 …… VILNIUS, LT / 16 JUL 2026 …… 18:42 */
.arch-caption--a{display:flex;align-items:baseline;gap:.75em}
.arch-caption--a .fill{
  flex:1;min-width:1.5em;height:1px;align-self:center;
  background-image:linear-gradient(to right,var(--line-light) 1px,transparent 1px);
  background-size:4px 1px;background-repeat:repeat-x;
}

/* --- ArchiveDate: archival date composition (§4) --- */
.arch-date{
  font-variant-numeric:tabular-nums;
  color:var(--color-ink);
}
.arch-date .num{
  font-family:var(--font-sans);
  font-size:var(--type-display-lg);
  font-weight:600;line-height:.72;letter-spacing:-.07em;
}
.arch-date .month{
  font-family:var(--font-sans);
  font-size:clamp(.8rem,1.1vw,1.1rem);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.arch-date .year{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:500;letter-spacing:var(--tracking-meta);
  color:var(--ink-72);
}

/* --- ArchiveLocation: city + country (§4/§21) --- */
.arch-location .city{
  font-family:var(--font-sans);
  font-size:var(--type-display-md);
  font-weight:600;line-height:.88;letter-spacing:var(--tracking-display);
  text-transform:uppercase;color:var(--color-ink);
}
.arch-location .country{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:500;letter-spacing:var(--tracking-meta);
  text-transform:uppercase;color:var(--color-muted);
}

/* --- ArchiveCounter: 00482 / 18540 (§13/§28) --- */
.arch-counter{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:500;letter-spacing:var(--tracking-meta);
  color:var(--ink-72);font-variant-numeric:tabular-nums;
}
.arch-counter .total{color:var(--ink-44)}

/* --- ArchiveCoordinates (§4/§24) --- */
.arch-coordinates{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:450;letter-spacing:var(--tracking-meta);
  text-transform:uppercase;color:var(--color-muted);
  font-variant-numeric:tabular-nums;
}

/* --- ArchiveGrid: 12 / 8 / 4 columns (§8) --- */
.arch-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--grid-gap);
  padding-left:var(--page-margin);
  padding-right:var(--page-margin);
}
@media (max-width:1024px){.arch-grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:640px){.arch-grid{grid-template-columns:repeat(4,1fr)}}

/* --- ArchiveSectionHeader: rule + L04 title + right meta (§12) --- */
.arch-section-header{
  border-top:1px solid var(--line-medium);
  padding-top:calc(var(--grid-gap) * .75);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--grid-gap);flex-wrap:wrap;
}
.arch-section-header .title{
  font-family:var(--font-sans);
  font-size:var(--type-subhead);
  font-weight:550;line-height:1;letter-spacing:-.025em;
  text-transform:uppercase;color:var(--color-ink);
  font-variant-numeric:tabular-nums;
}
.arch-section-header--inverse{border-top-color:var(--line-inverse)}
.arch-section-header--inverse .title{color:var(--color-light)}

/* --- ArchiveGapLabel: undocumented period, dark scene (§20) --- */
.arch-gap-label{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:500;line-height:1.5;letter-spacing:var(--tracking-meta);
  text-transform:uppercase;color:var(--color-light-muted);
  font-variant-numeric:tabular-nums;
}
.arch-gap-label b{font-weight:500;color:var(--color-light)}

/* --- ArchiveImageMetadata: Template B side block (§15B) --- */
.arch-image-metadata{
  font-family:var(--font-mono);
  font-size:var(--type-meta);
  font-weight:450;line-height:1.45;letter-spacing:var(--tracking-meta);
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  display:grid;grid-template-columns:max-content 1fr;
  column-gap:1.25em;row-gap:.35em;align-content:start;
}
.arch-image-metadata dt{color:var(--ink-44);margin:0}
.arch-image-metadata dd{color:var(--ink-72);margin:0}
.arch-image-metadata dd.red{color:var(--color-red)}
.arch-image-metadata--inverse dt{color:rgba(242,241,236,.38)}
.arch-image-metadata--inverse dd{color:var(--color-light-muted)}

/* --- photograph as physical object (§14) --- */
.arch-print{
  background:var(--color-paper-bright);
  border:1px solid var(--line-light);
  padding:calc(var(--grid-gap) * .5);
  box-shadow:var(--shadow-print);
  border-radius:var(--radius-none);
}
.arch-print img{display:block;width:100%;height:auto;border-radius:var(--radius-none)}