/* Salvunteroki — woven-grid, tisk modrou a červenou */

:root{
  --paper:#f4f2ed;
  --paper-alt:#e6e3dc;
  --ink:#16151a;
  --ink-soft:#6d6a63;
  --blue:#1f3fa8;
  --red:#c0452e;
  --line:#c8c4ba;
  --gap:72px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

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

/* ---------- odkazy ---------- */
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
a:hover{color:var(--red);}
a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  background:#fff;
}

/* ---------- hlavička ---------- */
.masthead{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
}
.masthead .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
  padding-top:18px;
  padding-bottom:14px;
}
.brand{
  font-size:22px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  font-weight:normal;
}
.brand:hover{color:var(--ink);}
.brand span{color:var(--red);}
.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
}
.nav a{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--blue);color:var(--blue);}
.nav a[aria-current="page"]{border-bottom-color:var(--red);}

/* ---------- tkaný předěl ---------- */
.weave{margin:var(--gap) 0;}
.weave::before{
  content:"";
  display:block;
  height:2px;
  background:var(--blue);
}
.weave::after{
  content:"";
  display:block;
  height:1px;
  margin-top:6px;
  background:var(--red);
}

/* ---------- hero ---------- */
.hero{padding-top:56px;}
.hero-rule{height:2px;background:var(--ink);}
.hero-rule.thin{height:1px;background:var(--red);margin-top:6px;}

h1{
  grid-column:1 / span 9;
  font-size:52px;
  line-height:1.12;
  font-weight:normal;
  margin:26px 0 30px;
  letter-spacing:-.01em;
}

.kicker{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0;
}

.hero-cells{
  border:1px solid var(--line);
  border-bottom:none;
  margin-top:34px;
}
.hero-cells > *{
  border-bottom:1px solid var(--line);
  padding:22px;
}
.cell-lead{grid-column:1 / span 5;border-right:1px solid var(--line);}
.cell-list{grid-column:6 / span 4;border-right:1px solid var(--line);}
.cell-pause{grid-column:10 / span 3;}
.cell-lead p{margin:0;}
.cell-list ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:16px;
}
.cell-list li{
  padding-left:18px;
  position:relative;
  margin-bottom:6px;
  color:var(--ink-soft);
}
.cell-list li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  background:var(--blue);
}

