/* agentcija.si: Jata. Flat colour fields with print grain, ink agents, a book serif and a calm grotesk. */

:root {
  --u: min(calc(100vw / 1536), 1.25px);
  --apricot: #f6caa0;
  --lilac: #c8b2d6;
  --ink: #15130f;
  --paper: #f7eee6;
  --key: #10141a;
  --headline: #0b0b09;
  --muted: #4a3a2c;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.world { position: relative; isolation: isolate; }

.hero {
  position: relative;
  min-height: calc(832 * var(--u));
  background: var(--apricot) url("../plates/sky.png") repeat;
  background-size: 280px 176px;
}

.marsh {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: calc(138 * var(--u));
  object-fit: cover;
  object-position: left bottom;
  display: block;
  pointer-events: none;
  clip-path: inset(0 0 3px 0);
  margin-bottom: -3px;
}

/* Screens wider than the comp's 3:2: the first screen fills the window, and the next section starts below the fold instead of being cut. */
.hero { --lift: 0px; }
@media (min-aspect-ratio: 1537/1024) {
  .hero { min-height: max(calc(832 * var(--u)), 100svh); --lift: max(0px, calc((100svh - 832 * var(--u)) / 2)); }
}

.izhodisce {
  position: relative;
  min-height: calc(192 * var(--u));
  background: var(--lilac) url("../grain/lilac.webp") repeat;
  background-size: 384px 384px;
}
/* The comp's lilac paper only in the band the comp shows; it fades into the seamless grain below. */
.izhodisce::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(192 * var(--u));
  background: url("../plates/lilac.png") repeat;
  background-size: 360px 96px;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
  pointer-events: none;
}

/* Layers: colour fields < flock canvas < text and controls */
.swarm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.hero > *, .izhodisce > * { position: relative; z-index: 3; }
.hero > .marsh { position: absolute; z-index: 1; }

