/* Layout: a plain editorial page in the colours of the shirts themselves — bone white, black and
   slogan red — with one dark section for the slogans and a carpet band as the single ornament.
   Headings are a tight grotesque, close to the lettering printed on the shirts; body text is a
   serif for long reading. Carpet colours are sampled from the modern Baku carpet in assets/img. */
:root {
  --paper: #F7F5F1;
  --tint: #EEEAE3;
  --surface: #FFFFFF;
  --ink: #151413;
  --ink-2: #3B3936;
  --muted: #6D6963;
  --rule: #DDD8CF;
  --accent: #B3261E;      /* slogan red */
  /* The slogans section stays dark in both themes, like the black shirts */
  --night: #151413; --night-ink: #EFECE6; --night-muted: #A29D95; --night-rule: #34312D; --night-accent: #F0564A;
  /* Carpet palette */
  --rug-navy: #1E2647; --rug-red: #B8402E; --rug-ivory: #EADFC6; --rug-blue: #3D5FA0; --rug-orange: #D0763A;

  --display: "Inter Tight", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110; --tint: #1A1917; --surface: #22201E; --ink: #EFECE6; --ink-2: #D2CDC5;
    --muted: #A29D95; --rule: #34312D; --accent: #F0564A;
    --night: #1E1C1A;
    --rug-ivory: #D8CDB4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121110; --tint: #1A1917; --surface: #22201E; --ink: #EFECE6; --ink-2: #D2CDC5;
  --muted: #A29D95; --rule: #34312D; --accent: #F0564A;
  --night: #1E1C1A;
  --rug-ivory: #D8CDB4;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
p, ul, ol, dl, dd, dt, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.r-red { fill: var(--rug-red); } .r-navy { fill: var(--rug-navy); } .r-ivory { fill: var(--rug-ivory); }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 14px; border: 1px solid var(--rule); font-family: var(--display); }
.skip:focus { left: 16px; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

/* ---------- Type ---------- */
h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.06; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 700 .74rem/1.45 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; flex: none; width: 22px; height: 2px; background: currentColor; }
.label-sm {
  font: 700 .72rem/1.45 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.num {
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-row { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); position: relative; }
.brand {
  display: flex; align-items: center; gap: 10px;
  margin-right: auto;
  font: 700 1.02rem/1 var(--display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.nav { display: flex; gap: clamp(14px, 1.8vw, 26px); }
.nav a { color: var(--ink-2); text-decoration: none; font: 600 .88rem/1 var(--display); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--accent); }
}

/* Language switch: a thumb slides under the active option */
.lang {
  position: relative; flex: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px;
  transition: transform 160ms var(--ease-out);
}
.lang:has(button:active) { transform: scale(0.98); }
.thumb {
  position: absolute; left: 2px; top: 2px; bottom: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 999px; background: var(--ink);
}
.js-ready .thumb { transition: transform 260ms var(--ease-in-out); }
.lang[data-active="az"] .thumb { transform: translateX(100%); }
.lang[data-active="ru"] .thumb { transform: translateX(200%); }
.lang button {
  position: relative; z-index: 1;
  border: 0; background: none; color: var(--muted);
  border-radius: 999px; cursor: pointer;
  font: 700 .72rem/1 var(--display); letter-spacing: .08em; padding: 7px 10px;
  transition: color 260ms ease;
}
.lang button[aria-pressed="true"] { color: var(--paper); }

.menu-btn {
  display: none;
  font: 600 .85rem/1 var(--display);
  color: var(--ink); background: none;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.menu-btn:active { transform: scale(0.97); }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 4px var(--gutter) 12px;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .nav.open { display: flex; }
  @starting-style { .nav.open { opacity: 0; transform: translateY(-6px); } }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .nav a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .header-row { gap: 10px; }
  .lang button { padding: 7px 8px; }
  .brand { min-width: 0; font-size: .95rem; }
  .brand span { overflow: hidden; text-overflow: ellipsis; }
  .menu-btn { padding: 8px 12px; }
}
@media (max-width: 400px) {
  .header-row { gap: 8px; }
  .brand { gap: 8px; font-size: .9rem; letter-spacing: -.02em; }
  .brand svg { width: 18px; height: 18px; }
  .lang button { padding: 7px 6px; }
  .menu-btn { padding: 8px 10px; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 7vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.hero-text { display: grid; gap: 22px; min-width: 0; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.hero-meta { font-size: .95rem; color: var(--muted); max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: 8px; }
.fact { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 4px 0; min-width: 0; }
.fact + .fact { padding-left: 18px; border-left: 1px solid var(--rule); }
.fact .num { font-size: clamp(2.4rem, 4vw, 3.2rem); color: var(--accent); }
.fact dd { font: 500 .88rem/1.35 var(--display); color: var(--muted); }
.hero-photo { display: grid; gap: 12px; min-width: 0; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: var(--tint); }
figcaption { font-size: .9rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 520px; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact { flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .fact .num { min-width: 1.3em; }
}

/* ---------- Carpet band ---------- */
/* Navy edge, diagonal-striped border, a row of buta motifs from the field, striped border, edge.
   Each moving stripe is an HTML layer one tile wider than the screen, slid by exactly one tile with
   transform, so the loop is seamless and runs on the compositor instead of repainting. The buta row
   runs against the stripes, and the footer band runs in reverse, so the pattern appears to travel
   around the page. */
.band { line-height: 0; }
.band > div { position: relative; overflow: hidden; }
.b-edge { height: 2px; background: var(--rug-navy); }
.b-line { height: 1px; background: var(--rug-ivory); }
.b-stripe { height: 8px; }
.b-buta { height: 24px; background: var(--rug-navy); }
.band i {
  position: absolute; top: 0; bottom: 0; left: var(--tile-neg); width: calc(100% + var(--tile));
  background-repeat: repeat-x; background-position: 0 0;
  will-change: transform;
}
.b-stripe i { --tile: 16px; --tile-neg: -16px; background-image: url(ornament/stripe.svg); background-size: 16px 8px; animation: slide 2.4s linear infinite reverse; }
.b-buta i { --tile: 96px; --tile-neg: -96px; background-image: url(ornament/buta.svg); background-size: 96px 24px; animation: slide 12s linear infinite; }
.band.rev .b-buta i { animation-direction: reverse; }
.band.rev .b-stripe i { animation-direction: normal; }
.band.is-off i { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(var(--tile)); } }
@media (prefers-reduced-motion: reduce) { .band i { animation: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section.alt { background: var(--tint); }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.sec-head p:not(.eyebrow) { color: var(--ink-2); max-width: 62ch; }
.prose { display: grid; gap: 18px; align-content: start; min-width: 0; }
.prose > p:not(.eyebrow):not(.label-sm) { color: var(--ink-2); max-width: 64ch; }

.two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* ---------- Campaign ---------- */
.role {
  align-self: start;
  display: grid; gap: 16px;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  padding: clamp(22px, 3vw, 32px);
  min-width: 0;
}
.role .label-sm { color: var(--accent); }
.role .label-sm + .ticks, .role .label-sm + p { margin-top: -4px; }
.role > p:not(.label-sm) { color: var(--ink-2); }
.role .ticks + .label-sm { margin-top: 10px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; color: var(--ink-2); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--accent); }

/* ---------- Slogans (dark section) ---------- */
.night { background: var(--night); color: var(--night-ink); }
.night h2 { color: var(--night-ink); }
.night .eyebrow { color: var(--night-accent); }
.night .sec-head p:not(.eyebrow) { color: var(--night-muted); }
.night .label-sm { color: var(--night-muted); }
.night :focus-visible { outline-color: var(--night-accent); }

.slogans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.slogan-list { display: grid; border-top: 1px solid var(--night-rule); }
.slogan-list button {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--night-rule);
  padding: 18px 8px 18px 0;
  color: var(--night-muted);
  cursor: pointer;
  transition: color 150ms ease;
}
.sl-n { font: 600 .78rem/1 var(--display); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sl-t {
  font: 800 clamp(1.05rem, 1.8vw, 1.4rem)/1.15 var(--display);
  text-transform: uppercase;
  letter-spacing: .005em;
  text-wrap: balance;
}
.slogan-list .is-art .sl-t { font: italic 400 clamp(1.05rem, 1.6vw, 1.25rem)/1.3 var(--body); text-transform: none; }
.slogan-list button[aria-selected="true"] { color: var(--night-ink); }
.slogan-list button[aria-selected="true"] .sl-t { color: var(--night-accent); }
.slogan-list button[aria-selected="true"].is-art .sl-t { color: var(--night-ink); }
@media (hover: hover) and (pointer: fine) {
  .slogan-list button:hover { color: var(--night-ink); }
}

.sl-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
@starting-style { .sl-panel { opacity: 0; transform: translateY(6px); } }
.sl-panel img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #2a2724; }
.sl-body { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.sl-body p:not(.label-sm) { color: var(--night-ink); font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 960px) {
  .slogans { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sl-panel { grid-template-columns: 1fr; }
  .sl-panel img { max-height: 70vh; aspect-ratio: 3 / 4; object-position: 50% 30%; }
  .slogan-list button { padding: 14px 4px 14px 0; grid-template-columns: 30px minmax(0, 1fr); }
}

/* ---------- Background ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.stats li { display: grid; gap: 12px; align-content: start; padding: 24px 22px 8px 0; min-width: 0; }
.stats li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
.stats .num { font-size: clamp(2.4rem, 3.8vw, 3.2rem); color: var(--accent); }
.stats p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 16px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .stats li, .stats li + li { padding: 20px 0 8px; border-left: 0; }
  .stats li + li { border-top: 1px solid var(--rule); margin-top: 0; }
}
.cx-after { margin-top: clamp(32px, 4vw, 48px); color: var(--ink-2); max-width: 64ch; font-size: 1.08rem; }
.sources { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 10px; max-width: 820px; }
.sources ul { display: grid; gap: 6px; }
.sources li { font-size: .9rem; color: var(--muted); line-height: 1.45; }

/* ---------- Photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.gallery figure { display: grid; gap: 10px; align-content: start; min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--surface); }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Credits ---------- */
.credits { display: grid; border-top: 2px solid var(--ink); margin-top: 8px; }
.credits > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.credits dt { font: 600 .9rem/1.45 var(--display); color: var(--muted); }
.credits dd { color: var(--ink); }
@media (max-width: 520px) { .credits > div { grid-template-columns: 1fr; gap: 2px; } }
.carpet { display: grid; gap: 12px; align-content: start; max-width: 380px; min-width: 0; }
.carpet img { width: 100%; }
@media (max-width: 860px) { .carpet { max-width: 300px; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.email-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
#email { font: 700 clamp(1.1rem, 2.2vw, 1.5rem)/1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.btn {
  font: 600 .85rem/1 var(--display);
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: 999px;
  padding: 11px 18px; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.swap { animation: swap 220ms var(--ease-out); }
@keyframes swap { from { opacity: 0; filter: blur(2px); } }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: 32px 40px; font: 400 .9rem/1.5 var(--body); }
.footer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.ft-links { display: grid; gap: 6px; justify-items: end; }
.ft-links a { font: 600 .88rem/1.4 var(--display); text-decoration: none; }
.ft-links span { color: var(--muted); }
.ft-links a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .footer-row { grid-template-columns: 1fr; gap: 12px; }
  .ft-links { justify-items: start; }
}