/* Gabrelmarve — stone-courses */

:root{
  --bg:#ffffff;
  --bg-alt:#eef0f3;
  --bg-contrast:#1b2ecc;
  --ink:#0b0c10;
  --ink-soft:#565c66;
  --ink-invert:#ffffff;
  --accent:#ff4e36;
  --accent2:#1b2ecc;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad-y:88px;
  --pad-x:52px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  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(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

.course{
  padding:var(--pad-y) var(--pad-x);
}
.course--alt{background:var(--bg-alt);}
.course--contrast{background:var(--bg-contrast);color:var(--ink-invert);}
.course--contrast a{color:#ffd9d3;}

/* stepped indents: 0,1,2,3 columns */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
}
.step-0 .grid{grid-template-columns:repeat(12,1fr);}
.step-1 .grid > *{grid-column-start:2;}
.step-2 .grid > *{grid-column-start:3;}
.step-3 .grid > *{grid-column-start:4;}
.step-0 .grid > *{grid-column-start:1;}

.text-block{grid-column-end:span 6;}
.wide-block{grid-column-end:span 9;}

h1,h2,h3{font-family:var(--serif);line-height:1.05;font-weight:400;letter-spacing:-.01em;}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);margin:0;}
h2{font-size:clamp(1.5rem,2.9vw,2.15rem);margin:0 0 .7em;}
h3{font-size:1.22rem;line-height:1.25;margin:2.2em 0 .5em;}

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

.lead{font-size:1.06rem;}

.caption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-top:14px;
  max-width:46ch;
}
.course--contrast .caption{color:#c9cffa;}

.num{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--accent2);
  display:block;
  margin-bottom:22px;
}
.course--contrast .num{color:#b9c1ff;}

/* ---------- HERO: three stacked courses ---------- */
.hero{display:block;}

.hero__nav{
  background:var(--bg-alt);
  padding:16px var(--pad-x);
}
.hero__mid{
  background:var(--bg);
  padding:96px var(--pad-x) 34px;
  display:flex;
  align-items:flex-end;
  min-height:44vh;
}
.hero__mid h1{max-width:16ch;}
.hero__low{
  background:var(--bg-alt);
  padding:56px var(--pad-x) 64px;
}
.hero__low .grid > .text-block{grid-column-start:1;}
.hero__kicker{
  font-size:13px;
  letter-spacing:.14em;
  color:var(--accent2);
  margin:0 0 18px;
}

.topics{
  grid-column:8 / span 5;
  list-style:none;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}
.topics li{padding:9px 0 9px 20px;position:relative;}
.topics li::before{
  content:"";
  position:absolute;
  left:0;top:1.05em;
  width:9px;height:2px;
  background:var(--accent);
}
.topics a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);}
.topics a:hover{color:var(--accent);}

/* ---------- NAV ---------- */
.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 30px;
}
.brand{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  margin-right:auto;
}
.brand:hover{color:var(--accent);}
.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  list-style:none;
  margin:0;padding:0;
  font-size:15px;
}
.nav ul a{color:var(--ink);text-decoration:none;padding:4px 0;display:inline-block;}
.nav ul a:hover,.nav ul a[aria-current="page"]{
  color:var(--accent);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* ---------- MAIN IMAGE: 9 cols, right aligned ---------- */
.figure-main{
  grid-column:4 / span 9;
  margin:0;
}
.figure-main img{width:100%;aspect-ratio:3/2;object-fit:cover;}

/* ---------- CONTRAST SECTION with detail image ---------- */
.detail-row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
}
.figure-detail{
  grid-column:1 / span 4;
  margin:0;
}
.figure-detail img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.detail-text{grid-column:6 / span 6;}

/* ---------- LISTS ---------- */
.checklist{
  list-style:none;
  margin:1.1em 0 0;
  padding:0;
}
.checklist li{
  position:relative;
  padding:11px 0 11px 26px;
  border-top:1px solid rgba(11,12,16,.12);
}
.checklist li:first-child{border-top:none;}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:1.42em;
  width:12px;height:2px;background:var(--accent);
}
.course--contrast .checklist li{border-top-color:rgba(255,255,255,.25);}

