.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
 * ============================================================
 *  TRILOK PRAKASH SONI — ATELIER BHILWARA
 *  Global Stylesheet for WordPress + Elementor
 * ============================================================
 *
 *  HOW TO USE:
 *  Paste this entire file into one of these locations:
 *
 *  Option A (quickest):
 *    WordPress Admin → Appearance → Customise → Additional CSS
 *
 *  Option B (recommended for production):
 *    Elementor → Site Settings → Custom CSS
 *
 *  Option C (cleanest long-term):
 *    Add as an enqueued stylesheet in your child theme's
 *    functions.php via wp_enqueue_style()
 *
 *  FONTS:
 *  Add these two lines to Elementor → Site Settings → Custom Fonts
 *  OR paste the @import below into the top of your Additional CSS.
 *  For best performance, load fonts via the theme's functions.php.
 *
 * ============================================================
 */

/* ── FONT IMPORT (remove if loading fonts via theme functions.php) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500&display=swap');


/* ============================================================
   1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

  /* Colour palette */
  --color-cream:      #FAF6F0;
  --color-charcoal:   #1F1B16;
  --color-gold:       #B89150;
  --color-indigo:     #1A2E4A;
  --color-mid:        #7A7166;
  --color-ink-light:  #3D3830;
  --color-rule:       #E5DDD3;
  --color-rule-dark:  rgba(31, 27, 22, 0.12);
  --color-white:      #FFFFFF;

  /* Typography */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;

  /* Font sizes */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1.0625rem;  /* 17px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout widths */
  --max-prose:  680px;
  --max-wide:   960px;
  --max-layout: 1200px;

  /* Motion */
  --ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;

  /* Border radius — none by default (sharp, premium) */
  --radius: 0px;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}


/* ============================================================
   3. TYPOGRAPHY — GLOBAL DEFAULTS
   Override Elementor's defaults without breaking the builder.
   ============================================================ */

/* Headings — display serif */
h1, h2, h3, h4,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
}

h1, .h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2, .h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3, .h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-3xl)); }
h4, .h4 { font-size: clamp(var(--text-lg),  2vw,   var(--text-2xl)); }

/* Body copy */
p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-charcoal);
}

/* Italics — renders in display serif for Sanskrit/Hindi terms */
em, i {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05em;
}

/* Labels and UI micro-text */
.label,
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Display quote / deck */
.deck,
.article-deck {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-ink-light);
}

/* Opening / lead paragraph */
.opening-para,
.article-body > p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-charcoal);
}


/* ============================================================
   4. LAYOUT CONTAINERS
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-layout);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container--prose {
  max-width: var(--max-prose);
}

.container--wide {
  max-width: var(--max-wide);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}


/* ============================================================
   5. GLOBAL SITE HEADER / NAV
   ============================================================ */

.site-header,
#masthead,
.atelier-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-cream);
  border-bottom: 1px solid rgba(31, 27, 22, 0.08);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Scrolled state — JS adds this class */
.atelier-nav.scrolled {
  box-shadow: 0 2px 20px rgba(31, 27, 22, 0.06);
}

/* Push page content below fixed header — all pages */
body { padding-top: 72px; }

@media (max-width: 900px) {
  body { padding-top: 60px; }
}

.site-header__inner,
.atelier-nav__inner {
  max-width: var(--max-layout);
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

@media (max-width: 900px) {
  .atelier-nav__inner { padding: 0 var(--space-4); height: 60px; }
}

/* Logo wordmark */
.site-logo,
.atelier-nav__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Primary logo name — lowercase Cormorant Garamond */
.atelier-nav__logo-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
  text-transform: lowercase;
  transition: color 0.5s ease;
}

/* Sub-line — italic atelier · bhilwara */
.atelier-nav__logo-sub {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(31, 27, 22, 0.38);
  transition: color 0.5s ease;
}

/* Nav links */
.nav-links,
.atelier-nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.atelier-nav__links li a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.625rem; /* 10 px */
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  text-decoration: none;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Gold underline grows left → right on hover and active page */
.atelier-nav__links li a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.4s var(--ease-premium);
}

.atelier-nav__links li a:hover::after,
.atelier-nav__links li.current-menu-item > a::after,
.atelier-nav__links li.current_page_item > a::after {
  width: 100%;
}

/* Hamburger colours on transparent header */
/* Nav CTA button */
.nav-cta,
.atelier-nav__cta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  border: 1px solid var(--color-charcoal);
  padding: 0.45rem 1.25rem;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.nav-cta:hover,
.atelier-nav__cta:hover {
  background: var(--color-charcoal);
  color: var(--color-cream);
}

@media (max-width: 900px) {
  .nav-links,
  .atelier-nav__links {
    display: none;
  }

  /* Show hamburger as flex (not block — it uses flex for the spans) */
  .atelier-nav__hamburger {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  .site-header__inner,
  .atelier-nav__inner {
    padding: 0 var(--space-4);
  }
}


/* ============================================================
   6. GLOBAL BUTTONS & CTAs
   ============================================================ */

/* Primary button */
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2.25rem;
  background: var(--color-charcoal);
  color: var(--color-cream) !important;
  border: 1px solid var(--color-charcoal);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  cursor: pointer;
}

.btn:hover,
.btn-primary:hover {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: var(--color-cream) !important;
}

/* Ghost / secondary button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2.25rem;
  background: transparent;
  color: var(--color-charcoal);
  border: 1px solid var(--color-charcoal);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  cursor: pointer;
}

.btn-ghost:hover {
  background: var(--color-charcoal);
  color: var(--color-cream);
}

/* Ghost button on dark backgrounds */
.section--dark .btn-ghost,
.section--indigo .btn-ghost {
  color: var(--color-cream) !important;
  border-color: rgba(250, 246, 240, 0.5);
}
.section--dark .btn-ghost:hover,
.section--indigo .btn-ghost:hover {
  background: rgba(250, 246, 240, 0.12);
  border-color: var(--color-cream);
  color: var(--color-cream) !important;
}

