/* Quintamare — colour. Six named grounds, nothing outside them. */
:root{
/* base palette */
--cal:#FFFCF5;      /* default ground, 60% of any surface */
--linho:#F3EBDC;    /* second ground, panels and full-bleed sections */
--areia:#DFC098;    /* highlight, rules and edges */
--bronze:#9E815C;   /* the signature — eyebrows, hairlines, metal */
--terra:#754628;    /* flat mark, small type, print at scale */
--sombra:#2B231C;   /* body text and reversed grounds */

/* tints — the only permitted derivations, all straight alphas of the six */
--sombra-90:rgba(43,35,28,.90);--sombra-72:rgba(43,35,28,.72);--sombra-56:rgba(43,35,28,.56);
--sombra-32:rgba(43,35,28,.32);--sombra-16:rgba(43,35,28,.16);--sombra-08:rgba(43,35,28,.08);
--bronze-56:rgba(158,129,92,.56);--bronze-32:rgba(158,129,92,.32);--bronze-16:rgba(158,129,92,.16);
--areia-56:rgba(223,192,152,.56);--areia-32:rgba(223,192,152,.32);--areia-16:rgba(223,192,152,.16);
--cal-90:rgba(255,252,245,.90);--cal-72:rgba(255,252,245,.72);--cal-56:rgba(255,252,245,.56);
--cal-32:rgba(255,252,245,.32);--cal-16:rgba(255,252,245,.16);

/* the gold — the logotype gradient, for metal only: foil, embossing, rules on dark */
--gold-gradient:linear-gradient(158deg,#D8BE9C 0%,#A98254 38%,#C9AA82 62%,#7E5F3E 100%); /* @kind color */

/* ——— semantic aliases ——— */
--surface-page:var(--cal);
--surface-panel:var(--linho);
--surface-card:var(--cal);
--surface-inverse:var(--sombra);
--surface-scrim:var(--sombra-72);

--text-body:var(--sombra);
--text-muted:var(--sombra-56);
--text-quiet:var(--sombra-32);
--text-display:var(--terra);
--text-eyebrow:var(--bronze);
--text-on-inverse:var(--cal);
--text-muted-on-inverse:var(--cal-56);

--rule-hair:var(--areia);          /* 1px editorial rules */
--rule-strong:var(--bronze);
--rule-quiet:var(--sombra-16);
--border-field:var(--bronze-32);
--border-card:var(--areia-56);

--accent:var(--bronze);
--accent-hover:var(--terra);
--focus-ring:var(--bronze);

/* status — the palette does duty for state; no new hues are introduced */
--state-available:var(--bronze);
--state-reserved:var(--areia);
--state-sold:var(--sombra-32);
}

/* Reversed scope: everything inside inherits the dark reading of the palette. */
.qm-inverse{
--surface-page:var(--sombra);
--surface-panel:var(--sombra);
--surface-card:rgba(255,252,245,.05);
--text-body:var(--cal);
--text-muted:var(--cal-56);
--text-quiet:var(--cal-32);
--text-display:var(--cal);
--text-eyebrow:var(--areia);
--rule-hair:var(--bronze);
--rule-quiet:var(--cal-16);
--border-card:var(--bronze-32);
--border-field:var(--cal-32);
--accent:var(--areia);
--accent-hover:var(--cal);
--focus-ring:var(--areia);
color:var(--text-body);background:var(--surface-page);
}

/* Quintamare — type. Two faces. Cormorant Garamond is seen; Jost is read. */
:root{
--font-display:'Cormorant Garamond',Cormorant,'EB Garamond',Georgia,serif;
--font-text:'Jost','Futura','Century Gothic',system-ui,sans-serif;
--font-mark:var(--font-display); /* stand-in only where the artwork mark cannot be used */

/* weights — hard ceilings from the supplied brand sheet. Cormorant never above Regular. Jost never above Regular. */
--w-display-light:300; /* @kind font */
--w-display:400; /* @kind font */
--w-text-xlight:200; /* @kind font */
--w-text-light:300; /* @kind font */
--w-text:400; /* @kind font */

/* display scale — Cormorant. Floor is 28px; nothing smaller is ever set in it. */
--ds-hero:clamp(56px,7.4vw,132px); /* @kind font */
--ds-1:clamp(44px,4.6vw,82px); /* @kind font */
--ds-2:clamp(36px,3.2vw,56px); /* @kind font */
--ds-3:clamp(30px,2.2vw,40px); /* @kind font */
--ds-4:28px; /* @kind font */

/* text scale — Jost */
--ts-lead:21px; /* @kind font */
--ts-body:17px; /* @kind font */
--ts-small:15px; /* @kind font */
--ts-fine:13px; /* @kind font */
--ts-micro:11px; /* @kind font */

/* line heights */
--lh-display:1.04; /* @kind other */
--lh-display-loose:1.14; /* @kind other */
--lh-lead:1.62; /* @kind other */
--lh-body:1.72; /* @kind other */
--lh-tight:1.4; /* @kind other */

/* tracking — the brand's uppercase Jost runs wide, 0.24–0.42em */
--tk-display:-0.012em; /* @kind other */
--tk-display-air:0.01em; /* @kind other */
--tk-body:0.005em; /* @kind other */
--tk-eyebrow:0.32em; /* @kind other */
--tk-eyebrow-wide:0.42em; /* @kind other */
--tk-label:0.24em; /* @kind other */

/* semantic roles */
--type-hero:var(--w-display-light) var(--ds-hero)/var(--lh-display) var(--font-display);
--type-display-1:var(--w-display-light) var(--ds-1)/var(--lh-display) var(--font-display);
--type-display-2:var(--w-display-light) var(--ds-2)/var(--lh-display-loose) var(--font-display);
--type-display-3:var(--w-display) var(--ds-3)/var(--lh-display-loose) var(--font-display);
--type-display-4:var(--w-display) var(--ds-4)/var(--lh-display-loose) var(--font-display);
--type-lead:var(--w-text-light) var(--ts-lead)/var(--lh-lead) var(--font-text);
--type-body:var(--w-text-light) var(--ts-body)/var(--lh-body) var(--font-text);
--type-small:var(--w-text-light) var(--ts-small)/var(--lh-body) var(--font-text);
--type-eyebrow:var(--w-text) var(--ts-micro)/1.4 var(--font-text);
--type-label:var(--w-text) var(--ts-fine)/1.4 var(--font-text);
}

/* Quintamare — spacing, measure and layout. A 4px base, but the brand lives at the top of it. */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:180px;--sp-12:240px;

/* section rhythm */
--section-y:var(--sp-10);      /* standard band */
--section-y-tall:var(--sp-11); /* opening and closing bands */
--gutter:var(--sp-7);
--gutter-tight:var(--sp-5);

/* page frame */
--page-max:1440px;
--measure-max:1180px; /* @kind spacing */ /* editorial column group */
--measure-prose:62ch; /* @kind spacing */ /* running text never wider */
--measure-lead:46ch; /* @kind spacing */ /* lead paragraphs narrower still */

/* clear space around the mark = height of the lowercase m (see brand notes) */
--mark-clear:1em; /* @kind spacing */
--mark-min-screen:120px; /* below this, use the monogram */

/* control sizing */
--control-h-sm:36px;--control-h:48px;--control-h-lg:58px;
--field-h:52px;
--tap-min:44px;
}

