/* =================================================================
   SeallyCraft — sdílený styl pro všechny stránky
   Celý web je záměrně HRANATÝ. Žádné border-radius nikde.
   ================================================================= */

:root{
  /* nad hladinou */
  --air-1:#EEF7FB; --air-2:#E2F2F9; --air-3:#D2E9F4; --air-4:#C5E1EF; --air-5:#B8DBEA;
  --ink-air:#082A3B; --ink-air-2:#35596B; --ink-air-3:#3A6072;
  --panel-air:rgba(255,255,255,.62); --line-air:rgba(8,42,59,.16);
  --panel-hi-air:rgba(255,255,255,.92); --block-shadow-air:rgba(8,42,59,.26);

  /* pod hladinou */
  --sea-1:#0F4A6D; --sea-2:#0C3E5C; --sea-3:#0A314A; --sea-4:#072438; --sea-5:#041724; --sea-6:#020E17; --sea-7:#000508;
  --ink-sea:#DCEEF7; --ink-sea-2:#9BC2D6; --ink-sea-3:#93B9CC;
  --panel-sea:rgba(255,255,255,.055); --line-sea:rgba(180,220,238,.17);
  --panel-hi-sea:rgba(255,255,255,.12); --block-shadow-sea:rgba(0,7,12,.6);

  /* --accent je jen pro výplně a dekoraci. Jako TEXT se používá --accent-text,
     protože jasná oranžová má na světlém podkladu jen 2,6:1. */
  --accent:#FF6B3D; --accent-soft:#FFB08A; --accent-ink:#2B0C02;
  --accent-text-air:#97350C; --accent-text-sea:#FFA279;
  --foam:rgba(255,255,255,.55); --foam-ink:rgba(255,255,255,.86);
  --chrome:rgba(6,32,46,.92); --chrome-ink:#DCEEF7;

  --ph-a:#C6DFEB; --ph-b:#B3D4E4;
  --ph:repeating-conic-gradient(var(--ph-a) 0% 25%,var(--ph-b) 0% 50%) 0 0/26px 26px;

  /* Fotka v heru na jednom místě. Chybějící soubor jen nic nevykreslí
     a zůstane samotný tmavý závoj — hero pak vypadá pořád záměrně. */
  --shot-hero:url("img/hero.jpg");
  --hero-base:#06202F;              /* neprůhledné dno hera, stejné v obou tématech */
  --hero-photo-opacity:.55;         /* výš = víc fotky, ale horší kontrast textu */
  /* Závoj není rovnoměrný: silný nad textem, slabý nad tuleněm.
     Díky tomu je fotka vidět, aniž by text ztratil čitelnost. */
  --hero-scrim-a:rgba(4,18,28,.74); /* strana s textem */
  --hero-scrim-b:rgba(4,18,28,.2);  /* volná strana, tady fotka prosvítá */
  --hero-scrim-foot:rgba(1,10,17,.5);
  --hero-blur:4px;
  --hero-ink:#EDF7FC; --hero-ink-2:#CBE3F0; --hero-ink-3:#A6C9DB;

  --font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --measure:66ch;
  --pad-x:clamp(1.25rem,5vw,4rem);
  --navh:64px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --air-1:#0E2734; --air-2:#0C2330; --air-3:#0A1D29; --air-4:#081823; --air-5:#07151F;
    --ink-air:#D8EBF4; --ink-air-2:#93B7C8; --ink-air-3:#7FA0B0;
    --panel-air:rgba(255,255,255,.05); --line-air:rgba(190,225,240,.15);
    --panel-hi-air:rgba(255,255,255,.11); --block-shadow-air:rgba(0,0,0,.55);
    --ph-a:#122936; --ph-b:#0D2029;
    --sea-1:#072433; --sea-2:#061E2B; --sea-3:#051823; --sea-4:#04121A; --sea-5:#020B11; --sea-6:#010609; --sea-7:#000203;
    --ink-sea:#D3E7F1; --ink-sea-2:#8FB4C7; --ink-sea-3:#8FB6CA;
    --panel-sea:rgba(255,255,255,.045); --line-sea:rgba(170,212,232,.14);
    --accent:#FF7A4F; --accent-soft:#FFC0A2;
    --accent-text-air:#FF9B70; --accent-text-sea:#FFA279;
    --foam:rgba(190,230,248,.32); --foam-ink:rgba(214,238,250,.9);
    --chrome:rgba(3,18,27,.94);
    --hero-base:#04141F; --hero-photo-opacity:.5;
    --hero-scrim-a:rgba(2,12,20,.78); --hero-scrim-b:rgba(2,12,20,.26);
    --hero-scrim-foot:rgba(0,6,11,.58);
  }
}
:root[data-theme="dark"]{
  --air-1:#0E2734; --air-2:#0C2330; --air-3:#0A1D29; --air-4:#081823; --air-5:#07151F;
  --ink-air:#D8EBF4; --ink-air-2:#93B7C8; --ink-air-3:#7FA0B0;
  --panel-air:rgba(255,255,255,.05); --line-air:rgba(190,225,240,.15);
  --panel-hi-air:rgba(255,255,255,.11); --block-shadow-air:rgba(0,0,0,.55);
  --ph-a:#122936; --ph-b:#0D2029;
  --sea-1:#072433; --sea-2:#061E2B; --sea-3:#051823; --sea-4:#04121A; --sea-5:#020B11; --sea-6:#010609; --sea-7:#000203;
  --ink-sea:#D3E7F1; --ink-sea-2:#8FB4C7; --ink-sea-3:#8FB6CA;
  --panel-sea:rgba(255,255,255,.045); --line-sea:rgba(170,212,232,.14);
  --accent:#FF7A4F; --accent-soft:#FFC0A2;
  --accent-text-air:#FF9B70; --accent-text-sea:#FFA279;
  --foam:rgba(190,230,248,.32); --foam-ink:rgba(214,238,250,.9);
  --chrome:rgba(3,18,27,.94);
  --hero-base:#04141F; --hero-photo-opacity:.5;
    --hero-scrim-a:rgba(2,12,20,.78); --hero-scrim-b:rgba(2,12,20,.26);
    --hero-scrim-foot:rgba(0,6,11,.58);
}