/* WhatsApp CTA button — same structure as btn-ghost, brand-neutral */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2.25rem;
  background: transparent;
  color: var(--color-charcoal) !important;
  border: 1px solid var(--color-charcoal);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  cursor: pointer;
}
.btn-whatsapp:hover {
  background: var(--color-charcoal);
  color: var(--color-cream) !important;
}
.section--dark .btn-whatsapp,
.section--indigo .btn-whatsapp {
  color: var(--color-cream) !important;
  border-color: rgba(250, 246, 240, 0.5);
}
.section--dark .btn-whatsapp:hover,
.section--indigo .btn-whatsapp:hover {
  background: rgba(250, 246, 240, 0.12);
  border-color: var(--color-cream);
  color: var(--color-cream) !important;
}

/* Gold accent button */
.btn-gold {
  background: var(--color-gold);
  color: var(--color-cream);
  border-color: var(--color-gold);
}

.btn-gold:hover {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: var(--color-cream);
}

/* Text arrow link — used throughout articles and pages */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  transition: color var(--duration-fast) ease;
}

.arrow-link::after {
  content: '→';
  transition: transform var(--duration-fast) ease;
}

.arrow-link:hover {
  color: var(--color-gold);
}

.arrow-link:hover::after {
  transform: translateX(5px);
}


/* ============================================================
   7. CREDENTIAL STRIP
   Below hero on homepage and on relevant pages
   ============================================================ */

.credential-strip {
  background: var(--color-cream);
  border-top: 1px solid rgba(31, 27, 22, 0.1);
  border-bottom: 1px solid rgba(31, 27, 22, 0.1);
  padding: 16px 0;
  overflow: hidden;
}

.credential-strip__inner {
  max-width: var(--max-layout);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.credential-strip__item {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.5);
  white-space: nowrap;
}

.credential-strip__sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--color-rule);
  margin: 0 var(--space-4);
  vertical-align: middle;
}

/* Scrolling marquee on mobile */
@media (max-width: 768px) {
  .credential-strip {
    padding: var(--space-3) 0;
  }

  .credential-strip__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    animation: marquee 28s linear infinite;
    width: max-content;
  }

  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}


/* ============================================================
   8. HERO SECTION
   ============================================================ */

.site-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: var(--color-charcoal);
  overflow: hidden;
}


.site-hero__media {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.site-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-layout);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6);
  width: 100%;
}

.site-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.5);
  margin-bottom: var(--space-4);
}

.site-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  margin-bottom: var(--space-6);
  max-width: 700px;
}

.site-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: rgba(250, 246, 240, 0.7);
  max-width: 480px;
  margin-bottom: var(--space-10);
}

.site-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .site-hero {
    min-height: 100vh;
  }

  .site-hero__content {
    padding: var(--space-16) var(--space-4);
  }
}


/* ============================================================
   9. SECTION SPACING — global section rhythm
   ============================================================ */

.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.section--sm {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.section--dark {
  background: var(--color-charcoal);
  color: var(--color-cream);
}

.section--indigo {
  background: var(--color-indigo);
  color: var(--color-cream);
}

/* The global p { color: var(--color-charcoal) } rule overrides CSS inheritance.
   These rules re-establish light text inside dark and indigo sections.
   !important needed because WordPress/Elementor theme CSS wins on specificity. */
.section--dark p,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark li,
.section--dark span:not(.section-eyebrow) {
  color: var(--color-cream) !important;
}

.section--indigo p,
.section--indigo h1,
.section--indigo h2,
.section--indigo h3,
.section--indigo li,
.section--indigo span:not(.section-eyebrow) {
  color: var(--color-cream) !important;
}

/* Inline links inside dark/indigo sections — WordPress/Elementor theme CSS
   can override a { color: inherit }, so set explicitly. */
.section--dark a:not(.btn):not(.btn-gold):not(.sticky-mobile-cta__btn),
.section--indigo a:not(.btn):not(.btn-gold):not(.sticky-mobile-cta__btn) {
  color: var(--color-cream) !important;
  border-bottom: 1px solid rgba(250, 246, 240, 0.3);
}
.section--dark a:not(.btn):not(.btn-gold):not(.sticky-mobile-cta__btn):hover,
.section--indigo a:not(.btn):not(.btn-gold):not(.sticky-mobile-cta__btn):hover {
  border-bottom-color: rgba(250, 246, 240, 0.7);
}

/* Source-block and record table on dark backgrounds */
.section--dark .source-block,
.section--indigo .source-block {
  background: rgba(250, 246, 240, 0.05);
}
.section--dark .source-block .source-block__quote,
.section--indigo .source-block .source-block__quote {
  color: rgba(250, 246, 240, 0.92);
}
.section--dark .source-block .source-block__cite,
.section--indigo .source-block .source-block__cite {
  color: rgba(250, 246, 240, 0.5);
}

/* Record tables on dark backgrounds */
.section--dark table thead th,
.section--indigo table thead th {
  color: rgba(250, 246, 240, 0.45);
  border-bottom-color: rgba(250, 246, 240, 0.1);
}
.section--dark table tbody td,
.section--indigo table tbody td {
  color: rgba(250, 246, 240, 0.82);
  border-bottom-color: rgba(250, 246, 240, 0.08);
}
.section--dark table tbody tr:last-child td,
.section--indigo table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section--lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}


/* ============================================================
   10. SECTION HEADINGS — reusable heading pattern
   ============================================================ */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--centre,
.section-header--center {
  text-align: center;
}

.section-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
}

.section--dark .section-title,
.section--indigo .section-title {
  color: var(--color-cream);
}

.section-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-mid);
  max-width: 540px;
}

.section-header--centre .section-sub {
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   11. ARTWORK CARDS — collection grid
   ============================================================ */

.artwork-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.artwork-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.artwork-card {
  display: flex;
  flex-direction: column;
}

.artwork-card__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-rule);
  margin-bottom: var(--space-4);
}

.artwork-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.artwork-card:hover .artwork-card__image {
  transform: scale(1.02);
}

