/* Nastoste — folha de espécimes: quente amarelo-cinza com verde */

:root{
  --paper:#f0eee4;
  --paper-alt:#e2dfd2;
  --ink-dark:#22281e;
  --ink:#1e1f19;
  --ink-soft:#6f6d60;
  --green:#4a6b2c;
  --ochre:#9a6a24;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
  --rhythm:88px;
}

*,*::before,*::after{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.8;
  overflow-x:hidden;
}

/* ---------- folha ---------- */

.sheet{
  max-width:1180px;
  margin:40px auto;
  background:var(--paper);
  border:1px solid var(--ochre);
  padding:44px 40px 56px;
}

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

.col-main{grid-column:1 / span 7;}
.col-side{grid-column:9 / span 4;}
.col-wide{grid-column:1 / span 9;}
.col-full{grid-column:1 / -1;}
.col-img{grid-column:1 / span 5;}
.col-img-cap{grid-column:7 / span 4;align-self:end;}

/* ---------- cabeçalho e navegação ---------- */

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

.wordmark{
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}

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

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

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

/* ---------- tipografia ---------- */

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

h1{
  font-size:56px;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:36px 0 0;
}

h2{
  font-size:27px;
  line-height:1.25;
  margin:0 0 14px;
}

h3{
  font-size:19px;
  line-height:1.35;
  margin:26px 0 8px;
}

p{margin:0 0 18px;}

a{color:var(--green);}
a:hover{color:var(--ochre);}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

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

.sec-no{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:10px;
}

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

/* ---------- secções ---------- */

.section{margin-top:var(--rhythm);}

.section > .grid > .col-main > h2,
.section > .grid > .col-wide > h2{margin-top:0;}

.band{
  background:var(--paper-alt);
  margin-left:-40px;
  margin-right:-40px;
  padding:52px 40px 56px;
}

.band-dark{
  background:var(--ink-dark);
  color:var(--paper);
  margin-left:-40px;
  margin-right:-40px;
  padding:64px 40px 68px;
}

.band-dark h2,
.band-dark h3{color:var(--paper);}
.band-dark .caption{color:#b6b5a6;}
.band-dark .sec-no{color:#c79a55;}
.band-dark a{color:#b7cf94;}
.band-dark .note{border-color:#4b5443;}
.band-dark .note dt{color:#c79a55;}
.band-dark .note dd{color:var(--paper);}
.band-dark li::marker{color:#b7cf94;}

/* ---------- separador com serifas ---------- */

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

.rule::before,
.rule::after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:11px;
  background:var(--ochre);
}

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

/* ---------- tabelas de apoio ---------- */

.note{
  border:1px solid var(--ochre);
  padding:16px 18px 18px;
  font-size:14px;
  line-height:1.65;
}

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

.note h3{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ochre);
  margin:0 0 10px;
}

.note dl{margin:0;}

.note dt{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-top:10px;
}

.note dl > dt:first-child{margin-top:0;}

.note dd{margin:2px 0 0;color:var(--ink);}

.note p{margin:0 0 10px;color:var(--ink-soft);}
.note p:last-child{margin-bottom:0;}

.note-out{
  grid-column:9 / span 4;
  align-self:start;
}

/* ---------- listas ---------- */

ul,ol{padding-left:20px;margin:0 0 18px;}
li{margin-bottom:9px;}
li::marker{color:var(--green);}

.checklist{list-style:none;padding-left:0;}

.checklist li{
  position:relative;
  padding-left:26px;
  border-bottom:1px solid rgba(154,106,36,.32);
  padding-bottom:9px;
}

.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:9px;
  height:9px;
  border:1px solid var(--green);
}

/* ---------- imagens ---------- */

figure{margin:0;}

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

.band-dark figure img{border-color:#4b5443;}

.fig-detail{grid-column:8 / span 5;}
.fig-detail-text{grid-column:1 / span 6;}

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

.hero-meta{
  grid-column:9 / span 4;
  align-self:end;
}

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

.h1-wrap{grid-column:1 / span 8;}

/* ---------- contacto ---------- */

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

/* ---------- rodapé ---------- */

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

.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  padding-bottom:12px;
}

.footer-top .name{
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-rule{
  height:1px;
  background:var(--ochre);
  border:0;
  margin:0;
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 32px;
  padding-top:14px;
}

.footer-bottom ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0;
  padding:0;
  font-size:14px;
}

.footer-bottom a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.footer-bottom a:hover{color:var(--green);border-bottom-color:var(--green);}

.footer-note{
  font-size:12px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
}

/* ---------- tablet ---------- */

@media (max-width:900px){
  :root{--rhythm:64px;--gap:20px;}
  .sheet{margin:24px 20px;padding:32px 26px 42px;}
  .band,.band-dark{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px;}
  h1{font-size:42px;}
  h2{font-size:24px;}
  .col-main,.col-wide,.col-side,.col-img,.col-img-cap,.hero-meta,.hero-intro,
  .h1-wrap,.note-out,.fig-detail,.fig-detail-text{grid-column:1 / -1;}
  .col-img{max-width:440px;}
  .col-img-cap{align-self:start;}
  .fig-detail{max-width:420px;}
  .site-footer{padding:0 20px;}
}

/* ---------- telemóvel ---------- */

@media (max-width:560px){
  :root{--rhythm:52px;}
  body{font-size:16px;}
  .sheet{margin:16px 12px;padding:24px 18px 34px;}
  .band,.band-dark{margin-left:-18px;margin-right:-18px;padding:40px 18px 44px;}
  h1{font-size:33px;}
  h2{font-size:22px;}
  .lead{font-size:17px;}
  .masthead{flex-direction:column;align-items:flex-start;}
  .masthead nav ul{gap:6px 16px;}
  .footer-bottom{flex-direction:column;}
  .site-footer{padding:0 12px;margin-bottom:32px;}
  .contact-line{font-size:18px;word-break:break-word;}
}

.hero-figure{margin-top:40px;}