/* Steldeste — folha de estilos comum */

:root{
  --bg:#f3ebe2;
  --bg-alt:#e7d9cb;
  --dark:#1f4b4e;
  --ink:#2b201a;
  --muted:#7b6b5d;
  --on-dark:#f3ebe2;
  --accent:#b05a30;
  --accent2:#2f7275;
  --rhythm:76px;
  --gap:24px;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::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.7;
  font-weight:400;
  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;}

/* ---------- grelha ---------- */

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

.col-text{grid-column:2 / 8;}
.col-wide{grid-column:2 / 10;}
.col-full{grid-column:1 / -1;}

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

.site-head{
  border-bottom:1px solid rgba(43,32,26,.16);
  padding:20px 0 18px;
}
.site-head .wrap{row-gap:12px;align-items:baseline;}

.brand{
  grid-column:1 / 5;
  margin:0;
  font-size:1.16rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.brand a{color:var(--ink);text-decoration:none;}
.brand a:hover{color:var(--accent);}

.nav{grid-column:5 / -1;}
.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px 22px;
}
.nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:.92rem;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--accent);color:var(--accent);}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);}

/* ---------- herói ---------- */

.hero{padding:calc(var(--rhythm) * .8) 0 var(--rhythm);}
.hero .wrap{row-gap:0;}

.spine{
  grid-column:1 / 2;
  grid-row:1 / 4;
  align-self:stretch;
  min-height:180px;
  border-left:2px solid var(--accent);
  margin-right:8px;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--accent) 0 2px,
    transparent 2px 18px
  );
  background-size:16px 100%;
  background-repeat:no-repeat;
  background-position:left top;
}

.hero h1{
  grid-column:2 / 11;
  margin:0;
  font-size:clamp(2.35rem,5.6vw,4.05rem);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.035em;
  max-width:16ch;
}
.hero h1 .break{display:block;}

.rule-double{
  grid-column:2 / 11;
  margin:30px 0 26px;
  height:4px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--accent2);
}

.hero-lead{
  grid-column:2 / 10;
  margin:0;
  font-size:1.18rem;
  line-height:1.62;
  color:var(--ink);
}

.hero-fig{
  grid-column:7 / 13;
  margin:46px 0 0;
}
.hero-fig img{width:100%;}

figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  text-align:left;
}
figcaption .mark{color:var(--accent2);}

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