.artwork-card__category {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.artwork-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.artwork-card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-mid);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.artwork-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.artwork-card__cta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.artwork-card__cta:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

@media (max-width: 900px) {
  .artwork-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 540px) {
  .artwork-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   12. STAT ROW — numbers that carry authority
   ============================================================ */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.stat-row--4col {
  grid-template-columns: repeat(4, 1fr);
}

.stat-row__item {
  background: var(--color-cream);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}

.section--dark .stat-row__item,
.section--indigo .stat-row__item {
  background: transparent;
}

.stat-row__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.stat-row__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .stat-row,
  .stat-row--4col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   13. COMMISSION CTA CARD — appears after content sections
   ============================================================ */

.commission-cta {
  background: var(--color-indigo);
  padding: var(--space-24) var(--space-6);
  text-align: center;
}

.commission-cta__inner {
  max-width: 520px;
  margin: 0 auto;
}

.commission-cta__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.4);
  margin-bottom: var(--space-4);
}

.commission-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-cream);
  margin-bottom: var(--space-4);
}

.commission-cta__body {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(250, 246, 240, 0.65);
  margin-bottom: var(--space-8);
}

.commission-cta__btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-indigo);
  background: var(--color-cream);
  padding: 0.9rem 2.5rem;
  border: none;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  cursor: pointer;
}

.commission-cta__btn:hover {
  background: var(--color-gold);
  color: var(--color-cream);
}

.commission-cta__secondary-link {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.4);
  transition: color var(--duration-fast) ease;
}

.commission-cta__secondary-link:hover {
  color: rgba(250, 246, 240, 0.8);
}

@media (max-width: 768px) {
  .commission-cta {
    padding: var(--space-16) var(--space-4);
  }
}


/* ============================================================
   14. PRESS STRIP — above footer
   ============================================================ */

.press-strip {
  padding: var(--space-10) var(--space-6);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  text-align: center;
}

.press-strip__label {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.35);
  margin-bottom: var(--space-3);
}

.press-strip__names {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(31, 27, 22, 0.45);
  line-height: 2;
}

.press-strip__names span {
  margin: 0 var(--space-4);
}

.press-strip__names .sep {
  color: var(--color-rule);
  margin: 0 var(--space-3);
}

/* Press strip on dark backgrounds */
.section--dark .press-strip,
.section--indigo .press-strip {
  border-top-color: rgba(250, 246, 240, 0.1);
  border-bottom-color: rgba(250, 246, 240, 0.1);
}
.section--dark .press-strip__label,
.section--indigo .press-strip__label {
  color: rgba(250, 246, 240, 0.4);
}
.section--dark .press-strip__names,
.section--indigo .press-strip__names {
  color: rgba(250, 246, 240, 0.82);
}
.section--dark .press-strip__names .sep,
.section--indigo .press-strip__names .sep {
  color: rgba(250, 246, 240, 0.2);
}

@media (max-width: 768px) {
  .press-strip__names span {
    display: block;
    margin: 0;
  }

  .press-strip__names .sep {
    display: none;
  }
}


/* ============================================================
   15. NEWSLETTER BLOCK
   ============================================================ */

.newsletter-block {
  background: var(--color-indigo);
  padding: var(--space-20) var(--space-6);
  text-align: center;
}

.newsletter-block__inner {
  max-width: 440px;
  margin: 0 auto;
}

.newsletter-block__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: var(--space-3);
}

.newsletter-block__sub {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(250, 246, 240, 0.6);
  margin-bottom: var(--space-8);
}

.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 400px;
  margin: 0 auto;
}

.newsletter-form input[type="email"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: none;
  color: var(--color-cream);
  padding: 0.85rem var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast) ease;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(250, 246, 240, 0.35);
}

.newsletter-form input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.newsletter-form button[type="submit"] {
  background: var(--color-gold);
  color: var(--color-charcoal);
  border: 1px solid var(--color-gold);
  padding: 0.85rem var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  white-space: nowrap;
}

.newsletter-form button[type="submit"]:hover {
  background: var(--color-cream);
}

@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input[type="email"] {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
}


/* ============================================================
   16. SITE FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: var(--space-24) var(--space-6) var(--space-10);
}

.site-footer__inner {
  max-width: var(--max-layout);
  margin: 0 auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.site-footer__col-heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.35);
  margin-bottom: var(--space-6);
}

.site-footer__links li {
  margin-bottom: var(--space-2);
}

.site-footer__links a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.6);
  line-height: 1.6;
  transition: color var(--duration-fast) ease;
}

.site-footer__links a:hover {
  color: var(--color-cream);
}

/* Footer credential block */
.site-footer__credential {
  text-align: center;
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(250, 246, 240, 0.08);
  border-bottom: 1px solid rgba(250, 246, 240, 0.08);
  margin-bottom: var(--space-8);
}

.site-footer__credential-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(250, 246, 240, 0.85);
  margin-bottom: var(--space-2);
}

.site-footer__credential-text {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 240, 0.35);
  line-height: 1.8;
}

/* Footer bottom strip */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 300;
  color: rgba(250, 246, 240, 0.25);
  letter-spacing: 0.06em;
}

.site-footer__social {
  display: flex;
  gap: var(--space-6);
}

.site-footer__social a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.35);
  transition: color var(--duration-fast) ease;
}

.site-footer__social a:hover {
  color: var(--color-cream);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 540px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* Extra padding so sticky bar doesn't cover footer content */
  .site-footer {
    padding-bottom: calc(var(--space-10) + 64px);
  }
}


/* ============================================================
   17. MOBILE STICKY CTA BAR
   ============================================================ */

.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-charcoal);
  border-top: 1px solid rgba(250, 246, 240, 0.1);
  padding: 12px 16px;
  gap: 0;
}

.sticky-mobile-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem var(--space-4);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  text-align: center;
}

.sticky-mobile-cta__btn--primary {
  background: var(--color-gold);
  color: var(--color-cream);
}

.sticky-mobile-cta__btn--primary:hover {
  background: var(--color-gold);
  color: var(--color-cream);
}