/* ---------- hloubka stránky ----------
   Každá stránka si přes třídu na <body> nastaví své pásmo a sadu inkoustů.
   Odtud pak berou barvu všechny komponenty. */
body.air{
  --band-a:var(--air-1); --band-b:var(--air-4);
  --ink:var(--ink-air); --ink-2:var(--ink-air-2); --ink-3:var(--ink-air-3);
  --panel:var(--panel-air); --line:var(--line-air);
  --panel-hi:var(--panel-hi-air); --block-shadow:var(--block-shadow-air);
  --accent-text:var(--accent-text-air);
}
body.sea{
  /* Výplň za chybějícím obrázkem se musí řídit hloubkou stránky, ne tématem.
     Jinak by na tmavé podmořské stránce svítila světlá šachovnice. */
  --ph-a:#0E2C3E; --ph-b:#0A2433;
  --ink:var(--ink-sea); --ink-2:var(--ink-sea-2); --ink-3:var(--ink-sea-3);
  --panel:var(--panel-sea); --line:var(--line-sea);
  --panel-hi:var(--panel-hi-sea); --block-shadow:var(--block-shadow-sea);
  --accent-text:var(--accent-text-sea);
}
body.d20 { --band-a:var(--sea-1); --band-b:var(--sea-2); }
body.d60 { --band-a:var(--sea-2); --band-b:var(--sea-3); }
body.d150{ --band-a:var(--sea-3); --band-b:var(--sea-4); }
body.d280{ --band-a:var(--sea-4); --band-b:var(--sea-5); }
body.d420{ --band-a:var(--sea-5); --band-b:var(--sea-6); }
body.d600{ --band-a:var(--sea-6); --band-b:var(--sea-7); }

