/* Tibroke — ruled-margin layout */

:root{
  --bg:#faf7f0;
  --bg-alt:#dde2e4;
  --bg-dark:#1f4a4a;
  --ink:#14120f;
  --ink-soft:#6c6659;
  --ink-inv:#faf7f0;
  --accent:#d2402f;
  --ochre:#a97f18;
  --rule:rgba(20,18,15,.14);
  --rule-inv:rgba(250,247,240,.28);
  --step:72px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'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(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

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

.margin-col{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  text-align:right;
}

.body-col{grid-column:4 / 10;}
.wide-col{grid-column:4 / 12;}
.media-col{grid-column:5 / 12;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;}

h1{
  font-size:clamp(38px,6vw,66px);
  line-height:1.1;
  margin:0 0 28px;
}

h2{
  font-size:clamp(24px,3vw,31px);
  line-height:1.25;
  margin:0 0 14px;
}

h3{
  font-size:19px;
  line-height:1.4;
  margin:36px 0 8px;
}

p{margin:0 0 22px;max-width:74ch;}

.lead{font-size:19px;line-height:1.75;}

.caption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
  letter-spacing:.02em;
}

.initial{
  font-family:var(--serif);
  font-size:58px;
  line-height:1;
  color:var(--accent);
  display:block;
}

.secnum{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--ochre);
  display:block;
}

.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:0 0 26px;
  height:0;
}

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

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

/* ---------- header ---------- */

.site-head{padding:26px 0 0;}

.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
  max-width:1220px;
  margin:0 auto;
  padding:0 32px 22px;
  border-bottom:1px solid var(--rule);
}

.brand{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
}

.brand span{color:var(--accent);}

.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  margin:0;
  padding:0;
  font-size:15px;
}

.site-nav li + li::before{
  content:"/";
  color:var(--ochre);
  padding:0 12px;
}

.site-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.site-nav a:hover{border-bottom-color:var(--accent);}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent);}

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

.hero{padding:var(--step) 0 0;}

.hero h1{
  grid-column:4 / 12;
  text-indent:0;
}

.hero .drop{
  grid-column:1 / 4;
  border-right:1px solid var(--accent);
  padding-right:20px;
  text-align:right;
}

.hero .drop .initial{
  font-size:clamp(76px,10vw,132px);
  color:var(--accent);
}

.hero-intro{grid-column:4 / 10;}

.guides{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:22px 0;
  margin-bottom:26px;
}

.guides p:last-child{margin-bottom:0;}

/* ---------- sections ---------- */

section{padding:var(--step) 0;}

section.tight{padding-top:calc(var(--step) / 2);}

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

.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
}

.dark h2,.dark h3{color:var(--ink-inv);}
.dark .caption{color:rgba(250,247,240,.72);}
.dark .margin-col{border-right-color:var(--rule-inv);}
.dark .rule{border-top-color:var(--rule-inv);}
.dark .initial{color:#e8b448;}
.dark .secnum{color:#e8b448;}
.dark a{color:#f0b0a4;}
.dark li::marker{color:#e8b448;}

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

ul.checklist,ol.steps{
  margin:0 0 26px;
  padding-left:22px;
}

ul.checklist li,ol.steps li{margin-bottom:10px;}
ul.checklist li::marker{color:var(--accent);}
ol.steps li::marker{color:var(--ochre);font-family:var(--serif);}

.list-wide{grid-column:4 / 12;}

dl.terms{margin:0 0 26px;}
dl.terms dt{font-family:var(--serif);font-size:18px;margin-top:18px;}
dl.terms dd{margin:4px 0 0;}

/* ---------- images ---------- */

figure{margin:0;}

.figure-main img,
.figure-detail img{
  display:block;
  width:100%;
  height:auto;
}

.figure-main{grid-column:5 / 12;}

.figure-main-caption{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  text-align:right;
}

.detail-media{grid-column:4 / 8;}
.detail-text{grid-column:8 / 13;}
.detail-media figcaption{margin-top:12px;}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:44px 0;
  margin-top:var(--step);
}

.foot-inner{
  max-width:1220px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:18px;
}

.foot-mark{
  grid-column:1 / 4;
  border-left:2px solid var(--accent);
  padding-left:16px;
  font-family:var(--serif);
  font-size:20px;
}

.foot-nav{grid-column:4 / 10;}

.foot-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  font-size:15px;
}

.foot-nav li + li::before{content:"·";color:var(--ochre);padding:0 10px;}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);}
.foot-nav a:hover{border-bottom-color:var(--accent);}

.foot-contact{grid-column:10 / 13;text-align:right;}
.foot-note{grid-column:4 / 13;}

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

@media (max-width:900px){
  :root{--step:44px;}

  .grid{padding:0 20px;column-gap:16px;}
  .head-inner{padding:0 20px 18px;}
  .foot-inner{padding:0 20px;}

  .margin-col,
  .hero .drop,
  .figure-main-caption{
    grid-column:1 / 13;
    border-right:0;
    border-left:1px solid var(--rule);
    padding-right:0;
    padding-left:14px;
    text-align:left;
    margin-bottom:12px;
  }

  .hero .drop{border-left-color:var(--accent);}

  .hero h1,
  .hero-intro,
  .body-col,
  .wide-col,
  .media-col,
  .list-wide,
  .figure-main,
  .detail-media,
  .detail-text{grid-column:1 / 13;}

  .detail-text{margin-top:24px;}

  .foot-mark,.foot-nav,.foot-contact,.foot-note{grid-column:1 / 13;text-align:left;}

  body{font-size:16px;}
  p{max-width:none;}
}