.sticky-mobile-cta__btn--secondary {
  background: transparent;
  color: var(--color-cream) !important;
  border: 1px solid rgba(250, 246, 240, 0.2);
  font-size: 14px;
}

@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: flex;
  }
}

/* Direct overrides — fixed elements sit outside Elementor's DOM so
   .elementor-location-footer .elementor-kit-6s don't reach them */
.sticky-mobile-cta .sticky-mobile-cta__btn--primary {
  background: #B89150 !important;
  color: #FAF6F0 !important;
}

.sticky-mobile-cta .sticky-mobile-cta__btn--secondary {
  color: #FAF6F0 !important;
  background: transparent !important;
}


/* ============================================================
   18. WHATSAPP FLOATING BUTTON — desktop only
   ============================================================ */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 998;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  fill: #FFFFFF;
}

/* Tooltip */
.whatsapp-float::before {
  content: 'WhatsApp the studio';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-charcoal);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease;
}

.whatsapp-float:hover::before {
  opacity: 1;
}

/* Hide on mobile — sticky bar handles this */
@media (max-width: 768px) {
  .whatsapp-float {
    display: none;
  }
}


/* ============================================================
   19. BREADCRUMB
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mid);
  padding: var(--space-6) 0 0;
  max-width: var(--max-prose);
  margin: 0 auto;
}

.breadcrumb a {
  color: var(--color-mid);
  transition: color var(--duration-fast) ease;
}

.breadcrumb a:hover {
  color: var(--color-charcoal);
}

.breadcrumb__sep {
  color: var(--color-rule);
  font-style: normal;
}


/* ============================================================
   20. ARTICLE / JOURNAL POST STYLES
   ============================================================ */

.article-header {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: var(--space-16) var(--space-4) var(--space-8);
  text-align: center;
}

.article-header__category {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.article-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-charcoal);
  margin-bottom: var(--space-6);
}

.article-header__deck {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-ink-light);
  max-width: 560px;
  margin: 0 auto var(--space-6);
}

.article-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
}

.article-header__meta-sep {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-rule);
  vertical-align: middle;
}

/* Article body text */
.article-body {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.article-body p {
  font-size: var(--text-base);
  line-height: 1.82;
  color: var(--color-charcoal);
  margin-bottom: 1.6em;
}

.article-body p.opening {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 2em;
}

.article-body a {
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.article-body a:hover {
  color: var(--color-gold);
}

/* Article H2 — section headers with gold rule */
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gold);
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

/* Article horizontal rule */
.article-body hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-10) 0;
}

/* Source block / formal blockquote with gold left border */
.source-block {
  margin: var(--space-10) 0;
  padding: var(--space-6) var(--space-6);
  border-left: 2px solid var(--color-gold);
  background: rgba(184, 145, 80, 0.04);
}

.source-block__quote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.source-block__cite {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
}

/* Press photo — used on press/recognition pages next to credential blocks */
.press-photo {
  margin: 32px 0;
}
.press-photo-img {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
}
.press-photo-caption {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: rgba(31, 27, 22, 0.5);
  margin-top: 10px;
}

/* Pull quote */
.pull-quote {
  text-align: center;
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin: var(--space-10) 0;
}

.pull-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.pull-quote__attribution {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid);
}

/* Credential pull — featured press quote with charcoal left border */
.credential-pull {
  border-left: 3px solid var(--color-charcoal);
  background: var(--color-cream);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-10) 0;
}
.credential-pull p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}
.credential-pull span {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
}

/* FAQ items — h3 question + p answer, always visible, no accordion */
.page-faq-item {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-6) 0;
}
.page-faq-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}
.page-faq-item p {
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--color-charcoal);
  margin: 0;
}
.page-faq-item p a {
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-gold);
}
.page-faq-item p a:hover {
  color: var(--color-gold);
}

/* Closing statement line */
.closing-line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  text-align: center;
  line-height: 1.55;
  color: var(--color-ink-light);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin: var(--space-10) 0;
}


/* ============================================================
   21. ARTICLE TAGS
   ============================================================ */

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.article-tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  border: 1px solid var(--color-rule);
  padding: 0.3rem 0.7rem;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.article-tag:hover {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}


/* ============================================================
   22. ARTICLE INTERNAL CTAs
   ============================================================ */

.article-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}


/* ============================================================
   23. AUTHOR BIO BLOCK
   ============================================================ */

.author-bio {
  max-width: var(--max-prose);
  margin: var(--space-16) auto;
  padding: var(--space-8) var(--space-4);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.author-bio__portrait {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: var(--color-rule);
}

.author-bio__portrait-placeholder {
  width: 80px;
  height: 80px;
  background: #D9D2C8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--color-mid);
}

.author-bio__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.author-bio__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.author-bio__text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-ink-light);
  margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
  .author-bio {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   24. RELATED POSTS GRID — end of journal articles
   ============================================================ */

.related-posts {
  max-width: var(--max-wide);
  margin: 0 auto var(--space-24);
  padding: 0 var(--space-4);
}

.related-posts__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.related-post__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-post__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #D9D2C8;
  margin-bottom: var(--space-4);
  transition: opacity var(--duration-base) ease;
}

.related-post__link:hover .related-post__image {
  opacity: 0.88;
}

.related-post__category {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.related-post__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) ease;
}

.related-post__link:hover .related-post__title {
  color: var(--color-gold);
}

.related-post__excerpt {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-mid);
}

@media (max-width: 768px) {
  .related-posts__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}


/* ============================================================
   25. LINEAGE / ABOUT PAGE SPECIFICS
   ============================================================ */

.lineage-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  max-width: var(--max-layout);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.lineage-section--reversed {
  direction: rtl;
}

.lineage-section--reversed > * {
  direction: ltr;
}

.lineage-section__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-rule);
}

.lineage-section__text {
  padding-top: var(--space-8);
}

.lineage-section__text p {
  font-size: var(--text-base);
  line-height: 1.82;
  color: var(--color-charcoal);
  margin-bottom: 1.5em;
}

