/* Story: Tichí blázni? (rybárčenie). Všetko pod .rb
   Nálady: breh za úsvitu (hub – tmavá zeleno-modrá voda, trstina, červený plavák), papier starého atlasu (atlas), hlboká modrá (more). */
.rb {
  --deep: #0e2a33;
  --pool: #143a44;
  --reed: #6f8f4e;
  --float: #e2562f;
  --sand: #e8dcc0;
  --paper: #efe3c2;
  --cream: #f6f0e2;
  --ink: #17201f;
  --dim: #9fb2b0;
  --line: #24505a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --bar: 52px;
  --gutter: clamp(16px, 4vw, 48px);
  --bg: var(--deep);
  --fg: var(--cream);
  --acc: var(--float);
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: clip;
}
.rb--atlas { --bg: var(--paper); --fg: #2a2318; --dim: #74684f; --line: #d4c595; --acc: #a8432a; }
.rb--sea { --bg: #062a4a; --pool: #0a3a63; --line: #1d5486; --dim: #a9c3dc; --acc: #f2b33d; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: #0e2a33; }
:where(.rb) * { box-sizing: border-box; }
:where(.rb) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
:where(.rb) :is(ul, ol) { list-style: none; }
:where(.rb) img { display: block; max-width: 100%; height: auto; }
:where(.rb) a { color: inherit; }
.rb :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.rb-wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.rb-wrap--narrow { width: min(44rem, 100% - 2 * var(--gutter)); }
.rb-kicker { font: 500 .76rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.rb h2 { font: 600 clamp(2.2rem, 6.4vw, 4rem)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.rb h3 { font: 600 clamp(1.5rem, 4vw, 2rem)/1.1 var(--serif); }
.rb-head { display: grid; gap: .9rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); max-width: 46rem; }
.rb-head p:not(.rb-kicker):not(.rb-joke) { color: var(--dim); font-size: 1.1rem; }
.rb-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border: 1px solid var(--acc); background: none; color: var(--acc); text-decoration: none; font: 500 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.rb-btn:hover { background: var(--acc); color: var(--bg); }
.rb-note { margin-top: 1.6rem; font-size: .84rem; color: var(--dim); max-width: 44rem; }
.rb-joke { font: italic 500 clamp(1.15rem, 3vw, 1.4rem)/1.35 var(--serif); color: var(--acc); }

/* lišta */
.rb-bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: 1rem; padding-inline: var(--gutter); background: color-mix(in srgb, #0b2027 88%, transparent); color: #f6f0e2; backdrop-filter: blur(10px); }
.rb-bar__logo { font: 600 1.25rem var(--serif); text-decoration: none; white-space: nowrap; }
.rb-bar__logo span { font-style: italic; color: #e2562f; }
.rb-bar__nav { display: none; gap: 1.3rem; margin-inline: auto 0; }
.rb-bar__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #c9d6d4; white-space: nowrap; }
.rb-bar__nav a:hover { color: #fff; }
.rb-lang { display: flex; margin-left: auto; }
.rb-lang a { display: grid; place-items: center; min-width: 40px; min-height: 44px; font-size: .74rem; letter-spacing: .12em; text-decoration: none; color: #8fa5a3; }
.rb-lang a[aria-current] { color: #fff; font-weight: 600; }
.rb-bar__progress { position: absolute; inset: auto 0 0 0; height: 2px; }
.rb-bar__progress i { display: block; height: 100%; background: #e2562f; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (min-width: 860px) { .rb-bar__nav { display: flex; } .rb-lang { margin-left: 1.2rem; } }
:is(.rb--atlas, .rb--sea) .rb-bar__nav { display: flex; overflow: hidden; }
@media (max-width: 859px) { :is(.rb--atlas, .rb--sea) .rb-bar__nav a:not(:first-child) { display: none; } :is(.rb--atlas, .rb--sea) .rb-bar__logo { display: none; } :is(.rb--atlas, .rb--sea) .rb-bar__nav { margin-inline: 0 auto; } }

/* úvod */
.rb-hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }
.rb-hero picture { display: contents; }
.rb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rb-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bg) 3%, color-mix(in srgb, var(--bg) 62%, transparent) 40%, transparent 78%); }
.rb-hero__text { padding: calc(var(--bar) + 2rem) var(--gutter) clamp(2.5rem, 8vw, 5rem); display: grid; gap: 1rem; }
.rb-hero h1.rb-kicker { color: #fff; }
.rb-quote { display: grid; gap: .8rem; }
.rb-quote p { max-width: 20ch; font: italic 500 clamp(2.1rem, 6vw, 4.6rem)/1.05 var(--serif); text-wrap: balance; }
.rb-quote footer { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.rb-hero--sea .rb-quote p { max-width: 34ch; font-size: clamp(1.4rem, 3.4vw, 2.3rem); line-height: 1.25; }
.rb-intro { width: min(42rem, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(2.5rem, 7vw, 4.5rem); display: grid; gap: 1.2rem; font-size: 1.14rem; }
.rb-intro__sub { font: italic 500 clamp(1.4rem, 4vw, 1.9rem)/1.25 var(--serif); color: var(--acc); }

/* scrollované kapitoly */
.rb-stage { display: none; }
.rb-scrolly .rb-steps { width: min(44rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.rb-step { display: grid; gap: .8rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.rb-js .rb-stage { display: block; position: sticky; top: var(--bar); z-index: 2; height: 44svh; overflow: hidden; background: var(--stage-bg, var(--bg)); border-bottom: 1px solid var(--line); }
.rb-stage__pos { position: absolute; right: .8rem; bottom: .5rem; z-index: 3; font-size: .72rem; letter-spacing: .16em; color: #fff; text-shadow: 0 1px 6px #000; }
.rb-js .rb-scrolly .rb-steps { padding-block: 4svh 16svh; }
.rb-js .rb-step { min-height: 54svh; align-content: center; opacity: .3; border-top: 0; transition: opacity .45s; }
.rb-js .rb-step.is-on { opacity: 1; }
@media (min-width: 900px) {
  .rb-js .rb-scrolly { display: grid; grid-template-columns: 1fr 1fr; }
  .rb-js .rb-stage { height: calc(100svh - var(--bar)); border-bottom: 0; }
  .rb-js .rb-scrolly .rb-steps { width: min(34rem, 100% - 2 * var(--gutter)); padding-block: 12svh 24svh; }
  .rb-js .rb-step { min-height: 76svh; }
}

/* rozhodnutia pred prvým náhodom */
.rb-dec { padding-top: clamp(3rem, 8vw, 6rem); background: var(--pool); --stage-bg: var(--pool); }
.rb-dec .rb-steps { counter-reset: d; }
.rb-dec .rb-step { counter-increment: d; }
.rb-dec .rb-step::before { content: "0" counter(d); font: 500 .8rem var(--sans); letter-spacing: .22em; color: var(--acc); }
.rb-count { height: 100%; display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem var(--gutter); text-align: center; }
.rb-count__n { display: flex; align-items: baseline; gap: .5rem; }
.rb-count__n b { font: 600 clamp(4.5rem, 20svh, 11rem)/.8 var(--serif); color: var(--acc); }
.rb-count__n span { font: 500 1.4rem var(--serif); color: var(--dim); }
.rb-count__l { font: 500 .76rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-count ol { margin-top: 1rem; display: none; gap: .35rem; justify-items: start; text-align: left; }
.rb-count li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--dim); opacity: .35; transition: opacity .4s, color .4s; }
.rb-count li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; border: 1px solid currentColor; border-radius: 50%; }
.rb-count li.is-done, .rb-count li.is-on { opacity: 1; color: var(--cream); }
.rb-count li.is-done::before, .rb-count li.is-on::before { background: var(--acc); border-color: var(--acc); }
@media (min-width: 900px) and (min-height: 640px) { .rb-count ol { display: grid; } }
.rb-punch { padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 6rem); text-align: center; font: italic 500 clamp(1.8rem, 5.4vw, 3.2rem)/1.1 var(--serif); color: var(--acc); }

/* päť techník */
.rb-tech { padding-block: clamp(4rem, 10vw, 7rem); }
.rb-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-bottom: 1.6rem; background: var(--line); border: 1px solid var(--line); }
.rb-tabs[hidden] { display: none; }
.rb-tabs button { display: grid; justify-items: center; gap: .3rem; padding: .8rem .2rem; border: 0; background: var(--bg); color: var(--dim); font: 500 clamp(.6rem, 2.2vw, .82rem) var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.rb-tabs svg { width: clamp(1.8rem, 7vw, 3rem); height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rb-tabs button[aria-selected="true"] { background: var(--pool); color: var(--acc); box-shadow: inset 0 -3px 0 var(--acc); }
.rb-tech__list { display: grid; gap: 2.4rem; }
.rb-tech__item { display: grid; gap: 1.2rem; }
.rb-js .rb-tech__item { display: none; }
.rb-js .rb-tech__item.is-on { display: grid; animation: rb-in .5s both; }
.rb-tech__icon { width: min(42vw, 12rem); fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rb-tech__body { display: grid; gap: .9rem; max-width: 44rem; }
.rb-tech__body h3 { font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: .95; }
.rb-tech__tag { font: italic 500 clamp(1.25rem, 3.6vw, 1.7rem)/1.25 var(--serif); color: var(--acc); }
.rb-tech dl { display: grid; gap: 1px; margin-top: .6rem; background: var(--line); border: 1px solid var(--line); }
.rb-tech dl div { display: grid; gap: .2rem; padding: .8rem 1rem; background: var(--bg); }
.rb-tech dt, .rb-rec dt { font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
@media (min-width: 700px) { .rb-tech dl { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .rb-tech__item { grid-template-columns: 14rem 1fr; gap: 3rem; align-items: start; } .rb-tech__icon { width: 100%; } }
.rb-tech__outro { margin-top: clamp(2rem, 5vw, 3rem); max-width: 44rem; display: grid; gap: 1rem; color: var(--dim); }
@keyframes rb-in { from { opacity: 0; transform: translateY(.6rem); } }

/* rez vodou */
.rb-water { padding-block: clamp(4rem, 10vw, 7rem) 0; background: #0a2129; --stage-bg: #0a2129; }
.rb-scene { position: relative; width: 100%; height: 100%; }
.rb-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-w__sky { fill: #c9d8cf; }
.rb-w__water { fill: #1d5564; }
.rb-w__bed { fill: #3a2f22; }
.rb-w__bank { fill: #55683a; }
.rb-w__surf { fill: none; stroke: #e7f1ee; stroke-width: 2; opacity: .7; }
.rb-w__reed path, .rb-w__weed path { fill: none; stroke: #7fa055; stroke-width: 3; stroke-linecap: round; }
.rb-w__reed ellipse { fill: #6b4a2a; }
.rb-w__pad ellipse { fill: #6f9a4a; }
.rb-w__pad path { fill: none; stroke: #5a7f3c; stroke-width: 1.5; }
.rb-w__snag path { fill: none; stroke: #20170f; stroke-width: 7; stroke-linecap: round; }
.rb-w__thermo { stroke: #7fb3bf; stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .5; }
.rb-w__weir { fill: #7b8588; }
.rb-w__stone ellipse { fill: #6a655c; }
.rb-w__flow path { fill: none; stroke: #cfe6e6; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.rb-scene__label { position: absolute; left: .8rem; top: .6rem; z-index: 3; font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #17201f; }
.rb-spot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: 0; transition: opacity .5s; }
.rb-spot.is-on { opacity: 1; }
.rb-spot i { position: absolute; left: -9vmin; top: -9vmin; width: 18vmin; height: 18vmin; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(5, 18, 24, .5); }
.rb-spot__f { position: absolute; width: clamp(5.5rem, 22vmin, 12rem); max-width: none; filter: drop-shadow(0 .3rem .5rem rgba(0, 0, 0, .5)); transform: translate(-50%, -50%) scale(.7); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.rb-spot.is-on .rb-spot__f { transform: translate(-50%, -50%); }
.rb-spot__f--0 { left: 0; top: 0; }
.rb-spot__f--1 { left: 7vmin; top: -8vmin; width: clamp(4rem, 15vmin, 8rem); }
.rb-spot__f--2 { left: -8vmin; top: 8vmin; width: clamp(4rem, 15vmin, 8rem); }
.rb-water__h { padding-block: 1.4rem 0; font: 500 .76rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.rb-js .rb-water__h { display: none; }
.rb-zone h4 { font: 600 clamp(1.9rem, 5.4vw, 2.8rem)/1 var(--serif); }
.rb-zone__depth { font: 500 .74rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.rb-zone__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; font-size: .9rem; }
.rb-zone__row b { margin-right: .3rem; font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rb-zone__row a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; }
.rb-zone__row a:hover { border-color: var(--acc); }
.rb-zone__tip { font: italic 500 1.15rem/1.35 var(--serif); color: #cfe0dd; }
.rb-water > .rb-wrap:last-child { padding-bottom: clamp(3rem, 8vw, 5rem); }

/* rok na vode */
.rb-year { padding-block: clamp(4rem, 10vw, 7rem); }
.rb-year__grid { display: grid; gap: 2rem; }
.rb-ring { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.rb-ring[hidden] { display: none; }
.rb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-ring__m { cursor: pointer; outline: none; }
.rb-ring__m circle { fill: none; stroke-width: 44; stroke: var(--sc); opacity: .45; transition: opacity .3s, stroke-width .3s; }
.rb-ring__m[data-s="w"] { --sc: #7aa7c7; }
.rb-ring__m[data-s="s"] { --sc: #8fb35a; }
.rb-ring__m[data-s="u"] { --sc: #e3b23c; }
.rb-ring__m[data-s="a"] { --sc: #c8622f; }
.rb-ring__m:hover circle, .rb-ring__m:focus-visible circle { opacity: .75; }
.rb-ring__m.is-on circle { opacity: 1; stroke-width: 56; }
.rb-ring__m text { fill: #0b2027; font: 600 12px var(--sans); letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.rb-ring__c { width: 52%; display: grid; gap: .3rem; text-align: center; }
.rb-ring__c b { font: 600 clamp(1.8rem, 6vw, 2.6rem)/1 var(--serif); }
.rb-ring__c span { font: italic 500 clamp(1rem, 3vw, 1.25rem)/1.2 var(--serif); color: var(--acc); }
.rb-months { display: grid; gap: 2.4rem; }
.rb-month { display: grid; gap: .8rem; align-content: start; }
.rb-js .rb-month { display: none; }
.rb-js .rb-month.is-on { display: grid; animation: rb-in .45s both; }
.rb-month h3 small { display: block; margin-bottom: .3rem; font: 500 .76rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.rb-month h4 { margin-top: .6rem; font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-month b { font-weight: 600; }
.rb-month ul { display: grid; gap: .2rem; }
.rb-month li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.rb-month li a { display: grid; gap: .2rem; text-decoration: none; }
.rb-month li img { width: 100%; }
.rb-month li strong { font: 600 1.15rem var(--serif); }
.rb-month li span { font-size: .92rem; color: #cfdcda; }
@media (min-width: 900px) { .rb-year__grid { grid-template-columns: minmax(0, 26rem) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .rb-ring { position: sticky; top: calc(var(--bar) + 1.5rem); } }

/* rekordy a latina */
.rb-rec { padding-block: clamp(4rem, 10vw, 7rem); background: var(--pool); }
.rb-rec__list { display: grid; gap: 1.2rem; }
.rb-rec__list li { display: grid; gap: .8rem; align-content: start; padding: 1.6rem 1.4rem 1.8rem; background: var(--bg); border-top: 3px solid var(--acc); }
.rb-rec__num { display: flex; align-items: baseline; gap: .5rem; }
.rb-rec__num b { font: 600 clamp(3.4rem, 12vw, 5.6rem)/.85 var(--serif); color: var(--acc); }
.rb-rec__num span { font: 500 1.3rem var(--serif); color: var(--dim); }
.rb-rec__list p:not(.rb-rec__num) { color: #d2dedc; font-size: .98rem; }
.rb-rec dl { display: grid; gap: .5rem; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .86rem; }
.rb-rec dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem; }
@media (min-width: 900px) { .rb-rec__list { grid-template-columns: repeat(3, 1fr); } }
.rb-latina { display: grid; gap: 2rem; margin-top: clamp(3rem, 8vw, 5rem); }
.rb-latina__text { display: grid; gap: 1rem; align-content: start; }
.rb-grow { display: grid; gap: 1rem; justify-items: center; padding: 1.6rem 1.2rem; background: var(--bg); border: 1px solid var(--line); text-align: center; }
.rb-grow__fish { width: 100%; height: clamp(9rem, 34vw, 15rem); display: grid; place-items: center; }
.rb-grow__fish img { width: 96%; max-height: 100%; object-fit: contain; transform: scale(var(--s, .6)); transition: transform .9s cubic-bezier(.3, 1.4, .4, 1); filter: drop-shadow(0 .5rem .8rem rgba(0, 0, 0, .4)); }
.rb-grow ol { display: grid; gap: 1rem; }
.rb-grow li { display: grid; gap: .2rem; }
.rb-js .rb-grow li { display: none; }
.rb-js .rb-grow li.is-on { display: grid; animation: rb-in .4s both; }
.rb-grow small { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-grow b { font: 600 clamp(2.6rem, 9vw, 4rem)/1 var(--serif); color: var(--acc); }
.rb-grow span { font: italic 500 1.25rem/1.3 var(--serif); }
@media (min-width: 900px) { .rb-latina { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } }

/* kvíz */
.rb-quizwrap { margin-top: clamp(3rem, 8vw, 5rem); }
.rb-quizwrap--atlas { margin-top: 0; padding-block: clamp(3.5rem, 9vw, 6rem); border-top: 1px solid var(--line); }
.rb-quiz { display: grid; gap: 1rem; padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--quiz-bg, var(--bg)); border: 1px solid var(--line); max-width: 46rem; }
.rb-quiz[hidden] { display: none; }
.rb--atlas .rb-quiz { --quiz-bg: #f8f1dc; }
.rb-quiz__pos { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-quiz__q { font: 600 clamp(1.5rem, 4.4vw, 2.1rem)/1.15 var(--serif); text-wrap: balance; }
.rb-quiz__opts { display: grid; gap: .6rem; }
.rb-quiz__opts button { min-height: 52px; padding: .6rem 1rem; border: 1px solid var(--line); background: none; color: inherit; font: 500 1rem var(--sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.rb-quiz__opts button:hover:not(:disabled) { border-color: var(--acc); }
.rb-quiz__opts button.is-right { background: #2f7a4b; border-color: #2f7a4b; color: #fff; }
.rb-quiz__opts button.is-wrong { background: #a63a2b; border-color: #a63a2b; color: #fff; }
.rb-quiz__opts--img button { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: center; }
.rb-quiz__opts--img img { width: 100%; }
.rb-quiz__why { display: grid; gap: 1rem; justify-items: start; }
.rb-quiz__score { font: 500 1.4rem var(--serif); color: var(--dim); }
.rb-quiz__score b { font: 600 clamp(3.4rem, 12vw, 5rem)/.9 var(--serif); color: var(--acc); }
@media (min-width: 700px) { .rb-quiz__opts { grid-template-columns: repeat(2, 1fr); } .rb-quiz__opts--img { grid-template-columns: repeat(3, 1fr); } .rb-quiz__opts--img button { grid-template-columns: 1fr; text-align: center; } }

/* upútavky na atlas a more */
.rb-tease { display: grid; }
.rb-tease > a { position: relative; display: grid; gap: .9rem; align-content: end; justify-items: start; min-height: min(80svh, 38rem); padding: clamp(2rem, 6vw, 4rem) var(--gutter); text-decoration: none; overflow: hidden; isolation: isolate; }
.rb-tease strong { font: 600 clamp(2rem, 6vw, 3.4rem)/1 var(--serif); max-width: 16ch; text-wrap: balance; }
.rb-tease__atlas { background: var(--paper); color: #2a2318; --acc: #a8432a; }
.rb-tease__atlas > span:not(.rb-kicker):not(.rb-btn) { max-width: 30rem; color: #5c5240; }
.rb-tease__fish { position: absolute; inset: 6% -8% auto 20%; z-index: -1; display: grid; gap: 2%; grid-template-columns: repeat(2, 1fr); transform: rotate(-6deg); opacity: .95; }
.rb-tease__fish img { width: 100%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.rb-tease__fish img:nth-child(odd) { transform: translateX(-8%); }
.rb-tease__atlas:hover .rb-tease__fish img { transform: translateX(4%); }
.rb-tease__sea { color: #fff; --acc: #f2b33d; }
.rb-tease__sea img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s; }
.rb-tease__sea:hover img { transform: scale(1.05); }
.rb-tease__sea::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 28, 52, .92), rgba(4, 28, 52, .2)); }
.rb-tease__text { display: grid; gap: .9rem; justify-items: start; max-width: 32rem; }
@media (min-width: 900px) { .rb-tease { grid-template-columns: 1fr 1fr; } }

/* mýty */
.rb-myths { padding-block: clamp(4rem, 10vw, 7rem); }
.rb-myths details { border-top: 1px solid var(--line); }
.rb-myths details:last-of-type { border-bottom: 1px solid var(--line); }
.rb-myths summary { display: grid; gap: .3rem; padding: 1.2rem 2.4rem 1.2rem 0; cursor: pointer; list-style: none; position: relative; font: 600 clamp(1.4rem, 4vw, 1.9rem)/1.15 var(--serif); }
.rb-myths summary::-webkit-details-marker { display: none; }
.rb-myths summary::after { content: "+"; position: absolute; right: .2rem; top: 1.2rem; font: 400 1.8rem/1 var(--sans); color: var(--acc); }
.rb-myths details[open] summary::after { content: "–"; }
.rb-myths summary small { font: 500 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.rb-myths details p { padding-bottom: 1.4rem; color: #d2dedc; }
.rb-final { margin-top: clamp(2.5rem, 7vw, 4rem); font: italic 500 clamp(1.9rem, 5.6vw, 3.2rem)/1.1 var(--serif); color: var(--acc); text-wrap: balance; }

/* rozcestník, partner, pätička */
.rb-more { padding-block: clamp(4rem, 10vw, 7rem); background: #0b2027; color: #f6f0e2; --line: #24505a; --dim: #9fb2b0; --acc: #e2562f; }
.rb-more h2 { margin-bottom: 1.8rem; }
.rb-more ul { display: grid; gap: 1rem; }
.rb-more li a { position: relative; display: grid; align-content: end; gap: .3rem; min-height: 14rem; padding: 1.2rem; text-decoration: none; isolation: isolate; overflow: hidden; }
.rb-more li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s; }
.rb-more li a:hover img { transform: scale(1.05); }
.rb-more li a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 26, 32, .94), rgba(8, 26, 32, .2)); }
.rb-more small { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.rb-more strong { font: 600 1.6rem/1.1 var(--serif); }
@media (min-width: 760px) { .rb-more ul { grid-template-columns: repeat(2, 1fr); } }
.rb-partner { margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.8rem, 5vw, 3rem); border: 1px solid var(--line); display: grid; gap: .8rem; justify-items: center; text-align: center; }
.rb-partner__name { font: 600 clamp(1.8rem, 5vw, 2.6rem)/1 var(--serif); }
.rb-partner p:not([class]) { color: var(--dim); max-width: 32rem; }
.rb-foot { padding: 1.8rem var(--gutter) 2.4rem; background: #0b2027; color: #8fa5a3; border-top: 1px solid #1c3d46; font-size: .8rem; text-align: center; display: grid; gap: .6rem; }
.rb-foot__legal { max-width: 52rem; margin-inline: auto; padding: 1rem 1.2rem; border: 1px solid #24505a; color: #c9d6d4; font-size: .86rem; line-height: 1.6; }
.rb-foot__src { max-width: 60rem; margin-inline: auto; line-height: 1.7; }
.rb-foot a { text-underline-offset: 3px; }

/* ---------- atlas ---------- */
.rb-ahero { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: calc(var(--bar) + clamp(2.5rem, 7vw, 5rem)) clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; }
.rb-ahero h1 { font: 600 clamp(2.8rem, 9vw, 6rem)/.95 var(--serif); letter-spacing: -.02em; max-width: 14ch; text-wrap: balance; }
.rb-ahero > p:not(.rb-kicker) { max-width: 44rem; color: var(--dim); font-size: 1.1rem; }
.rb-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.rb-filter[hidden] { display: none; }
.rb-filter button { min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: inherit; font: 500 .86rem var(--sans); cursor: pointer; }
.rb-filter button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.rb-group { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.rb-group[hidden] { display: none; }
.rb-group__head { display: grid; gap: .4rem; margin-bottom: 1.6rem; max-width: 46rem; }
.rb-group__head h2 { font-size: clamp(1.9rem, 5.4vw, 3rem); }
.rb-group__head p { color: var(--dim); }
.rb-fishes { display: grid; gap: 2.4rem; }
.rb-f { position: relative; display: grid; gap: .8rem; align-content: start; scroll-margin-top: 70px; }
.rb-f__plate { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 6% 5%; background: radial-gradient(ellipse at center, #f8f1dc, #eadcb4); border: 1px solid var(--line); }
.rb-f__plate img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 .4rem .5rem rgba(60, 40, 10, .25)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.rb-f__latin { font: italic 500 1.05rem var(--serif); color: var(--dim); }
.rb-f__tags { margin-top: .3rem; font: 500 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.rb-f__more { display: grid; gap: .7rem; font-size: .96rem; }
.rb-f__more b { font-weight: 600; }
.rb-f__card { font: italic 500 1.35rem/1.25 var(--serif); color: var(--acc); }
.rb-size { margin-top: .6rem; padding: 1.1rem 1.2rem; background: #f8f1dc; border: 1px solid var(--line); display: grid; gap: .6rem; }
.rb-size h4 { font: 500 .74rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.rb-size__ui { display: grid; gap: .5rem; }
.rb-size__ui[hidden] { display: none; }
.rb-size__ui input { width: 100%; accent-color: #a8432a; min-height: 32px; }
.rb-size__w { font: 500 1rem var(--sans); }
.rb-size__w b { font: 600 2rem/1 var(--serif); color: var(--acc); }
.rb-size__note { font-size: .78rem; color: var(--dim); }
.rb-js .rb-fishes { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
.rb-js .rb-f > .rb-f__more { display: none; }
.rb-js .rb-f h3 { font-size: clamp(1.25rem, 3.8vw, 1.6rem); }
.rb-f__open { position: absolute; inset: 0; z-index: 1; width: 100%; opacity: 0; cursor: pointer; }
.rb-f__open[hidden] { display: none; }
.rb-js .rb-f:hover .rb-f__plate img { transform: translateX(4%) scale(1.04); }
.rb-js .rb-f:has(.rb-f__open:focus-visible) { outline: 2px solid var(--acc); outline-offset: 4px; }
@media (min-width: 760px) { .rb-js .rb-fishes { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.4rem; } .rb:not(.rb-js) .rb-f { grid-template-columns: 20rem 1fr; column-gap: 2rem; } .rb:not(.rb-js) .rb-f__plate { grid-row: span 2; } }
.rb-dialog { width: min(60rem, 100% - 1.5rem); max-height: min(92svh, 62rem); padding: 0; border: 0; background: var(--paper); color: #2a2318; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45); overflow: auto; }
.rb-dialog::backdrop { background: rgba(20, 16, 8, .7); }
.rb-dialog__close { position: sticky; top: .5rem; float: right; margin: .5rem; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #2a2318; color: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.rb-dialog__body { display: grid; gap: 1rem; padding: 1.2rem 1.2rem 2rem; }
.rb-dialog__body .rb-f__plate { aspect-ratio: 16 / 9; }
.rb-dialog__body h3 { font-size: clamp(2rem, 6vw, 3rem); }
@media (min-width: 800px) { .rb-dialog__body { padding: 2rem 2.4rem 2.6rem; } }

/* ---------- more ---------- */
.rb-ways { padding-block: clamp(3rem, 8vw, 6rem); background: var(--pool); }
.rb-ways__grid { display: grid; gap: 2rem; }
.rb-ways figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rb-ways ol { display: grid; counter-reset: w; }
.rb-ways li { counter-increment: w; display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .6rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.rb-ways li::before { content: counter(w); grid-row: span 2; font: 600 2rem/1 var(--serif); color: var(--acc); }
.rb-ways h3 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); }
.rb-ways li p { grid-column: 2; color: #cfe0ef; font-size: .98rem; }
@media (min-width: 900px) { .rb-ways__grid { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .rb-ways figure { position: sticky; top: calc(var(--bar) + 1.5rem); } .rb-ways figure img { aspect-ratio: 4 / 5; } }
.rb-map { padding-block: clamp(4rem, 10vw, 7rem); }
.rb-world { position: relative; margin-bottom: 1.6rem; border: 1px solid var(--line); background: #08355c; overflow: hidden; }
.rb-world[hidden] { display: none; }
.rb-world svg { display: block; width: 100%; height: auto; }
.rb-world__g { transition: transform 1s cubic-bezier(.3, .8, .3, 1); transform-origin: 0 0; }
.rb-world__grid path { stroke: #1d5486; stroke-width: .6; stroke-dasharray: 2 5; fill: none; }
.rb-world__land path { fill: #2d6a8f; stroke: #7fb3d6; stroke-width: .6; stroke-linejoin: round; }
.rb-pin { cursor: pointer; outline: none; }
.rb-pin__halo { fill: #f2b33d; opacity: .25; transform-box: fill-box; transform-origin: center; animation: rb-pulse 2.4s infinite; }
.rb-pin__dot { fill: #f2b33d; stroke: #062a4a; stroke-width: 1.5; }
.rb-pin text { fill: #fff; font: 600 13px var(--sans); letter-spacing: .04em; paint-order: stroke; stroke: #062a4a; stroke-width: 3; }
.rb-world.is-zoom .rb-pin text { font-size: 8px; stroke-width: 2; }
.rb-pin.is-on .rb-pin__dot { fill: #fff; }
.rb-pin:focus-visible .rb-pin__dot { stroke: #fff; stroke-width: 3; }
@keyframes rb-pulse { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.25); opacity: .1; } }
.rb-world__back { position: absolute; left: .8rem; bottom: .8rem; background: #062a4a; }
.rb-world__back[hidden] { display: none; }
.rb-places { display: grid; gap: 2.4rem; }
.rb-place { display: grid; gap: .8rem; max-width: 46rem; padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.rb-has-map .rb-place { display: none; border-top: 0; padding-top: 0; }
.rb-has-map .rb-place.is-on { display: grid; animation: rb-in .5s both; }
.rb-place__fish { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; }
.rb-place__fish b { margin-right: .3rem; font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rb-place__fish span { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 99px; }
.rb-place__spot { font-size: .78rem; color: var(--dim); }
.rb-seaout { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.rb-seaout p { font: 500 clamp(1.35rem, 3.6vw, 1.8rem)/1.35 var(--serif); margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rb * { transition: none !important; animation: none !important; }
}

/* doladenie po prvom náhľade */
.rb-scrolly--water .rb-stage { display: none; }
.rb-js .rb-scrolly--water .rb-stage { display: grid; align-items: center; }
.rb-scene { height: auto; aspect-ratio: 800 / 520; max-height: 100%; margin-inline: auto; overflow: hidden; }
@media (max-width: 899px) { .rb-js .rb-scrolly--water .rb-stage { height: auto; } }
.rb-spot i { left: -7.5%; top: 0; width: 0; height: 0; padding: 0; }
.rb-spot i { position: absolute; left: 0; top: 0; width: 22cqw; height: 22cqw; transform: translate(-50%, -50%); }
.rb-scene { container-type: inline-size; }
.rb-spot__f { width: 26cqw; }
.rb-spot__f--1 { left: 9cqw; top: -9cqw; width: 17cqw; }
.rb-spot__f--2 { left: -9cqw; top: 9cqw; width: 17cqw; }
.rb-tease__fish { position: static; transform: none; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 1rem; }
.rb-tease__fish img:nth-child(n+4) { display: none; }
@media (min-width: 900px) {
  .rb-tease__fish { position: absolute; inset: 7% -4% auto auto; width: 62%; grid-template-columns: repeat(2, 1fr); transform: rotate(-5deg); margin: 0; }
  .rb-tease__fish img:nth-child(n+4) { display: block; }
  .rb-tease__atlas strong, .rb-tease__atlas > span:not(.rb-kicker):not(.rb-btn) { max-width: 44%; }
}
.rb-world.is-zoom .rb-pin:not(.is-on) text { display: none; }
.rb-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.rb-chips[hidden] { display: none; }
.rb-chips button { min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: inherit; font: 500 .9rem var(--sans); cursor: pointer; }
.rb-chips button:hover { border-color: var(--acc); }
.rb-chips button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #062a4a; }
@media (max-width: 699px) { .rb-pin text { display: none; } .rb-pin__dot { r: 9px; } .rb-pin__halo { r: 22px; } }

/* fotky na mieru */
.rb-band img { width: 100%; max-height: 78svh; object-fit: cover; }
.rb-tech__fig { position: relative; }
.rb-tech__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rb-tech__fig:has(img) .rb-tech__icon { position: absolute; left: .8rem; bottom: .8rem; width: clamp(3.4rem, 12vw, 5rem); padding: .5rem; background: color-mix(in srgb, var(--bg) 82%, transparent); stroke-width: 2.4; }
@media (min-width: 900px) { .rb-tech__item { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .rb-tech__fig img { aspect-ratio: 4 / 3; } }
.rb-latina__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .6rem; }
.rb-finish { position: relative; margin-top: clamp(2.5rem, 7vw, 4rem); min-height: 70svh; display: grid; align-items: end; isolation: isolate; }
.rb-finish img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rb-finish::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 26, 32, .92) 8%, rgba(8, 26, 32, .15) 60%); }
.rb-finish .rb-final { margin: 0; padding: clamp(2rem, 6vw, 4rem) var(--gutter); max-width: 22ch; color: #fff; }
.rb-myths { padding-bottom: 0; }
.rb-place__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rb-has-map .rb-place.is-on { max-width: none; }
@media (min-width: 900px) { .rb-has-map .rb-place.is-on { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); align-items: start; } .rb-has-map .rb-place.is-on .rb-place__img { grid-row: 1 / span 7; aspect-ratio: 4 / 3; } .rb-has-map .rb-place.is-on > :not(.rb-place__img) { grid-column: 2; } }

/* ---------- druhá vlna: prvá výprava + kam za rybami ---------- */
.rb--kam { --acc: #e3b23c; }
.rb-hero--low { min-height: 82svh; }
.rb-hero--low .rb-quote p { max-width: 30ch; font-size: clamp(1.5rem, 3.8vw, 2.6rem); line-height: 1.2; }
@media (min-width: 760px) { .rb-more ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rb-more ul { grid-template-columns: repeat(4, 1fr); } .rb-more li a { min-height: 16rem; } .rb-more strong { font-size: 1.35rem; } }
.rb-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.rb-seg button { min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: inherit; font: 500 .88rem var(--sans); cursor: pointer; }
.rb-seg button:hover { border-color: var(--acc); }
.rb-seg button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--bg); }
/* výbava */
.rb-gear { padding-block: clamp(3rem, 8vw, 6rem); }
.rb-anat { display: grid; gap: 1px; counter-reset: an; background: var(--line); border: 1px solid var(--line); }
.rb-anat li { counter-increment: an; display: grid; gap: .4rem; align-content: start; padding: 1.3rem 1.2rem 1.5rem; background: var(--bg); }
.rb-anat li::before { content: "0" counter(an); font: 500 .76rem var(--sans); letter-spacing: .2em; color: var(--acc); }
.rb-anat p { color: #cfdcda; font-size: .96rem; }
@media (min-width: 700px) { .rb-anat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rb-anat { grid-template-columns: repeat(4, 1fr); } }
.rb-builder { margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.4rem, 4vw, 2.6rem); background: var(--pool); border: 1px solid var(--line); }
.rb-builder__ui { display: grid; gap: 1rem; margin-bottom: 1.8rem; }
.rb-builder__ui[hidden] { display: none; }
.rb-builder__ui p { display: grid; gap: .5rem; }
.rb-builder__ui p > span:first-child, .rb-check__pick > span:first-child { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-set { display: grid; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.rb-set h4 { font: 600 clamp(1.8rem, 5vw, 2.6rem)/1 var(--serif); }
.rb-js .rb-set { display: none; border-top: 0; padding-block: 0; }
.rb-js .rb-set.is-on { display: grid; animation: rb-in .45s both; }
.rb-set__cols { display: grid; gap: 1rem; }
.rb-set__col { padding: 1.1rem 1.2rem 1.3rem; background: var(--bg); border-top: 3px solid var(--c); }
.rb-set__col--must { --c: #e2562f; }
.rb-set__col--nice { --c: #e3b23c; }
.rb-set__col--skip { --c: #6c8a8e; }
.rb-set__col h5 { margin: 0 0 .7rem; font: 500 .74rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.rb-set__col li { position: relative; padding: .35rem 0 .35rem 1.3rem; font-size: .96rem; }
.rb-set__col li::before { content: ""; position: absolute; left: 0; top: .85em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.rb-set__col--skip li { color: var(--dim); text-decoration: line-through; text-decoration-color: #6c8a8e; }
.rb-js .rb-builder[data-level="start"] .rb-set__col--nice { display: none; }
.rb-js .rb-builder[data-level="keen"] .rb-set__col--skip { display: none; }
@media (min-width: 800px) { .rb-set__cols { grid-template-columns: repeat(2, 1fr); } .rb:not(.rb-js) .rb-set__cols { grid-template-columns: repeat(3, 1fr); } }
.rb-gear__joke { margin-top: 2rem; }
/* uzly a návyky */
.rb-skills { padding-block: clamp(3rem, 8vw, 6rem); background: var(--pool); }
.rb-knots { display: grid; gap: 1.2rem; }
.rb-knot { display: grid; gap: .9rem; align-content: start; padding: 1.5rem 1.3rem 1.6rem; background: var(--bg); border: 1px solid var(--line); scroll-margin-top: 70px; }
.rb-knot h3 { font-size: clamp(1.4rem, 3.8vw, 1.8rem); }
.rb-knot__use { font-size: .92rem; color: #cfdcda; }
.rb-knot__steps { display: grid; gap: .7rem; counter-reset: k; }
.rb-knot__steps li { display: grid; gap: .3rem; }
.rb-knot__steps span { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.rb-knot.is-stepper .rb-knot__steps { min-height: 9.5rem; align-content: start; }
.rb-knot.is-stepper .rb-knot__steps li { display: none; font: 500 clamp(1.25rem, 3.4vw, 1.5rem)/1.3 var(--serif); }
.rb-knot.is-stepper .rb-knot__steps li.is-on { display: grid; animation: rb-in .35s both; }
.rb-knot__nav { display: flex; gap: .6rem; }
.rb-knot__nav[hidden] { display: none; }
.rb-knot__nav button:disabled { opacity: .35; cursor: default; }
.rb-knot__tip { padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--dim); }
@media (min-width: 800px) { .rb-knots { grid-template-columns: repeat(2, 1fr); } }
.rb-habits { display: grid; gap: 1.4rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.rb-habits li { display: grid; gap: .4rem; padding-left: 1.1rem; border-left: 2px solid var(--acc); }
.rb-habits h3 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); }
.rb-habits p { color: #cfdcda; font-size: .98rem; }
@media (min-width: 800px) { .rb-habits { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }
/* záber */
.rb-bite { padding-block: clamp(3rem, 8vw, 6rem); }
.rb-bite__outro { margin-top: 2rem; font: 500 clamp(1.3rem, 3.6vw, 1.7rem)/1.35 var(--serif); }
.rb--start .rb-quiz__opts { grid-template-columns: 1fr; }
/* výprava */
.rb-trip { padding-block: clamp(3rem, 8vw, 6rem); background: var(--pool); }
.rb-trip__grid { display: grid; gap: 2.4rem; }
.rb-check { padding: 1.5rem 1.3rem; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 1rem; align-content: start; }
.rb-check__pick { display: grid; gap: .5rem; }
.rb-check__pick[hidden], .rb-check__count[hidden] { display: none; }
.rb-check li { border-top: 1px solid var(--line); }
.rb-check li[hidden] { display: none; }
.rb-check label { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: .8rem 0; cursor: pointer; }
.rb-check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: #e2562f; }
.rb-check input:checked + span { color: var(--dim); text-decoration: line-through; }
.rb-check__count { font-size: .86rem; color: var(--dim); }
.rb-check__count b { font: 600 1.6rem var(--serif); color: var(--acc); }
.rb-check__count i { font-style: normal; }
.rb-papers { display: grid; gap: 1rem; align-content: start; }
.rb-papers h3:not(:first-child) { margin-top: 1rem; }
.rb-papers__links { display: grid; gap: .5rem; justify-items: start; }
.rb-papers__links b { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.rb-papers__links a { color: var(--acc); text-underline-offset: 3px; }
.rb-manners { display: grid; gap: .6rem; }
.rb-manners li { position: relative; padding-left: 1.4rem; color: #cfdcda; }
.rb-manners li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 2px; background: var(--acc); }
@media (min-width: 900px) { .rb-trip__grid { grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4rem); } }
/* kam za rybami */
.rb-world--kam { background: #0d323c; }
.rb-world--kam .rb-world__land path { fill: #2f6a54; stroke: #9cc7a8; stroke-width: 1; }
.rb-world--kam .rb-world__land path.is-sk { fill: #35705f; }
.rb-world__cty { fill: #cfe6d8; opacity: .35; font: 600 34px var(--serif); letter-spacing: .12em; text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.rb-world--kam .rb-pin__dot, .rb-world--kam .rb-pin__halo { fill: #e3b23c; }
.rb-world--kam .rb-pin text { stroke: #0d323c; }
.rb-place__water { font: italic 500 1.2rem/1.3 var(--serif); color: var(--acc); }
.rb-place__cut { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding-top: .6rem; }
.rb-place__cut a { display: grid; gap: .2rem; width: 6.5rem; text-decoration: none; font-size: .82rem; text-align: center; }
.rb-place__cut img { width: 100%; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .4)); }
.rb-place__spot a { color: var(--acc); text-underline-offset: 3px; }
.rb-has-map .rb-place--kam.is-on { display: grid; max-width: 46rem; grid-template-columns: 1fr; }
.rb-has-map .rb-place--kam.is-on > * { grid-column: 1; }
.rb-seaout h2 { margin-bottom: 1.2rem; }
.rb-world--kam .rb-pin text { display: none; }
.rb-world--kam .rb-pin.is-on text, .rb-world--kam .rb-pin:hover text, .rb-world--kam .rb-pin:focus-visible text { display: block; }
.rb-reads { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: .8rem; }
.rb-reads h3 { font: 500 .76rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.rb-reads li a { display: block; padding: 1rem 0; border-top: 1px solid var(--line); text-decoration: none; font: 600 clamp(1.3rem, 3.6vw, 1.7rem)/1.15 var(--serif); }
.rb-reads li:last-child a { border-bottom: 1px solid var(--line); }
.rb-reads li a:hover { color: var(--acc); }

/* uzly: kreslené kroky */
.rb-band--in { margin: 0 0 clamp(1.6rem, 4vw, 2.6rem); }
.rb-band--in img { aspect-ratio: 16 / 9; max-height: 62svh; }
.rb-knot__fig { margin: 0 0 .6rem; background: var(--pool); border: 1px solid var(--line); }
.rb-knot__fig svg { display: block; width: 100%; height: auto; max-height: 15rem; }
.rb-knot.is-stepper .rb-knot__fig { height: 13.5rem; display: grid; place-items: center; }
.rb-knot.is-stepper .rb-knot__steps { min-height: 22.5rem; }
.rb-knot svg .kl { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rb-knot svg .kg { fill: none; stroke: var(--pool); stroke-width: 9; stroke-linecap: round; }
.rb-knot svg .kl--d { stroke-width: 8.5; }
.rb-knot svg .kg--d { stroke-width: 14; }
.rb-knot svg .ki { fill: none; stroke: var(--pool); stroke-width: 2.8; stroke-linecap: round; }
.rb-knot svg .k-a { stroke: #eef4f1; }
.rb-knot svg .k-t { stroke: #e3b23c; }
.rb-knot svg .k-b { stroke: #e2562f; }
.rb-knot svg .k-h { stroke: #8fa9ad; stroke-width: 3.4; }
.rb-knot svg .kar { stroke: none; }
.rb-knot svg .kar.k-a { fill: #eef4f1; } .rb-knot svg .kar.k-t { fill: #e3b23c; } .rb-knot svg .kar.k-b { fill: #e2562f; }
.rb-knot svg .kd { fill: none; stroke: #e3b23c; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .85; }
.rb-knot svg .kw { fill: #6cc3d5; }
.rb-knot svg .ks { fill: #cfdcda; font: 20px var(--sans); }
.rb-knots__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1.2rem; font: 500 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rb-knots__legend span::before { content: ""; display: inline-block; width: 1.6rem; height: 3px; margin-right: .5rem; vertical-align: middle; border-radius: 2px; background: #eef4f1; }
.rb-knots__legend .k-t::before { background: #e3b23c; }
.rb-knots__legend .k-b::before { background: #e2562f; }

/* karas má vysoké telo: pri rovnakej šírke by pôsobil väčší než kapor */
.rb-f__plate img[src$="f-crucian.webp"], .rb-dialog img[src$="f-crucian.webp"], .rb-quiz img[src$="f-crucian.webp"] { max-width: 70%; }
.rb-f__plate { grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.rb-f__plate img { min-height: 0; max-width: 100%; }
.rb-f__plate img[src$="f-crucian.webp"] { max-width: 70%; }