/* agejev.com. Fonts, tokens and theme rules copied verbatim from blog.agejev.com (docs/reference/blog-site.css). */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  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: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  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: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  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: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  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 Sans'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  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-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  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; }

/* ------------------------------------------------------------ tokens */
:root {
  --paper: #F3ECDF;           /* Beige, from share.agejev.com */
  --surface: #EAE0CF;
  --surface-2: #E0D4C0;
  --ink: #2B2723;
  --ink-2: #4A4139;
  --muted: #6F6357;
  --rule: #DCCDB8;
  --accent: #82512E;          /* copper */
  --accent-strong: #653D21;
  --accent-soft: #E8D6C1;
  --accent-ink: #FFFFFF;
  --quote-rule: #C5AE94;
  --quote-ink: #62574D;
  --patina: #3F6B5F;          /* verdigris */
  --ok: #3F6B5F;
  --danger: #A3312A;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --measure: 45rem;
  --wide: 62rem;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #242322; --surface: #2C2A28; --surface-2: #353230; --ink: #E8E0D5; --ink-2: #D3C8BA; --muted: #A89B8C;
    --rule: #3D3935; --accent: #C7976B; --accent-strong: #DDB18A; --accent-soft: #3B3128; --accent-ink: #242322;
    --quote-rule: #685543; --quote-ink: #C3B8AA; --patina: #8FB8A9; --ok: #8FB8A9; --danger: #F08A80; color-scheme: dark;
  }
}
:root[data-theme='night'] {           /* Night: darker still, warm cream on near-black */
  --paper: #171919; --surface: #1F2121; --surface-2: #282A2A; --ink: #F5E4CA; --ink-2: #E3D4BC; --muted: #B2A795;
  --rule: #272929; --accent: #D5A476; --accent-strong: #E8BE92; --accent-soft: #33291E; --accent-ink: #171919;
  --quote-rule: #6E6556; --quote-ink: #CDBFA9; --patina: #8FB8A9; --ok: #8FB8A9; --danger: #F08A80; color-scheme: dark;
}
:root[data-theme='dark'] {
  --paper: #242322; --surface: #2C2A28; --surface-2: #353230; --ink: #E8E0D5; --ink-2: #D3C8BA; --muted: #A89B8C;
    --rule: #3D3935; --accent: #C7976B; --accent-strong: #DDB18A; --accent-soft: #3B3128; --accent-ink: #242322;
    --quote-rule: #685543; --quote-ink: #C3B8AA; --patina: #8FB8A9; --ok: #8FB8A9; --danger: #F08A80; color-scheme: dark;
}

.theme-toggle { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* The button shows the theme it will switch to: Beige → Charcoal (moon) → Night (filled moon) → Beige (sun). */
.icon-sun, .icon-night { display: none; }
:root[data-theme='dark'] .icon-moon { display: none; }
:root[data-theme='dark'] .icon-night { display: block; }
:root[data-theme='night'] .icon-moon { display: none; }
:root[data-theme='night'] .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .icon-moon { display: none; }
  :root:not([data-theme]) .icon-night { display: block; }
}

/* ------------------------------------------------------------ base (after the blog) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.1667rem; line-height: 1.6;
  font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
figure { margin: 0; }

/* ------------------------------------------------------------ header and footer */
.site-header, main {
  width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem;
}
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: .8rem; padding-bottom: .4rem; font-family: var(--sans); font-size: .92rem; }
.lang-switch { color: var(--ink-2); text-decoration: none; }
.lang-switch:hover { color: var(--accent); }
.lang-switch { font-weight: 600; letter-spacing: .06em; font-size: .82rem; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .65rem; }
main { padding-bottom: .75rem; }

/* ------------------------------------------------------------ hero */
/* The hero scales with screen height: full size on tall screens, compact on short ones. */
.hero { text-align: center; padding: clamp(.2rem, calc(6vh - 40px), 1.6rem) 0 clamp(1rem, calc(6vh - 27px), 2.2rem); }
.portrait { width: clamp(92px, calc(36vh - 160px), 136px); height: clamp(92px, calc(36vh - 160px), 136px); border-radius: 50%; object-fit: cover; margin: 0 auto clamp(.7rem, calc(3vh - 10px), 1.3rem); border: 1px solid var(--rule); }
.hero h1 { font-weight: 400; font-size: clamp(2.1rem, min(5.5vw, calc(9vh - 24px)), 3rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.role { font-size: clamp(1.15rem, calc(2vh + 4px), 1.3rem); color: var(--muted); margin: .4rem 0 0; }
.hero-links { display: flex; justify-content: center; gap: .6rem; margin: clamp(.65rem, calc(3vh - 11px), 1.1rem) 0 0; }
.hero-links a { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-2); }
.hero-links a:hover { color: var(--accent); border-color: var(--accent); }
.hero-links svg { width: 1rem; height: 1rem; }
.role a { color: inherit; text-decoration-color: var(--rule); }
.role a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ------------------------------------------------------------ project tabs */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tab {
  position: relative; overflow: hidden; background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .55rem 1.15rem;
  font: 500 .9rem var(--sans); color: var(--muted);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); border-color: var(--muted); }