@media (max-width: 768px) {
  .lineage-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 0 var(--space-4);
  }
}


/* ============================================================
   26. PROCESS PAGE — 8 stages
   ============================================================ */

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-rule);
}

.process-step__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1;
  color: var(--color-rule);
  text-align: right;
  padding-top: 4px;
}

.process-step__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.process-step__body {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-ink-light);
}

.process-step__image {
  grid-column: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-rule);
  margin-top: var(--space-6);
}

@media (max-width: 600px) {
  .process-step {
    grid-template-columns: 40px 1fr;
    gap: var(--space-4);
  }

  .process-step__number {
    font-size: var(--text-2xl);
  }
}


/* ============================================================
   27. COMMISSION PAGE — PRICING TABLE
   ============================================================ */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

.pricing-table thead th {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.pricing-table tbody td {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
  line-height: 1.6;
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table__tier {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-charcoal);
}

.pricing-table__price {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
}

@media (max-width: 600px) {
  .pricing-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* ============================================================
   28. FEATURED IMAGE — blog / journal
   ============================================================ */

.featured-image {
  display: block;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-16);
  padding: 0;
}

.featured-image__wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2A2420;
  overflow: hidden;
  position: relative;
}

.featured-image__wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.featured-image figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-mid);
  text-align: center;
}


/* ============================================================
   29. ENQUIRY LIGHTBOX / MODAL
   ============================================================ */

.enquiry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 22, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease;
}

.enquiry-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.enquiry-modal {
  background: var(--color-cream);
  max-width: 480px;
  width: 100%;
  padding: var(--space-10);
  position: relative;
  transform: translateY(20px);
  transition: transform var(--duration-base) var(--ease-premium);
}

.enquiry-overlay.is-open .enquiry-modal {
  transform: translateY(0);
}

.enquiry-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.enquiry-modal__close:hover {
  color: var(--color-charcoal);
}

.enquiry-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.enquiry-modal__sub {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-mid);
  margin-bottom: var(--space-8);
}


/* ============================================================
   30. FORM ELEMENTS — global input styles
   ============================================================ */

.form-field {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-rule);
  color: var(--color-charcoal);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  padding: 0.75rem var(--space-4);
  outline: none;
  transition: border-color var(--duration-fast) ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-charcoal);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(31, 27, 22, 0.3);
  font-style: italic;
  font-family: var(--font-display);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-submit {
  width: 100%;
  background: var(--color-charcoal);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem;
  border: none;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: background var(--duration-fast) ease;
}

.form-submit:hover {
  background: var(--color-indigo);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231F1B16' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-confirmation {
  padding: var(--space-8);
  border: 1px solid rgba(184, 145, 80, 0.4);
  background: rgba(184, 145, 80, 0.05);
  margin-top: var(--space-8);
}

.form-confirmation h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}

.form-confirmation p {
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.form-confirmation a {
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-gold);
}

.form-confirmation a:hover {
  color: var(--color-gold);
}

/* Override Elementor's default form styles */
.elementor-field-group .elementor-field {
  border: 1px solid var(--color-rule) !important;
  border-radius: 0 !important;
  padding: 0.75rem var(--space-4) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-base) !important;
  background: transparent !important;
  color: var(--color-charcoal) !important;
  transition: border-color var(--duration-fast) ease !important;
}

.elementor-field-group .elementor-field:focus {
  border-color: var(--color-charcoal) !important;
  box-shadow: none !important;
}

.elementor-button {
  border-radius: 0 !important;
}


/* ============================================================
   31. ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.7s var(--ease-premium) both;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease both;
}

/* Stagger helpers */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.35s; }
.animate-delay-4 { animation-delay: 0.5s; }
.animate-delay-5 { animation-delay: 0.65s; }

/* Reveal animation — only activates when scripts.js has run (adds body.js-init).
   Without JS, elements are visible by default. No content is ever hidden
   permanently if the script fails to load. */
body.js-init .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease-premium), transform 0.65s var(--ease-premium);
}

body.js-init .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   32. UTILITY CLASSES
   ============================================================ */

/* Display */
.d-none     { display: none !important; }
.d-block    { display: block !important; }
.d-flex     { display: flex !important; }
.d-grid     { display: grid !important; }

/* Visibility by breakpoint */
.hide-mobile  { display: block; }
.show-mobile  { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

/* Text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Colours */
.text-cream   { color: var(--color-cream); }
.text-gold    { color: var(--color-gold); }
.text-mid     { color: var(--color-mid); }
.text-charcoal { color: var(--color-charcoal); }
.bg-cream     { background-color: var(--color-cream); }
.bg-charcoal  { background-color: var(--color-charcoal); }
.bg-indigo    { background-color: var(--color-indigo); }
.bg-gold      { background-color: var(--color-gold); }

/* Spacing helpers */
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }

/* Gold rule divider */
.rule-gold {
  border: none;
  border-top: 1px solid var(--color-gold);
  margin: var(--space-8) 0;
}

.rule-light {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

/* Max width helpers */
.max-prose  { max-width: var(--max-prose);  margin-left: auto; margin-right: auto; }
.max-wide   { max-width: var(--max-wide);   margin-left: auto; margin-right: auto; }
.max-layout { max-width: var(--max-layout); margin-left: auto; margin-right: auto; }


/* ============================================================
   33. ELEMENTOR-SPECIFIC OVERRIDES
   Strip defaults that conflict with the premium aesthetic.
   ============================================================ */

/* Remove Elementor's default section padding where we handle it ourselves */
.elementor-section > .elementor-container {
  max-width: var(--max-layout);
}

/* Ensure Elementor widget text uses our base styles */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-charcoal);
}

/* Elementor heading widget — apply display serif */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Remove box shadows Elementor sometimes adds */
.elementor-widget-image img {
  box-shadow: none !important;
}

/* Override Elementor default button radius */
.elementor-widget-button .elementor-button {
  border-radius: 0 !important;
}

/* Override Elementor link colour defaults */
.elementor-widget a:not(.elementor-button) {
  color: var(--color-charcoal);
}

