/* s2dio3i Interiors — "Terra" colour theme (olive, terracotta, blush on warm off-white), 11 Oct 2026.
   Colours read from the owner's reference picture of three overlapping circles:
   olive #766b4e, terracotta #b06644, blush #d9b89d, background #efeae4.
   A colour layer on top of style.css. Nothing else changes.
   To change the look: set THEME in build.py ("" first look, "coast", "sage", "terra"). */
:root{
  --ink:#2f2a1f;        /* very dark olive-brown for headings */
  --text:#544d40;
  --muted:#6b6455;
  --line:#e6e0d6;
  --band:#f3eee7;       /* warm off-white, the picture's background */
  --accent:#6b6245;     /* olive (a shade deeper than the circle, so small text stays readable) */
  --accent-d:#575038;
  --tint:#f0e0d2;       /* pale blush */
  --dark:#37331f;       /* deep olive for top bar and footer */
  --pop:#a85a36;        /* terracotta (a shade deeper, so white button text stays readable) */
  --pop-d:#8f4a2a;
  --blush:#ecd5c2;
  --shadow:0 6px 24px rgba(47,42,31,.09);
  --shadow-lg:0 18px 50px rgba(47,42,31,.17);
}

/* terracotta is for the things people press */
.btn--primary{background:var(--pop);box-shadow:0 8px 20px rgba(168,90,54,.3)}
.btn--primary:hover{background:var(--pop-d)}
.mbar .quote{background:var(--pop)}
.vid__play{background:var(--pop)}
.vid__link:hover .vid__play,.vid__link:focus-visible .vid__play{background:var(--pop-d)}
.reel:hover .reel__play,.reel:focus-visible .reel__play{background:var(--pop);border-color:var(--pop)}
.sec-head h2::after{background:var(--pop)}
.progress{background:linear-gradient(90deg,var(--accent),var(--pop))}
/* on the olive and terracotta blocks the main button turns light, so it stands out */
.tour .btn--primary{background:var(--blush);color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.cta .btn--primary{background:#f6efe6;color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.tour .btn--primary:hover,.cta .btn--primary:hover{background:#fff}

/* olive carries the brand: links, tags, tabs, step numbers */
.tabs button:hover{border-color:var(--accent)}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.roomnav a:hover{border-color:var(--accent);color:var(--accent)}
.steps::before{border-top-color:#d8d0bd}
.ticks li::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6245' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.chips span{background:var(--tint)}
.opt input:hover+span{border-color:#c9bfa6}

/* colour blocks: off-white, blush, olive, terracotta */
#about.band{background:var(--tint)}
.tour{background:#70664a}
.tour::before{background:radial-gradient(58% 60% at 50% 58%,rgba(236,213,194,.18),transparent 72%)}
.tour .tag{color:#f6e8db}
.tour .sec-head h2::after{background:var(--blush)}
.tour .sec-head p{color:#f8f2e8}
.pcard__vid{background:rgba(55,51,31,.8)}
.pcard__vid svg{color:var(--blush)}
.reel__views{background:rgba(55,51,31,.68)}

.topbar{color:#ddd8c6}
.footer{color:#ddd8c6}
.footer .brand__text small,.footer h4,.footer__bot{color:#aba58a}

/* the closing call to action is a terracotta card with a blush circle and an olive circle */
.cta{background:var(--bg);padding:72px 0}
.cta .wrap{position:relative;overflow:hidden;max-width:calc(var(--wrap) - 48px);background:linear-gradient(120deg,#964e2c 0%,#a85a36 100%);border-radius:28px;padding:64px 32px;color:#fff;box-shadow:var(--shadow-lg)}
.cta .wrap::before{content:"";position:absolute;right:-90px;top:-110px;width:300px;height:300px;border-radius:50%;background:rgba(236,213,194,.28)}
.cta .wrap::after{content:"";position:absolute;left:-70px;bottom:-120px;width:240px;height:240px;border-radius:50%;background:rgba(118,107,78,.45)}
.cta .wrap>*{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:#fff7ef}
.cta .btn--outline{border-color:rgba(255,255,255,.85);color:#fff}
.cta .btn--outline:hover{background:#fff;border-color:#fff;color:var(--ink)}

@media (max-width:1248px){
  .cta .wrap{width:auto;margin-left:24px;margin-right:24px}
}
@media (max-width:640px){
  .cta{padding:48px 0}
  .cta .wrap{margin-left:16px;margin-right:16px;border-radius:22px;padding:44px 20px}
}