/* Brordobezo — specimen-sheet */

:root{
  --bg:#fbf9f5;
  --bg-alt:#e4e8e1;
  --bg-dark:#223129;
  --ink:#22201c;
  --ink-2:#797468;
  --ink-inv:#fbf9f5;
  --accent:#54684e;
  --accent-2:#a87c48;
  --rule:#d6d2c7;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:26px;
}

*,*::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.72;
  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;}

/* ---------- layout shell ---------- */

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 0;
}

.panel{
  background:var(--bg);
  border:1px solid var(--accent);
  padding:44px 40px 56px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:28px;
}

.c7{grid-column:1 / span 7;}
.c8{grid-column:1 / span 8;}
.c5{grid-column:1 / span 5;}
.side4{grid-column:9 / span 4;}
.side5{grid-column:8 / span 5;}
.full{grid-column:1 / span 12;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--ink);}

h1{
  font-size:2.55rem;
  line-height:1.18;
  margin:0 0 10px;
  letter-spacing:-.01em;
}

h2{
  font-size:1.62rem;
  line-height:1.3;
  margin:0 0 14px;
}

h3{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  line-height:1.4;
  margin:26px 0 8px;
}

p{margin:0 0 18px;}
p:last-child{margin-bottom:0;}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 14px;
}

.num{color:var(--accent-2);font-family:var(--sans);font-size:12px;letter-spacing:.18em;}

.lead{font-size:1.08rem;color:var(--ink);}

.caption{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-2);
  margin:10px 0 0;
}

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

.masthead{
  max-width:1180px;
  margin:0 auto;
  padding:22px 20px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 24px;
}

.brand{
  font-family:var(--serif);
  font-size:1.28rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.02em;
}
.brand:hover{text-decoration:underline;}

.mainnav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
}

.mainnav a{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.mainnav a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.mainnav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent-2);}

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

.hero{padding-bottom:8px;}

.hero .intro{grid-column:1 / span 8;}
.hero .specbox{grid-column:9 / span 4;}

.specbox{
  border:1px solid var(--rule);
  padding:16px 18px;
}
.specbox dl{margin:0;}
.specbox dt{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:2px;
}
.specbox dd{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
}
.specbox dd:last-child{margin-bottom:0;}

/* ---------- rhythm + separators ---------- */

.band{margin-top:88px;}

.rule{
  position:relative;
  border:0;
  border-top:1px solid var(--rule);
  margin:88px 0 0;
  height:1px;
}
.rule::before,.rule::after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:11px;
  background:var(--accent-2);
}
.rule::before{left:0;}
.rule::after{right:0;}

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

.figmain{margin:0;grid-column:1 / span 5;}
.figmain img{border:1px solid var(--rule);}
.fignote{grid-column:7 / span 4;align-self:end;}

/* ---------- alternating band ---------- */

.tint{
  background:var(--bg-alt);
  margin:88px -40px 0;
  padding:52px 40px;
}

/* ---------- contrast section ---------- */

.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
  margin:88px -40px 0;
  padding:56px 40px 60px;
}
.dark h2,.dark h3{color:var(--ink-inv);}
.dark .label{color:#b9c2b3;}
.dark .caption{color:#b9c2b3;}
.dark a{color:#cbd6c3;}
.dark li::marker{color:var(--accent-2);}
.dark .figdetail{grid-column:8 / span 5;margin:0;}
.dark .darktext{grid-column:1 / span 6;}
.dark .figdetail img{border:1px solid #3c4d43;}

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

ul.check,ol.steps{
  padding-left:20px;
  margin:0 0 18px;
}
ul.check{list-style:square;}
ul.check li,ol.steps li{margin-bottom:9px;padding-left:4px;}
ul.check li::marker{color:var(--accent);}
ol.steps li::marker{color:var(--accent-2);font-size:14px;}

.sidenote{
  border:1px solid var(--rule);
  padding:14px 16px;
  font-size:14px;
  line-height:1.6;
}
.sidenote h3{
  font-size:1rem;
  margin:0 0 6px;
}
.sidenote p{margin-bottom:10px;}
.sidenote ul{margin:0;padding-left:18px;}
.sidenote li{margin-bottom:6px;}

.stack{display:flex;flex-direction:column;gap:20px;}

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

.sitefoot{
  max-width:1180px;
  margin:64px auto 0;
  padding:0 20px 48px;
}
.footinner{padding-top:26px;}
.footrow{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
}
.footname{font-family:var(--serif);font-size:1.15rem;}
.footline{border:0;border-top:1px solid var(--rule);margin:16px 0 18px;}
.footnav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0 0 12px;
  padding:0;
}
.footnav a{font-size:13px;color:var(--ink-2);text-decoration:none;}
.footnav a:hover{color:var(--accent);text-decoration:underline;}
.footnote{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch;}

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

@media (max-width:960px){
  .panel{padding:34px 26px 44px;}
  h1{font-size:2.15rem;}
  .hero .intro,.hero .specbox,.c7,.c8,.c5,.side4,.side5,
  .figmain,.fignote,.dark .figdetail,.dark .darktext{grid-column:1 / span 12;}
  .figmain img,.dark .figdetail img{width:100%;}
  .tint,.dark{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .shell{padding:18px 14px 0;}
  .masthead{padding:18px 14px 0;}
  .panel{padding:24px 18px 34px;}
  h1{font-size:1.82rem;}
  h2{font-size:1.38rem;}
  .band,.rule,.tint,.dark{margin-top:52px;}
  .tint{padding:34px 18px;}
  .dark{padding:38px 18px 42px;}
  .tint,.dark{margin-left:-18px;margin-right:-18px;}
  .grid{row-gap:22px;}
  .sitefoot{margin-top:44px;padding-bottom:34px;}
  .footrow{flex-direction:column;align-items:flex-start;}
  .mainnav ul{gap:4px 16px;}
}