/* Zuldanda — stone-courses */

:root{
  --bg:#fcfbf9;
  --bg-alt:#efeeea;
  --bg-deep:#e6e4dd;
  --ink:#141414;
  --muted:#6a6a66;
  --paper:#fcfbf9;
  --accent:#c22a22;
  --accent2:#3c5a4a;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --pad-y:88px;
  --pad-y-s:52px;
}

*{box-sizing:border-box;}

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

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

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  max-width:1300px;
  margin:0 auto;
  padding-left:40px;
  padding-right:40px;
}

/* ---- stepped rhythm ---- */
.band{padding-top:var(--pad-y);padding-bottom:var(--pad-y);}
.band--tight{padding-top:var(--pad-y-s);padding-bottom:var(--pad-y-s);}
.tone-a{background:var(--bg);}
.tone-b{background:var(--bg-alt);}
.tone-c{background:var(--bg-deep);}
.tone-dark{background:var(--ink);color:var(--paper);}

.col{grid-column:1 / span 6;}
.step-0 .col{grid-column:1 / span 6;}
.step-1 .col{grid-column:2 / span 6;}
.step-2 .col{grid-column:3 / span 6;}
.step-3 .col{grid-column:4 / span 6;}

/* ---- typography ---- */
h1,h2,h3,.nav,.eyebrow,.sitemark,.foot-name,.chk li strong{font-family:var(--sans);}

h1{
  font-size:clamp(40px,6.6vw,84px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0;
  max-width:14ch;
}

h2{
  font-size:clamp(26px,3.1vw,38px);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:800;
  margin:0 0 26px;
}

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

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

.eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent2);
  margin:0 0 18px;
}
.tone-dark .eyebrow{color:#9db3a7;}

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

.muted{color:var(--muted);}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,
.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.tone-dark a,footer a{color:#f0a49e;}

/* ---- hero: three courses ---- */
.course-nav{background:var(--bg-alt);}
.course-nav .grid{padding-top:18px;padding-bottom:18px;}
.navrow{
  grid-column:1 / span 12;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 26px;
}
.sitemark{
  font-weight:800;
  font-size:17px;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  margin-right:auto;
}
.sitemark:hover{color:var(--accent);}
.nav{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0;}
.nav a{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding:2px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--accent);}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent);}

.course-title{background:var(--bg);}
.course-title .grid{padding-top:104px;padding-bottom:40px;}
.course-title .headwrap{grid-column:1 / span 10;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;}

.course-intro{background:var(--bg-deep);}
.course-intro .grid{padding-top:var(--pad-y-s);padding-bottom:var(--pad-y-s);row-gap:36px;}
.course-intro .col{grid-column:1 / span 6;}
.topics{grid-column:8 / span 5;}

.topics ol{list-style:none;margin:0;padding:0;counter-reset:t;}
.topics li{
  counter-increment:t;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.005em;
  padding:12px 0 12px 46px;
  position:relative;
  border-top:1px solid rgba(20,20,20,.14);
}
.topics li:last-child{border-bottom:1px solid rgba(20,20,20,.14);}
.topics li::before{
  content:counter(t,decimal-leading-zero);
  position:absolute;left:0;top:12px;
  color:var(--accent2);
  font-size:12px;
  letter-spacing:.1em;
  font-weight:700;
}
.topics a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(194,42,34,.45);}
.topics a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ---- main image ---- */
.figband .grid{padding-top:0;padding-bottom:var(--pad-y-s);}
.mainfig{grid-column:4 / span 9;margin:0;}
.mainfig img{display:block;width:100%;height:auto;}
figcaption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
  margin-top:12px;
  max-width:52ch;
}

/* ---- lists ---- */
.list{margin:0 0 20px;padding:0 0 0 22px;}
.list li{margin:0 0 10px;}
.list li::marker{color:var(--accent);}

.chk{list-style:none;margin:0;padding:0;}
.chk li{
  padding:14px 0 14px 30px;
  position:relative;
  border-top:1px solid rgba(20,20,20,.13);
}
.chk li:last-child{border-bottom:1px solid rgba(20,20,20,.13);}
.chk li::before{
  content:"";
  position:absolute;left:0;top:26px;
  width:14px;height:2px;background:var(--accent);
}
.chk li strong{display:block;font-size:16px;letter-spacing:-.005em;margin-bottom:2px;}
.chk li span{font-size:17px;color:var(--muted);}