/* ---------- obrázek 1:1 ---------- */
.figure-row{
  border:1px solid var(--line);
  border-bottom:none;
  margin-top:var(--gap);
}
.figure-row > *{border-bottom:1px solid var(--line);}
.fig-main{
  grid-column:1 / span 6;
  border-right:1px solid var(--line);
  padding:14px;
  margin:0;
}
.fig-main img{
  display:block;
  width:100%;
  height:auto;
}
.fig-note{
  grid-column:7 / span 6;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.caption{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.caption b{
  display:block;
  color:var(--red);
  font-weight:normal;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  margin-bottom:6px;
}

/* ---------- typografie textu ---------- */
h2{
  font-size:31px;
  line-height:1.25;
  font-weight:normal;
  margin:0 0 18px;
}
h3{
  font-style:italic;
  font-size:22px;
  font-weight:normal;
  margin:30px 0 10px;
}
p{margin:0 0 22px;}
.sec-no{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--red);
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}

section{scroll-margin-top:20px;}

.band{
  background:var(--paper-alt);
  padding:var(--gap) 0;
  margin:var(--gap) 0;
}
.band + .weave{display:none;}

.col-4-8 .side{grid-column:1 / span 3;}
.col-4-8 .body{grid-column:5 / span 8;}
.col-6-6 .half{grid-column:span 6;}
.col-6-6 .half:first-child{padding-right:34px;}
.col-3-9 .lead{grid-column:1 / span 3;}
.col-3-9 .body{grid-column:4 / span 9;}
.narrow{max-width:760px;}

/* ---------- checklist mřížka ---------- */
.checks{
  border:1px solid var(--line);
  border-bottom:none;
  margin:26px 0 0;
  list-style:none;
  padding:0;
}
.checks li{
  grid-column:span 6;
  border-bottom:1px solid var(--line);
  padding:14px 18px 14px 40px;
  position:relative;
  font-size:17px;
}
.checks li:nth-child(odd){border-right:1px solid var(--line);}
.checks li::before{
  content:"";
  position:absolute;
  left:18px;top:1.15em;
  width:9px;height:9px;
  border:1px solid var(--blue);
  background:transparent;
}

.plainlist{padding-left:20px;margin:0 0 22px;}
.plainlist li{margin-bottom:8px;}
.plainlist li::marker{color:var(--blue);}

/* ---------- tmavá sekce s detailem ---------- */
.dark{
  background:var(--ink);
  color:var(--paper);
  padding:var(--gap) 0;
  margin:var(--gap) 0;
}
.dark h2,.dark h3{color:var(--paper);}
.dark a{color:#a9b9ee;}
.dark a:hover{color:#e8a294;}
.dark .sec-no{color:#e08a76;}
.dark .caption{color:#a8a49c;}
.dark .caption b{color:#e08a76;}
.dark .plainlist li::marker{color:#a9b9ee;}
.fig-detail{
  grid-column:2 / span 4;
  margin:0;
  padding:0;
}
.fig-detail img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #3a3841;
}
.fig-detail figcaption{margin-top:12px;}
.dark-text{grid-column:7 / span 6;}

/* ---------- O projektu ---------- */
.about-grid{
  border-top:1px solid var(--line);
  padding-top:30px;
}
.about-marks{
  grid-column:1 / span 3;
  border-right:1px solid var(--line);
  padding-right:20px;
  list-style:none;
  margin:0;
  padding-left:0;
}
.about-marks li{
  position:relative;
  padding-left:18px;
  margin-bottom:12px;
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.about-marks li::before{
  content:"";
  position:absolute;
  left:0;top:.5em;
  width:7px;height:7px;
  background:var(--red);
}
.about-body{grid-column:5 / span 8;}

/* ---------- patička ---------- */
.site-footer{
  border-top:2px solid var(--ink);
  margin-top:var(--gap);
}
.foot-cells{
  border:1px solid var(--line);
  border-top:none;
  border-bottom:none;
  margin:0 0 34px;
}
.foot-cells > div{
  grid-column:span 3;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:22px;
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.foot-cells > div:last-child{border-right:none;}
.foot-cells h2,.foot-cells p{margin:0;}
.foot-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}
.foot-cells ul{list-style:none;margin:0;padding:0;}
.foot-cells li{margin-bottom:5px;}
.foot-cells a{text-decoration:none;}
.foot-cells a:hover{text-decoration:underline;}
.foot-note{
  padding:0 0 30px;
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:12px;
  color:var(--ink-soft);
}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  :root{--gap:52px;}
  h1{font-size:40px;}
  h2{font-size:26px;}
  .fig-main,.fig-note{grid-column:1 / span 12;border-right:none;}
  .fig-detail,.dark-text{grid-column:1 / span 12;}
  .dark-text{margin-top:26px;}
  .col-4-8 .side,.col-4-8 .body,
  .col-3-9 .lead,.col-3-9 .body,
  .col-6-6 .half{grid-column:1 / span 12;}
  .col-6-6 .half:first-child{padding-right:0;}
  .about-marks,.about-body{grid-column:1 / span 12;}
  .about-marks{border-right:none;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px;}
  .foot-cells > div{grid-column:span 6;}
  .foot-cells > div:nth-child(2n){border-right:none;}
}

@media (max-width:640px){
  :root{--gap:44px;}
  body{font-size:17px;}
  h1{font-size:32px;}
  h2{font-size:23px;}
  h3{font-size:20px;}
  .wrap{padding:0 16px;}
  .cell-lead,.cell-list,.cell-pause{grid-column:1 / span 12;border-right:none;}
  .cell-pause{display:none;}
  .checks li{grid-column:1 / span 12;border-right:none;}
  .checks li:nth-child(odd){border-right:none;}
  .foot-cells > div{grid-column:1 / span 12;border-right:none;}
  .masthead .wrap{flex-direction:column;align-items:flex-start;}
}