/* ============================ ZÁKLAD ============================ */
*{box-sizing:border-box;}
body{
  margin:0;min-height:100vh;
  background:var(--band-a);
  background-image:linear-gradient(to bottom,var(--band-a),var(--band-b));
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-variation-settings:"SOFT" 55,"WONK" 1;text-wrap:balance;margin:0;line-height:1.02;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
code{font-family:var(--font-mono);font-size:.9em;background:var(--panel);border:1px solid var(--line);padding:.1em .42em;white-space:nowrap;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:.5rem;top:.5rem;z-index:200;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;font-weight:700;}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--pad-x);}
.section{padding-block:clamp(3rem,7vw,5.5rem);}
.section--first{padding-top:clamp(2.5rem,6vw,4.5rem);}

/* ============================ NAVIGACE = HLOUBKOMĚR ============================ */
/* Není to obyčejný navbar: každý odkaz nese svou hloubku, takže je pořád vidět,
   jak hluboko na webu zrovna jsi. */
.nav{
  position:sticky;top:0;z-index:80;
  background:var(--chrome);color:var(--chrome-ink);
  border-bottom:3px solid var(--accent);
  backdrop-filter:blur(14px);
  --block-shadow:rgba(0,0,0,.5);--panel-hi:rgba(255,255,255,.16);--ink:rgba(190,225,240,.32);
}
.nav__bar{
  max-width:1240px;margin-inline:auto;
  display:flex;align-items:center;gap:.9rem;
  padding:.55rem clamp(.8rem,3vw,1.5rem);min-height:var(--navh);
}
.nav__mark{
  font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;
}
.nav__mark span{color:var(--accent);}
.nav__mark img{height:30px;width:auto;display:block;}
.nav__links{display:flex;align-items:stretch;gap:.15rem;margin-left:auto;list-style:none;margin-block:0;padding:0;}
.nav__link{
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  padding:.42rem .7rem;text-decoration:none;line-height:1.1;
  border-bottom:3px solid transparent;
}
.nav__link:hover{background:rgba(255,255,255,.09);}
.nav__name{font-weight:600;font-size:.92rem;white-space:nowrap;}
.nav__m{
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.11em;
  color:rgba(190,225,240,.62);font-variant-numeric:tabular-nums;
}
.nav__link[aria-current="page"]{border-bottom-color:var(--accent);background:rgba(255,255,255,.07);}
.nav__link[aria-current="page"] .nav__m{color:var(--accent-soft);}
.nav__side{display:flex;align-items:center;gap:.5rem;margin-left:.6rem;}
.nav__side .ip{padding:.36rem .42rem .36rem .72rem;font-size:.82rem;background:rgba(255,255,255,.08);color:var(--chrome-ink);box-shadow:3px 3px 0 0 var(--block-shadow);}
.nav__side .ip__tag{font-size:.62rem;padding:.22rem .5rem;}
.nav__side .btn{padding:.44rem .95rem;font-size:.84rem;background:rgba(255,255,255,.08);color:var(--chrome-ink);box-shadow:3px 3px 0 0 var(--block-shadow);}
.nav__toggle{display:none;}

/* Se sedmi položkami se vodorovná lišta neuživí dřív než dřív — proto 1240px. */
@media (max-width:1240px){
  .nav__toggle{
    display:inline-flex;align-items:center;gap:.55rem;margin-left:auto;
    background:rgba(255,255,255,.08);color:var(--chrome-ink);border:2px solid rgba(190,225,240,.28);
    font-family:var(--font-body);font-weight:700;font-size:.85rem;padding:.5rem .85rem;cursor:pointer;
  }
  .nav__burger{display:grid;gap:3px;}
  .nav__burger i{display:block;width:16px;height:2px;background:currentColor;}
  .nav__panel{
    display:none;width:100%;
    border-top:2px solid rgba(190,225,240,.18);
    padding:.5rem clamp(.8rem,3vw,1.5rem) 1rem;
  }
  .nav__panel.is-open{display:block;}
  .nav__links{flex-direction:column;gap:0;margin-left:0;}
  .nav__link{
    flex-direction:row;align-items:baseline;gap:.8rem;
    padding:.75rem .3rem;border-bottom:1px solid rgba(190,225,240,.13);
  }
  .nav__link[aria-current="page"]{border-bottom-color:rgba(190,225,240,.13);border-left:4px solid var(--accent);padding-left:.7rem;}
  .nav__m{margin-left:auto;}
  .nav__side{margin:.9rem 0 0;flex-wrap:wrap;}
}
@media (min-width:1241px){ .nav__panel{display:contents;} }