/* ── Footer full-viewport-width break-out ───────────────────────────────────
   Problem: the WordPress theme wraps everything (including Elementor's footer
   location) in a centred #page / .site box (~1200 px wide). Setting
   width: 100% only gives 100% of that box, not of the viewport.

   Solution — CSS break-out:
   1. Set the footer location to 100vw (true viewport width).
   2. Shift it left by  calc(50% - 50vw)  which exactly equals the gap
      between the left edge of the centred box and the left edge of the
      viewport. Works for any centred theme wrapper regardless of max-width.
   3. Prevent the horizontal scrollbar this would otherwise cause.
   ─────────────────────────────────────────────────────────────────────────── */

html, body { overflow-x: hidden; }

.elementor-location-footer {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

/* Strip padding/margin from every Elementor layer inside the footer */
.elementor-location-footer .elementor-section-wrap,
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --container-max-width: 100% !important;
}

.elementor-location-footer .elementor-section > .elementor-container,
.elementor-location-footer .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.elementor-location-footer .elementor-widget-container {
  padding: 0 !important;
  width: 100% !important;
}

/* ── Footer: override Elementor text-color cascade ── */
/* Elementor sets color on .elementor-widget-container which outranks inherited color */
.elementor-location-footer .site-footer {
  color: var(--color-cream) !important;
}

.elementor-location-footer .site-footer__brand,
.elementor-location-footer .site-footer__credential-name {
  color: rgba(250, 246, 240, 0.85) !important;
}

.elementor-location-footer .site-footer__col-heading {
  color: rgba(250, 246, 240, 0.35) !important;
}

.elementor-location-footer .site-footer__links a,
.elementor-location-footer .site-footer__contact-list a {
  color: rgba(250, 246, 240, 0.6) !important;
}

.elementor-location-footer .site-footer__studio-desc,
.elementor-location-footer .site-footer__credential-text,
.elementor-location-footer .site-footer__address {
  color: rgba(250, 246, 240, 0.45) !important;
}

.elementor-location-footer .site-footer__bottom {
  color: rgba(250, 246, 240, 0.25) !important;
}

.elementor-location-footer .site-footer__social a,
.elementor-location-footer .site-footer__directions-link {
  color: rgba(250, 246, 240, 0.35) !important;
}

/* ── Header: ensure hamburger hide/show works in Elementor context ── */
.elementor-location-header .atelier-nav__cta {
  display: inline-flex;
}

/* ── Header: Enquire button hover — force cream text colour against Elementor link overrides ── */
.elementor-location-header .atelier-nav__cta:hover,
.elementor-location-header .atelier-nav__cta:focus {
  background: var(--color-charcoal) !important;
  color: var(--color-cream) !important;
}

@media (max-width: 900px) {
  .elementor-location-header .atelier-nav__cta {
    display: none !important;
  }
  .elementor-location-header .atelier-nav__hamburger {
    display: flex !important;
  }
}

/* ============================================================
   34. MOBILE NAV — hamburger + slide-in drawer
   ============================================================ */

/* Hamburger button — 2 bars, hidden on desktop */
.atelier-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.atelier-nav__hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-charcoal);
  transform-origin: center;
  transition:
    background  0.5s ease,
    transform   var(--duration-base) var(--ease-premium),
    opacity     var(--duration-base) ease;
}

/* 2-bar → X animation */
.atelier-nav__hamburger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.atelier-nav__hamburger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Nav right wrapper (kept for backward compat) */
.atelier-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── Drawer overlay ────────────────────────────────────────── */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 22, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1001;
}

.nav-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Slide-in drawer (right side) ─────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 92vw;
  height: 100dvh;
  height: 100vh;
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  padding: 28px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-premium);
  z-index: 1002;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep flex layout even while HTML hidden attr is set */
.nav-drawer[hidden] { display: flex !important; }

.nav-drawer.is-open { transform: translateX(0); }

/* Close button */
.nav-drawer__close {
  align-self: flex-end;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-mid);
  padding: 4px 0;
  margin-bottom: 36px;
  transition: color var(--duration-fast) ease;
}

.nav-drawer__close:hover { color: var(--color-charcoal); }

/* Logo inside drawer */
.nav-drawer__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  gap: 3px;
  margin-bottom: 40px;
}

.nav-drawer__logo-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
  text-transform: lowercase;
}

.nav-drawer__logo-sub {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: rgba(31, 27, 22, 0.38);
}

/* Drawer nav links — large editorial serif */
.nav-drawer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nav-drawer__links li a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-charcoal);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 27, 22, 0.07);
  transition: color var(--duration-fast) ease, padding-left 0.35s var(--ease-premium);
}

.nav-drawer__links li:last-child a { border-bottom: none; }

.nav-drawer__links li a:hover {
  color: var(--color-gold);
  padding-left: 6px;
}

/* WhatsApp link inside drawer */
.nav-drawer__whatsapp {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  text-decoration: none;
  margin-top: 28px;
  margin-bottom: 12px;
  transition: color var(--duration-fast) ease;
}

.nav-drawer__whatsapp:hover { color: var(--color-charcoal); }

/* Credential line at foot of drawer */
.nav-drawer__credential {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.28);
  line-height: 1.9;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 27, 22, 0.07);
  margin-top: auto;
}

/* Footer brand block (Col 1) */
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(250, 246, 240, 0.85);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.site-footer__brand span {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.35);
  margin-top: 3px;
}

.site-footer__studio-desc {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 246, 240, 0.45);
  margin-bottom: var(--space-5);
}

.site-footer__contact-list {
  list-style: none;
}

.site-footer__contact-list li {
  margin-bottom: var(--space-2);
}

.site-footer__contact-list a {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.55);
  transition: color var(--duration-fast) ease;
}

.site-footer__contact-list a:hover {
  color: var(--color-cream);
}

/* Footer sub-brand line — italic "atelier · bhilwara" */
.site-footer__brand-sub {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: rgba(250, 246, 240, 0.25);
  margin-bottom: var(--space-6);
}