.tab .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.projects.is-playing .tab[aria-selected='true'] .bar { animation: tab-fill var(--dur, 7000ms) linear forwards; }
.projects.is-paused .tab[aria-selected='true'] .bar { animation-play-state: paused; }
@keyframes tab-fill { to { width: 100%; } }

.viewport { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.track { display: block; }
.panel { padding: .5rem 0; }
.panel:focus-visible { outline-offset: -2px; }
/* With JS, panels sit side by side and the track slides between them. */
.js-tabs .track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.js-tabs .panel { flex: 0 0 100%; min-width: 0; }
.js-tabs .panel[hidden] { display: block; visibility: hidden; }
/* The outgoing panel stays visible until the slide ends, then leaves the Tab order. */
.js-tabs.is-ready .panel { transition: visibility 0s linear .7s; }
.js-tabs.is-ready .panel:not([hidden]) { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js-tabs .track, .js-tabs .panel { transition: none; } }

/* ------------------------------------------------------------ magazine spreads */
.spread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; justify-content: center; }
.spread--flip { grid-template-columns: minmax(0, 1fr) auto; }
/* Images take what height the screen leaves, so the whole page fits without scrolling. */
.spread { --media-h: clamp(190px, calc(100svh - 318px - 24vh), 400px); }
.spread--text { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
.spread-text { min-width: 0; }
/* Each panel is one card: its main link covers the whole box, and the border shows on hover. */
.card {
  --card-bg: var(--paper);
  position: relative; padding: 1.1rem; border: 1px solid transparent; border-radius: 14px; background: var(--card-bg);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card:hover, .card:focus-within {
  --card-bg: color-mix(in srgb, var(--surface) 55%, var(--paper));
  border-color: var(--accent);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent);
}
.card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.card .more a, .card .button:not(.card-link) { position: relative; z-index: 2; }
.cover { height: var(--media-h); width: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.label { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.spread-title { font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.07; letter-spacing: -0.01em; margin: .45rem 0 .3rem; }
.spread-title a { color: var(--ink); text-decoration: none; }
.spread-title a:hover { color: var(--accent); }
.dek { font-style: italic; font-size: 1.1rem; color: var(--muted); margin: 0 0 .6rem; }
.excerpt { color: var(--ink-2); margin: 0 0 .7rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin: 0; }
.more { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.more li a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.more li a:hover { color: var(--accent); }
.more time { font-family: var(--sans); font-size: .78rem; color: var(--muted); white-space: nowrap; padding-top: .2rem; }
.button {
  display: inline-block; margin-top: .4rem; padding: .55rem 1.1rem; border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--sans); font-size: .88rem; color: var(--ink); text-decoration: none;
}
.button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Kvačica: its mark and illustration are drawn in the site's own palette, so they follow the theme. */
.card {
  --kv-ink: var(--ink); --kv-paper: var(--paper); --kv-bg: var(--surface);
  --kv-h0: color-mix(in srgb, var(--patina) 8%, var(--kv-bg));  --kv-h1: color-mix(in srgb, var(--patina) 16%, var(--kv-bg));
  --kv-h2: color-mix(in srgb, var(--patina) 26%, var(--kv-bg)); --kv-h3: color-mix(in srgb, var(--patina) 38%, var(--kv-bg));
  --kv-h4: color-mix(in srgb, var(--patina) 52%, var(--kv-bg)); --kv-h5: color-mix(in srgb, var(--patina) 66%, var(--kv-bg));
  --kv-h6: color-mix(in srgb, var(--patina) 80%, var(--kv-bg));
  --kv-tick: var(--ok); --kv-catch: var(--danger);
  --kv-catch-bg: color-mix(in srgb, var(--danger) 16%, var(--paper)); --kv-catch-wash: color-mix(in srgb, var(--danger) 40%, var(--kv-bg));
  --kv-place: var(--accent); --kv-road: var(--rule);
  --kv-tree-lo: var(--patina); --kv-tree: color-mix(in srgb, var(--patina) 80%, var(--kv-bg)); --kv-tree-hi: color-mix(in srgb, var(--patina) 55%, var(--kv-bg));
  --kv-green-wash: color-mix(in srgb, var(--patina) 45%, var(--kv-bg));
}
.kv-title { display: flex; align-items: center; gap: .75rem; }
.kv-mark { display: block; width: 3.4rem; flex: none; }
.kv-mark svg { display: block; width: 100%; height: auto; aspect-ratio: 56 / 48; }
.kv-card { border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); justify-self: end; }
.kv-scene { display: block; height: var(--media-h); width: auto; max-width: 100%; aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------ not found */
.not-found { text-align: center; padding: 6rem 1.25rem; }
.not-found h1 { font-weight: 400; font-size: 2rem; }

/* ------------------------------------------------------------ small screens */
/* Stack before the text column gets squeezed. */
@media (max-width: 900px) {
  .spread, .spread--flip { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cover, .kv-scene { width: 100%; height: auto; }
  .kv-card { justify-self: stretch; }
  .spread--flip .spread-media { order: -1; }
  .panel { padding: 2rem 0; }
}