::selection { background: var(--ink); color: var(--apricot); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.nw { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: calc(57 * var(--u));
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Header */
.site-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  height: calc(96 * var(--u));
  display: flex;
  align-items: center;
  padding-left: calc(57 * var(--u));
  padding-right: calc(54 * var(--u));
}

.brand { display: inline-flex; flex: none; border-radius: 4px; }
.brand img { display: block; height: calc(61 * var(--u)); width: auto; margin-top: calc(1 * var(--u)); }

.site-nav { margin-left: auto; margin-right: calc(63 * var(--u)); }
.site-nav ul { display: flex; gap: calc(42 * var(--u)); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-block;
  padding-block: 8px;
  color: var(--ink);
  font-size: max(16px, calc(19 * var(--u)));
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.site-nav a:hover { text-decoration-line: underline; }

.menu-toggle { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--key);
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease-out;
}
.pill:hover { background: #262c35; }

.head-pill { min-width: calc(226 * var(--u)); padding: 0 16px; height: max(44px, calc(50 * var(--u))); font-size: max(15px, calc(17.5 * var(--u))); }

/* Hero copy */
.hero-copy { position: relative; margin-left: calc(62 * var(--u)); padding: calc(242 * var(--u) + var(--lift)) 0 calc(118 * var(--u) + var(--lift)); width: calc(640 * var(--u)); }

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--headline);
  font-size: max(40px, calc(80 * var(--u)));
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 .ln { display: block; }

.lede {
  margin: calc(28 * var(--u)) 0 0;
  max-width: calc(520 * var(--u));
  font-size: max(17px, calc(20.5 * var(--u)));
  line-height: 1.39;
}

.pill-hero { margin-top: calc(26 * var(--u)); min-width: calc(240 * var(--u)); padding: 0 18px; height: max(46px, calc(52 * var(--u))); font-size: max(15px, calc(17.5 * var(--u))); }


.mark-anchor {
  position: absolute;
  left: calc(800 * var(--u));
  top: calc(258 * var(--u) + var(--lift));
  width: calc(146 * var(--u));
  height: calc(150 * var(--u));
  pointer-events: none;
}

/* Second section: the starting point */
.izhodisce h2 {
  margin: 0;
  padding: calc(64 * var(--u)) 0 0 calc(62 * var(--u));
  font-family: var(--serif);
  font-weight: 500;
  font-size: max(30px, calc(58 * var(--u)));
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.izhodisce h2 .ln { display: block; }

.rules-wire {
  position: absolute;
  left: calc(880 * var(--u));
  top: calc(101 * var(--u));
  width: calc(592 * var(--u));
  height: calc(80 * var(--u));
}
.rules-line { position: absolute; left: 0; right: 0; top: calc(70 * var(--u)); height: 0; }

.signs { margin: 0; padding: 0; list-style: none; }
.sign {
  position: absolute;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  background: #f6eadc;
  border: calc(2 * var(--u)) solid #141a1f;
  border-radius: 2px;
  font-size: max(14px, calc(16.5 * var(--u)));
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 1px 0 rgba(21, 19, 15, 0.12);
}
.sign:nth-child(1) { left: calc(72 * var(--u)); top: calc(9 * var(--u)); rotate: -3deg; }
.sign:nth-child(2) { left: calc(206 * var(--u)); top: calc(12 * var(--u)); rotate: 2deg; }
.sign:nth-child(3) { left: calc(330 * var(--u)); top: calc(6 * var(--u)); rotate: -4deg; }

/* ------------------------------------------------------------------ */
/* Sections after the first viewport                                    */
/* ------------------------------------------------------------------ */

.field-apricot { background: var(--apricot) url("../grain/apricot.webp") repeat; background-size: 384px 384px; }
.field-lilac { background: var(--lilac) url("../grain/lilac.webp") repeat; background-size: 384px 384px; }
.field-olive { background: #4b4a2a url("../grain/olive.webp") repeat; background-size: 384px 384px; color: var(--paper); }
.field-night { background: #16141c url("../grain/night.webp") repeat; background-size: 384px 384px; color: var(--paper); }

.izhodisce,
main > section:not(.hero) { position: relative; }

main > section:not(.hero):not(.izhodisce) {
  padding: calc(128 * var(--u)) calc(62 * var(--u)) calc(136 * var(--u));
}

main h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--headline);
  font-size: max(30px, calc(58 * var(--u)));
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.field-olive h2, .field-night h2 { color: var(--paper); }
main h2 .ln { display: block; }

main h3 {
  margin: 0 0 calc(8 * var(--u));
  font-size: max(17px, calc(21 * var(--u)));
  line-height: 1.25;
  font-weight: 500;
}

main section p { margin: 0; }

.sec-head { margin-bottom: calc(64 * var(--u)); }
.sec-intro { margin-top: calc(28 * var(--u)); max-width: calc(760 * var(--u)); }
.sec-intro p { font-size: max(16px, calc(19 * var(--u))); line-height: 1.5; max-width: 36em; }
.sec-intro p + p { margin-top: calc(14 * var(--u)); }
.sec-intro .principle { margin-top: calc(22 * var(--u)); }
.principle { font-family: var(--serif); font-weight: 500; font-size: max(19px, calc(24 * var(--u))) !important; line-height: 1.3 !important; }


.scene { position: relative; pointer-events: none; }
.scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The starting point (second section, lilac) */
.izhodisce-body { padding: calc(40 * var(--u)) calc(62 * var(--u)) calc(128 * var(--u)); }
.sec-lede { max-width: calc(620 * var(--u)); font-size: max(17px, calc(20.5 * var(--u))); line-height: 1.45; }
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: calc(64 * var(--u)); margin-top: calc(56 * var(--u)); }
.track { border-top: 1px solid var(--ink); padding-top: calc(20 * var(--u)); }
.track p { font-size: max(16px, calc(18 * var(--u))); line-height: 1.5; max-width: 32em; }
.scene--track { width: min(100%, calc(560 * var(--u))); height: calc(120 * var(--u)); margin-top: calc(16 * var(--u)); }

/* What the agents do: a ledger */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(56 * var(--u)) calc(40 * var(--u)); }
.ledger li { border-top: 1px solid var(--ink); padding-top: calc(16 * var(--u)); }
.ledger h3 { margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); }
.ledger p { font-size: max(16px, calc(17.5 * var(--u))); line-height: 1.5; }
.scene--job { width: min(100%, calc(220 * var(--u))); height: calc(98 * var(--u)); }