/* ============================ TYPOGRAFIE ============================ */
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px;}
.h1{font-size:clamp(2.5rem,1.5rem + 4.6vw,4.8rem);font-weight:800;letter-spacing:-.03em;}
.h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);font-weight:800;letter-spacing:-.02em;}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);color:var(--ink-2);max-width:var(--measure);line-height:1.55;}
.head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(2rem,4.5vw,3.25rem);}
.depth{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--accent-text);}

/* ============================ BLOKOVÁ TLAČÍTKA ============================ */
.ip,.btn{
  border:2px solid var(--ink);background:var(--panel);color:inherit;
  box-shadow:5px 5px 0 0 var(--block-shadow);
  transition:transform .08s steps(2,end),box-shadow .08s steps(2,end),background .2s;
}
.ip:hover,.btn:hover{background:var(--panel-hi);}
.ip:active,.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--block-shadow);}
.ip{
  display:inline-flex;align-items:center;gap:.85rem;
  font-family:var(--font-mono);font-size:clamp(.95rem,.9rem + .3vw,1.15rem);font-weight:600;
  padding:.68rem .7rem .68rem 1rem;cursor:pointer;
}
.ip__tag{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:.34rem .7rem;white-space:nowrap;
}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:700;font-size:.95rem;padding:.78rem 1.3rem;
}
.btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink);}
.btn--solid:hover{background:var(--accent-soft);}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}

/* ============================ HERO (Domů) ============================ */
/* Tmavé "okno do světa": rozmazaná fotka + závoj, na něm světlý text.
   Blur se dělá na samostatné vrstvě, ne na sekci — jinak by se rozmazal i text. */
.heroshot{
  position:relative;overflow:hidden;isolation:isolate;
  border-bottom:3px solid var(--accent);
  padding-block:clamp(3rem,8vw,6rem);
  /* Neprůhledný tmavý základ. Bez něj by přes závoj prosvítalo světlé pásmo
     stránky a světlý text by měl kontrast kolem 2,5:1. */
  background:var(--hero-base);
  color:var(--hero-ink);
  /* Nad fotkou musí být inkousty světlejší než běžné mořské, jinak
     nejsvětlejší místa fotky (slunce, led) kontrast shodí pod 4,5:1. */
  --ink:var(--hero-ink); --ink-2:var(--hero-ink-2); --ink-3:var(--hero-ink-3);
  --panel:rgba(255,255,255,.1); --line:rgba(214,238,250,.34);
  --panel-hi:rgba(255,255,255,.2); --block-shadow:rgba(0,6,11,.72);
  --accent-text:var(--accent-text-sea);
}
.heroshot__bg{
  position:absolute;
  /* přesah přes okraje, aby po rozmazání nezůstal průhledný lem */
  inset:calc(var(--hero-blur) * -3);
  background-image:var(--shot-hero);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(var(--hero-blur)) saturate(.9);
  opacity:var(--hero-photo-opacity);
  z-index:-2;
}
/* Výchozí závoj počítá s tím, že fotka může být přesvětlená (slunce na ledu).
   Na tmavé fotce ji ale zadusí — proto je tu přepínač níž. */
