/* Shared by all pages of the main version (index.html, prihlaska.html, tym.html).
   Colours between the VARS markers are written by draw.py – don't edit them by hand. */
@font-face{font-family:"SKAUT Bold";font-display:swap;src:url(https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff2) format("woff2"),url(https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff) format("woff")}
@font-face{font-family:"TheMix";font-weight:400;font-display:swap;src:url(https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2) format("woff2"),url(https://cdn.skauting.cz/fonts/TheMix_LT_400.woff) format("woff")}
@font-face{font-family:"TheMix";font-weight:700;font-display:swap;src:url(https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2) format("woff2"),url(https://cdn.skauting.cz/fonts/TheMix_LT_700.woff) format("woff")}
/*VARS*/:root{--sky:linear-gradient(180deg,#BDD4DF 0%,#DCE6E6 55%,#F6EBD8 100%);--forest:#A9BDC5;--forest-back:#BDD4DF;--door-in:#4F6657;--line:#2F3A34;--grass:#657F6F;--ink:#2F3A34;--cover:#FFFFFF;--shade:#87A1AE;--door:#D3BFA0;--ground-top:#A4D2B2;--ground-bottom:#F6EBD8;--title:#2F3A34;--nav:#2F3A34;--h2:#4F6657;--text:#2F3A34;--soft:#566A60;--bullet:#657F6F;--smoke-shade:#BDD4DF;}/*/VARS*/
:root{--head:"SKAUT Bold","Arial Black",sans-serif;--body:"TheMix",system-ui,sans-serif;
  /* spacing: 8 px grid */ --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
  /* type scale */ --fs-s:16px;--fs-m:20px;--fs-l:24px;--fs-xl:28px;--fs-h2:clamp(32px,5vw,56px);--fs-h1:clamp(44px,7.2vw,120px)}
*{box-sizing:border-box}
body{margin:0;background:var(--ground-bottom);color:var(--text);font:400 var(--fs-m)/1.6 var(--body)}
a:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:2px}
header{background:var(--sky)}
.top{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--s3) var(--s3) 0}
.logo{width:112px;height:112px;display:block;border-radius:50%}
.logo img{width:100%;height:100%;display:block}
nav{display:flex;gap:var(--s2)}
nav a{color:var(--nav);text-decoration:none;font:var(--fs-xl)/1 var(--head);letter-spacing:.02em;padding:12px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
nav a:hover,nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
/* page title in the sky: the same box on every page, so the horizon stays put when switching pages
   (a bigger or two-line title just reaches down into the empty sky of the landscape);
   kept within the middle 70 %, clear of the smoke on the right */
header h1{height:var(--s12);max-width:70%;margin:0 auto;padding-top:var(--s4);color:var(--title);text-align:center;letter-spacing:.01em}
/* landscape: smoke rises above its box (overflow visible), cut off at the sides; the art never takes clicks */
.land{position:relative;z-index:1;overflow-x:clip;margin-top:calc(-1 * var(--s4))}
.land svg{display:block;overflow:visible;pointer-events:none}
/* short header (subpages): landscape cut just below the tipis and faded into the page */
.short{container-type:inline-size}
.short h1{position:relative;z-index:2;font:var(--fs-h2)/1.05 var(--head)}
.short .land{height:max(255px,29.86cqw);clip-path:inset(-100vh 0 0 0)}
.short .land svg{width:100%;height:max(320px,37.5cqw)} /* full landscape (1440 × 540), the box shows the top 430 */
.short .land::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgb(246 235 216 / 0),var(--ground-bottom))}
/* main call to action */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px var(--s4);border-radius:28px;
  background:var(--ink);color:var(--cover);text-decoration:none;font:var(--fs-l)/1.1 var(--head);letter-spacing:.02em;text-align:center}
.btn:hover{background:var(--h2)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:28px}
.note{font-size:var(--fs-s);color:var(--soft)}
/* key facts row (dates, price): small heading, bold value, place under it */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3);margin:0 0 var(--s3)} /* 240: dates stay on one line */
.dates p{margin:0}
.dates h3{color:var(--h2);font:var(--fs-l)/1.1 var(--head);margin:0 0 var(--s1);white-space:nowrap}
.dates span{display:block;font-size:var(--fs-xl);font-weight:700;line-height:1.2;white-space:nowrap}
@media (min-width:680px){.dates{grid-template-columns:none;grid-auto-flow:column;justify-content:space-between;column-gap:var(--s4)}} /* full width: all facts in one row */
.dates i{font-style:normal;color:var(--soft)}
.price{font-size:var(--fs-xl);font-weight:700;line-height:1.2;margin:0 0 var(--s1)}
/* footer on every page: contact + organizer */
footer{background:var(--ink);color:var(--ground-bottom);padding:var(--s6) 0}
footer .in{max-width:680px;margin:0 auto;padding:0 var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}
footer h2{color:var(--ground-top);font:var(--fs-l)/1.1 var(--head);margin:0 0 var(--s1)}
footer p{margin:0}
footer a{color:var(--ground-bottom);text-underline-offset:3px}
footer a:focus-visible{outline-color:var(--ground-bottom)}
@media (max-width:600px){
  .top{padding:12px var(--s2) 0}
  .logo{width:64px;height:64px}
  header h1{max-width:75%;margin:0 var(--s2);text-align:left}   /* left, clear of the smoke on the right */
  .short h1{font-size:clamp(28px,8.2vw,32px)}      /* long words stay clear of the smoke on small phones */
  nav{gap:var(--s1)}
  nav a{font-size:var(--fs-m);padding:12px 4px}
  footer .in{grid-template-columns:1fr}
}
@media (max-width:380px){nav a{font-size:var(--fs-s)}}  /* small phones: menu next to the logo */