/* Manor Houses of Portugal — "Azulejo & Granite"
   Palette derived from the original site: plum #993366, khaki #D7D7AC, ivory #FFFFF0,
   deepened and paired with a Portuguese tile blue. No UI framework — bespoke CSS. */

:root{
  --wine:#7a2c4a;
  --wine-dark:#4e1c31;
  --wine-light:#a8547a;
  --azulejo:#2a5d8f;
  --azulejo-dark:#1c3f61;
  --olive:#8b8d5c;
  --olive-pale:#ddddb8;
  --ivory:#fffdf3;
  --cream:#f6f2e2;
  --parchment:#efe9d5;
  --granite:#3c3f3d;
  --ink:#2a2a26;
  --muted:#6b6b5f;
  --rule:#d8d2bd;
  --maxw:1140px;
  --prose:70ch;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Chivo","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--wine);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;}
a:hover{color:var(--azulejo);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.35rem;}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:"Vollkorn","Iowan Old Style",Georgia,serif;
  font-weight:600;
  line-height:1.16;
  color:var(--wine-dark);
  margin:0 0 .6em;
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.05rem,4.6vw,3.15rem);}
h2{
  font-size:clamp(1.4rem,2.5vw,1.85rem);
  margin-top:2.5rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
}
h3{font-size:1.2rem;margin-top:1.8rem;}
p{margin:0 0 1.15rem;}
.lede{
  font-size:1.19rem;
  line-height:1.62;
  color:#4a4438;
  border-left:4px solid var(--olive);
  padding-left:1.15rem;
  margin-bottom:1.9rem;
}
strong{color:var(--wine-dark);font-weight:700;}
em{font-style:italic;}
ul,ol{margin:0 0 1.25rem;padding-left:1.25rem;}
li{margin-bottom:.55rem;}
ul li::marker{color:var(--olive);}

/* ---------- Header ---------- */
.topbar{height:6px;background:linear-gradient(90deg,var(--wine-dark) 0 34%,var(--azulejo) 34% 67%,var(--olive) 67% 100%);}
.site-header{background:var(--cream);border-bottom:1px solid var(--rule);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1.05rem;padding-bottom:1.05rem;flex-wrap:wrap;
}
.brand{
  font-family:"Vollkorn",Georgia,serif;
  font-size:1.45rem;font-weight:600;letter-spacing:.01em;
  color:var(--wine-dark);text-decoration:none;line-height:1.1;
}
.brand span{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--olive);font-family:"Chivo",sans-serif;font-weight:700;margin-top:.3rem;}
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--wine);color:var(--wine);
  font:inherit;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .9rem;cursor:pointer;
}
.primary-nav ul{display:flex;flex-wrap:wrap;gap:.15rem 1.35rem;list-style:none;margin:0;padding:0;}
.primary-nav a{
  text-decoration:none;color:var(--granite);
  font-size:.845rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:.3rem 0;border-bottom:2px solid transparent;display:inline-block;
}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--wine-dark);border-bottom-color:var(--wine);}

.region-strip{background:var(--wine-dark);}
.region-strip ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:.62rem 0;gap:.1rem 1.5rem;}
.region-strip a{color:#f0e4d6;text-decoration:none;font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;}
.region-strip a:hover,.region-strip a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:.3em;}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--granite);}
.hero-media{margin:0;}
.hero-media img{width:100%;height:clamp(230px,42vw,470px);object-fit:cover;}
.hero-title{background:var(--ivory);border-top:6px solid var(--wine);padding:2rem 0 .4rem;}
.hero-title .wrap{max-width:var(--maxw);}
.page-head{padding:2.6rem 0 .4rem;}
.eyebrow{
  font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--olive);font-weight:700;margin:0 0 .75rem;
}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:3.1rem;padding:1.4rem 0 3.6rem;align-items:start;}
.prose{max-width:var(--prose);}
.prose h1{margin-bottom:.5em;}
.aside{
  border-top:3px solid var(--azulejo);
  background:var(--cream);
  padding:1.35rem 1.3rem 1.5rem;
  font-size:.94rem;
  position:sticky;top:1rem;
}
.aside h2{
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--azulejo-dark);border-top:none;padding-top:0;margin:0 0 .85rem;
  font-family:"Chivo",sans-serif;font-weight:700;
}
.aside + .aside{margin-top:1.6rem;}
.aside ul{list-style:none;padding:0;margin:0;}
.aside li{margin-bottom:.5rem;line-height:1.45;}
.aside a{color:var(--granite);text-decoration:none;border-bottom:1px solid var(--rule);}
.aside a:hover{color:var(--wine);border-bottom-color:var(--wine);}