.heroshot--dark-photo{
  --hero-photo-opacity:1;
  --hero-scrim-a:rgba(4,18,28,.28);
  --hero-scrim-b:rgba(4,18,28,0);
  --hero-scrim-foot:rgba(1,10,17,.4);
}
.heroshot__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,
      var(--hero-scrim-a) 0%, var(--hero-scrim-a) 40%,
      var(--hero-scrim-b) 76%, var(--hero-scrim-b) 100%),
    linear-gradient(to bottom, transparent 55%, var(--hero-scrim-foot) 100%);
}
/* Na úzké obrazovce se hero skládá pod sebe a text leží přes celou šířku,
   takže boční závoj by ho nepokryl — přepínáme na rovnoměrný. */
@media (max-width:860px){
  .heroshot__scrim{
    background:
      linear-gradient(to bottom, var(--hero-scrim-a), var(--hero-scrim-a)),
      linear-gradient(to bottom, transparent 55%, var(--hero-scrim-foot) 100%);
  }
}
.heroshot .wrap{position:relative;}
/* Závoj se ladí podle 97. percentilu jasu fotky, takže ojedinělý přesvětlený
   pruh (třeba jasná polární záře) může zbýt. Stín drží písmena čitelná i tam —
   je to místní pojistka, kterou samotný poměr kontrastu nezachytí. */
.heroshot .wordmark,
.heroshot .hero__sub,
.heroshot .hero__note,
.heroshot .eyebrow{text-shadow:0 1px 2px rgba(0,8,14,.55),0 3px 14px rgba(0,8,14,.75);}
.heroshot .seal{filter:drop-shadow(0 18px 30px rgba(0,10,18,.55));}
/* Popisek pod tuleněm leží ve světlé části hera, kde je závoj slabý.
   Na takovém podkladu neprojde ani bílý text, tak dostává vlastní tmavý štítek. */
.heroshot .pats{
  align-self:center;padding:.38rem .7rem;
  background:var(--chrome);color:var(--chrome-ink);
}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:860px){.hero{grid-template-columns:1fr;}}
.wordmark{
  font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(2.75rem,1rem + 9vw,7rem);
  line-height:.86;letter-spacing:-.035em;margin:.55rem 0 0;overflow-wrap:break-word;
}
.wordmark span{color:var(--accent-text);}
/* Logo jako obrázek: šířka roste s textem kolem něj, ale nikdy přes 90% šířky
   heroshotu, ať na malém displeji nepřeteče přes okraj. */
.wordmark img{
  display:block;width:min(90%,480px);height:auto;margin-top:.4rem;
  filter:drop-shadow(0 6px 18px rgba(0,8,14,.45));
}
.hero__sub{margin-top:1.4rem;font-size:clamp(1.05rem,.98rem + .55vw,1.35rem);color:var(--ink-2);max-width:34ch;line-height:1.5;}
.hero__note{
  margin-top:1.1rem;display:inline-block;
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.06em;
  border-left:4px solid var(--accent);padding-left:.7rem;line-height:1.45;
}
.hero__cta{margin-top:1.9rem;}

/* ============================ TULEŇ ============================ */
.sealstage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.seal{width:min(70%,220px);cursor:pointer;border:0;background:none;padding:0;display:block;filter:drop-shadow(0 18px 26px rgba(6,40,58,.22));}
.seal img{width:100%;height:auto;display:block;image-rendering:pixelated;animation:bob 5.5s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-2.2%) rotate(-.7deg);}}
.seal.is-arf img{animation:arf .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes arf{0%{transform:scale(1) rotate(0);}30%{transform:scale(1.07,.93) rotate(-4deg);}60%{transform:scale(.96,1.06) rotate(3deg);}100%{transform:scale(1) rotate(0);}}
.bubble{
  position:absolute;top:2%;right:2%;
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;
  background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent-ink);
  padding:.35rem 1rem;opacity:0;transform:translateY(8px) scale(.85);
  transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
.bubble.is-on{opacity:1;transform:none;}
.pats{margin-top:1rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;color:var(--ink-3);text-align:center;}

/* ============================ ÚČETNÍ KNIHA ============================ */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.5rem,4vw,3.5rem);}
.ledger__col h3{font-size:1.35rem;font-weight:700;margin-bottom:.35rem;}
.ledger__note{font-size:.88rem;color:var(--ink-3);margin-bottom:1.4rem;}
.ledger ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.ledger li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding-bottom:.9rem;border-bottom:1px solid var(--line);}
.ledger li:last-child{border-bottom:0;}
.ledger li::before{content:"";width:9px;height:9px;margin-top:.55rem;}
.ledger--yes li::before{background:var(--accent);}
.ledger--no li::before{background:transparent;border:1.5px solid var(--ink-3);}
.ledger--no li{color:var(--ink-2);}

