/* ==========================================================================
   base.css — Foundation layer
   --------------------------------------------------------------------------
   Role: design tokens, low-specificity defaults and shared utilities consumed
   by every page template. No content lives here — the JS renderer injects
   all text into the classes defined in layout / components / home / pages.
   --------------------------------------------------------------------------
   Key classes:
     Utilities : .gold-text .kicker .serif .section-pad .lead-lux .gold-rule
                 .bg-ink .bg-charcoal .bg-charcoal-2 .eyebrow-list
   ========================================================================== */

/* Locally hosted, subsetted font files keep typography stable and avoid a
   render-blocking third-party request. Latin-ext includes the Indian rupee. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-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: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-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: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-italic-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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-italic-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;
}

:root {
  /* ---- Palette --------------------------------------------------------- */
  --charcoal:      #faf6ef;   /* page background — warm paper (light theme) */
  --charcoal-2:    #ffffff;   /* raised surfaces — cards                  */
  --charcoal-3:    #f1e9da;   /* inputs / subtle fills                    */
  --ink:           #2a0603;   /* deep crimson — header/footer stay dark   */
  --gold:          #c9a24b;   /* primary accent                           */
  --gold-light:    #e6cf8b;   /* accent highlight                         */
  --gold-dark:     #9c7a2f;   /* accent shadow / text on light bg         */
  --cream:         #2f2317;   /* primary text — dark coffee               */
  --cream-dim:     #5a4c3d;   /* secondary text                           */
  --muted:         #8d7d68;   /* muted text                               */
  --muted-dark:    #6f6252;
  --line:          rgba(201, 162, 75, .35);   /* gold hairlines */
  --line-soft:     rgba(47, 35, 23, .12);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* AT&T-inspired single-family system: one clean sans face, with hierarchy
     created through regular, medium, bold and black-style weight aliases. */
  --font-serif: var(--font-sans);
  --font-regular: var(--font-sans);
  --font-medium: var(--font-sans);
  --font-bold: var(--font-sans);
  --font-black: var(--font-sans);

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm:   .5rem;
  --radius:      1rem;
  --radius-lg:   1.5rem;
  --radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm:   0 2px 10px rgba(0, 0, 0, .35);
  --shadow:      0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg:   0 24px 64px rgba(0, 0, 0, .55);
  --shadow-gold: 0 10px 30px rgba(201, 162, 75, .28);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --speed: .3s;
}

/* ---- Minimal reset (Bootstrap handles most; these are brand defaults) -- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--charcoal);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

h1, h2, h3, h4 {
  font-family: var(--font-black);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: -.02em;
  text-wrap: balance;
}

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
}

p {
  margin-bottom: 1rem;
  text-wrap: pretty;
}

a {
  color: var(--gold-light);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
a:hover { color: var(--gold); }

/* ---- Text selection ---------------------------------------------------- */
::selection {
  background: var(--gold);
  color: var(--ink);
}
::-moz-selection {
  background: var(--gold);
  color: var(--ink);
}

/* ---- Scrollbar (webkit + firefox) -------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-dark), var(--gold));
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
* { scrollbar-width: thin; scrollbar-color: var(--gold-dark) var(--ink); }

/* ---- Keyboard focus ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Gold gradient display text */
.gold-text {
  background: linear-gradient(105deg, var(--gold-light) 10%, var(--gold) 45%, var(--gold-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Small gold eyebrow label above headings */
.kicker {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.kicker::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: .55rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.kicker--center::after { margin-left: auto; margin-right: auto; }

/* Force serif / sans regardless of element */
.serif { font-family: var(--font-serif) !important; }
.sans  { font-family: var(--font-sans) !important; }
.font-regular { font-family: var(--font-regular) !important; font-weight: 400; }
.font-medium  { font-family: var(--font-medium) !important; font-weight: 500; }
.font-bold    { font-family: var(--font-bold) !important; font-weight: 700; }
.font-black   { font-family: var(--font-black) !important; font-weight: 700; }

/* Generous vertical rhythm for page sections */
.section-pad { padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.section-pad-sm { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Editorial lead paragraph */
.lead-lux {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--cream-dim);
  font-weight: 300;
  line-height: 1.8;
}

/* Thin gold divider */
.gold-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--gold) 50%, var(--line) 80%, transparent);
  margin: 2.5rem auto;
  max-width: 60rem;
  opacity: 1;
}

/* Solid background helpers */
.bg-ink       { background-color: var(--ink) !important; }
.bg-charcoal  { background-color: var(--charcoal) !important; }
.bg-charcoal-2{ background-color: var(--charcoal-2) !important; }

/* Muted body copy */
.text-lux-muted { color: var(--muted) !important; }

/* Image that fills its frame */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gold-framed media (story images, gallery) */
.frame-gold {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .6rem;
  background: var(--charcoal-2);
  box-shadow: var(--shadow);
}
.frame-gold img { border-radius: calc(var(--radius-lg) - .6rem); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}