/* ───────── Shared system: one palette, one type family, one transition ───────── */
:root {
  --paper: #efeeeb;
  --paper-2: #e7e5e0;
  --white: #fbfbf9;
  --ink: #0e0e0e;
  --ink-2: #2a2a28;
  --mute: #8b8a85;
  --mute-2: #b9b7b1;
  --line: rgba(14, 14, 14, .14);
  --accent: #d2362b;
  --night: #050505;
  --bone: #f0efe9;

  --f-display: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Fira Mono', ui-monospace, Menlo, monospace;
  --f-serif: 'Instrument Serif', Georgia, serif;

  --dot: rgba(14, 14, 14, .11);
  --dot-2: rgba(14, 14, 14, .16);
  --foot-bg: #0e0e0e; --foot-fg: #f0efe9; --foot-mute: #9a9993;

  /* Archive (portfolio) palette — dark by nature, light variant below */
  --a-bg: #050505; --a-fg: #f0efe9; --a-mute: #b7b5ae; --a-mute-2: #8f8d87; --a-name: #9c9a94;
  --a-text: #cfcdc6; --a-tile: #121212; --a-line: #222; --a-vig: 5, 5, 5;
  --a-tile-filter: grayscale(1) brightness(.6) contrast(1.05);

  --gutter: clamp(16px, 2.5vw, 64px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ───────── Dark theme ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f0f0e;
  --paper-2: #1b1b19;
  --white: #141413;
  --ink: #ecebe6;
  --ink-2: #c4c2bb;
  --mute: #8b8a85;
  --mute-2: #4f4e4a;
  --line: rgba(236, 235, 230, .14);
  --dot: rgba(236, 235, 230, .10);
  --dot-2: rgba(236, 235, 230, .14);
  --foot-bg: #ecebe6; --foot-fg: #0e0e0e; --foot-mute: #6f6e69;
}
/* Light theme for the archive (it is dark in both modes' defaults otherwise) */
:root[data-theme="light"] {
  --a-bg: #efeeeb; --a-fg: #0e0e0e; --a-mute: #5f5e5a; --a-mute-2: #7c7b76; --a-name: #6f6e69;
  --a-text: #2a2a28; --a-tile: #dcdad5; --a-line: rgba(14, 14, 14, .14); --a-vig: 239, 238, 235;
  --a-tile-filter: grayscale(1) brightness(1.02) contrast(.92);
}
/* ───────── Desert theme: warm sand, #CBBCA6 as the main colour ───────── */
:root[data-theme="desert"] {
  color-scheme: light;
  --paper: #cbbca6;
  --paper-2: #bfae95;
  --white: #d9cdb9;
  --ink: #2a2118;
  --ink-2: #4a3d2e;
  --mute: #6f604d;
  --mute-2: #9a8a73;
  --line: rgba(42, 33, 24, .2);
  --accent: #b5412a;
  --dot: rgba(42, 33, 24, .13);
  --dot-2: rgba(42, 33, 24, .19);
  --foot-bg: #2a2118; --foot-fg: #e9dfcd; --foot-mute: #a89a84;
  --a-bg: #cbbca6; --a-fg: #2a2118; --a-mute: #5a4c3a; --a-mute-2: #75654f; --a-name: #6a5b47;
  --a-text: #3a2f22; --a-tile: #b8a78f; --a-line: rgba(42, 33, 24, .2); --a-vig: 203, 188, 166;
  --a-tile-filter: grayscale(.85) sepia(.25) brightness(1.02) contrast(.95);
}
/* Cross-fade colours when switching themes */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}

/* Theme toggle (text variant; pages style the square variant themselves) */
.theme-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 6px 0; }
.theme-btn i { font-style: normal; font-size: 14px; line-height: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 14px; font: 12px var(--f-mono); }
.skip:focus { top: 12px; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.label { font-family: var(--f-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* ───────── Page transition curtain (shared across all pages) ───────── */
.curtain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transform: translateY(0); transition: transform .9s var(--ease);
}
.curtain__label { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
:root[data-theme="dark"] .curtain { background: #050505; color: #ecebe6; }
.curtain.is-open { transform: translateY(-101%); }
.curtain.is-leaving { transform: translateY(0); transition-duration: .7s; pointer-events: all; }
.curtain.is-leaving .curtain__label { opacity: 1; transition-delay: .25s; }
.curtain.is-instant { transition: none; }

/* ───────── Menu overlay (shared) ───────── */
.burger { width: 34px; height: 22px; position: relative; z-index: 810; }
.burger span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:nth-child(1) { top: 6px; }
.burger span:nth-child(2) { top: 14px; }
.is-menu .burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.is-menu .burger span:nth-child(2) { top: 10px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 800; background: var(--paper); color: var(--ink);
  padding: calc(var(--gutter) + 72px) var(--gutter) var(--gutter);
  display: grid; grid-template-rows: 1fr auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden;
}
.is-menu .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__links { list-style: none; margin: 0; padding: 0; }
.menu__links a {
  display: inline-flex; align-items: baseline; gap: .4em;
  font: 500 clamp(44px, 8vw, 120px)/1.02 var(--f-display); letter-spacing: -.035em;
  transform: translateY(40%); opacity: 0; transition: transform .8s var(--ease-out), opacity .6s, color .3s;
}
.menu__links a sup { font: 400 12px var(--f-mono); letter-spacing: 0; color: var(--mute); }
.menu__links a:hover, .menu__links a[aria-current] { color: var(--accent); }
.is-menu .menu__links a { transform: none; opacity: 1; }
.is-menu .menu__links li:nth-child(2) a { transition-delay: .06s; }
.is-menu .menu__links li:nth-child(3) a { transition-delay: .12s; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; border-top: 1px solid var(--line); padding-top: 20px; }
.menu__foot a { font: 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--mute-2); }
.menu__foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.menu-open-lock { overflow: hidden; }

/* Fixed local-time tab on the right edge (shared signature) */
.edge-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 700;
  background: var(--ink); color: var(--paper); width: 30px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font: 500 9px/1 var(--f-mono); letter-spacing: .06em;
}
.edge-tab b { font: 700 13px/1 var(--f-display); }
.edge-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Language switch (EN ⇄ PL) */
.lang-btn { display: inline-flex; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid currentColor; opacity: .85; transition: opacity .2s; }
.lang-btn:hover { opacity: 1; }