/* ---------- Figures ---------- */
figure{margin:2.2rem 0;}
figure img{width:100%;border:1px solid var(--rule);}
figcaption{font-size:.86rem;color:var(--muted);padding-top:.55rem;border-bottom:1px solid var(--rule);padding-bottom:.65rem;}

/* ---------- Azulejo band ---------- */
.tileband{height:48px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%23f2f5f8%22%2F%3E%3Cpath%20d%3D%22M24%206l6%2012%2012%206-12%206-6%2012-6-12-12-6%2012-6z%22%20fill%3D%22none%22%20stroke%3D%22%232a5d8f%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%223.2%22%20fill%3D%22%232a5d8f%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M0%200h48v48H0z%22%20fill%3D%22none%22%20stroke%3D%22%232a5d8f%22%20stroke-width%3D%221.2%22%20opacity%3D%22.35%22%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-size:48px 48px;opacity:.9;}

/* ---------- Region cards (home) ---------- */
.regiongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:2rem 0;}
.regiongrid a{background:var(--cream);padding:1.1rem 1.1rem;text-decoration:none;color:var(--wine-dark);font-family:"Vollkorn",Georgia,serif;font-size:1.06rem;display:block;transition:background .15s ease;}
.regiongrid a:hover{background:var(--parchment);}
.regiongrid span{display:block;font-family:"Chivo",sans-serif;font-size:.82rem;color:var(--muted);margin-top:.3rem;line-height:1.4;}

/* ---------- Contact form ---------- */
.contact-form{background:var(--cream);border:1px solid var(--rule);padding:1.5rem;margin:1.5rem 0 0;max-width:34rem;}
.contact-form label{display:block;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--granite);margin:0 0 .3rem;}
.contact-form input,.contact-form textarea{
  width:100%;padding:.6rem .7rem;margin-bottom:1rem;font:inherit;font-size:.97rem;
  border:1px solid var(--rule);background:var(--ivory);color:var(--ink);
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--azulejo);outline-offset:1px;}
.contact-form button{
  background:var(--wine-dark);color:#fff;border:none;font:inherit;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;font-size:.82rem;padding:.75rem 1.6rem;cursor:pointer;
}
.contact-form button:hover{background:var(--wine);}

/* ---------- Footer ---------- */
.site-footer{background:var(--wine-dark);color:#e9dccd;margin-top:3rem;}
.site-footer a{color:#f3e7d8;text-decoration:none;border-bottom:1px solid rgba(243,231,216,.32);}
.site-footer a:hover{color:#fff;border-bottom-color:#fff;}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem;padding:2.6rem 0 1.7rem;}
.footer-cols h2{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive-pale);border-top:none;padding-top:0;margin:0 0 .85rem;font-family:"Chivo",sans-serif;font-weight:700;}
.footer-cols ul{list-style:none;margin:0;padding:0;font-size:.93rem;}
.footer-cols li{margin-bottom:.45rem;}
.colophon{border-top:1px solid rgba(233,220,205,.22);padding:1.2rem 0 2.1rem;font-size:.85rem;line-height:1.6;color:#cdbcab;}
.colophon p{margin:0 0 .5rem;}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:4.5rem 0 4rem;}
.notfound h1{font-size:clamp(2.6rem,8vw,5rem);}
.notfound .code{font-family:"Vollkorn",Georgia,serif;font-size:5rem;color:var(--olive);line-height:1;margin:0;}

/* ---------- Motion & responsive ----------
   CSS-only entrance. No fill-mode and a readable start opacity, so an animation
   that never runs still leaves the content fully visible. */
@keyframes riseIn{from{opacity:.55;transform:translateY(9px);}to{opacity:1;transform:none;}}
.hero-title,.page-head{animation:riseIn .5s ease;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* Safeguard: content is never hidden waiting on JS. Reveal animations are
   progressive enhancement only. */
[data-aos]{opacity:1 !important;transform:none !important;}

@media (max-width:960px){
  .layout{grid-template-columns:1fr;gap:2.2rem;}
  .aside{position:static;}
}
@media (max-width:720px){
  /* Collapsing is opt-in: JS adds .js-nav. Without JS the menu is simply open,
     so navigation never depends on a script having run. */
  .site-header.js-nav .nav-toggle{display:inline-block;}
  .primary-nav{flex-basis:100%;}
  .site-header.js-nav .primary-nav{display:none;}
  .site-header.js-nav .primary-nav.is-open{display:block;}
  .primary-nav ul{flex-direction:column;gap:0;padding-top:.7rem;}
  .primary-nav li{border-top:1px solid var(--rule);}
  .primary-nav a{display:block;padding:.7rem 0;border-bottom:none;}
  .region-strip ul{gap:.35rem 1.1rem;}
  body{font-size:1.02rem;}
}
@media print{
  .site-header,.site-footer,.aside,.tileband{display:none;}
  body{background:#fff;}
}