/* ============================ KROKY ============================ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:s;}
.step{position:relative;padding-top:1.6rem;border-top:2px solid var(--ink);counter-increment:s;}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.1em;
  color:var(--accent-text);position:absolute;top:-1.55rem;left:0;
}
.step h3{font-size:1.2rem;font-weight:700;margin-bottom:.55rem;}
.step p{color:var(--ink-2);font-size:.97rem;}

/* ============================ SLOUPCE MÍSTO KARET ============================ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.75rem,4vw,3rem);}
.col{border-top:6px solid var(--ink-3);padding-top:1.2rem;display:flex;flex-direction:column;gap:.7rem;}
.col--hot{border-top-color:var(--accent);}
.col__role{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.col--hot .col__role{color:var(--accent-text);}
.col h3{font-size:1.3rem;font-weight:700;}
.col p{color:var(--ink-2);font-size:.96rem;}
.col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;color:var(--ink-2);font-size:.97rem;}
.col li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;}
.col li::before{content:"";width:7px;height:7px;margin-top:.52rem;background:var(--ink-3);}
.col--hot li::before{background:var(--accent);}

/* ============================ POVINNOSTI ============================ */
.duties{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:2px solid var(--ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1.25rem,3vw,2.25rem);
}
.duties__intro{
  grid-column:1 / -1;font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 55,"WONK" 1;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);letter-spacing:-.015em;margin-bottom:.25rem;
}
.duty{display:flex;flex-direction:column;gap:.4rem;}
.duty__label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);}
.duty p{color:var(--ink-2);font-size:.94rem;}

/* ============================ SEZNAM PLUGINŮ ============================ */
.rack{display:flex;flex-direction:column;}
.rack__row{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.1fr) auto;
  gap:1.25rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line);
}
.rack__row:first-child{border-top:1px solid var(--line);}
.rack__name{font-family:var(--font-mono);font-size:.98rem;font-weight:600;}
.rack__what{color:var(--ink-2);font-size:.96rem;}
.tag{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);padding:.28rem .6rem;white-space:nowrap;
}
@media (max-width:760px){
  /* Bez explicitního umístění by auto-placement odsunul štítek až pod popis. */
  .rack__row{grid-template-columns:1fr auto;row-gap:.45rem;column-gap:1rem;}
  .rack__name{grid-column:1;grid-row:1;}
  .rack__row .tag{grid-column:2;grid-row:1;justify-self:end;}
  .rack__what{grid-column:1 / -1;grid-row:2;}
}

/* ============================ PRAVIDLA ============================ */
.rules{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 clamp(2rem,5vw,4rem);}
.rules li{counter-increment:r;display:grid;grid-template-columns:2.6rem 1fr;gap:.5rem;padding:1.15rem 0;border-bottom:1px solid var(--line);align-items:baseline;}
.rules li::before{content:counter(r);font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.rules b{font-weight:600;display:block;}
.rules span{color:var(--ink-2);font-size:.94rem;}

/* ============================ VIP OBCHOD ============================ */
.shop{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.75rem,3vw,2.5rem);border-top:6px solid var(--accent);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:end;
}
.shop__price{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 60,"WONK" 1;font-size:clamp(2.4rem,1.5rem + 4vw,4.2rem);line-height:.9;letter-spacing:-.03em;display:block;}
.shop__per{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:.6rem;}
.shop__note{color:var(--ink-2);font-size:.95rem;margin-top:1rem;max-width:46ch;}
@media (max-width:680px){.shop{grid-template-columns:1fr;align-items:start;}}