.sec{padding:var(--rhythm) 0;}
.sec--alt{background:var(--bg-alt);}
.sec--dark{background:var(--dark);color:var(--on-dark);}
.sec--dark h2,.sec--dark h3{color:var(--on-dark);}
.sec--dark a{color:#e8c3a8;}
.sec--dark .sec-head{border-bottom-color:rgba(243,235,226,.3);}
.sec--dark .sec-head span:first-child{color:#8fc0c1;}
.sec--dark .sec-head span:last-child{color:rgba(243,235,226,.75);}
.sec--dark figcaption{color:rgba(243,235,226,.72);}
.sec--dark .check li::before{background:#8fc0c1;}
.sec--dark :focus-visible{outline-color:#e8c3a8;}

.sec-head{
  grid-column:1 / -1;
  display:flex;
  gap:14px;
  align-items:baseline;
  margin:0 0 30px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(43,32,26,.2);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.sec-head span:first-child{color:var(--accent2);font-weight:700;}
.sec-head span:last-child{color:var(--muted);}

h2{
  grid-column:2 / 10;
  margin:0 0 18px;
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.02em;
}

h3{
  grid-column:2 / 8;
  margin:34px 0 10px;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.01em;
}

.sec p{grid-column:2 / 8;margin:0 0 18px;}
.sec p.lead{
  grid-column:2 / 10;
  font-size:1.1rem;
  line-height:1.65;
  margin-bottom:24px;
}
.sec p:last-child{margin-bottom:0;}

ul,ol{grid-column:2 / 8;margin:0 0 18px;padding-left:1.15em;}
li{margin-bottom:9px;}
li::marker{color:var(--accent);}

.check{list-style:none;padding-left:0;}
.check li{
  position:relative;
  padding-left:26px;
}
.check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:14px;
  height:2px;
  background:var(--accent);
}

/* ---------- imagem de pormenor na secção contrastante ---------- */

.detail-grid{row-gap:34px;}
.detail-fig{
  grid-column:2 / 6;
  margin:0;
}
.detail-fig img{width:100%;}
.detail-text{grid-column:7 / 12;}
.detail-text p{margin:0 0 18px;}
.detail-text p:last-child{margin-bottom:0;}
.detail-text ul{grid-column:auto;}

/* ---------- separador ---------- */

.sep{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  gap:10px;
  margin:44px 0;
  border:0;
  height:auto;
}
.sep span{width:22px;height:2px;background:var(--accent);display:block;}
.sec--dark .sep span{background:#8fc0c1;}

/* ---------- páginas de texto ---------- */

.page-head{padding:calc(var(--rhythm) * .75) 0 10px;}
.page-head .kicker{
  grid-column:1 / -1;
  margin:0 0 16px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
  font-weight:700;
}
.page-head h1{
  grid-column:2 / 11;
  margin:0;
  font-size:clamp(2.05rem,4.4vw,3.15rem);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.03em;
}
.page-head .rule-double{margin:26px 0 0;}

.prose{padding:calc(var(--rhythm) * .7) 0 var(--rhythm);}
.prose p{grid-column:2 / 8;margin:0 0 18px;}
.prose h2{margin-top:0;}
.prose .block{display:contents;}

.dropcap::first-letter{
  float:left;
  font-size:3.5rem;
  line-height:.86;
  font-weight:700;
  color:var(--accent);
  padding:6px 12px 0 0;
}

.contact-line{
  grid-column:2 / 8;
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(43,32,26,.2);
  font-size:1rem;
}
.contact-line strong{display:block;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;}

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

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid rgba(43,32,26,.18);
  padding:52px 0 44px;
  text-align:center;
}
.site-foot .wrap{display:block;}
.foot-brand{
  margin:0 0 16px;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.foot-nav ul{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.foot-nav li{margin:0;}
.foot-nav li + li{
  border-left:1px solid rgba(43,32,26,.3);
  margin-left:14px;
  padding-left:14px;
}
.foot-nav a{color:var(--ink);text-decoration:none;font-size:.92rem;}
.foot-nav a:hover{color:var(--accent);text-decoration:underline;}
.foot-mail{margin:0 0 10px;font-size:1rem;}
.foot-note{
  margin:0 auto;
  max-width:56ch;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- adaptação ---------- */

@media (max-width:1000px){
  .hero h1,.page-head h1,.rule-double,.hero-lead,h2,.sec p.lead{grid-column:2 / -1;}
  .hero-fig{grid-column:2 / -1;}
  .detail-fig{grid-column:2 / 7;}
  .detail-text{grid-column:7 / -1;}
  .sec p,h3,ul,ol{grid-column:2 / 11;}
  .prose p,.contact-line{grid-column:2 / 11;}
}

@media (max-width:760px){
  :root{--rhythm:46px;--gap:16px;}
  body{font-size:16.5px;}
  .wrap{display:block;padding:0 18px;}
  .brand,.nav,.hero h1,.page-head h1,.hero-lead,.hero-fig,
  h2,h3,.sec p,.prose p,ul,ol,.sec-head,.rule-double,
  .detail-fig,.detail-text,.contact-line,.page-head .kicker{grid-column:auto;}
  .nav{margin-top:12px;}
  .nav ul{justify-content:flex-start;gap:6px 18px;}
  .spine{
    display:block;
    width:100%;
    min-height:0;
    height:16px;
    border-left:0;
    border-top:2px solid var(--accent);
    margin:0 0 22px;
    background-image:repeating-linear-gradient(
      to right,
      var(--accent) 0 2px,
      transparent 2px 18px
    );
    background-size:100% 14px;
  }
  .hero h1{max-width:none;}
  .hero h1 .break{display:inline;}
  .hero-fig{margin-top:34px;}
  .detail-fig{margin-bottom:28px;}
  .sep{margin:34px 0;}
  .foot-nav ul{flex-direction:column;}
  .foot-nav li + li{
    border-left:0;
    margin-left:0;
    padding-left:0;
    margin-top:8px;
  }
  .dropcap::first-letter{font-size:3rem;}
}