/* Tandemilde — book-spine */

:root{
  --bg:#f1e9dc;
  --bg-alt:#e5d8c4;
  --bg-dark:#3a2a1d;
  --ink:#2a2018;
  --ink-soft:#7a6a57;
  --ink-inv:#f1e9dc;
  --accent:#9c5a2c;
  --accent2:#59705b;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --rhythm:76px;
}

*,*::before,*::after{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.7;
  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:2px solid var(--accent);outline-offset:3px}

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

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

.col-main{grid-column:2 / span 6}
.col-lead{grid-column:2 / span 8}
.col-wide{grid-column:2 / span 10}

/* ---------- spine ---------- */

.spine{
  grid-column:1;
  grid-row:1 / -1;
  position:relative;
  min-height:100%;
}
.spine::before{
  content:"";
  position:absolute;
  left:6px;top:0;bottom:0;width:1px;
  background:var(--ink-soft);
  opacity:.45;
}
.spine::after{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;width:13px;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--accent) 0, var(--accent) 7px,
    transparent 7px, transparent 22px);
  opacity:.8;
}

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

.site-head{
  border-bottom:1px solid rgba(122,106,87,.35);
  padding:20px 0 16px;
}
.site-head .sheet{align-items:baseline;row-gap:10px}

.wordmark{
  grid-column:2 / span 4;
  margin:0;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:20px;
  line-height:1;
}
.wordmark a{color:var(--ink);text-decoration:none}

.site-nav{grid-column:6 / span 7;justify-self:end}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 20px;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.02em;
}
.site-nav a{color:var(--ink);text-decoration:none;padding-bottom:2px;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)}

/* ---------- section rhythm ---------- */

.band{padding:var(--rhythm) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-inv)}
.band--dark .runhead,
.band--dark .caption{color:#c9b79c}
.band--dark .runhead::after{background:rgba(241,233,220,.3)}
.band--dark a{color:#e0a877}

.runhead{
  grid-column:1 / span 11;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent2);
  margin:0 0 26px;
  padding-left:0;
}
.runhead .num{color:var(--accent);margin-right:.9em}
.runhead::after{
  content:"";
  display:block;
  height:1px;
  background:rgba(122,106,87,.4);
  margin-top:9px;
}

h1,h2,h3{font-family:var(--sans);font-weight:800}

h2{
  grid-column:2 / span 8;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 22px;
}
h3{
  grid-column:2 / span 6;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:34px 0 10px;
}
p{margin:0 0 20px}
.col-main > *:last-child,
.prose > *:last-child{margin-bottom:0}

.prose{grid-column:2 / span 6}
.prose--lead{grid-column:2 / span 8;font-size:21px;line-height:1.62}

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

.hero{padding:70px 0 var(--rhythm)}

.hero h1{
  grid-column:2 / span 9;
  font-size:clamp(38px,6.2vw,68px);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 24px;
  max-width:16ch;
}
.hero .rule{
  grid-column:2 / span 6;
  border:0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  height:4px;
  margin:0 0 24px;
  opacity:.55;
}
.hero-intro{
  grid-column:2 / span 6;
  font-size:20px;
  line-height:1.65;
}
.hero-meta{
  grid-column:9 / span 4;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent2);
  align-self:end;
}

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

.fig-main{
  grid-column:7 / span 6;
  margin:0;
}
.fig-main img{width:100%;aspect-ratio:3/2;object-fit:cover}

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

.fig-detail{
  grid-column:2 / span 4;
  margin:0;
}
.fig-detail img{width:100%;aspect-ratio:4/5;object-fit:cover}
.dark-text{grid-column:7 / span 6}

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

ul.checklist,ol.steps{
  grid-column:2 / span 6;
  margin:0 0 20px;
  padding:0 0 0 1.2em;
}
.prose ul.checklist,.prose ol.steps{grid-column:auto}
ul.checklist{list-style:none;padding-left:0}
ul.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:11px;
}
ul.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:13px;height:2px;
  background:var(--accent);
}
ol.steps li{margin-bottom:11px;padding-left:6px}
ol.steps li::marker{font-family:var(--sans);font-weight:800;color:var(--accent2);font-size:15px}

dl.terms{grid-column:2 / span 6;margin:0}
.prose dl.terms{grid-column:auto}
dl.terms dt{
  font-family:var(--sans);
  font-weight:800;
  font-size:15px;
  letter-spacing:-.01em;
  margin-top:20px;
}
dl.terms dd{margin:4px 0 0}

/* ---------- separator ---------- */

.tri{
  grid-column:2 / span 10;
  display:flex;
  justify-content:center;
  gap:12px;
  margin:44px 0;
}
.tri span{width:22px;height:2px;background:var(--accent);opacity:.75}

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

.dropcap::first-letter{
  float:left;
  font-family:var(--sans);
  font-weight:800;
  color:var(--accent);
  font-size:66px;
  line-height:.82;
  padding:4px 12px 0 0;
}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid rgba(122,106,87,.4);
  padding:52px 0 46px;
  text-align:center;
}
.site-foot .inner{
  grid-column:2 / span 10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.foot-name{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:19px;
  margin:0;
}
.foot-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  font-family:var(--sans);
  font-size:14px;
}
.foot-nav li + li{border-left:1px solid rgba(122,106,87,.55);margin-left:14px;padding-left:14px}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--accent);text-decoration:underline}
.foot-mail{margin:0;font-family:var(--sans);font-size:15px}
.foot-note{
  margin:0;
  font-size:13px;
  font-family:var(--sans);
  color:var(--ink-soft);
  max-width:56ch;
  line-height:1.6;
}

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

@media (max-width:900px){
  .fig-main{grid-column:2 / span 11;margin-top:34px}
  .dark-text{grid-column:2 / span 11}
  .fig-detail{grid-column:2 / span 7}
  h2,.prose,.prose--lead,.hero h1,.hero .rule,.hero-intro,
  ul.checklist,ol.steps,dl.terms,h3{grid-column:2 / span 11}
  .hero-meta{grid-column:2 / span 11;margin-bottom:26px;align-self:auto}
  .site-nav{grid-column:2 / span 11;justify-self:start}
}

@media (max-width:640px){
  :root{--rhythm:46px}
  body{font-size:17px}
  .sheet{padding:0 16px;column-gap:12px}
  .spine::after{width:9px;background-image:repeating-linear-gradient(to bottom,var(--accent) 0,var(--accent) 6px,transparent 6px,transparent 18px)}
  .spine::before{left:4px}
  .sheet > *{grid-column:2 / span 11 !important}
  .spine{grid-column:1 !important}
  .runhead{grid-column:1 / span 12 !important;margin-bottom:20px}
  .site-foot .inner{grid-column:1 / span 12 !important}
  .hero{padding:44px 0 var(--rhythm)}
  h2{font-size:25px}
  .prose--lead,.hero-intro{font-size:19px}
  .fig-main img{aspect-ratio:3/2}
  .foot-nav ul{flex-direction:column;align-items:center;gap:8px}
  .foot-nav li + li{border-left:0;margin-left:0;padding-left:0}
  .tri{margin:32px 0}
}