/* Autonomy you allow */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u)); border-top: 1px solid var(--ink); padding-top: calc(28 * var(--u)); }
.mode { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "stage" "act"; align-content: start; }
/* the three cards share their rows, so the pictures and the keys line up */
@supports (grid-template-rows: subgrid) { .modes { grid-template-rows: repeat(4, auto); } .mode { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } }
.mode > h3 { grid-area: title; }
.mode > p:not(.act-live) { grid-area: text; }
.mode > .scene--mode, .mode > .log { grid-area: stage; }
.mode > .key, .mode > .choice { grid-area: act; justify-self: start; }
.mode p { font-size: max(16px, calc(18 * var(--u))); line-height: 1.5; }
.scene--mode { height: calc(170 * var(--u)); margin: calc(12 * var(--u)) 0 calc(16 * var(--u)); }

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 calc(22 * var(--u));
  border-radius: 999px;
  border: 1.5px solid var(--key);
  background: var(--key);
  color: var(--paper);
  font: 500 max(15px, calc(17 * var(--u))) / 1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.key--ghost { background: transparent; color: var(--ink); }
.key--ghost[aria-pressed="true"], .key--ghost[aria-expanded="true"] { background: var(--key); color: var(--paper); }
.key:hover { background: #262c35; color: var(--paper); }
.choice { display: flex; gap: calc(12 * var(--u)); }

.log { position: relative; z-index: 2; align-self: start; list-style: none; margin: calc(12 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); background: #f6eadc; border: 1.5px solid #141a1f; font-size: max(12px, calc(14 * var(--u))); line-height: 1.45; }
.mode:has(.log:not([hidden])) .scene--mode { opacity: 0.18; transition: opacity 0.2s; }
.log span { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 0.6em; }

/* Governance: four terraces */
.terraces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(40 * var(--u)); align-items: start; }
.terraces li { border-top: 1px solid var(--ink); padding-top: calc(18 * var(--u)); }
.terraces li:nth-child(1) { margin-top: calc(108 * var(--u)); }
.terraces li:nth-child(2) { margin-top: calc(72 * var(--u)); }
.terraces li:nth-child(3) { margin-top: calc(36 * var(--u)); }
.terraces p { font-size: max(15px, calc(17.5 * var(--u))); line-height: 1.5; }
.scene--terraces { height: calc(240 * var(--u)); margin-top: calc(24 * var(--u)); }

/* One unit, then the group */
.skupina { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(48 * var(--u)); align-items: center; min-height: calc(620 * var(--u)); }
.skupina-copy p { margin-top: calc(28 * var(--u)) !important; font-size: max(16px, calc(19 * var(--u))); line-height: 1.5; max-width: 30em; }
.units { position: absolute; right: calc(62 * var(--u)); top: calc(110 * var(--u)); margin: 0; text-align: right; }
.units-n { display: block; font-family: var(--serif); font-weight: 500; font-size: max(72px, calc(120 * var(--u))); line-height: 1; font-variant-numeric: tabular-nums; }
.units-l { font-size: max(16px, calc(18 * var(--u))); }
.scene--islands { height: calc(460 * var(--u)); }

/* Evidence first */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(32 * var(--u)); counter-reset: step; }
.steps li { border-top: 1px solid var(--ink); padding-top: calc(18 * var(--u)); counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: calc(12 * var(--u)); font-family: var(--serif); font-weight: 500; font-size: max(30px, calc(44 * var(--u))); line-height: 1; }
.steps p { font-size: max(15px, calc(17 * var(--u))); line-height: 1.5; }
@supports (grid-template-rows: subgrid) { @media (min-width: 901px) { .steps { grid-template-rows: auto auto 1fr; row-gap: 0; } .steps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; } } }
.scene--steps { height: calc(80 * var(--u)); }

