/* Brolstadune — stone-courses */

:root{
  --bg:#f5f4f0;
  --bg-alt:#e2ded4;
  --bg-deep:#14456b;
  --ink:#1c1e20;
  --ink-soft:#6a6d6e;
  --ink-invert:#f5f4f0;
  --accent:#c2522f;
  --accent-2:#1d6b8f;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --pad-y:88px;
  --pad-x: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.65;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

/* ---------- courses (layers) ---------- */

.course{
  padding:var(--pad-y) var(--pad-x);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}
.course > *{grid-column:1 / -1;}

.tone-a{background:var(--bg);}
.tone-b{background:var(--bg-alt);}
.tone-deep{background:var(--bg-deep);color:var(--ink-invert);}
.tone-deep .eyebrow,
.tone-deep .caption{color:#b8cfdf;}
.tone-deep a{color:#f0b39c;}

/* stepped rhythm: 0,1,2,3 then restart */
.step-0{padding-left:var(--pad-x);}
.step-1{padding-left:calc(var(--pad-x) + 6%);}
.step-2{padding-left:calc(var(--pad-x) + 12%);}
.step-3{padding-left:calc(var(--pad-x) + 18%);}

.text{grid-column:1 / span 6;}
.text-wide{grid-column:1 / span 8;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;}

h1{
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.04;
  margin:0;
  letter-spacing:-0.01em;
}

h2{
  font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.18;
  margin:0 0 .6em;
}

h3{
  font-style:italic;
  font-size:1.25rem;
  line-height:1.3;
  margin:2.2em 0 .5em;
}

p{margin:0 0 1.5em;}
p:last-child{margin-bottom:0;}

.lead{font-size:1.2rem;line-height:1.6;}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 1.6em;
  display:block;
}

.caption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-soft);
  margin-top:12px;
  max-width:46ch;
}

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

.hero-nav{
  background:var(--bg-alt);
  padding:18px var(--pad-x);
}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  align-items:baseline;
}
.site-nav a{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
  display:inline-block;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);}
.site-nav .brand{
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.02em;
  text-transform:none;
  margin-right:12px;
  border-bottom:none;
}
.site-nav .brand:hover{border-bottom:none;color:var(--accent);}

.hero-main{
  background:var(--bg);
  padding:120px var(--pad-x) 44px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  align-items:end;
  min-height:46vh;
}
.hero-main h1{grid-column:1 / span 9;}

.hero-base{
  background:var(--bg-alt);
  padding:56px var(--pad-x) 64px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:36px;
}
.hero-base .intro{grid-column:1 / span 6;}
.hero-base .topics{grid-column:8 / span 5;}

.topics ul{list-style:none;margin:0;padding:0;}
.topics li{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
  padding:9px 0;
  border-top:1px solid rgba(28,30,32,.18);
  display:flex;
  gap:14px;
}
.topics li:last-child{border-bottom:1px solid rgba(28,30,32,.18);}
.topics .num{color:var(--accent-2);letter-spacing:.08em;flex:0 0 auto;}

/* ---------- main figure ---------- */

.figure-course{
  padding:var(--pad-y) var(--pad-x);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  background:var(--bg);
}
.figure-course figure{
  grid-column:4 / span 9;
  margin:0;
}
.figure-course img{width:100%;}

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

.checklist{
  list-style:none;
  margin:0 0 1.5em;
  padding:0;
}
.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:.7em;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:10px;
  height:10px;
  background:var(--accent);
}
.tone-deep .checklist li::before{background:#f0b39c;}

ol.steps{
  padding-left:0;
  list-style:none;
  counter-reset:s;
  margin:0 0 1.5em;
}
ol.steps li{
  counter-increment:s;
  position:relative;
  padding-left:44px;
  margin-bottom:.9em;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.18em;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent-2);
}
.tone-deep ol.steps li::before{color:#9fc6de;}

dl.terms{margin:0;}
dl.terms dt{font-style:italic;margin-top:1.3em;}
dl.terms dd{margin:.2em 0 0;color:var(--ink);}

/* ---------- deep section with detail image ---------- */

.deep{
  background:var(--bg-deep);
  color:var(--ink-invert);
  padding:var(--pad-y) var(--pad-x);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:40px;
  align-items:start;
}
.deep .deep-text{grid-column:1 / span 6;}
.deep figure{grid-column:8 / span 5;margin:0;}
.deep h2{color:var(--ink-invert);}

/* ---------- about ---------- */

.about-block{
  padding:64px var(--pad-x);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}
.about-block .text{grid-column:1 / span 6;}
.about-block.o-1 .text{grid-column:2 / span 6;}
.about-block.o-2 .text{grid-column:3 / span 6;}
.about-block.o-3 .text{grid-column:4 / span 6;}
.about-block.o-4 .text{grid-column:5 / span 6;}

/* ---------- legal ---------- */

.legal{
  padding:var(--pad-y) var(--pad-x);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}
.legal .text{grid-column:1 / span 7;}
.legal h2{margin-top:2em;}
.legal h2:first-of-type{margin-top:1.2em;}

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

.site-footer{
  background:var(--bg-deep);
  color:var(--ink-invert);
  padding:64px var(--pad-x) 56px;
  margin-top:0;
}
.footer-name{
  font-family:var(--serif);
  font-size:clamp(2.4rem,10vw,7rem);
  line-height:1;
  margin:0 0 48px;
  letter-spacing:-0.02em;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.footer-cols section > span.rule{
  display:block;
  width:44px;
  height:3px;
  background:var(--accent);
  margin-bottom:14px;
}
.footer-cols h2{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#b8cfdf;
  margin:0 0 12px;
}
.footer-cols ul{list-style:none;margin:0;padding:0;}
.footer-cols li{margin-bottom:6px;}
.footer-cols a{color:#f0b39c;}
.footer-cols p{
  font-size:15px;
  line-height:1.6;
  color:#d6e2ea;
  margin:0;
}

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

@media (max-width:900px){
  :root{--pad-y:56px;--pad-x:28px;}
  body{font-size:17px;}
  .step-1,.step-2,.step-3{padding-left:var(--pad-x);}
  .course .text,
  .course .text-wide,
  .hero-main h1,
  .hero-base .intro,
  .hero-base .topics,
  .figure-course figure,
  .deep .deep-text,
  .deep figure,
  .legal .text,
  .about-block .text,
  .about-block.o-1 .text,
  .about-block.o-2 .text,
  .about-block.o-3 .text,
  .about-block.o-4 .text{grid-column:1 / -1;}
  .hero-main{padding-top:64px;min-height:0;}
  .footer-cols{grid-template-columns:1fr;gap:28px;}
  .about-block{padding:44px var(--pad-x);}
}

@media (max-width:560px){
  .site-nav ul{gap:6px 18px;}
  .deep figure img,
  .figure-course img{width:100%;}
}