.defs{margin:0;}
.defs dt{font-family:var(--sans);font-weight:700;font-size:17px;margin:26px 0 6px;letter-spacing:-.01em;}
.defs dt:first-of-type{margin-top:0;}
.defs dd{margin:0;color:var(--ink);}

/* ---- dark detail section ---- */
.dark-split .grid{row-gap:40px;align-items:start;}
.dark-split .txt{grid-column:1 / span 6;}
.dark-split .detailfig{grid-column:8 / span 5;margin:0;}
.dark-split .detailfig img{display:block;width:100%;height:auto;}
.tone-dark figcaption{color:#a3a29d;}
.tone-dark .chk li{border-color:rgba(252,251,249,.18);}
.tone-dark .chk li span{color:#b8b7b2;}
.tone-dark .defs dd{color:#dcdbd6;}
.tone-dark .muted{color:#a3a29d;}

/* ---- contact block ---- */
.mailline{
  font-family:var(--sans);
  font-size:clamp(20px,2.6vw,28px);
  font-weight:700;
  letter-spacing:-.02em;
}

/* ---- about stepping ---- */
.about-1 .col{grid-column:1 / span 6;}
.about-2 .col{grid-column:2 / span 6;}
.about-3 .col{grid-column:3 / span 6;}
.about-4 .col{grid-column:4 / span 6;}
.about-5 .col{grid-column:5 / span 6;}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--paper);margin-top:0;}
footer .grid{padding-top:64px;padding-bottom:56px;}
.foot-name{
  grid-column:1 / span 12;
  font-size:clamp(52px,13vw,168px);
  line-height:.86;
  letter-spacing:-.05em;
  font-weight:800;
  text-transform:uppercase;
  margin:0 0 52px;
  color:var(--paper);
}
.foot-col{grid-column:span 4;}
.foot-col h2{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:#9db3a7;
  margin:0 0 14px;
  padding-top:14px;
  border-top:2px solid var(--accent);
  display:inline-block;
}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin:0 0 8px;}
.foot-col a{color:var(--paper);text-decoration:none;font-family:var(--sans);font-size:15px;border-bottom:1px solid rgba(252,251,249,.3);}
.foot-col a:hover{color:#f0a49e;border-bottom-color:#f0a49e;}
.foot-col p{font-size:16px;color:#b8b7b2;margin:0;}

/* ---- responsive ---- */
@media (max-width:1000px){
  :root{--pad-y:66px;--pad-y-s:42px;}
  .grid{column-gap:18px;padding-left:28px;padding-right:28px;}
  .step-0 .col,.step-1 .col,.step-2 .col,.step-3 .col,
  .about-1 .col,.about-2 .col,.about-3 .col,.about-4 .col,.about-5 .col{grid-column:1 / span 9;}
  .course-title .headwrap{grid-column:1 / span 12;min-height:0;}
  .course-intro .col{grid-column:1 / span 12;}
  .topics{grid-column:1 / span 12;}
  .mainfig{grid-column:2 / span 11;}
  .dark-split .txt{grid-column:1 / span 12;}
  .dark-split .detailfig{grid-column:1 / span 7;}
}

@media (max-width:680px){
  :root{--pad-y:48px;--pad-y-s:34px;}
  body{font-size:17px;}
  .grid{padding-left:20px;padding-right:20px;column-gap:0;}
  .step-0 .col,.step-1 .col,.step-2 .col,.step-3 .col,
  .about-1 .col,.about-2 .col,.about-3 .col,.about-4 .col,.about-5 .col,
  .course-title .headwrap,.course-intro .col,.topics,
  .mainfig,.dark-split .txt,.dark-split .detailfig,
  .foot-name,.foot-col{grid-column:1 / span 12;}
  .course-title .grid{padding-top:56px;padding-bottom:28px;}
  .foot-col{margin-bottom:32px;}
  .foot-name{margin-bottom:36px;}
  h1{max-width:none;}
  .lead{font-size:18px;}
  .navrow{gap:10px 16px;}
  .sitemark{width:100%;margin-right:0;}
}