/* Lerdado — specimen sheet */

:root{
  --paper:#f3eeea;
  --paper-alt:#e6ddd6;
  --dark:#3b2029;
  --ink:#241b1d;
  --ink-soft:#7b6a68;
  --wine:#8b2f45;
  --copper:#a8642e;
  --rule:rgba(36,27,29,.22);
  --gap:88px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  padding:40px 40px 0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

/* ---------- sheet ---------- */

.sheet{
  max-width:1180px;
  margin:0 auto;
  border:1px solid var(--wine);
  background:var(--paper);
  padding:0 clamp(20px,3.4vw,48px) var(--gap);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.col-main{grid-column:1 / span 7;}
.col-side{grid-column:9 / span 4;}
.col-wide{grid-column:1 / span 9;}

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

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.3;
  color:var(--ink);
}

h1{
  font-size:clamp(30px,4.1vw,50px);
  margin:0;
  letter-spacing:-.005em;
}

h2{
  font-size:clamp(23px,2.5vw,30px);
  margin:0 0 18px;
}

h3{
  font-size:20px;
  margin:36px 0 10px;
}

p{margin:0 0 26px;}

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

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

.lead{font-size:20px;}

.caption{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}

.num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--copper);
  display:block;
  margin-bottom:10px;
}

/* ---------- top bar ---------- */

.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding:22px 0 20px;
  border-bottom:1px solid var(--rule);
}

.wordmark{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}

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

.topbar nav a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}

.topbar nav a:hover,
.topbar nav a[aria-current="page"]{
  border-bottom-color:var(--wine);
  color:var(--wine);
}

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

.hero{padding:clamp(44px,6vw,76px) 0 0;}

.hero .col-h1{grid-column:1 / span 8;}
.hero .col-note{grid-column:9 / span 4;}

.hero-kicker{
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 18px;
}

.notecard{
  border:1px solid var(--rule);
  padding:18px 20px;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
}

.notecard dl{margin:0;}
.notecard dt{
  color:var(--copper);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.notecard dd{
  margin:2px 0 12px;
  color:var(--ink);
}
.notecard dd:last-child{margin-bottom:0;}

.hero-intro{margin-top:46px;}
.hero-intro .col-main{grid-column:1 / span 7;}

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

.fig-main{
  margin:var(--gap) 0 0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  align-items:end;
}

.fig-main img{
  grid-column:1 / span 5;
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--rule);
}

.fig-main figcaption{
  grid-column:7 / span 3;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
  padding-bottom:6px;
}

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

.sep{
  border:0;
  margin:var(--gap) 0;
  height:9px;
  position:relative;
}
.sep::before{
  content:"";
  position:absolute;
  left:0;right:0;top:4px;
  border-top:1px solid var(--rule);
}
.sep::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:9px;
  border-left:1px solid var(--copper);
  border-right:1px solid var(--copper);
}

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

section{margin-top:var(--gap);}
section:first-of-type{margin-top:0;}

.band{
  background:var(--paper-alt);
  margin-left:calc(-1 * clamp(20px,3.4vw,48px));
  margin-right:calc(-1 * clamp(20px,3.4vw,48px));
  padding:clamp(40px,5vw,64px) clamp(20px,3.4vw,48px);
}

/* contrast section */

.dark{
  background:var(--dark);
  color:var(--paper);
  margin-left:calc(-1 * clamp(20px,3.4vw,48px));
  margin-right:calc(-1 * clamp(20px,3.4vw,48px));
  padding:clamp(48px,6vw,80px) clamp(20px,3.4vw,48px);
}
.dark h2,.dark h3{color:var(--paper);}
.dark p{color:#e3d8d4;}
.dark .num{color:#d59a63;}
.dark a{color:#e9b9a0;}
.dark li::marker{color:#d59a63;}
.dark .caption{color:#b7a09e;}

.dark-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:32px;
  align-items:start;
}
.dark-grid figure{
  grid-column:1 / span 4;
  margin:0;
}
.dark-grid figure img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(243,238,234,.3);
  margin-bottom:12px;
}
.dark-grid .dark-text{grid-column:6 / span 7;}

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

ul.checklist,ol.steps{
  padding-left:0;
  margin:0 0 26px;
  list-style:none;
}
ul.checklist li,ol.steps li{
  padding-left:26px;
  position:relative;
  margin-bottom:14px;
}
ul.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.85em;
  width:11px;height:1px;
  background:var(--wine);
}
ol.steps{counter-reset:s;}
ol.steps li{counter-increment:s;padding-left:38px;}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  color:var(--copper);
  letter-spacing:.08em;
}
.dark ul.checklist li::before{background:#d59a63;}

/* ---------- pulled table ---------- */

.pull{
  grid-column:9 / span 4;
  border:1px solid var(--rule);
  padding:18px 20px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
  align-self:start;
}
.pull h3{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 10px;
}
.pull ul{margin:0;padding-left:18px;}
.pull li{margin-bottom:7px;}
.pull li::marker{color:var(--wine);}
.pull p:last-child{margin-bottom:0;}

.spec{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  margin:0 0 26px;
}
.spec th,.spec td{
  text-align:left;
  padding:11px 12px 11px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  line-height:1.6;
}
.spec th{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  width:36%;
}
.spec caption{
  text-align:left;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
  padding-bottom:10px;
}

/* ---------- about side stack ---------- */

.side-stack{
  grid-column:9 / span 4;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-self:start;
}

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

.site-footer{
  max-width:1180px;
  margin:56px auto 0;
  padding:26px 0 48px;
}

.foot-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  align-items:baseline;
}
.foot-top .name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.foot-line{
  border:0;
  border-top:1px solid var(--rule);
  margin:18px 0;
}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px 28px;
  align-items:baseline;
}
.foot-bottom nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0;padding:0;
  font-size:15px;
}
.foot-bottom nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.foot-bottom nav a:hover{border-bottom-color:var(--wine);color:var(--wine);}
.foot-note{
  font-size:14px;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
}

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

@media (max-width:900px){
  :root{--gap:52px;}
  body{padding:20px 16px 0;font-size:17px;line-height:1.8;}
  .sheet{padding:0 18px var(--gap);}
  .grid{display:block;}
  .hero-intro .col-main,.col-main,.col-wide{grid-column:auto;}
  .hero .col-note{margin-top:28px;}
  .notecard,.pull{margin-top:26px;}
  .side-stack{margin-top:28px;}
  .fig-main{display:block;}
  .fig-main img{width:100%;max-width:520px;}
  .fig-main figcaption{margin-top:12px;}
  .dark-grid{display:block;}
  .dark-grid figure{margin-bottom:26px;}
  .dark-grid figure img{max-width:460px;}
  .band,.dark{margin-left:-18px;margin-right:-18px;}
  .site-footer{padding-bottom:36px;}
  .foot-top,.foot-bottom{display:block;}
  .foot-top .email{display:block;margin-top:6px;}
  .foot-bottom nav{margin-bottom:14px;}
  .spec th{width:auto;}
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;}
  .spec th{padding-bottom:0;border-bottom:0;}
}