/* Gedatre — ruled-margin */

:root{
  --bg:#e8e6e1;
  --bg-alt:#d3d0c9;
  --bg-dark:#2a2a28;
  --ink:#17171a;
  --ink-2:#6a6862;
  --ink-inv:#e8e6e1;
  --accent:#8c4a2f;
  --accent-2:#55707a;
  --rule:rgba(23,23,26,.16);
  --rule-inv:rgba(232,230,225,.22);
  --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;
}

p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

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

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

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

.ruled{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
  display:grid;
  grid-template-columns:3fr 9fr;
}

.ruled::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:calc(28px + (100% - 56px)/4);
  width:1px;
  background:var(--accent);
  opacity:.55;
}

.field{
  grid-column:1;
  padding-right:26px;
  text-align:right;
}

.body{
  grid-column:2;
  padding-left:34px;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  column-gap:24px;
  align-content:start;
}

.col-text{grid-column:1 / 7;max-width:74ch}
.col-wide{grid-column:1 / 9}
.col-full{grid-column:1 / 10}
.col-img{grid-column:3 / 10}

/* margin marks */
.mark{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  line-height:1.6;
  margin:.45em 0 0;
}

.initial{
  font-family:var(--serif);
  color:var(--accent);
  line-height:.82;
  font-size:76px;
  margin:0;
}

.caption{
  font-size:12px;
  line-height:1.65;
  color:var(--ink-2);
  margin:.6em 0 0;
}

/* ---------- guides ---------- */

.guide{
  border:0;
  height:1px;
  background:var(--rule);
  margin:0;
  grid-column:1 / 7;
}
.guide--wide{grid-column:1 / 10}

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

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

h1{
  font-size:58px;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 28px;
  grid-column:1 / 9;
}

h2{
  font-size:29px;
  line-height:1.25;
  margin:0 0 14px;
  grid-column:1 / 8;
}

h3{
  font-size:19px;
  line-height:1.35;
  margin:0 0 10px;
  grid-column:1 / 8;
}

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

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

.site-header{padding:26px 0 22px;border-bottom:1px solid var(--rule)}
.site-header .body{align-items:baseline}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
}
.brand:hover{color:var(--accent)}

.site-nav{grid-column:4 / 10;justify-self:end}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0}
.site-nav li+li::before{content:"/";color:var(--accent-2);padding:0 12px}
.site-nav a{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

.site-header .field{padding-right:0;text-align:left}

/* ---------- bands ---------- */

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-inv)}
.band--dark .ruled::before{background:var(--accent);opacity:.75}
.band--dark .caption{color:#a8a49b}
.band--dark .mark{color:#8fa9b1}
.band--dark .guide{background:var(--rule-inv)}
.band--dark a{color:#d99a7c}
.band--tight{padding:calc(var(--step)/2) 0}

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

.hero{padding:calc(var(--step)*1.05) 0 var(--step)}
.hero h1{grid-column:1 / 9;font-size:64px}
.hero .initial{font-size:112px;margin-top:2px}
.hero-guides{grid-column:1 / 7;margin:6px 0 0}
.hero-guides hr{border:0;height:1px;background:var(--rule);margin:0}
.hero-guides p{padding:22px 0}
.hero-guides p:last-of-type{margin-bottom:0}

.figure-main{margin:0}
.figure-main img{width:100%}

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

ul.checklist,ol.steps{
  grid-column:1 / 9;
  margin:6px 0 0;
  padding:0;
  list-style:none;
}
ul.checklist li,ol.steps li{
  position:relative;
  padding:0 0 12px 30px;
  line-height:1.7;
}
ul.checklist li::before{
  content:"";
  position:absolute;
  left:2px;top:.72em;
  width:9px;height:9px;
  background:var(--accent);
}
ol.steps{counter-reset:s}
ol.steps li{counter-increment:s}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent-2);
}
dl.terms{grid-column:1 / 9;margin:0}
dl.terms dt{font-family:var(--serif);font-size:18px;margin:18px 0 4px}
dl.terms dd{margin:0 0 4px;color:var(--ink)}

/* ---------- detail figure in dark band ---------- */

.detail-grid{align-items:start;row-gap:28px}
.detail-figure{grid-column:1 / 5;margin:0}
.detail-figure img{width:100%}
.detail-text{grid-column:5 / 10}

/* ---------- contact ---------- */

.contact-line{font-family:var(--serif);font-size:22px;margin:0 0 6px}

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

.site-footer{background:var(--bg-alt);border-top:1px solid var(--rule);padding:calc(var(--step)/1.5) 0}
.site-footer .body{row-gap:16px}
.footer-name{grid-column:1 / 5;font-family:var(--serif);font-size:20px;margin:0 0 8px}
.footer-mail{grid-column:6 / 10;justify-self:end;text-align:right;font-size:14px}
.footer-nav{grid-column:1 / 10;margin-top:6px}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;gap:4px 0}
.footer-nav li+li::before{content:"·";color:var(--accent);padding:0 10px}
.footer-nav a{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.footer-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.footer-note{grid-column:1 / 8;font-size:12px;color:var(--ink-2);margin-top:10px}

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

@media (max-width:1000px){
  h1,.hero h1{font-size:46px}
  h2{font-size:26px}
  .col-text{grid-column:1 / 8}
  .detail-figure{grid-column:1 / 6}
  .detail-text{grid-column:6 / 10}
  .guide{grid-column:1 / 8}
}

@media (max-width:760px){
  :root{--step:44px}
  body{font-size:16px;line-height:1.75}
  .ruled{grid-template-columns:1fr;padding:0 20px}
  .ruled::before{left:20px;opacity:.4}
  .field{grid-column:1;text-align:left;padding-right:0;padding-left:18px}
  .body{grid-column:1;grid-template-columns:1fr;padding-left:18px;column-gap:0}
  .col-text,.col-wide,.col-full,.col-img,h1,h2,h3,.guide,.guide--wide,
  ul.checklist,ol.steps,dl.terms,.hero-guides,
  .detail-figure,.detail-text,
  .brand,.site-nav,.footer-name,.footer-mail,.footer-nav,.footer-note{grid-column:1}
  h1,.hero h1{font-size:34px;margin-bottom:20px}
  h2{font-size:23px}
  .initial,.hero .initial{font-size:52px;margin-bottom:6px}
  .mark{margin-top:0}
  .site-nav{justify-self:start;margin-top:12px}
  .footer-mail{justify-self:start;text-align:left}
  .detail-figure{margin-bottom:8px}
  .field:empty{display:none}
}