/* Quintamare — edges, radii, shadow, blur, texture. Architecture, not UI chrome. */
:root{
/* radii — the brand is square. Curves are the exception, never the default. */
--radius-none:0px;
--radius-hair:2px;   /* fields and small controls only */
--radius-pill:999px; /* status dots and the monogram fob only */
--radius-arch:50% 50% 0 0 / 34% 34% 0 0; /* @kind radius */ /* the villa gable aperture, for image masks */

/* borders */
--border-w:1px;
--border-hair:1px solid var(--rule-hair); /* @kind other */
--border-quiet:1px solid var(--rule-quiet); /* @kind other */
--border-strong:1px solid var(--rule-strong); /* @kind other */
--rule-eyebrow-w:34px; /* @kind spacing */ /* the short bronze dash before an eyebrow */

/* shadow — warm, wide, almost absent. Never on the mark, never on type. */
--shadow-none:none;
--shadow-lift:0 1px 2px rgba(43,35,28,.04),0 8px 24px rgba(43,35,28,.06);
--shadow-raise:0 2px 6px rgba(43,35,28,.05),0 24px 60px rgba(43,35,28,.10);
--shadow-inset-hair:inset 0 -1px 0 var(--rule-quiet);

/* protection over photography — gradient scrims, never capsules */
--scrim-bottom:linear-gradient(to top,rgba(43,35,28,.72) 0%,rgba(43,35,28,.38) 34%,rgba(43,35,28,0) 72%); /* @kind color */
--scrim-top:linear-gradient(to bottom,rgba(43,35,28,.52) 0%,rgba(43,35,28,0) 60%); /* @kind color */
--scrim-full:linear-gradient(to bottom,rgba(43,35,28,.34),rgba(43,35,28,.34)); /* @kind color */

/* glass — used once per screen at most: the fixed header over photography */
--blur-veil:saturate(120%) blur(14px); /* @kind other */
--veil-light:rgba(255,252,245,.82);
--veil-dark:rgba(43,35,28,.46);

/* materials */
}

