/* Zolturviner — stone-courses */

:root{
  --bg:#1e1a20;
  --bg-alt:#272229;
  --bg-contrast:#e9e6e1;
  --text:#e9e6e1;
  --text-dim:#9c949c;
  --text-dark:#1e1a20;
  --gold:#c9a24b;
  --steel:#a9b2bd;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gut:24px;
  --pad:clamp(20px,5vw,64px);
}

*{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:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

a{color:var(--gold);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(--gold);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);line-height:1.05;font-weight:400;margin:0}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,2.7vw,2.15rem);margin-bottom:24px}
h3{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.2;margin-bottom:12px}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}

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

/* ---------- courses (sections) ---------- */

.course{
  padding:88px var(--pad) 88px var(--pad);
  background:var(--bg);
}
.course--alt{background:var(--bg-alt)}
.course--light{background:var(--bg-contrast);color:var(--text-dark)}
.course--light h1,.course--light h2,.course--light h3{color:var(--text-dark)}
.course--light .cap,.course--light .num{color:#6d6459}
.course--light .lead{color:#3a3239}

.body6{grid-column:span 6}

/* stepped indent: 0,1,2,3 columns */
.step0 .body6{grid-column:1/span 6}
.step1 .body6{grid-column:2/span 6}
.step2 .body6{grid-column:3/span 6}
.step3 .body6{grid-column:4/span 6}

.num{
  font-size:13px;
  color:var(--steel);
  letter-spacing:.08em;
  display:block;
  margin-bottom:14px;
}

.cap{
  font-size:13px;
  line-height:1.5;
  color:var(--text-dim);
  margin-top:14px;
}

.lead{font-size:1.12rem;color:#d6d0d2}

/* ---------- hero: three stacked courses ---------- */

.hero{display:block}

.hero__nav{
  background:var(--bg-alt);
  padding:18px var(--pad);
}
.hero__mid{
  background:var(--bg);
  padding:clamp(70px,13vw,168px) var(--pad) 40px var(--pad);
  display:flex;
  align-items:flex-end;
}
.hero__mid .inner{max-width:19ch}
.hero__mid h1{margin-bottom:0}
.hero__low{
  background:#191519;
  padding:56px var(--pad);
}

.topics{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  columns:2;
  column-gap:var(--gut);
  font-size:15px;
  color:var(--text-dim);
}
.topics li{
  break-inside:avoid;
  padding-left:18px;
  position:relative;
  margin-bottom:8px;
}
.topics li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--steel);
}

/* ---------- nav ---------- */

.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px var(--gut);
}
.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--text);
  text-decoration:none;
  letter-spacing:.01em;
  margin-right:auto;
}
.brand:hover{color:var(--gold)}
.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  list-style:none;
  margin:0;padding:0;
  font-size:14px;
}
.nav a{color:var(--text-dim);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

/* ---------- main figure 9 cols, right aligned ---------- */

.figure-course{padding:0 var(--pad) 88px var(--pad);background:#191519}
.fig-main{grid-column:4/span 9;margin:0}
.fig-main img{width:100%}

.detail-wrap{align-items:center;row-gap:36px}
.detail-fig{grid-column:1/span 5;margin:0}
.detail-fig img{width:100%}
.detail-text{grid-column:7/span 6}

/* ---------- text blocks ---------- */

.list{
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.list li{
  padding-left:22px;
  position:relative;
  margin-bottom:12px;
}
.list li::before{
  content:"";
  position:absolute;left:0;top:.78em;
  width:9px;height:2px;background:var(--gold);
}
.list--num{counter-reset:s}
.list--num li{counter-increment:s;padding-left:34px}
.list--num li::before{
  content:counter(s,decimal-leading-zero);
  background:none;width:auto;height:auto;top:0;
  font-size:13px;color:var(--steel);font-family:var(--sans);
}

.sub{margin-top:36px}
.sub:first-of-type{margin-top:32px}

dl{margin:0}
dt{font-family:var(--serif);font-size:1.05rem;margin-top:22px}
dd{margin:4px 0 0;color:#cdc6c8}

/* ---------- footer ---------- */

.foot{
  background:var(--bg-contrast);
  color:var(--text-dark);
  padding:64px var(--pad) 52px var(--pad);
  margin-top:0;
}
.foot__name{
  font-family:var(--serif);
  font-size:clamp(2.6rem,11vw,7.5rem);
  line-height:.95;
  letter-spacing:-.02em;
  margin:0 0 48px;
  color:var(--text-dark);
}
.foot__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px var(--gut);
}
.foot__col > span.rule{
  display:block;width:44px;height:2px;background:var(--gold);margin-bottom:14px;
}
.foot__col h2{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.09em;
  text-transform:none;
  color:#6d6459;
  margin:0 0 10px;
  line-height:1.4;
}
.foot__col ul{list-style:none;margin:0;padding:0;font-size:15px}
.foot__col li{margin-bottom:6px}
.foot__col a{color:#4a3f2b}
.foot__col p{font-size:14px;line-height:1.7;color:#3a3239;margin:0}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .course{padding:64px var(--pad)}
  .body6,
  .step0 .body6,.step1 .body6,.step2 .body6,.step3 .body6{grid-column:1/-1}
  .fig-main{grid-column:1/-1}
  .detail-fig,.detail-text{grid-column:1/-1}
  .detail-fig{max-width:420px}
  .figure-course{padding:0 var(--pad) 64px var(--pad)}
  .foot__cols{grid-template-columns:1fr}
}

@media (max-width:560px){
  body{font-size:16px}
  .topics{columns:1}
  .hero__mid{padding-top:64px}
  .hero__mid .inner{max-width:none}
}