/* CTJ Jewellery site styles: self-hosted fonts, design tokens, base and interaction states. Built from the design system tokens. */
/* Cormorant Garamond, self-hosted (SIL Open Font License). Latin and Latin Extended subsets. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colors */
:root{
  /* ---- Base palette (sampled from the Kayrouz brand palette — use exactly) ---- */
  --cream:#FFFBEE;
  --cream-deep:#F6F1E2;
  --brown:#513928;
  --gold:#977A45;
  --gold-deep:#7D6438;      /* AA-safe gold for small text on cream */
  --taupe:#DDD5C5;
  --white:#FFFFFF;

  /* ---- Derived tints (never invent new hues; these are the two allowed derivations) ---- */
  --brown-60:rgba(81,57,40,.60);
  --brown-40:rgba(81,57,40,.40);
  --taupe-50:rgba(221,213,197,.50);
  --scrim:rgba(0,0,0,.35);   /* bottom gradient over imagery */
  --scrim-top:rgba(0,0,0,0);

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--cream);
  --surface-band:var(--cream-deep);
  --surface-image-mat:var(--white);
  --surface-placeholder:var(--taupe);

  /* ---- Semantic text ---- */
  --text-heading:var(--brown);
  --text-body:var(--brown);
  --text-muted:var(--brown-60);
  --text-on-image:var(--white);
  --text-accent:var(--gold-deep);

  /* ---- Lines ---- */
  --line-hairline:var(--taupe);      /* dividers, borders, disabled */
  --line-accent:var(--gold);         /* rules, active nav, CTA hairline */
  --line-width:1px;

  /* ---- Interactive ---- */
  --link:var(--brown);
  --link-hover:var(--gold-deep);
  --link-on-image:var(--white);
  --focus-ring:var(--gold);
  --disabled:var(--taupe);
}

/* typography */
:root{
  /* ---- Families — two faces, no third ---- */
  --font-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --font-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* ---- Weights — Cormorant is never bold ---- */
  --weight-light:300;
  --weight-regular:400;

  /* ---- Roles: desktop -> mobile via clamp (375px .. 1440px) ---- */
  --type-wordmark:clamp(44px,calc(3.4vw + 31px),88px); /* @kind font */
  --type-section:clamp(32px,calc(1.9vw + 25px),56px); /* @kind font */
  --type-editorial:clamp(26px,calc(1.1vw + 22px),40px); /* @kind font */
  --type-quote:clamp(18px,calc(.38vw + 17px),22px); /* @kind font */
  --type-body:16px;
  --type-nav:12px;
  --type-micro:11px;
  --type-link:12px;

  /* ---- Tracking ---- */
  --track-wordmark:.18em;
  --track-wordmark-open:.32em;  /* hero load animation start */
  --track-section:.06em;
  --track-editorial:.02em;
  --track-body:.01em;
  --track-nav:.14em;
  --track-micro:.16em;
  --track-link:.16em;

  /* ---- Line heights ---- */
  --leading-display:1.15;
  --leading-quote:1.45;
  --leading-body:1.7;
  --leading-ui:1.2;

  /* ---- Underline geometry for text links ---- */
  --underline-offset:6px;
  --underline-width:1px;
}

/* spacing */
:root{
  /* 8px base rhythm */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-9:72px;
  --space-10:80px;
  --space-12:96px;
  --space-15:120px;
  --space-20:160px;

  /* Section rhythm */
  --section-pad-y:var(--space-20);        /* desktop */
  --section-pad-y-mobile:var(--space-9);  /* 72px */

  /* Gutters */
  --gutter:64px;
  --gutter-mobile:20px;

  /* Measure — body copy never runs full width */
  --measure:62ch;
}
@media (max-width:900px){
  :root{ --section-pad-y:var(--space-9); --gutter:var(--gutter-mobile); }
}

/* layout */
:root{
  --content-max:1440px;
  --grid-columns:12; /* @kind other */

  /* Zero radius throughout. No shadows. No cards. */
  --radius:0;
  --shadow:none;

  --header-height:88px;
  --hero-height:100svh; /* @kind spacing */

  /* Ratios */
  --ratio-portrait:3 / 4; /* @kind other */
  --ratio-band:16 / 9; /* @kind other */
  --ratio-square:1 / 1; /* @kind other */

  /* Focus */
  --focus-width:2px;
  --focus-offset:3px;
}

/* motion */
:root{
  --ease:cubic-bezier(0.22,1,0.36,1); /* @kind other */

  --dur-hover:300ms; /* @kind other */
  --dur-header:400ms; /* @kind other */
  --dur-image-hover:700ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */
  --dur-wipe:1100ms; /* @kind other */
  --dur-wordmark:1600ms; /* @kind other */
  --dur-hero:2000ms; /* @kind other */

  --stagger:80ms; /* @kind other */
  --reveal-offset:24px; /* @kind other */
  --hero-scale-from:1.06; /* @kind other */
  --wipe-scale-from:1.08; /* @kind other */
  --image-hover-scale:1.02; /* @kind other */
  --parallax-rate:.92; /* @kind other */
  --parallax-max:40px; /* @kind other */
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:var(--track-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-light);line-height:var(--leading-display);color:var(--text-heading);margin:0}
p{margin:0;max-width:var(--measure);text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
button,input{font:inherit;letter-spacing:inherit;color:inherit;border-radius:var(--radius)}
::selection{background:var(--taupe);color:var(--brown)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* interaction states (from style-hover / style-focus) */
.f-54rcc8:focus-visible{left:16px !important}
@media (hover:hover){.h-tnn37r:hover{border-bottom-color:#000000 !important;color:#000000 !important}}
@media (hover:hover){.h-kd5msf:hover{opacity:.6 !important}}
@media (hover:hover){.h-pmvqnh:hover{background:#F5F5F5 !important;border-color:#000000 !important;color:#000000 !important}}
@media (hover:hover){.h-1ti6txr:hover{border-color:#000000 !important}}
@media (hover:hover){.h-j22k21:hover{background:#FFFFFF !important}}
@media (hover:hover){.h-8n58g2:hover{text-decoration:underline !important;text-decoration-thickness:1px !important}}
@media (hover:hover){.h-1ifokan:hover{text-decoration:underline !important;text-underline-offset:5px !important}}
@media (hover:hover){.h-c88vqc:hover{color:#000000 !important}}
@media (hover:hover){.h-1qtp1kh:hover{background:#333333 !important;color:#FFFFFF !important}}
.f-1e10fqi:focus-visible{border-color:#000000 !important;box-shadow:inset 0 0 0 1px #000000 !important}
@media (hover:hover){.h-lis2ay:hover{background:#333333 !important;border-color:#333333 !important}}
.f-1ibxzcp:focus-visible{outline:2px solid #000000 !important;outline-offset:3px !important}
@media (hover:hover){.h-1yvitls:hover{text-decoration:underline !important;text-underline-offset:6px !important}}
@media (hover:hover){.h-x74wwq:hover{background:#E0E0E0 !important;color:#000000 !important}}
@media (hover:hover){.h-6uj5r:hover{background:#000000 !important;color:#FFFFFF !important}}