/* Quintamare — motion. Everything is a fade or a slow reveal. Nothing bounces. */
:root{
--ease-quiet:cubic-bezier(.16,.68,.24,1); /* @kind other */ /* default: long tail, no overshoot */
--ease-in-quiet:cubic-bezier(.5,0,.86,.36); /* @kind other */
--ease-linear:linear; /* @kind other */

--dur-hover:220ms; /* @kind other */
--dur-press:110ms; /* @kind other */
--dur-ui:340ms; /* @kind other */
--dur-reveal:720ms; /* @kind other */
--dur-image:1100ms; /* @kind other */
--stagger:90ms; /* @kind other */

--transition-hover:color var(--dur-hover) var(--ease-quiet),background-color var(--dur-hover) var(--ease-quiet),border-color var(--dur-hover) var(--ease-quiet),opacity var(--dur-hover) var(--ease-quiet); /* @kind other */
--reveal-offset:18px; /* @kind spacing */ /* fade-up travel; never more */
--zoom-rest:1.0; /* @kind other */
--zoom-hover:1.035; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-reveal:1ms; /* @kind other */
--dur-image:1ms; /* @kind other */
--stagger:0ms; /* @kind other */
--reveal-offset:0px; /* @kind spacing */
--zoom-hover:1; /* @kind other */
}}

/* Quintamare — element defaults and the few utilities the brand actually uses. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tk-body);text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-display);font-weight:var(--w-display-light);letter-spacing:var(--tk-display)}
h1{font:var(--type-display-1)}h2{font:var(--type-display-2)}h3{font:var(--type-display-3)}h4{font:var(--type-display-4)}
p{margin:0 0 1.1em;max-width:var(--measure-prose)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--bronze-32);transition:var(--transition-hover)}
a:hover{color:var(--accent-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
img{display:block;max-width:100%}
hr{border:0;border-top:var(--border-hair);margin:var(--sp-7) 0}
::selection{background:var(--areia-32)}
small{font:var(--type-small)}
figure{margin:0}

/* The eyebrow: uppercase Jost, wide track, bronze, optionally preceded by a short rule. */
.qm-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tk-eyebrow);text-transform:uppercase;color:var(--text-eyebrow);display:inline-flex;align-items:center;gap:var(--sp-3)}
.qm-eyebrow--ruled::before{content:"";width:var(--rule-eyebrow-w);height:1px;background:currentColor;opacity:.7}

/* Editorial measures */
.qm-lead{font:var(--type-lead);color:var(--text-muted);max-width:var(--measure-lead)}
.qm-prose{max-width:var(--measure-prose)}

/* Page frame */
.qm-page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
.qm-section{padding-block:var(--section-y)}

/* Scroll reveal — fade up, no travel beyond --reveal-offset */
.qm-reveal{opacity:0;transform:translateY(var(--reveal-offset));transition:opacity var(--dur-reveal) var(--ease-quiet),transform var(--dur-reveal) var(--ease-quiet)}
.qm-reveal.is-in{opacity:1;transform:none}

/* Materials */