/* Brestinte — book-spine: tmavě švestková, mosaz a stříbro */

:root{
  --bg:#1e1a20;
  --bg-alt:#272229;
  --bg-contrast:#e9e6e1;
  --text:#e9e6e1;
  --text-dim:#9c949c;
  --text-on-contrast:#1e1a20;
  --brass:#c9a24b;
  --silver:#a9b2bd;
  --rhythm:76px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;}

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

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

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

a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.45);}
a:hover{border-bottom-color:var(--brass);}

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

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

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:22px;
}

.col-text{grid-column:2 / 8;}
.col-lead{grid-column:2 / 10;}
.col-full{grid-column:2 / 13;}

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

.site-head{
  border-bottom:1px solid rgba(169,178,189,.22);
  padding:22px 0 18px;
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
}
.brand{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text);
  border-bottom:none;
}
.brand span{color:var(--brass);}
.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.site-nav a{
  color:var(--text-dim);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover{color:var(--text);border-bottom-color:var(--brass);}
.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--brass);}

/* ---------- hřbet knihy ---------- */

.spine{
  grid-column:1 / 2;
  position:relative;
  min-height:100%;
}
.spine::before{
  content:"";
  position:absolute;
  left:2px;top:6px;bottom:6px;
  width:1px;
  background:rgba(169,178,189,.3);
}
.spine::after{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:9px;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--brass) 0,
    var(--brass) 7px,
    transparent 7px,
    transparent 20px
  );
  opacity:.75;
}

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

.hero{padding:calc(var(--rhythm) * .9) 0 var(--rhythm);}
.hero .grid{align-items:start;}
.hero-body{grid-column:2 / 10;}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 18px;
}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.12;
  margin:0 0 22px;
  max-width:16ch;
}

.rule-double{
  border:0;
  height:5px;
  margin:0 0 26px;
  max-width:220px;
  border-top:1px solid var(--brass);
  border-bottom:1px solid rgba(169,178,189,.45);
}

.hero-lead{
  font-size:21px;
  line-height:1.6;
  color:var(--text);
  margin:0 0 14px;
  max-width:62ch;
}

.hero-figure{
  grid-column:7 / 13;
  margin:34px 0 0;
}
.hero-figure img{width:100%;}
figcaption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.03em;
  color:var(--silver);
  margin-top:10px;
  max-width:46ch;
}

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

.section{padding:var(--rhythm) 0;}
.section--alt{background:var(--bg-alt);}
.section--contrast{
  background:var(--bg-contrast);
  color:var(--text-on-contrast);
}
.section--contrast .running-head,
.section--contrast figcaption,
.section--contrast .note{color:#5c545c;}
.section--contrast .running-head::after{background:rgba(30,26,32,.25);}
.section--contrast a{color:#8a6a1c;border-bottom-color:rgba(138,106,28,.5);}
.section--contrast .spine::before{background:rgba(30,26,32,.2);}
.section--contrast .spine::after{opacity:.55;}
.section--contrast li::marker{color:#8a6a1c;}

.running-head{
  grid-column:1 / 13;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 30px;
}
.running-head::after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background:rgba(169,178,189,.28);
}
.running-head .num{color:var(--brass);margin-right:12px;}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(25px,3vw,33px);
  line-height:1.25;
  margin:0 0 18px;
}
h3{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:21px;
  line-height:1.35;
  margin:34px 0 10px;
}

p{margin:0 0 20px;text-indent:0;}
.col-text p + p,
.col-lead p + p{text-indent:1.6em;}

.lead{
  font-size:20.5px;
  line-height:1.62;
  color:var(--text);
}

ul,ol{margin:0 0 22px;padding-left:1.25em;}
li{margin-bottom:9px;}
li::marker{color:var(--brass);}

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

/* typografický oddělovač */
.dinkus{
  grid-column:2 / 8;
  display:flex;
  justify-content:center;
  gap:10px;
  margin:36px 0;
  list-style:none;
  padding:0;
}
.dinkus span{
  width:16px;
  height:1px;
  background:var(--brass);
}

/* ---------- detailní obrázek v kontrastní sekci ---------- */

.detail-block{
  grid-column:2 / 13;
  display:grid;
  grid-template-columns:repeat(11,1fr);
  column-gap:22px;
  align-items:start;
}
.detail-figure{
  grid-column:1 / 5;
  margin:0;
}
.detail-figure img{width:100%;}
.detail-text{grid-column:6 / 12;}

/* ---------- checklist ---------- */

.checklist{
  list-style:none;
  padding-left:0;
}
.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:14px;height:1px;
  background:var(--brass);
}

/* ---------- About / buřinka ---------- */

.dropcap::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:64px;
  line-height:.82;
  padding:6px 12px 0 0;
  color:var(--brass);
}

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

.site-foot{
  border-top:1px solid rgba(169,178,189,.22);
  padding:var(--rhythm) 0 46px;
  text-align:center;
}
.foot-name{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.foot-nav ul{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.05em;
}
.foot-nav li + li{
  border-left:1px solid rgba(169,178,189,.35);
  margin-left:14px;
  padding-left:14px;
}
.foot-nav a{color:var(--text-dim);border-bottom:none;}
.foot-nav a:hover{color:var(--brass);}
.foot-mail{margin:0 0 14px;}
.foot-note{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-dim);
  max-width:54ch;
  margin:0 auto;
}

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

@media (max-width:900px){
  :root{--rhythm:52px;}
  .hero-body,.hero-figure,.col-text,.col-lead,.col-full,
  .running-head,.dinkus,.detail-block{grid-column:1 / 13;}
  .detail-block{grid-template-columns:1fr;}
  .detail-figure{max-width:420px;margin-bottom:26px;}
  .detail-figure,.detail-text{grid-column:auto;}
  .spine{display:none;}
  .hero-figure{margin-top:28px;}
}

@media (max-width:640px){
  :root{--rhythm:46px;}
  body{font-size:17px;}
  .wrap{padding:0 16px;}
  .hero-lead{font-size:19px;}
  .lead{font-size:19px;}
  .site-head .wrap{flex-direction:column;align-items:flex-start;}
  .site-nav ul{gap:6px 16px;}
  .foot-nav ul{flex-direction:column;gap:8px;}
  .foot-nav li + li{border-left:0;margin-left:0;padding-left:0;}
  .col-text p + p,.col-lead p + p{text-indent:0;}
}