/* Intare — home styles. Loaded after style.css by intare_scripts(). */

/* ================= INTRO ================= */
/* A warm tan slab on a single centred axis. The hero above is a dark
   photograph and #atlas below is #1A2B23, so only a light surface actually
   separates them — and the tan is the header top bar's own colour, which
   bookends the page. Dark ink on tan, because the light-text-on-taupe of the
   reference cannot reach AA at any usable weight.
   Sized to be scrolled past, not stopped at: the hero directly above is doing
   the display-type job, so nothing here needs to be hero-scaled. */
.intro-band{background:#D8C3A5;padding:clamp(26px,2.4vw,34px) 0}
.intro-inner{max-width:720px;margin:0 auto;text-align:center}

.intro-title{font-family:var(--serif-d);font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.12;letter-spacing:.2px;color:var(--green);margin:0;text-wrap:balance}
/* Subordinate to the h1 by size and weight, not by colour alone, so the
   hierarchy survives greyscale. */
.intro-sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(13.5px,1vw,15px);line-height:1.35;color:var(--green-2);margin:5px 0 0;text-wrap:balance}
/* Short enough now to balance: the cap sets the readable maximum and the
   browser evens the lines out under it, so the last one is never an orphan. */
.intro-copy{max-width:68ch;margin:10px auto 0;font-size:16px;line-height:1.58;font-weight:300;color:var(--body);text-wrap:balance}

.intro-cta{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:13px;color:var(--green)}
.intro-cta-ring{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border:1.5px solid currentColor;border-radius:50%;transition:background-color .35s ease,color .35s ease,transform .35s ease}
.intro-cta-ring svg{display:block;width:14px;height:14px;transition:transform .35s ease}
.intro-cta-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;line-height:1.4}
.intro-cta:hover,.intro-cta:focus{color:var(--green)}
.intro-cta:hover .intro-cta-ring{background:var(--green);color:#F7F3E7;transform:scale(1.07)}
.intro-cta:hover .intro-cta-ring svg{transform:translateX(2px)}
.intro-cta:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}

@media (max-width:767px){
  .intro-copy{font-size:15px;line-height:1.58;margin-top:9px}
  .intro-cta{gap:10px;margin-top:12px}
  .intro-cta-label{letter-spacing:1.4px}
}