/* ─────────────────────────────────────────────────────────────────────────────
   Jergušino: stylesheet. Built from the brand guide (v5).
   Three colours, three fonts, nothing else.
   No gradients, shadows, blur, transparency or fades: colour changes are hard.
   ───────────────────────────────────────────────────────────────────────────── */

/* Fonts ─ Slithen (headlines), Borisna (text), Edwardian Script ITC (script lead-ins).
   Put Edwardian.woff2 / .woff / .ttf into assets/fonts/ (see README). */
@font-face {
  font-family: "Slithen";
  src: url("../fonts/Slithen.woff") format("woff"), url("../fonts/Slithen.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Borisna";
  src: url("../fonts/Borisna.woff") format("woff"), url("../fonts/Borisna.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Edwardian";
  src: url("../fonts/Edwardian.woff2") format("woff2"), url("../fonts/Edwardian.woff") format("woff"),
    url("../fonts/Edwardian.ttf") format("truetype");
  font-display: swap;
  /* pin the metrics so the gap above the wordmark is identical in every browser */
  ascent-override: 85.06%;
  descent-override: 32.81%;
  line-gap-override: 0%;
}

:root {
  /* colour */
  --ink: #060909;
  --cream: #faf1d6;
  --yellow: #ffc600;

  /* space and type tokens, all worked out from the width W (guide, section 5) */
  --F: max(12px, calc(100vw / 70));          /* frame: outer margin of loud layouts */
  --G: calc(var(--F) * 1.4);                 /* gap: script to the thing it introduces */
  --F4: max(20px, calc(100vw * 4 / 70));     /* margin of text-heavy layouts (4F) */
  --T: calc(100vw / 21);                     /* text token; headlines use 2T to 4T */

  --f-head: "Slithen", "Impact", "Arial Narrow", sans-serif;
  --f-text: "Borisna", Georgia, "Times New Roman", serif;
  --f-script: "Edwardian", "Edwardian Script ITC", "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive;

  --body: clamp(1.0625rem, 0.95rem + 0.3vw, 1.375rem);   /* never below 17px */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-text);
  font-size: var(--body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--yellow); color: var(--ink); }

/* Links: Cream with a Yellow marker. Hover and focus change colour, never opacity. */
a { color: var(--cream); text-decoration: none; }
a:hover, a:focus-visible { color: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.arr { display: inline-block; width: 1.2em; height: 0.6em; fill: var(--yellow); vertical-align: 0.02em; margin-left: 0.2em; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Images are two-tone: every pixel is Ink or Cream. Own brand artwork opts out with .raw */
.prose img, .yt img, .cover img, .gallery img { filter: url(#twotone); }
.prose img.raw, .cover img.raw, .gallery img.raw { filter: none; }

/* ── Header: the mark top-left, a small text group top-right ───────────────── */
.top {
  position: absolute;
  z-index: 2;
  top: var(--F);
  left: var(--F);
  right: var(--F);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.top-mark { display: block; line-height: 0; }
.top-mark img { width: 150px; height: auto; }
.top-nav { margin-left: auto; text-align: right; }
.top-nav a { display: block; }
.top-nav a[aria-current] { color: var(--yellow); }

/* ── Hero: loud, one big thing, anchored bottom-left at F ──────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; }
.hero--page { min-height: 72vh; min-height: 72svh; --title-size: calc(var(--T) * 3); }
.hero--projects { --title-size: calc(var(--T) * 4); }
/* one project: no tall empty stage, the title sits just under the header and the text follows */
.hero--project { min-height: 0; padding-top: calc(var(--F) * 7); }
.hero--project .lockup { position: static; margin: 0 var(--F); }
body.project .prose { margin-top: calc(var(--F) * 2); }
body.project .back { margin-top: calc(var(--F) * 2); }

.lockup { position: absolute; left: var(--F); right: var(--F); bottom: var(--F); }

/* script lead-in: yellow, lowercase, left-aligned, G above what it introduces */
.lead {
  font-family: var(--f-script);
  color: var(--yellow);
  line-height: 1;
  white-space: nowrap;
  --d: 0.011em;                                     /* how far the deepest letter dips below the baseline */
}
.lead.desc { --d: 0.328em; }                        /* g j p q y f */

/* home: the primary lockup (i am + JERGUSINO). Wordmark = W - 2F wide, 0.257 x as tall. */
.hero--home { --wm-h: calc((100vw - 2 * var(--F)) * 0.257); }
.hero--home .lead {
  font-size: calc(var(--wm-h) * 0.771);           /* 0.29 x wordmark height, i-dot to baseline */
  margin-bottom: calc(var(--G) + var(--d) - 0.24em);
}
.wm-mask { line-height: 0; clip-path: inset(-100vh 0 0 0); }   /* clips the letters below the baseline, leaves the sky open for the bar */
.wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.wm-l { fill: var(--cream); fill-rule: evenodd; }
.wm-bar { fill: var(--yellow); }

/* pages: script + Slithen headline */
.title {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--title-size);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.hero--page .lead {
  font-size: calc(var(--title-size) * 0.54);       /* 0.29 x cap height of the headline */
  margin-bottom: calc(var(--G) + var(--d) - 0.24em + var(--acc, 0px));
}
.hero--page.has-accent { --acc: calc(var(--title-size) * 0.28); }   /* clear of Š, Č, Ž... */

/* ── Quiet break between sections: one centred line ────────────────────────── */
.quiet-break { padding: calc(var(--F) * 8) 0 calc(var(--F) * 3); display: grid; place-items: center; }
.quiet-line { font: inherit; font-size: clamp(1.4rem, 2.4vw, 2.6rem); text-align: center; }

/* ── Project list ──────────────────────────────────────────────────────────── */
.list { padding: 0 var(--F); }   /* same left edge as the title */

.controls { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em calc(var(--F) * 3); padding: 0 0 calc(var(--F) * 2); margin-top: calc(var(--F) * 2); }
.controls[hidden], .empty[hidden] { display: none; }
.ctl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1.2em; }
.ctl-l { color: var(--yellow); }                     /* Yellow marks what is a pointer: the caption of each control */
.ctl button {
  font: inherit; color: var(--cream); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0;
}
.ctl button:hover, .ctl button:focus-visible { color: var(--yellow); }
.ctl button[aria-pressed="true"] { color: var(--yellow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.ctl-search input {
  font: inherit; color: var(--cream); background: none; border: 0; border-bottom: 2px solid var(--cream); border-radius: 0;
  padding: 0 0 0.1em; width: 11em; max-width: 100%; caret-color: var(--yellow); outline: none; -webkit-appearance: none; appearance: none;
}
.ctl-search input:hover, .ctl-search input:focus { border-bottom-color: var(--yellow); }
.ctl-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* poster wall: images only, in staggered columns like bricks. A click opens the poster's page. */
/* columns: 6 on computers, 5 on small laptops, 3 on tablets, 2 on phones; every second column hangs half a poster lower */
.pgrid {
  --cols: 6;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--F);
  padding-bottom: calc((100vw - 2 * var(--F)) / var(--cols) * 0.72 + var(--F));        /* room for the half-card the even columns hang down */
}
.pcard:nth-child(even) { transform: translateY(calc(50% + var(--F) / 2)); }
.pcard a { display: block; position: relative; overflow: hidden; aspect-ratio: 7 / 10; }
.pcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* hover: the Yellow bar of the logo drops onto the top edge of the poster (hard-edged, no fade);
   it leaves faster than it comes (exits accelerate). Touch screens skip it. */
.pcard a::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0;
  height: calc(var(--F) * 1.1); background: var(--yellow);
  transform: translateY(-110%);
  transition: transform 0.1s cubic-bezier(0.6, 0, 1, 1);
}
.pcard a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }
.pcard a:focus-visible::before { transform: none; }
@media (hover: hover) {
  .pcard a:hover::before { transform: none; transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1); }
}
@media (prefers-reduced-motion: reduce) { .pcard a::before { transition: none; } }
@media (max-width: 1279px) {
  .pgrid { --cols: 5; }
  .pcard:nth-child(even) { transform: none; }
  .pcard:nth-child(5n+2), .pcard:nth-child(5n+4) { transform: translateY(calc(50% + var(--F) / 2)); }
}
@media (max-width: 999px) {
  .pgrid { --cols: 3; }
  .pcard:nth-child(5n+2), .pcard:nth-child(5n+4) { transform: none; }
  .pcard:nth-child(3n+2) { transform: translateY(calc(50% + var(--F) / 2)); }
}
@media (max-width: 640px) {
  .pgrid { --cols: 2; }
  .pcard:nth-child(3n+2) { transform: none; }
  .pcard:nth-child(even) { transform: translateY(calc(50% + var(--F) / 2)); }
}

.more { padding: calc(var(--F) * 2) 0 var(--F4); }
.empty { padding: var(--F) 0; }

/* ── Project page: one left-aligned column, 4F margin, about 70 characters wide ─ */
.prose { margin: var(--F4) 0 0 var(--F); max-width: min(70ch, calc(100vw - 2 * var(--F4))); }
.prose > * + * { margin-top: 1em; }
.prose a { color: var(--yellow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.prose a:hover, .prose a:focus-visible { color: var(--cream); }
.prose code { font-family: var(--f-text); border-bottom: 2px solid var(--cream); }
.prose h2, .prose h3 { font-family: var(--f-head); font-weight: 400; text-transform: uppercase; line-height: 0.9; font-size: calc(var(--T) * 1.2); margin-top: 2em; }

.note { border-left: 6px solid var(--cream); padding-left: 1em; }

.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2em 1.5em; }
.meta dt { color: var(--cream); }
.meta dd { margin: 0; }

.yt { display: block; margin-top: 2em; }
.yt .cta { display: inline-block; margin-top: 0.6em; color: var(--cream); }
.yt:hover .cta, .yt:focus-visible .cta { color: var(--yellow); }
.cover, .gallery { margin-top: 2em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--F); }

.links { list-style: none; margin-top: 2em; }
.links li + li { margin-top: 0.4em; }
.prose .links a { color: var(--cream); text-decoration: none; }
.prose .links a:hover, .prose .links a:focus-visible { color: var(--yellow); }

.back { margin: calc(var(--F) * 3) 0 0 var(--F); }

/* ── Footer: quiet, one small centred thing ────────────────────────────────── */
.foot {
  min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0.6em;
  margin-top: calc(var(--F) * 6); padding: 0 0 calc(var(--F) * 12);
}
.foot::before {                                      /* a thin Yellow line across the page as the divider */
  content: ""; display: block; justify-self: stretch; height: 2px; background: var(--yellow);
  margin-bottom: calc(var(--F) * 4);
}
.handle { font-size: clamp(1.3rem, calc(100vw / 30), 3.4rem); line-height: 1; overflow-wrap: anywhere; }
.handle a:hover, .handle a:focus-visible { color: var(--yellow); }
.handle .at { color: var(--yellow); }
.social { font-size: var(--body); }
.social { list-style: none; display: flex; gap: 1.4em; flex-wrap: wrap; justify-content: center; }

/* ── Motion: the title-card animation, copied frame by frame from title-card-jergusino.mp4 ──
   0.11 s of Ink, then the letters rise one by one from the baseline (a new one every 0.02 s,
   each 0.2 s), and at 0.48 s the bar drops from the very top of the screen, overshoots 10 %
   and settles with an ease-out. "i am" is the one addition: it writes on beside the letters. */
@keyframes write { from { clip-path: inset(-25% 100% -25% -5%); } to { clip-path: inset(-25% -5% -25% -5%); } }
@keyframes rise { from { transform: translateY(101%); } to { transform: none; } }
@keyframes drop {                                    /* --drop is set in index.html: the bar starts above the top of the screen */
  0%   { transform: translateY(var(--drop, -140%)); animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }   /* ease out: fast from the top, soft landing */
  65%  { transform: translateY(4.6px); animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }                  /* 10% overshoot of the 46 px bar */
  100% { transform: none; }
}
.hero--home .lead { animation: write 0.45s cubic-bezier(0.35, 0, 0.45, 1) 0.15s both; }
.hero--home .wm-l { transform-box: fill-box; animation: rise 0.2s cubic-bezier(0.2, 0, 0, 1) calc(0.11s + var(--i) * 0.02s) both; }
.hero--home .wm-bar { transform-box: fill-box; animation: drop var(--dur, 0.9s) linear 0.48s both; }

@media (prefers-reduced-motion: reduce) {
  .hero--home .lead, .hero--home .wm-l, .hero--home .wm-bar { animation: none; }
}

/* ── Phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .top-mark img { width: 120px; }
  .hero--page { --title-size: calc(var(--T) * 3.4); }
  .hero--projects { --title-size: calc(var(--T) * 4); }
}

@media print {
  html, body { background: #fff; color: #000; }
}


/* home: the poster wall is cut off hard after about two rows, then one big line leads to all projects */
.wall { --cols: 6; --cw: calc((100vw - (var(--cols) + 1) * var(--F)) / var(--cols)); max-height: calc(var(--cw) * 10 / 7 * 2.4); overflow: hidden; }
@media (max-width: 1279px) { .wall { --cols: 5; } }
@media (max-width: 999px) { .wall { --cols: 3; } }
@media (max-width: 640px) { .wall { --cols: 2; } }
.all {
  display: flex; align-items: center; justify-content: center; gap: 0.35em;
  padding: calc(var(--F) * 3) var(--F) 0; background: var(--ink);
  font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 1; text-align: center;
}
.all svg { width: 0.9em; height: auto; flex: none; }
.hero--in-home { padding-top: calc(var(--F) * 10); padding-bottom: calc(var(--F) * 2); }   /* a section title in the middle of the page, no header above it */

/* project page: facts and the way back are as big as the "všetky projekty" line on the home page */
body.project .meta, body.project .back { font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 1.15; }
body.project .back svg { width: 0.9em; height: auto; vertical-align: -0.05em; margin-left: 0.2em; }

/* similar work at the bottom of a project page: one flat row, no stagger */
.similar { padding: 0 var(--F); margin-top: calc(var(--F) * 8); }
.similar-h { font: inherit; font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 1.15; margin-bottom: calc(var(--F) * 2); }
.pgrid--flat { padding-bottom: 0; }
.pgrid--flat .pcard { transform: none !important; }
@media (max-width: 1279px) { .pgrid--flat .pcard:nth-child(n+6) { display: none; } }
@media (max-width: 999px) { .pgrid--flat .pcard:nth-child(n+4) { display: none; } }
@media (max-width: 640px) { .pgrid--flat .pcard:nth-child(n+3) { display: none; } }

/* skip link: hidden until it gets keyboard focus, then a Yellow pointer top-left */
.skip { position: absolute; z-index: 10; left: var(--F); top: -10em; color: var(--yellow); background: var(--ink); padding: 0.3em 0; }
.skip:focus { top: var(--F); }
main:focus { outline: none; }

/* posters show their own edge colour while the image loads (a flat colour, then a hard cut to the image) */
.pcard a, .cover .zoom { background-color: var(--ink); }

/* 404 */
body.notfound .prose .big { font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 1.15; }
body.notfound .similar { margin-top: calc(var(--F) * 6); }
body.notfound .links svg { width: 0.9em; height: auto; margin-left: 0.2em; }

/* ── Poster viewer: the poster full size on Ink, flip with arrows, close returns ───────────── */
.cover .zoom { display: block; cursor: zoom-in; }
.viewer {
  position: fixed; inset: 0; z-index: 50; background: var(--ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.viewer[hidden] { display: none; }
html.viewer-open, html.viewer-open body { overflow: hidden; }
.v-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--F); padding: var(--F); font-size: clamp(1.1rem, 1.6vw, 1.6rem); }
.v-title { color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-count { color: var(--cream); }
.v-stage { position: relative; min-height: 0; margin: 0 var(--F); touch-action: pan-y; }
.v-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; }
.viewer button {
  font: inherit; color: var(--cream); background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.viewer button:hover, .viewer button:focus-visible { color: var(--yellow); }
.viewer button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.viewer .arr { width: 1.3em; height: auto; fill: var(--yellow); }
.viewer .arr--back { transform: scaleX(-1); }
@media (max-width: 520px) { .viewer button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .viewer .arr { width: 2em; } }