/* Footer direct contact links (WhatsApp, email) */
.site-footer__contact-link {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.55);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) ease;
}

.site-footer__contact-link:hover { color: var(--color-cream); }

/* Studio address */
.site-footer__address {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.38);
  line-height: 1.7;
  font-style: normal;
  margin-bottom: var(--space-3);
}

/* "Studio visits by appointment" note */
.site-footer__visits {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.28);
  margin-top: var(--space-2);
}

/* Footer social icon SVGs */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(250, 246, 240, 0.32);
  transition: color var(--duration-fast) ease;
}

.site-footer__social-link:hover { color: rgba(250, 246, 240, 0.75); }

.site-footer__social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Footer legal links — Privacy, Terms */
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-footer__legal a {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.18);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.site-footer__legal a:hover { color: rgba(250, 246, 240, 0.5); }

/* Credential atelier italic line */
.site-footer__credential-atelier {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(250, 246, 240, 0.2);
  margin-top: var(--space-3);
  letter-spacing: 0.06em;
}

.site-footer__address {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 246, 240, 0.45);
  font-style: normal;
}

.site-footer__directions-link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.35);
  transition: color var(--duration-fast) ease;
}

.site-footer__directions-link:hover {
  color: var(--color-cream);
}


/* ============================================================
   31. RECOGNITION ITEMS — artist / lineage page
   ============================================================ */

.recognition-item {
  border-top: 1px solid rgba(31, 27, 22, 0.1);
  padding: var(--space-8) 0;
}

.recognition-tier-1 {
  border-top: 2px solid var(--color-gold);
}

.recognition-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid);
  margin-bottom: var(--space-2);
}

.recognition-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}

.recognition-item p {
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
}


/* ============================================================
   32. CONTACT PAGE — cards, form helpers, address, credential
   ============================================================ */

/* Secondary button (cream bg, charcoal border) */
.btn-secondary {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--color-charcoal);
  color: var(--color-charcoal) !important;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.btn-secondary:hover {
  background: var(--color-charcoal);
  color: var(--color-cream) !important;
}

/* Contact cards grid */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 600px) {
  .contact-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  border-top: 1px solid var(--color-rule-dark);
  padding-top: var(--space-6);
}

.contact-card-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid);
  margin-bottom: var(--space-3);
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}

.contact-card p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
}

.contact-card-note {
  font-size: var(--text-xs);
  color: var(--color-mid);
  line-height: 1.6;
}

/* Form helpers */
.form-hint {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mid);
  margin-top: var(--space-1);
  line-height: 1.5;
}

.form-privacy-note {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mid);
  line-height: 1.6;
  margin-top: var(--space-4);
}

/* Studio address block */
.studio-address-block {
  margin-top: var(--space-8);
}

.studio-address-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2);
}

.studio-address-detail {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  line-height: 1.8;
  margin: 0 0 var(--space-6);
}

.studio-visits-note {
  font-size: var(--text-sm);
  color: var(--color-mid);
  line-height: 1.7;
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-4);
  margin-top: var(--space-6);
}

/* Page credential line */
.page-credential-line {
  border-top: 1px solid var(--color-rule-dark);
  padding-top: var(--space-8);
  margin-top: var(--space-10);
}

.page-credential-line p {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mid);
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.02em;
}


/* ============================================================
   33. PRESS CITATIONS — journal articles
   ============================================================ */

.press-citations {
  border-top: 1px solid rgba(31, 27, 22, 0.1);
  padding-top: 40px;
  margin-top: 48px;
}

.citations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.citations-list li {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: rgba(31, 27, 22, 0.7);
  line-height: 1.6;
  padding-left: 16px;
  border-left: 2px solid var(--color-gold);
}

.citations-list a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 145, 80, 0.3);
}

.citations-list a:hover {
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   34. FAQ PAGE — nav, sections, items, quote spans
   ============================================================ */

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 32px 0 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(31, 27, 22, 0.1);
}

.faq-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.faq-nav a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.faq-section {
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(31, 27, 22, 0.08);
}

.faq-section-heading {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 40px;
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  padding: 28px 0;
  border-top: 1px solid rgba(31, 27, 22, 0.08);
}

.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}

.faq-question {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 14px;
  line-height: 1.35;
}

.faq-answer {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(31, 27, 22, 0.75);
  margin: 0;
  max-width: 680px;
}

.faq-answer a {
  color: var(--color-charcoal);
  border-bottom: 1px solid rgba(31, 27, 22, 0.3);
  text-decoration: none;
}

.faq-answer a:hover {
  border-bottom-color: var(--color-gold);
  color: var(--color-gold);
}

.faq-quote {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(31, 27, 22, 0.65);
  border-left: 2px solid var(--color-gold);
  padding-left: 16px;
  margin: 12px 0 0;
  line-height: 1.6;
}


/* ============================================================
   35. PROCESS PAGE — navigator, pull quotes, materials grid
   ============================================================ */

.process-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: var(--space-8) 0 var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(31, 27, 22, 0.1);
}

.process-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.process-nav a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* Pull quote — centred, between stages */
.process-pull-quote {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

.process-pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-charcoal);
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.process-pull-quote cite {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid);
  font-style: normal;
}

/* Generic process content section — spacing + separator */
.process-section {
  margin: var(--space-16) 0;
  padding-top: var(--space-10);
  border-top: 1px solid rgba(31, 27, 22, 0.08);
}

/* Materials sourcing grid — 3 columns */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(31, 27, 22, 0.1);
  border: 1px solid rgba(31, 27, 22, 0.1);
  margin: var(--space-6) 0;
}

.material-item {
  background: var(--color-cream);
  padding: var(--space-6);
}

.material-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-1);
}

.material-source {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-mid);
  margin: 0;
  line-height: 1.5;
}

.materials-note {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(31, 27, 22, 0.6);
  margin: var(--space-4) 0 0;
}

/* Pigment / material list inside stage body */
.process-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process-list li {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(31, 27, 22, 0.8);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-rule);
}

