/* CASADI UI graphics: tokens, icons, badges, dividers, cards. Pairs with web/casadi-tokens.css */
:root {
  --casadi-ivory:#F6F1E7; --casadi-ink:#111111; --casadi-champagne:#C8B48A; --casadi-taupe:#8A7F72; --casadi-stone:#E4DCCD;
  --casadi-ink-2:#1C1B19;            /* raised surface on ink */
  --casadi-hairline:rgba(17,17,17,.14);
  --casadi-hairline-on-ink:rgba(246,241,231,.16);
  --casadi-font-display:"Cormorant Garamond",Georgia,serif;
  --casadi-font-body:"EB Garamond",Georgia,serif;
  --casadi-font-ui:"Jost","Helvetica Neue",Arial,sans-serif;
  /* type scale (1.25 ratio, fluid display) */
  --fs-display:clamp(3rem,6vw,5.5rem); --fs-h1:clamp(2.5rem,4.5vw,4rem); --fs-h2:clamp(2rem,3vw,2.75rem);
  --fs-h3:1.625rem; --fs-body:1.1875rem; --fs-small:1rem; --fs-label:.75rem;
  --lh-display:1.04; --lh-body:1.6;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem; --space-6:6rem; --space-7:9rem;
  --radius:0; --radius-soft:2px;
  --ease:cubic-bezier(.2,.6,.2,1);
}
/* ---------- base */
body{background:var(--casadi-ivory);color:var(--casadi-ink);font:400 var(--fs-body)/var(--lh-body) var(--casadi-font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,.c-display{font-family:var(--casadi-font-display);font-weight:500;letter-spacing:-.005em;line-height:1.1;font-variant-numeric:lining-nums}
.c-display{font-size:var(--fs-display);line-height:var(--lh-display)}
.c-label{font:500 var(--fs-label)/1.2 var(--casadi-font-ui);letter-spacing:.28em;text-transform:uppercase}
.c-label--muted{color:var(--casadi-taupe)}
.c-dek{font-family:var(--casadi-font-display);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--casadi-taupe)}
/* ---------- icons (use sprite: <svg class="c-icon"><use href="/graphics/icons/sprite.svg#ci-search"/></svg>) */
.c-icon{width:24px;height:24px;display:inline-block;vertical-align:middle;color:currentColor;flex:none}
.c-icon--xs{width:16px;height:16px}.c-icon--sm{width:20px;height:20px}.c-icon--lg{width:32px;height:32px}.c-icon--xl{width:48px;height:48px}
.c-icon--champagne{color:var(--casadi-champagne)}
/* ---------- links */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--casadi-champagne);transition:text-decoration-color .2s var(--ease),color .2s var(--ease)}
a:hover{text-decoration-color:currentColor}
.c-link-arrow{font:500 var(--fs-label) var(--casadi-font-ui);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:.75em;align-items:center}
.c-link-arrow .c-icon{transition:transform .25s var(--ease)}.c-link-arrow:hover .c-icon{transform:translateX(4px)}
/* ---------- buttons */
.c-btn{display:inline-flex;align-items:center;gap:.75em;padding:1rem 2rem;border:1px solid var(--casadi-ink);border-radius:var(--radius);background:var(--casadi-ink);color:var(--casadi-ivory);font:500 var(--fs-label)/1 var(--casadi-font-ui);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.c-btn:hover,.c-btn:focus-visible{background:var(--casadi-champagne);border-color:var(--casadi-champagne);color:var(--casadi-ink)}
.c-btn--ghost{background:transparent;color:var(--casadi-ink)}
.c-btn--ghost:hover{background:var(--casadi-ink);color:var(--casadi-ivory);border-color:var(--casadi-ink)}
.on-ink .c-btn{background:var(--casadi-ivory);color:var(--casadi-ink);border-color:var(--casadi-ivory)}
.on-ink .c-btn:hover{background:var(--casadi-champagne);border-color:var(--casadi-champagne)}
:focus-visible{outline:1px solid var(--casadi-champagne);outline-offset:3px}
/* ---------- badges / pills */
.c-badge{display:inline-flex;align-items:center;gap:.5em;height:30px;padding:0 1rem;border-radius:999px;border:1px solid transparent;font:500 .6875rem/1 var(--casadi-font-ui);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.c-badge--new{background:var(--casadi-ink);color:var(--casadi-ivory)}
.c-badge--exclusive{border-color:var(--casadi-champagne);color:var(--casadi-ink)}
.c-badge--verified{border-color:var(--casadi-ink);background:var(--casadi-ivory);color:var(--casadi-ink)}
.c-badge--verified .c-icon{width:16px;height:16px}
.c-badge--featured{background:var(--casadi-champagne);color:var(--casadi-ink);border-radius:1px}
.c-badge--rank{background:var(--casadi-ink);color:var(--casadi-ivory)}
.c-badge--rank b{font:italic 600 1.125rem/1 var(--casadi-font-display);letter-spacing:0;text-transform:none;font-variant-numeric:lining-nums}
.on-ink .c-badge--new{background:var(--casadi-ivory);color:var(--casadi-ink)}
.on-ink .c-badge--exclusive,.on-ink .c-badge--verified{background:transparent;border-color:var(--casadi-champagne);color:var(--casadi-champagne)}
.c-rank-medal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--casadi-ink);color:var(--casadi-ivory);box-shadow:inset 0 0 0 4px var(--casadi-ink),inset 0 0 0 5px var(--casadi-champagne);font:italic 600 1.875rem/1 var(--casadi-font-display);font-variant-numeric:lining-nums}
/* ---------- dividers */
.c-rule{border:0;height:1px;background:var(--casadi-hairline);margin:var(--space-5) 0}
.c-rule--ink{background:var(--casadi-ink)}
.c-rule--short{width:80px;height:1px;background:var(--casadi-champagne);margin:var(--space-3) auto}
.c-rule--double{height:6px;background:none;border-top:1.5px solid currentColor;border-bottom:.6px solid currentColor;opacity:.85}
.c-rule--diamond{position:relative;height:24px;background:none;overflow:visible}
.c-rule--diamond::before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:linear-gradient(90deg,currentColor calc(50% - 18px),transparent calc(50% - 18px),transparent calc(50% + 18px),currentColor calc(50% + 18px))}
.c-rule--diamond::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg) scaleX(.8)}
.c-rule--monogram{height:48px;background:url(editorial/divider-monogram.svg) center/auto 48px no-repeat;border:0} /* SVG uses currentColor only when inlined; use <img> or inline SVG for colour control */
/* ---------- section label: <p class="c-section"><span class="c-section__no">No. 01</span><span class="c-section__name">The Houses</span></p> */
.c-section{display:flex;align-items:baseline;gap:1.125rem;margin:0 0 var(--space-3)}
.c-section__no{font:italic 500 1.75rem/1 var(--casadi-font-display);font-variant-numeric:lining-nums}
.c-section__name{font:500 var(--fs-label)/1 var(--casadi-font-ui);letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:1.125rem}
.c-section__name::before{content:"";width:36px;height:1px;background:var(--casadi-champagne)}
/* ---------- pull quote */
.c-quote{position:relative;padding-left:4.5rem;font:italic 500 clamp(1.75rem,3vw,2.75rem)/1.2 var(--casadi-font-display)}
.c-quote::before{content:"";position:absolute;left:0;top:.15em;width:3rem;height:2.5rem;background:var(--casadi-champagne);-webkit-mask:url(editorial/pull-quote-mark.svg) no-repeat center/contain;mask:url(editorial/pull-quote-mark.svg) no-repeat center/contain}
.c-quote cite{display:block;margin-top:1rem;font:500 var(--fs-label) var(--casadi-font-ui);font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:var(--casadi-taupe)}
/* ---------- cards */
.c-card{display:block;text-decoration:none;color:inherit}
.c-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--casadi-stone) url(placeholders/placeholder-stone-4x5.webp) center/cover;border-radius:var(--radius)}
.c-card__media--wide{aspect-ratio:16/9;background-image:url(placeholders/placeholder-stone-16x9.webp)}
.c-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.c-card:hover .c-card__media img{transform:scale(1.03)}
.c-card__media .c-badge{position:absolute;top:1rem;left:1rem}
.c-card__kicker{margin-top:1.25rem}
.c-card__title{font:500 1.625rem/1.15 var(--casadi-font-display);margin:.5rem 0 .25rem}
.c-card__meta{font:400 .8125rem var(--casadi-font-ui);letter-spacing:.06em;color:var(--casadi-taupe)}
.c-card--model .c-card__media{background-image:url(placeholders/model-silhouette-stone-4x5.webp)}
.c-card--model .c-rank-medal{position:absolute;top:1rem;right:1rem;width:48px;height:48px;font-size:1.375rem}
.c-stats{display:grid;grid-template-columns:repeat(4,auto);gap:.25rem 1.5rem;font:400 .8125rem var(--casadi-font-ui);letter-spacing:.08em;border-top:1px solid var(--casadi-hairline);padding-top:.75rem;margin-top:.75rem}
/* ---------- surfaces */
.on-ink{background:var(--casadi-ink);color:var(--casadi-ivory)}
.on-ink a{text-decoration-color:var(--casadi-champagne)}
.on-ink .c-rule{background:var(--casadi-hairline-on-ink)}
.c-surface-stone{background:var(--casadi-stone)}
.c-pattern-ivory{background:var(--casadi-ivory) url(textures/monogram-pattern-ivory.svg) 0 0/160px 160px}
.c-pattern-ink{background:var(--casadi-ink) url(textures/monogram-pattern-ink.svg) 0 0/160px 160px}
.c-hero-linen{background:var(--casadi-ivory) url(textures/hero-linen-ivory-2560.webp) center/cover}
.c-container{max-width:1320px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.c-section-space{padding-block:clamp(4rem,10vw,9rem)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}