/* Bavurketona — společný styl pro všechny stránky */

:root{
  --paper:#f7f3ea;
  --paper-alt:#eae4d8;
  --dark:#43221f;
  --ink:#241b16;
  --ink-soft:#786b5d;
  --accent:#8a2c25;
  --accent-2:#8a6a24;
  --step:84px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- mřížka ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* textové sloupce: 7 sloupců, každý další o jeden doprava */
.col-a{grid-column:1 / span 7}
.col-b{grid-column:2 / span 7}
.col-c{grid-column:3 / span 7}
.col-d{grid-column:4 / span 7}

/* ---------- typografie ---------- */

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--ink)}
h1{font-size:2.85rem;line-height:1.18;margin:0 0 34px}
h2{font-size:1.85rem;line-height:1.28;margin:0 0 18px}
h3{font-size:1.3rem;line-height:1.35;font-style:italic;margin:32px 0 10px}
p{margin:0 0 20px;max-width:66ch}
.lead{font-size:1.12rem;color:var(--ink)}
.meta{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--accent-2);
  margin:0 0 14px;
}
.note{color:var(--ink-soft);font-size:.94rem}

/* ---------- příložné kříže ---------- */

.mark{
  display:block;
  width:18px;height:18px;
  border:1px solid var(--accent-2);
  border-radius:50%;
  position:relative;
}
.mark::before,.mark::after{content:"";position:absolute;background:var(--accent-2)}
.mark::before{left:-7px;top:8px;width:31px;height:1px}
.mark::after{top:-7px;left:8px;width:1px;height:31px}
.mark--light{border-color:rgba(247,243,234,.6)}
.mark--light::before,.mark--light::after{background:rgba(247,243,234,.6)}

/* ---------- oddělovače ---------- */

.sep{margin:0 0 30px;max-width:560px}
.sep span{display:block;height:2px;background:var(--accent)}
.sep span+span{background:var(--accent-2);margin:6px 0 0 24px}

/* ---------- hlavička a navigace ---------- */

.site-head{padding:26px 0 22px;border-bottom:1px solid rgba(120,107,93,.35)}
.site-head .grid{row-gap:14px;align-items:baseline}
.brand{
  grid-column:1 / span 4;
  font-family:var(--serif);
  font-size:1.4rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}
.site-nav{grid-column:5 / span 8}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end;
}
.site-nav a{
  font-size:.92rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

/* ---------- hero ---------- */

.hero{padding:var(--step) 0 calc(var(--step) - 20px);position:relative}
.hero .grid{position:relative;row-gap:34px}
.hero-marks span{position:absolute}
.hero-marks span:nth-child(1){left:32px;top:-34px}
.hero-marks span:nth-child(2){right:32px;top:-34px}
.hero-marks span:nth-child(3){left:32px;bottom:-30px}
.hero-marks span:nth-child(4){right:32px;bottom:-30px}

.hero h1{grid-column:1 / span 9}
.hero h1 .l2{position:relative;display:inline-block}
.hero h1 .l2::after{
  content:"";position:absolute;left:-4px;right:-4px;
  top:calc(50% + 9px);height:2px;background:var(--accent);
}
.hero-intro{grid-column:1 / span 5}
.hero-list{grid-column:8 / span 4}

.marked{list-style:none;margin:0;padding:0}
.marked li{position:relative;padding-left:20px;margin-bottom:9px}
.marked li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--accent);
}
.marked a{color:var(--ink)}
.marked a:hover{color:var(--accent)}

/* ---------- sekce ---------- */

.band{padding:var(--step) 0}
.band--alt{background:var(--paper-alt)}
.band--tight{padding:calc(var(--step) - 24px) 0}

/* hlavní obrázek */
.figure-main{grid-column:3 / span 8;position:relative;margin:0}
.figure-main .hero-marks span:nth-child(1){left:-12px;top:-12px}
.figure-main .hero-marks span:nth-child(2){right:-12px;top:-12px}
.figure-main .hero-marks span:nth-child(3){left:-12px;bottom:34px}
.figure-main .hero-marks span:nth-child(4){right:-12px;bottom:34px}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:12px;max-width:52ch}

