/* Flanorve — specimen sheet */

:root{
  --paper:#f1f2f0;
  --paper-alt:#e3e5e2;
  --dark:#141614;
  --ink:#171917;
  --ink-soft:#6a6e6a;
  --accent:#2a6b3c;
  --accent-2:#8a6a20;
  --rule:#c6c9c4;
  --rule-dark:#3a3d39;
  --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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

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

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:40px 40px 0;
}

.sheet{
  border:1px solid rgba(42,107,60,.5);
  background:var(--paper);
}

.band{
  padding:44px;
}

.band--alt{background:var(--paper-alt);}

.band--dark{
  background:var(--dark);
  color:var(--paper);
}

.band--dark h2,
.band--dark h3{color:var(--paper);}

.band--dark p{color:#d6d9d5;}

.band--dark .label{color:#b79a52;}

.band--dark a{color:#8fc39d;}

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

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

.c-main{grid-column:1 / span 7;}
.c-side{grid-column:9 / span 4;}
.c-wide{grid-column:1 / span 11;}
.c-img{grid-column:1 / span 5;}
.c-cap{grid-column:7 / span 4;align-self:end;}
.c-dark-img{grid-column:8 / span 5;}
.c-dark-txt{grid-column:1 / span 6;}
.c-hero-h{grid-column:1 / span 8;}
.c-hero-t{grid-column:9 / span 4;}

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

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

h1{
  font-size:clamp(30px,4.3vw,48px);
  line-height:1.16;
  letter-spacing:-.005em;
  max-width:15ch;
}

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

h3{
  font-style:italic;
  font-size:21px;
  line-height:1.32;
  margin:34px 0 10px;
}

p{margin:0 0 17px;}

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

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

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

.label--plain{color:var(--ink-soft);}

.num{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.17em;
  color:var(--accent-2);
  display:block;
  margin-bottom:12px;
}

.muted{color:var(--ink-soft);}

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;
}

.band--dark a:focus-visible{outline-color:#8fc39d;}

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

ul.check,
ul.plain{
  list-style:none;
  margin:0 0 17px;
  padding:0;
}

ul.check li,
ul.plain li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}

ul.check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--accent);
}

ul.plain li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:5px;
  height:5px;
  border:1px solid var(--accent-2);
}

ol.steps{
  margin:0 0 17px;
  padding-left:20px;
}

ol.steps li{margin-bottom:9px;}

/* ---------- side tables ---------- */

.spec{
  border:1px solid var(--rule);
  background:var(--paper);
  padding:16px 18px 18px;
  font-size:14px;
  line-height:1.56;
}

.band--alt .spec{background:var(--paper);}

.spec + .spec{margin-top:20px;}

.spec h3,
.spec .spec-t{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-style:normal;
  margin:0 0 12px;
  display:block;
}

.spec dl{margin:0;}

.spec dt{
  color:var(--ink-soft);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.spec dd{
  margin:1px 0 11px;
  color:var(--ink);
}

.spec dd:last-child{margin-bottom:0;}

.spec p{font-size:14px;margin-bottom:11px;}

.spec ul{margin:0;padding-left:16px;}

.spec ul li{margin-bottom:6px;}

/* ---------- rules with ticks ---------- */

.rule{
  position:relative;
  height:1px;
  background:var(--rule);
  margin:0;
}

.rule::before,
.rule::after{
  content:"";
  position:absolute;
  top:-4px;
  width:1px;
  height:9px;
  background:var(--accent-2);
}

.rule::before{left:0;}
.rule::after{right:0;}

.rule--dark{background:var(--rule-dark);}

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

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

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

.brand span{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}

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

.nav a{
  font-size:13.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}

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

.nav a[aria-current="page"]{color:var(--accent);}

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

.hero{padding:52px 44px 44px;}

.hero .c-hero-t .spec{background:transparent;}

.figure{
  margin:0;
}

.figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule);
}

.band--dark .figure img{border-color:var(--rule-dark);}

.figure figcaption{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-top:10px;
}

.band--dark .figure figcaption{color:#9ea29c;}

.cap-block{
  border-left:1px solid var(--accent-2);
  padding-left:16px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
}

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

.contact-line{
  font-family:var(--serif);
  font-size:20px;
}

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

.footwrap{
  max-width:1200px;
  margin:0 auto;
  padding:56px 40px 52px;
}

.foot-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  margin-bottom:18px;
}

.foot-name{
  font-family:var(--serif);
  font-size:21px;
}

.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px 40px;
  padding-top:18px;
}

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

.foot-nav a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid transparent;
}

.foot-nav a:hover{border-bottom-color:var(--accent);}

.foot-note{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
}

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

@media (max-width:1000px){
  .g{gap:22px;}
  .c-main{grid-column:1 / span 8;}
  .c-side{grid-column:9 / span 4;}
  .c-img{grid-column:1 / span 6;}
  .c-cap{grid-column:7 / span 5;}
  .c-dark-img{grid-column:7 / span 6;}
  .c-dark-txt{grid-column:1 / span 6;}
  .c-hero-h{grid-column:1 / span 7;}
  .c-hero-t{grid-column:8 / span 5;}
}

@media (max-width:760px){
  body{font-size:16.5px;}
  .wrap{padding:18px 16px 0;}
  .band,
  .hero{padding:26px 20px;}
  .masthead{padding:16px 20px;}
  .g{grid-template-columns:1fr;gap:20px;}
  .c-main,.c-side,.c-wide,.c-img,.c-cap,
  .c-dark-img,.c-dark-txt,.c-hero-h,.c-hero-t{grid-column:1 / -1;}
  h1{max-width:none;}
  .c-cap{align-self:start;}
  .footwrap{padding:34px 16px 40px;}
  .foot-top,
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .nav ul{gap:6px 16px;}
  .nav a{font-size:12.5px;}
}