/* References */
.reference h2 { margin-bottom: calc(64 * var(--u)); }
.refs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(80 * var(--u)); }
.ref { position: relative; }
.ref h3 { font-family: var(--serif); font-weight: 500; font-size: max(28px, calc(40 * var(--u))); margin-bottom: calc(14 * var(--u)); }
.ref p { font-size: max(16px, calc(18 * var(--u))); line-height: 1.5; max-width: 32em; }
.bars { display: grid; gap: calc(14 * var(--u)); margin-top: calc(72 * var(--u)); }
.bar { position: relative; height: calc(44 * var(--u)); width: max(calc(var(--v) * 100%), 4px); white-space: nowrap; background: #2b2a24; color: var(--paper); border-radius: calc(4 * var(--u)); display: flex; align-items: center; padding-left: calc(14 * var(--u)); font-size: max(15px, calc(17 * var(--u))); font-weight: 500; }
.bar--now { background: var(--key); }
/* A bar too short for its label: the true length, the label beside it in ink. */
.bar--tiny { padding-left: 0; }
.bar--tiny span { position: absolute; left: calc(100% + 12px); color: var(--ink); }
.scene--bars { position: absolute; left: 0; right: 0; height: calc(70 * var(--u)); margin-top: calc(-186 * var(--u)); }
.more { display: inline-block; margin-top: calc(24 * var(--u)); color: var(--ink); font-size: max(15px, calc(17 * var(--u))); text-underline-offset: 0.25em; }
.refs-all { margin-top: calc(56 * var(--u)); }

/* Security: night */
.field-night .sec-intro p { color: #e9e1ec; }
.scene--boundary { height: calc(320 * var(--u)); margin-bottom: calc(64 * var(--u)); }
.boundary-label { position: absolute; left: 50%; top: calc(4 * var(--u)); translate: -50% 0; font-size: max(13px, calc(15 * var(--u))); color: #cdbcd9; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(32 * var(--u)); margin: 0; }
.facts div { border-top: 1px solid rgba(247, 238, 230, 0.6); padding-top: calc(16 * var(--u)); }
.facts dt { font-weight: 500; font-size: max(16px, calc(19 * var(--u))); }
.facts dd { margin: calc(6 * var(--u)) 0 0; font-size: max(14px, calc(16.5 * var(--u))); line-height: 1.5; color: #e9e1ec; }

/* Team */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u)); }
.photo { position: relative; margin-bottom: calc(18 * var(--u)); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(4 * var(--u)); filter: grayscale(1) contrast(1.05); }
.scene--perch { position: absolute; left: 0; right: 0; top: calc(-64 * var(--u)); height: calc(72 * var(--u)); }
.person p { font-size: max(15px, calc(17 * var(--u))); line-height: 1.5; }
.person .role { color: var(--muted); }
.person p { text-wrap: balance; }
@media (min-width: 1300px) { .person p { white-space: nowrap; } }

/* Questions */
.vprasanja h2 { margin-bottom: calc(56 * var(--u)); }
.faq { max-width: calc(980 * var(--u)); border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid rgba(21, 19, 15, 0.4); }
.faq summary { display: flex; justify-content: space-between; gap: 1em; padding: calc(20 * var(--u)) 0; font-size: max(17px, calc(21 * var(--u))); font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-top: 0.2em; background: currentColor; -webkit-mask: url("../icons/plus.svg") center / contain no-repeat; mask: url("../icons/plus.svg") center / contain no-repeat; }
.faq details[open] summary::after { -webkit-mask-image: url("../icons/minus.svg"); mask-image: url("../icons/minus.svg"); }
.faq details p { padding: 0 0 calc(22 * var(--u)); max-width: 44em; font-size: max(16px, calc(18 * var(--u))); line-height: 1.55; }
.scene--sleeper { position: absolute; right: calc(62 * var(--u)); bottom: 0; width: calc(320 * var(--u)); height: calc(150 * var(--u)); }

/* Closing call */
.zacetek { min-height: calc(760 * var(--u)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(40 * var(--u)); padding-bottom: calc(220 * var(--u)) !important; }
.zacetek-copy { align-self: center; position: relative; z-index: 3; }
.zacetek-copy p { margin-top: calc(26 * var(--u)) !important; font-size: max(17px, calc(20.5 * var(--u))); line-height: 1.45; max-width: 26em; }
.zacetek .pill-hero { margin-top: calc(32 * var(--u)); }
.mail { font-size: max(15px, calc(17 * var(--u))) !important; }
.mail a { color: var(--ink); text-underline-offset: 0.25em; }
.scene--home { height: calc(460 * var(--u)); align-self: center; }
.marsh--end { position: absolute; left: 0; bottom: -3px; top: auto; width: 100%; height: calc(138 * var(--u)); object-fit: cover; object-position: left bottom; }

/* Footer */
.site-foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u)); padding: calc(88 * var(--u)) calc(62 * var(--u)) calc(40 * var(--u)); background: #16141c url("../grain/night.webp") repeat; background-size: 384px 384px; color: var(--paper); }
.foot-brand img { height: calc(48 * var(--u)); width: auto; }
.foot-brand p { margin: calc(18 * var(--u)) 0 0; font-size: max(16px, calc(18 * var(--u))); }
.foot-small { font-size: max(13px, calc(15 * var(--u))) !important; color: #d9cfdc; max-width: 30em; line-height: 1.5; }
.foot-col h2 { font-family: var(--sans); font-size: max(13px, calc(15 * var(--u))); font-weight: 500; line-height: 1.4; color: #cdbcd9; margin: 0 0 calc(10 * var(--u)); letter-spacing: 0; }
.foot-col h2 + ul + h2 { margin-top: calc(24 * var(--u)); }
.foot-col ul { list-style: none; margin: 0; padding: 0; font-size: max(14px, calc(16 * var(--u))); line-height: 1.9; }
.site-foot a { color: var(--paper); text-underline-offset: 0.25em; }
.foot-legal { grid-column: 1 / -1; margin: calc(40 * var(--u)) 0 0; padding-top: calc(20 * var(--u)); border-top: 1px solid rgba(247, 238, 230, 0.25); font-size: max(12px, calc(14 * var(--u))); color: #cdbcd9; }
.site-foot :focus-visible { outline-color: var(--paper); }
.field-night :focus-visible, .field-olive :focus-visible { outline-color: var(--paper); }

/* Section reveal (set only by script, only with motion allowed) */
.will-reveal { opacity: 0; translate: 0 18px; transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), translate 720ms cubic-bezier(0.16, 1, 0.3, 1); }
.will-reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .will-reveal { opacity: 1; translate: none; transition: none; } }

/* ------------------------------------------------------------------ */
/* Narrow screens (phones and portrait tablets): one column, flow layout */
/* ------------------------------------------------------------------ */
.flock-stage { display: none; }

@media (max-width: 900px) {
  :root { --u: 0.62px; }

  .site-head { height: 68px; padding: 0 20px; }
  .brand img { height: 34px; margin: 0; }
  .menu-toggle {
    display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 18px;
    border: 1.5px solid var(--key); border-radius: 999px; background: transparent; color: var(--ink);
    font: 500 16px/1 var(--sans); cursor: pointer;
  }
  .site-nav { display: none; position: absolute; top: 64px; left: 12px; right: 12px; margin: 0; padding: 12px 20px; background: var(--paper); border: 1.5px solid #141a1f; border-radius: 8px; }
  .site-nav[data-open] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 12px 0; font-size: 18px; }
  .head-pill { display: none; }

  .hero { min-height: 0; padding: 76px 0 0; --lift: 0px; }
  .flock-stage { display: block; height: clamp(250px, 62vw, 420px); }
  .mark-anchor { display: none; }
  .hero-copy { width: auto; padding: 0 20px; margin: 30px 0 0; }
  .hero h1 { font-size: clamp(38px, 10.36vw, 76px); }
  .lede { margin-top: 18px; font-size: 18px; max-width: 34em; }
  .pill-hero { margin-top: 22px; }
  .hero > .marsh { position: relative; bottom: auto; display: block; margin-top: 36px; height: clamp(64px, 18vw, 120px); }

  .izhodisce h2 { padding: 44px 20px 0; font-size: clamp(30px, 7.6vw, 47px); }
  .rules-wire { position: relative; left: auto; top: auto; width: auto; height: 104px; margin: 18px 20px 0; }
  .rules-line { top: 88px; }
  .sign { font-size: 14px; }
  .sign:nth-child(1) { left: 12%; top: 34px; }
  .sign:nth-child(2) { left: 38%; top: 38px; }
  .sign:nth-child(3) { left: 56%; top: 30px; }
  .izhodisce-body { padding: 36px 20px 80px; }
  .tracks { grid-template-columns: 1fr; gap: 40px; }
  .scene--track { height: 110px; }

  main > section:not(.hero):not(.izhodisce) { padding: 72px 20px 84px; }
  main h2 { font-size: clamp(30px, 7.6vw, 47px); }
  .sec-head { margin-bottom: 40px; }
  .sec-intro { margin-top: 18px; }

  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .ledger li { padding-top: 14px; }
  .ledger h3 { margin: 12px 0 6px; }
  .scene--job { width: min(100%, 220px); height: 98px; }

  .modes { grid-template-columns: 1fr; gap: 44px; }
  .scene--mode { height: 150px; }

  .terraces { grid-template-columns: 1fr; gap: 24px; }
  .terraces li:nth-child(n) { margin-top: 0; }
  .scene--terraces { height: 170px; }

  .skupina { grid-template-columns: 1fr; min-height: 0; }
  .units { position: static; text-align: left; margin-top: 28px; }
  .scene--islands { height: 260px; }

  .steps { grid-template-columns: 1fr; gap: 24px; }
  .scene--steps { display: none; }

  .refs { grid-template-columns: 1fr; gap: 64px; }
  .bars { margin-top: 64px; }
  .bar { height: 40px; }
  .scene--bars { height: 56px; margin-top: -164px; }

  .scene--boundary { height: 230px; margin-bottom: 40px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 24px; }

  .people { grid-template-columns: 1fr; gap: 56px; max-width: 380px; }
  .scene--perch { top: -50px; height: 58px; }

  .faq summary { font-size: 18px; }
  .scene--sleeper { width: 220px; height: 110px; right: 12px; }

  .zacetek { grid-template-columns: 1fr; min-height: 0; padding-bottom: 150px !important; }
  .scene--home { height: 300px; }
  .marsh--end { height: clamp(64px, 18vw, 120px); }

  .site-foot { grid-template-columns: 1fr 1fr; padding: 56px 20px 32px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .site-foot { grid-template-columns: 1fr; }
}

/* Phones: the job grid goes to one column. */
@media (max-width: 600px) {
  .ledger { grid-template-columns: 1fr; gap: 32px; }
}

/* Reed silhouettes on the line where an apricot field meets the next one */
.edge-reeds::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: url("../grain/reed-edge.webp") repeat-x left bottom;
  background-size: 1536px 80px;
  pointer-events: none;
}
@media (max-width: 900px) {
  .edge-reeds::after { height: 56px; background-size: 1075px 56px; }
}