/* ============================ ATEAM ============================ */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 clamp(1.5rem,4vw,3rem);}
.member{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line);}
.member--lead{grid-column:1 / -1;border-bottom:3px solid var(--accent);padding-bottom:1.5rem;margin-bottom:.5rem;}
/* Hlavy tahané z mc-heads.net podle nicku, poměr stran cca 0.94 (ne čtverec) —
   height:auto, ať se nedeformují. */
.member__face{width:52px;height:auto;display:block;}
.member--lead .member__face{width:76px;height:auto;}
.member__name{font-family:var(--font-mono);font-size:.98rem;font-weight:600;display:block;}
.member--lead .member__name{font-family:var(--font-display);font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);font-weight:800;letter-spacing:-.02em;font-variation-settings:"SOFT" 55,"WONK" 1;}
.member__role{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:.2rem;}
.member--lead .member__role{color:var(--accent-text);font-size:.72rem;}
.member__note{color:var(--ink-2);font-size:.94rem;margin-top:.5rem;max-width:52ch;}

/* ============================ FOTKY ============================ */
.strip{line-height:0;position:relative;background:var(--ph);margin-block:clamp(2.5rem,6vw,4.5rem);}
.strip img{width:100%;height:clamp(200px,32vw,420px);object-fit:cover;display:block;border-block:3px solid var(--line);}
.strip__cap{
  position:absolute;left:0;bottom:0;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--chrome);color:var(--chrome-ink);padding:.5rem .9rem;line-height:1.2;
}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:5px;}
.gal figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ph);border:2px solid var(--line);}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.gal figure:hover img{transform:scale(1.05);}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--chrome);color:var(--chrome-ink);padding:.4rem .6rem;
  opacity:0;transform:translateY(100%);transition:opacity .25s,transform .25s;
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;transform:none;}
.withshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.withshot__img{margin:0;line-height:0;background:var(--ph);border:2px solid var(--line);}
.withshot__img img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block;}
.withshot--solo{grid-template-columns:1fr;}
@media (max-width:780px){.withshot{grid-template-columns:1fr;}}

/* ============================ ÚTES ============================ */
.reef{display:block;width:100%;image-rendering:pixelated;}
.reefband{line-height:0;margin-block:clamp(2rem,5vw,3.5rem);}

/* ============================ FAKTA ============================ */
.fact{border-left:6px solid var(--accent);padding-left:clamp(1.25rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;max-width:760px;}
.fact__text{font-family:var(--font-display);font-weight:600;font-variation-settings:"SOFT" 50,"WONK" 1;font-size:clamp(1.25rem,1.05rem + 1.1vw,2rem);line-height:1.25;letter-spacing:-.015em;min-height:3.4em;transition:opacity .16s ease;}
.fact__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.fact__count{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* ============================ DALŠÍ STRÁNKA ============================ */
/* Místo scrollování posíláme hráče o patro níž. */
.next{
  margin-top:clamp(3rem,7vw,5rem);border-top:6px solid var(--accent);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;text-decoration:none;
}
.next:hover .next__title{color:var(--accent-text);}
.next__lbl{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);width:100%;}
.next__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem);letter-spacing:-.02em;font-variation-settings:"SOFT" 55,"WONK" 1;transition:color .2s;}
.next__m{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;}

/* ============================ PATIČKA ============================ */
.foot{border-top:1px solid var(--line);margin-top:clamp(3rem,7vw,5rem);padding-block:2rem 3rem;}
.foot__row{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;}

/* ============================ POHYB ============================ */
.js .reveal{opacity:0;transform:translateY(18px);}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
  .seal__inner{animation:none;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}