/* Brolstaduni — stone-courses */

:root{
  --bg:#f5f4f0;
  --bg-alt:#e2ded4;
  --deep:#14456b;
  --ink:#1c1e20;
  --ink-soft:#6a6d6e;
  --accent:#c2522f;
  --accent-2:#1d6b8f;
  --pad-x:52px;
  --pad-y:88px;
  --gap:24px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{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;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

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

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

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

.band{ background:var(--bg); }
.band-alt{ background:var(--bg-alt); }
.band-deep{ background:var(--deep); color:var(--bg); }

.band-deep h2,
.band-deep h3{ color:var(--bg); }
.band-deep a{ color:#f0c9b8; }
.band-deep .note{ color:#b9cbdb; }

/* stepped left indent: 0, 1, 2, 3 columns */
.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; }

.col > *:first-child{ margin-top:0; }
.col > *:last-child{ margin-bottom:0; }

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

h1{
  font-size:clamp(38px,6.2vw,76px);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-0.015em;
  margin:0;
}

h2{
  font-size:clamp(25px,3vw,34px);
  line-height:1.22;
  font-weight:400;
  margin:0 0 22px;
}

h3{
  font-style:italic;
  font-size:21px;
  font-weight:400;
  line-height:1.3;
  margin:34px 0 12px;
}

p{ margin:0 0 26px; }

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

.marker{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--accent-2);
  margin:0 0 14px;
}

.note{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
}

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

ul,ol{ margin:0 0 26px; padding-left:22px; }
li{ margin-bottom:10px; }
ul{ list-style:none; padding-left:0; }
ul li{ position:relative; padding-left:24px; }
ul li::before{
  content:"";
  position:absolute;
  left:0; top:0.62em;
  width:9px; height:9px;
  background:var(--accent);
}
.band-deep ul li::before{ background:#e08a63; }
ol{ padding-left:26px; }
ol li{ padding-left:6px; }

/* ---------- hero ---------- */

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

.hero-mid{
  background:var(--bg);
  padding:120px var(--pad-x) 56px;
  display:flex;
  align-items:flex-end;
}
.hero-mid h1{ max-width:15ch; }

.hero-low{
  background:var(--deep);
  color:var(--bg);
  padding:64px var(--pad-x);
}
.hero-low .col{ grid-column:1 / span 6; }
.hero-low .topics{ grid-column:8 / span 5; }
.hero-low a{ color:#f0c9b8; }
.hero-low .marker{ color:#8fb8d1; }

.topics ul li::before{ background:#e08a63; }

/* ---------- navigation ---------- */

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  align-items:baseline;
}
.nav .site{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:0.02em;
  margin-right:14px;
}
.nav a{
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--accent); }
.nav a[aria-current="page"]{ border-bottom-color:var(--accent); }

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

.figure-main{
  grid-column:4 / span 9;
}
.figure-main img{ width:100%; }
.figure-main figcaption{
  margin-top:12px;
  text-align:left;
  max-width:52ch;
}

.deep-figure{ grid-column:2 / span 4; }
.deep-figure img{ width:100%; }
.deep-figure figcaption{ margin-top:12px; }
.deep-text{ grid-column:7 / span 6; }

figure{ margin:0; }

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

.site-footer{
  background:var(--deep);
  color:var(--bg);
  padding:64px var(--pad-x) 52px;
  margin-top:0;
}
.footer-name{
  font-size:clamp(42px,9vw,104px);
  line-height:1;
  margin:0 0 48px;
  letter-spacing:-0.02em;
  font-weight:400;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap);
  row-gap:34px;
}
.footer-cols > div > span.rule{
  display:block;
  width:44px;
  height:3px;
  background:var(--accent);
  margin-bottom:14px;
}
.footer-cols h2{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.06em;
  margin:0 0 10px;
  color:#b9cbdb;
}
.footer-cols ul{ margin:0; }
.footer-cols ul li{ padding-left:0; margin-bottom:8px; }
.footer-cols ul li::before{ display:none; }
.footer-cols a{ color:#f0c9b8; font-size:16px; }
.footer-cols p{ margin:0; font-size:16px; line-height:1.55; color:#dfe6ec; }

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

@media (max-width:1000px){
  :root{ --pad-x:34px; --pad-y:64px; }
  .step-0 .col,.step-1 .col,.step-2 .col,.step-3 .col{ grid-column:1 / span 9; }
  .figure-main{ grid-column:2 / span 11; }
  .deep-figure{ grid-column:1 / span 5; }
  .deep-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:720px){
  :root{ --pad-x:22px; --pad-y:48px; --gap:16px; }
  body{ font-size:17px; }
  .grid{ grid-template-columns:1fr; }
  .step-0 .col,.step-1 .col,.step-2 .col,.step-3 .col,
  .figure-main,.deep-figure,.deep-text,
  .hero-low .col,.hero-low .topics{ grid-column:1; }
  .hero-low .topics{ margin-top:34px; }
  .deep-text{ margin-top:34px; }
  .hero-mid{ padding:72px var(--pad-x) 40px; }
  .hero-low{ padding:44px var(--pad-x); }
  .footer-cols{ grid-template-columns:1fr; }
  .lead{ font-size:18px; }
}