.process-list li strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05em;
  color: var(--color-charcoal);
}

@media (max-width: 600px) {
  .materials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .materials-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   36. JOURNAL — ARCHIVE & SINGLE POST TEMPLATES
   ============================================================ */

/* Archive: page header */
.journal-header {
  padding: var(--space-16) 0 var(--space-10);
  border-bottom: 1px solid var(--color-rule);
}

.journal-header-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.journal-header-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.journal-header-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-mid);
  margin: 0;
}

/* Archive: featured post */
.journal-featured {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-rule);
}

.journal-featured-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.journal-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.journal-featured-image:hover img {
  transform: scale(1.03);
}

.journal-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
}

.journal-featured-category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.journal-featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

.journal-featured-title a {
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) ease;
}

.journal-featured-title a:hover {
  border-bottom-color: var(--color-gold);
}

.journal-featured-excerpt {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(31, 27, 22, 0.7);
  margin: 0 0 var(--space-6);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journal-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mid);
  letter-spacing: 0.04em;
}

.journal-featured-meta .arrow-link {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

/* Archive: post grid */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-6);
  padding: var(--space-10) 0 var(--space-16);
}

/* Post card — archive grid and related posts */
.journal-card {
  display: flex;
  flex-direction: column;
}

.journal-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-rule);
  margin-bottom: var(--space-4);
}

.journal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.journal-card-image:hover img {
  transform: scale(1.04);
}

.journal-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

.journal-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.journal-card-category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.journal-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 300;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

.journal-card-title a {
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) ease;
}

.journal-card-title a:hover {
  border-bottom-color: var(--color-gold);
}

.journal-card-excerpt {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(31, 27, 22, 0.65);
  margin: 0 0 var(--space-4);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mid);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

.journal-card-footer .arrow-link {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

/* Single post: header */
.post-header {
  max-width: 800px;
  margin: var(--space-16) auto var(--space-10);
  padding: 0 var(--space-6);
  text-align: center;
}

.post-category-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-6);
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-mid);
  margin-bottom: var(--space-6);
}

.post-meta-divider {
  width: 1px;
  height: 12px;
  background: var(--color-rule);
  display: inline-block;
  vertical-align: middle;
}

/* Single post: featured image */
.post-featured-image {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  margin-bottom: var(--space-12);
}

.post-featured-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Single post: body content */
.post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-16);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-charcoal);
}

.post-content p {
  margin-bottom: 1.6em;
}

.post-content h2 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-charcoal);
  margin: var(--space-10) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin: var(--space-8) 0 var(--space-3);
}

.post-content blockquote {
  border-left: 3px solid var(--color-gold);
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
}

.post-content blockquote p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.post-content blockquote cite {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  font-style: normal;
}

.post-content a {
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-gold);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.post-content a:hover {
  color: var(--color-gold);
}

/* Single post: divider between content and related */
.post-divider {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  height: 1px;
  background: var(--color-rule);
}

/* Single post: related posts */
.post-related {
  padding: var(--space-10) 0 var(--space-16);
  border-top: 1px solid var(--color-rule);
}

.post-related-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  color: var(--color-charcoal);
  text-align: center;
  margin-bottom: var(--space-8);
}

/* Responsive: tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .journal-featured {
    grid-template-columns: 1fr 1fr;
  }
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: mobile */
@media (max-width: 768px) {
  .journal-featured {
    grid-template-columns: 1fr;
  }
  .journal-featured-content {
    padding: var(--space-6) 0 0;
  }
  .journal-grid {
    grid-template-columns: 1fr;
  }
  .post-title {
    font-size: 2rem;
  }
  .post-header {
    margin-top: var(--space-10);
  }
  .post-content h2 {
    font-size: 1.75rem;
  }
  .post-content h3 {
    font-size: 1.35rem;
  }
}


/* ============================================================
   37. MINIATURE PAGE — SCHOOLS TABLE, SUBJECTS GRID, RAGAMALA CALLOUT
   ============================================================ */

/* Schools comparison table */
.schools-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-10) 0;
  font-family: var(--font-ui);
}

.schools-table thead th {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(31, 27, 22, 0.45);
  font-weight: 500;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(31, 27, 22, 0.12);
  text-align: left;
}

.schools-table tbody td {
  font-size: 15px;
  color: rgba(31, 27, 22, 0.75);
  padding: 16px;
  border-bottom: 1px solid rgba(31, 27, 22, 0.06);
  vertical-align: top;
  line-height: 1.5;
}

.schools-table tbody td:first-child {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-charcoal);
  font-weight: 400;
  white-space: nowrap;
}

.schools-table tbody tr:hover td {
  background: rgba(184, 145, 80, 0.03);
}

@media (max-width: 768px) {
  .schools-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Subjects and themes grid */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: var(--space-10) 0;
  border: 1px solid rgba(31, 27, 22, 0.08);
}

.subject-card {
  padding: 28px 24px;
  border: 1px solid rgba(31, 27, 22, 0.08);
  transition: background 0.3s ease;
}

.subject-card:hover {
  background: rgba(184, 145, 80, 0.04);
}

.subject-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0 0 10px;
  line-height: 1.2;
}

.subject-desc {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(31, 27, 22, 0.6);
  margin: 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .subjects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .subjects-grid {
    grid-template-columns: 1fr;
  }
}

/* Ragamala series callout */
.ragamala-callout {
  background: var(--color-indigo);
  padding: 56px 48px;
  margin: var(--space-14) 0;
}

.ragamala-callout-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 16px;
}

.ragamala-callout-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  color: var(--color-cream);
  margin: 0 0 20px;
  line-height: 1.1;
}

.ragamala-callout-body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(250, 246, 240, 0.7);
  margin: 0 0 28px;
  max-width: 520px;
}

@media (max-width: 768px) {
  .ragamala-callout {
    padding: 40px 24px;
  }
  .ragamala-callout-title {
    font-size: 32px;
  }
}


/* ============================================================
   END OF GLOBAL CSS
   ============================================================ *//* End custom CSS */