ol.steps{
  margin:1.1em 0 0;
  padding-left:0;
  list-style:none;
  counter-reset:s;
}
ol.steps li{
  counter-increment:s;
  position:relative;
  padding:12px 0 12px 42px;
  border-top:1px solid rgba(11,12,16,.12);
}
ol.steps li:first-child{border-top:none;}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:12px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--accent2);
}

dl.terms{margin:1.1em 0 0;}
dl.terms dt{font-family:var(--serif);font-size:1.05rem;margin-top:1.35em;}
dl.terms dd{margin:.25em 0 0;color:var(--ink-soft);}

/* ---------- ABOUT: each block one column right ---------- */
.about-block{padding:66px var(--pad-x);}
.about-block .grid > *{grid-column-end:span 6;}
.about-0 .grid > *{grid-column-start:1;}
.about-1 .grid > *{grid-column-start:2;}
.about-2 .grid > *{grid-column-start:3;}
.about-3 .grid > *{grid-column-start:4;}
.about-4 .grid > *{grid-column-start:5;}

/* ---------- LEGAL ---------- */
.legal{padding:var(--pad-y) var(--pad-x);}
.legal .grid > *{grid-column:2 / span 8;}
.legal h2{margin-top:2em;}
.legal h2:first-of-type{margin-top:1.2em;}

.page-head{
  background:var(--bg-alt);
  padding:70px var(--pad-x) 44px;
}
.page-head .grid > *{grid-column:1 / span 8;}
.page-head p{color:var(--ink-soft);margin-top:18px;max-width:60ch;}

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--bg-contrast);
  color:var(--ink-invert);
  padding:64px var(--pad-x) 56px;
  margin-top:0;
}
.footer-name{
  font-family:var(--serif);
  font-size:clamp(2.6rem,10vw,7rem);
  line-height:.95;
  margin:0 0 48px;
  letter-spacing:-.02em;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px var(--gap);
}
.footer-cols h2{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.14em;
  line-height:1.4;
  margin:0 0 14px;
  padding-top:14px;
  border-top:2px solid var(--accent);
  display:block;
}
.footer-cols ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2;}
.footer-cols a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);}
.footer-cols a:hover{border-bottom-color:var(--accent);color:#ffd9d3;}
.footer-cols p{font-size:14px;line-height:1.7;color:#c9cffa;}
.footer-note{
  margin-top:44px;
  font-size:13px;
  color:#b9c1ff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  :root{--pad-y:64px;--pad-x:36px;}
  .figure-main{grid-column:3 / span 10;}
  .topics{grid-column:1 / span 12;}
  .detail-text{grid-column:6 / span 7;}
  .figure-detail{grid-column:1 / span 5;}
  .legal .grid > *{grid-column:1 / span 10;}
}

@media (max-width:760px){
  :root{--pad-y:48px;--pad-x:22px;--gap:16px;}
  body{font-size:16px;line-height:1.72;}
  .hero__mid{min-height:auto;padding:56px var(--pad-x) 28px;}
  .hero__low{padding:40px var(--pad-x) 46px;}
  .grid{display:block;}
  .grid > *{margin-bottom:0;}
  .text-block,.wide-block,.figure-main,.legal .grid > *,.page-head .grid > *{grid-column:auto;}
  .step-1 .grid > *,.step-2 .grid > *,.step-3 .grid > *,
  .about-1 .grid > *,.about-2 .grid > *,.about-3 .grid > *,.about-4 .grid > *{grid-column-start:auto;}
  .about-block{padding:44px var(--pad-x);}
  .topics{margin-top:28px;}
  .detail-row{display:block;}
  .figure-detail{margin-bottom:28px;max-width:340px;}
  .footer-cols{grid-template-columns:1fr;gap:26px;}
  .site-footer{padding:48px var(--pad-x) 44px;}
  .footer-name{margin-bottom:34px;}
  .nav ul{gap:6px 18px;font-size:14px;}
  .brand{width:100%;margin-right:0;margin-bottom:6px;}
}