/* kontrastní sekce */
.band--dark{background:var(--dark);color:var(--paper)}
.band--dark h2,.band--dark h3{color:var(--paper)}
.band--dark p{color:rgba(247,243,234,.9)}
.band--dark .meta{color:#c9a758}
.band--dark a{color:#e8bfa0}
.band--dark .sep span{background:#e8bfa0}
.band--dark .sep span+span{background:#c9a758}
.band--dark .grid{row-gap:36px;align-items:start}
.figure-detail{grid-column:2 / span 4;margin:0}
.figure-detail figcaption{color:rgba(247,243,234,.68)}
.dark-text{grid-column:7 / span 6}
.band--dark .marked li::before{background:#c9a758}
.band--dark .marked li{color:rgba(247,243,234,.9)}

/* seznamy a checklisty */
.checklist{list-style:none;margin:0 0 20px;padding:0;max-width:62ch}
.checklist li{position:relative;padding-left:26px;margin-bottom:10px}
.checklist li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border:2px solid var(--accent-2);
}
.numbered{margin:0 0 20px;padding-left:20px;max-width:62ch}
.numbered li{margin-bottom:10px;padding-left:6px}
.numbered li::marker{color:var(--accent-2);font-family:var(--serif)}

.pair{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.pair h3{margin-top:0}

/* ---------- stránka O projektu ---------- */

.about-marks{grid-column:1 / span 1;display:flex;flex-direction:column;gap:132px;padding-top:12px}
.about-body{grid-column:3 / span 7}
.about-body section+section{margin-top:52px}

.doc{grid-column:2 / span 8}
.doc h2{margin-top:46px}
.doc h2:first-of-type{margin-top:0}

/* ---------- patička ---------- */

.site-foot{background:var(--dark);color:var(--paper);padding:calc(var(--step) - 20px) 0}
.site-foot .grid{row-gap:30px}
.foot-sep{grid-column:1 / span 12;margin-bottom:34px;max-width:100%}
.foot-sep span{display:block;height:2px;background:#e8bfa0}
.foot-sep span+span{background:#c9a758;margin:6px 0 0 24px}
.foot-a{grid-column:1 / span 7}
.foot-b{grid-column:8 / span 5}
.foot-a .name{font-family:var(--serif);font-size:1.35rem;margin:0 0 12px}
.site-foot p{color:rgba(247,243,234,.82)}
.site-foot a{color:#e8bfa0}
.foot-nav{list-style:none;margin:0 0 18px;padding:0}
.foot-nav li{margin-bottom:8px}
.foot-nav a{text-decoration:none;border-bottom:1px solid rgba(232,191,160,.45);padding-bottom:2px}
.foot-nav a:hover{border-bottom-color:#e8bfa0}
.site-foot :focus-visible{outline-color:#e8bfa0}
.foot-legal{grid-column:1 / span 12;margin:26px 0 0;font-size:.85rem;color:rgba(247,243,234,.6)}

/* ---------- responzivita ---------- */

@media (max-width:960px){
  .grid{column-gap:18px;padding:0 24px}
  h1{font-size:2.2rem}
  h2{font-size:1.6rem}
  .hero h1,.hero-intro,.hero-list,
  .col-a,.col-b,.col-c,.col-d,
  .figure-main,.figure-detail,.dark-text,
  .about-body,.doc,.foot-a,.foot-b{grid-column:1 / span 12}
  .about-marks{display:none}
  .brand{grid-column:1 / span 12}
  .site-nav{grid-column:1 / span 12}
  .site-nav ul{justify-content:flex-start}
  .figure-main .hero-marks span{display:none}
}

@media (max-width:640px){
  :root{--step:50px}
  body{font-size:16px}
  .grid{padding:0 18px}
  h1{font-size:1.85rem}
  h2{font-size:1.4rem}
  h3{font-size:1.15rem}
  .hero-marks span:nth-child(1){left:18px;top:-24px}
  .hero-marks span:nth-child(2){right:18px;top:-24px}
  .hero-marks span:nth-child(3){left:18px;bottom:-20px}
  .hero-marks span:nth-child(4){right:18px;bottom:-20px}
  .pair{grid-template-columns:1fr;gap:0}
  .site-nav ul{gap:6px 16px}
}