/* Plastava — ruled-margin, tmavě zelená s mosazí */

:root{
  --bg:#131c17;
  --bg-alt:#1a2620;
  --bg-contrast:#eaeee7;
  --text:#e4eae2;
  --text-dim:#8b9a8e;
  --text-dark:#131c17;
  --brass:#c2a24d;
  --sage:#7fa88a;
  --rule:rgba(228,234,226,.18);
  --rule-dark:rgba(19,28,23,.22);
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --line:72px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

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

.wrap{
  max-width:1220px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.margin-col{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  position:relative;
}

.body-col{grid-column:4 / 10;}
.wide-col{grid-column:4 / 12;}
.full-col{grid-column:4 / 13;}

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.005em;
}

h1{
  font-size:clamp(2.1rem,4.6vw,3.2rem);
  margin:0 0 36px;
}

h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  margin:0 0 20px;
}

h3{
  font-size:1.18rem;
  margin:44px 0 12px;
  color:var(--text);
}

p{margin:0 0 30px;}

a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:#d9bd72;}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

.caption{
  font-size:14px;
  line-height:1.6;
  color:var(--text-dim);
  font-family:var(--sans);
}

.sect-num{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
  display:block;
}

.initial{
  font-family:var(--serif);
  font-size:64px;
  line-height:1;
  color:var(--brass);
  display:block;
  margin-bottom:10px;
}

.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:0 0 40px;
}

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

.site-head{padding:26px 0 22px;border-bottom:1px solid var(--rule);}

.site-head .wrap{row-gap:14px;align-items:baseline;}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.05em;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--brass);}

.site-nav{grid-column:4 / 13;}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:15px;
}

.site-nav a{
  color:var(--text-dim);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color:var(--text);
  border-bottom-color:var(--brass);
}

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

.hero{padding:calc(var(--line)) 0 calc(var(--line));}

.hero .margin-col{min-height:200px;}

.hero-initial{
  font-family:var(--serif);
  font-size:clamp(5rem,11vw,9rem);
  line-height:.82;
  color:var(--brass);
  display:block;
  text-align:right;
}

.hero h1{grid-column:4 / 12;}

.hero-guides{
  grid-column:4 / 10;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:28px 0 2px;
  margin-top:8px;
}
.hero-guides p:last-child{margin-bottom:26px;}

.hero-meta{
  grid-column:4 / 10;
  margin-top:18px;
}

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

section{padding:var(--line) 0;}

.band{background:var(--bg-alt);}

.contrast{
  background:var(--bg-contrast);
  color:var(--text-dark);
}
.contrast h2,.contrast h3{color:var(--text-dark);}
.contrast .margin-col{border-right-color:var(--rule-dark);}
.contrast .rule{border-top-color:var(--rule-dark);}
.contrast .caption{color:#4c5a50;}
.contrast .sect-num{color:#4a6b57;}
.contrast .initial{color:#8a6f22;}
.contrast a{color:#7a6118;}

.sect-head{grid-column:4 / 12;}
.sect-head h2{margin-bottom:18px;}
.sect-head .rule{margin-bottom:38px;}

/* ---------- obrázky ---------- */

.figure-main{
  grid-column:6 / 13;
  margin:0;
}
.figure-main img{
  display:block;
  width:100%;
  height:auto;
}
.figure-caption-left{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  margin:0;
  align-self:end;
}

.figure-detail{
  grid-column:4 / 8;
  margin:0;
}
.figure-detail img{
  display:block;
  width:100%;
  height:auto;
}
.figure-detail figcaption{margin-top:12px;}

.detail-text{grid-column:8 / 13;}
.detail-text h2{margin-top:0;}

/* ---------- seznamy ---------- */

.list-block{grid-column:4 / 12;}

ul.checklist,ol.steps{
  margin:0 0 30px;
  padding:0;
  list-style:none;
}
ul.checklist li,ol.steps li{
  padding-left:30px;
  position:relative;
  margin-bottom:16px;
  line-height:1.75;
}
ul.checklist li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--brass);
}
ol.steps{counter-reset:s;}
ol.steps li{counter-increment:s;}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--sage);
  font-family:var(--serif);
}

dl.gloss{grid-column:4 / 12;margin:0;}
dl.gloss dt{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--brass);
  margin-top:26px;
}
.contrast dl.gloss dt{color:#7a6118;}
dl.gloss dd{margin:6px 0 0;}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:56px 0 64px;
}
.site-foot .wrap{row-gap:26px;align-items:start;}

.foot-mark{
  grid-column:1 / 4;
  border-left:1px solid var(--brass);
  padding-left:18px;
}
.foot-mark .name{
  font-family:var(--serif);
  font-size:1.25rem;
  letter-spacing:.05em;
}

.foot-nav{grid-column:4 / 10;}
.foot-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  font-size:15px;
}
.foot-nav li:not(:last-child)::after{
  content:"·";
  color:var(--brass);
  padding:0 12px;
}
.foot-nav a{color:var(--text-dim);text-decoration:none;}
.foot-nav a:hover{color:var(--text);text-decoration:underline;}

.foot-contact{
  grid-column:10 / 13;
  text-align:right;
}
.foot-note{
  grid-column:4 / 13;
  font-size:14px;
  color:var(--text-dim);
  line-height:1.7;
}

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

@media (max-width:1000px){
  .figure-main{grid-column:5 / 13;}
  .figure-detail{grid-column:4 / 9;}
  .detail-text{grid-column:9 / 13;}
}

@media (max-width:820px){
  :root{--line:44px;}
  body{font-size:17px;line-height:1.85;}
  .wrap{
    grid-template-columns:1fr;
    column-gap:0;
    padding:0 20px;
  }
  .brand,.site-nav,.hero h1,.hero-guides,.hero-meta,
  .margin-col,.body-col,.wide-col,.full-col,.sect-head,
  .list-block,dl.gloss,.figure-main,.figure-detail,.detail-text,
  .figure-caption-left,.foot-mark,.foot-nav,.foot-contact,.foot-note{
    grid-column:1;
  }
  .margin-col,.figure-caption-left{
    border-right:0;
    border-left:1px solid var(--rule);
    padding-right:0;
    padding-left:16px;
    min-height:0;
  }
  .contrast .margin-col,.contrast .figure-caption-left{border-left-color:var(--rule-dark);}
  .hero-initial{text-align:left;font-size:4.4rem;}
  .hero .margin-col{margin-bottom:8px;}
  .figure-main{margin-top:28px;}
  .figure-caption-left{margin-top:12px;align-self:start;}
  .figure-detail{margin-bottom:28px;}
  .foot-contact{text-align:left;}
  .site-foot .wrap{row-gap:22px;}
}