/* Kondizerdi — stone-courses */

:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --bg-deep:#101216;
  --bg-light:#e4e4e1;
  --tx:#d8dbdf;
  --tx-dim:#8a9098;
  --tx-dark:#14161a;
  --tx-dark-dim:#4c5157;
  --acc:#e8a33d;
  --acc2:#4fb79a;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --gap:24px;
}

*{box-sizing:border-box}

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

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

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

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

/* ---------- grid ---------- */

.band{background:var(--bg);padding:88px 0 52px}
.band--alt{background:var(--bg-alt)}
.band--deep{background:var(--bg-deep)}
.band--light{background:var(--bg-light);color:var(--tx-dark)}
.band--light a{color:#8a5407}
.band--tight{padding:52px 0}

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

/* text column: constant 6 columns, position shifts with the section step */
.col{grid-column:1 / span 6}
.s1 .col{grid-column:2 / span 6}
.s2 .col{grid-column:3 / span 6}
.s3 .col{grid-column:4 / span 6}

.wide{grid-column:1 / span 9}
.s1 .wide{grid-column:2 / span 9}
.s2 .wide{grid-column:3 / span 9}
.s3 .wide{grid-column:4 / span 10}

.full{grid-column:1 / -1}

/* ---------- typography ---------- */

h1,h2,h3{font-family:var(--sans);font-weight:800;margin:0}

h1{
  font-size:clamp(42px,7.4vw,88px);
  line-height:.98;
  letter-spacing:-.035em;
}

h2{
  font-size:clamp(26px,3.3vw,38px);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 22px;
}

h3{
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:34px 0 10px;
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.lead{font-size:20px;line-height:1.65}

.num{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--acc2);
  display:block;
  margin-bottom:14px;
}
.band--light .num{color:#1f7a65}

.note{color:var(--tx-dim);font-size:16px}
.band--light .note{color:var(--tx-dark-dim)}

/* ---------- lists ---------- */

ul,ol{margin:0 0 20px;padding-left:22px}
li{margin-bottom:10px}
li::marker{color:var(--acc)}
.band--light li::marker{color:#a8721f}

.plain{list-style:none;padding-left:0}
.plain li{
  padding-left:20px;
  position:relative;
  color:var(--tx-dim);
  font-size:17px;
}
.plain li::before{
  content:"";
  position:absolute;
  left:0;top:.75em;
  width:10px;height:2px;
  background:var(--acc2);
}

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

.hero-nav{background:var(--bg-alt);padding:18px 0}
.hero-mid{background:var(--bg);padding:104px 0 40px}
.hero-low{background:var(--bg-deep);padding:52px 0 72px}

.hero-mid .full{align-self:end}

.kicker{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--acc2);
  margin:0 0 24px;
}

.hero-mid h1{max-width:15ch}

.hero-low .col{grid-column:1 / span 6}
.hero-low .topics{grid-column:8 / span 5}

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

.nav{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}

.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--tx);
  text-decoration:none;
  margin-right:auto;
}
.brand:hover{color:var(--acc)}

.nav a:not(.brand){
  font-family:var(--sans);
  font-size:15px;
  color:var(--tx-dim);
  text-decoration:none;
}
.nav a:not(.brand):hover{color:var(--acc);text-decoration:underline;text-underline-offset:4px}
.nav a[aria-current="page"]{color:var(--acc)}

/* ---------- figures ---------- */

.fig-main{grid-column:4 / -1;margin:0}
.fig-main img{width:100%}

figcaption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
  color:var(--tx-dim);
  margin-top:12px;
  max-width:52ch;
}
.band--light figcaption{color:var(--tx-dark-dim)}

.detail-grid{align-items:start}
.fig-detail{grid-column:2 / span 4;margin:0}
.detail-text{grid-column:7 / span 6}

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

.site-footer{background:var(--bg-light);color:var(--tx-dark);padding:64px 0 56px;margin:0}

.footer-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(48px,12vw,150px);
  line-height:.9;
  letter-spacing:-.045em;
  grid-column:1 / -1;
  margin:0 0 48px;
}

.footer-col{grid-column:span 4}
.footer-col + .footer-col{}

.footer-col .rule{
  display:block;
  width:44px;
  height:2px;
  background:var(--acc2);
  margin-bottom:14px;
}

.footer-col h2{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tx-dark-dim);
  font-weight:700;
  margin:0 0 12px;
}

.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:6px}
.footer-col a{color:#8a5407}
.footer-col p{font-size:16px;line-height:1.6;color:var(--tx-dark-dim)}

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

@media (max-width:1000px){
  .wrap{column-gap:18px}
  .col,.s1 .col,.s2 .col,.s3 .col{grid-column:1 / span 8}
  .wide,.s1 .wide,.s2 .wide,.s3 .wide{grid-column:1 / span 11}
  .fig-main{grid-column:3 / -1}
  .fig-detail{grid-column:1 / span 5}
  .detail-text{grid-column:7 / span 6}
  .hero-low .col{grid-column:1 / span 7}
  .hero-low .topics{grid-column:9 / span 4}
}

@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .band{padding:56px 0 40px}
  .band--tight{padding:40px 0}
  .hero-mid{padding:64px 0 32px}
  .hero-low{padding:36px 0 52px}
  .site-footer{padding:48px 0 44px}

  .col,.s1 .col,.s2 .col,.s3 .col,
  .wide,.s1 .wide,.s2 .wide,.s3 .wide,
  .fig-main,.fig-detail,.detail-text,
  .hero-low .col,.hero-low .topics,
  .footer-col{grid-column:1 / -1}

  .fig-detail{margin-bottom:28px}
  .hero-low .topics{margin-top:32px}
  .footer-col{margin-bottom:32px}
  .footer-col:last-child{margin-bottom:0}
  .footer-name{margin-bottom:36px}
  .lead{font-size:18px}
  .nav{gap:8px 20px}
  .brand{width:100%;margin-right:0;margin-bottom:4px}
}