/* ==========================================================================
   THE BANSARA ROYALE  —  base.css
   --------------------------------------------------------------------------
   Design tokens, CSS reset, typography, layout primitives and utilities.
   This file must be loaded FIRST. Everything else depends on the custom
   properties declared in the :root block below.

   Table of contents
   -----------------
   1.  Design tokens (:root)
   2.  Modern reset
   3.  Base element styling
   4.  Typography scale
   5.  Layout primitives (container / grid / stack)
   6.  Section rhythm + alternating themes
   7.  Section heading block (eyebrow / index / title / rule)
   8.  Scroll-reveal animation states
   9.  Accessibility + utility helpers
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

    /* ---------- Brand colours -------------------------------------------
       #031C2A  Deep midnight teal   — primary brand colour
       #D57938  Burnished copper     — accent brand colour
       Everything else is a supporting tint derived from these two.        */

    --c-navy:            #031C2A;
    --c-navy-900:        #02141E;
    --c-navy-800:        #062736;
    --c-navy-700:        #0C3346;
    --c-navy-600:        #17475C;

    --c-copper:          #D57938;
    --c-copper-600:      #B9632A;
    --c-copper-300:      #E9A468;
    --c-copper-100:      #F5DCC3;

    /* ---------- Neutrals ------------------------------------------------ */

    --c-ivory:           #F6F1E9;   /* light section background            */
    --c-ivory-soft:      #FCFAF6;   /* cards on light sections             */
    --c-sand:            #E4DACA;   /* hairlines on light sections         */
    --c-ink:             #17120E;   /* body copy on light sections         */
    --c-ink-muted:       #5D5346;   /* secondary copy on light sections    */

    --c-on-dark:         #F4EFE7;   /* body copy on dark sections          */
    --c-on-dark-muted:   #9FB0BA;   /* secondary copy on dark sections     */
    --c-rule-dark:       rgba(244, 239, 231, 0.16);
    --c-rule-light:      rgba(23, 18, 14, 0.12);

    --c-success:         #2E7D5B;
    --c-danger:          #B0433A;

    /* ---------- Contextual colours ---------------------------------------
       Sections re-declare these three variables so that any component
       dropped inside a section inherits the correct palette automatically.
       See section 6 for the .theme-light / .theme-dark definitions.       */

    --fg:                var(--c-ink);
    --fg-muted:          var(--c-ink-muted);
    --bg:                var(--c-ivory);
    --surface:           var(--c-ivory-soft);
    --rule:              var(--c-rule-light);

    /* ---------- Typography ---------------------------------------------- */

    --font-display:      "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --font-body:         "Jost", "Palatino Linotype", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Fluid type scale. min → max across a 400px–1400px viewport. */
    --fs-xs:             0.75rem;                                   /* 12px  */
    --fs-sm:             0.8125rem;                                 /* 13px  */
    --fs-base:           clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
    --fs-lead:           clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
    --fs-h6:             clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
    --fs-h5:             clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
    --fs-h4:             clamp(1.1875rem, 1.08rem + 0.50vw, 1.5rem);
    --fs-h3:             clamp(1.375rem, 1.20rem + 0.85vw, 1.9375rem);
    --fs-h2:             clamp(1.75rem, 1.38rem + 1.75vw, 3rem);
    --fs-h1:             clamp(2.25rem, 1.55rem + 3.30vw, 4.5rem);

    --lh-tight:          1.08;
    --lh-snug:           1.24;
    --lh-normal:         1.6;
    --lh-loose:          1.75;

    --ls-display:        0.012em;
    --ls-label:          0.22em;   /* eyebrow / small-caps labels          */
    --ls-button:         0.14em;

    /* ---------- Spacing scale (8px base) --------------------------------- */

    --sp-1:              0.25rem;
    --sp-2:              0.5rem;
    --sp-3:              0.75rem;
    --sp-4:              1rem;
    --sp-5:              1.5rem;
    --sp-6:              2rem;
    --sp-7:              2.75rem;
    --sp-8:              3.5rem;
    --sp-9:              4.5rem;
    --sp-10:             6rem;

    /* Vertical rhythm between full-width sections. */
    --section-y:         clamp(4rem, 2.6rem + 6.2vw, 8.5rem);
    --section-y-tight:   clamp(3rem, 2.1rem + 4.0vw, 5.5rem);

    /* ---------- Layout --------------------------------------------------- */

    --container:         1280px;
    --container-narrow:  880px;
    --gutter:            clamp(1.25rem, 0.85rem + 1.7vw, 3rem);
    --header-h:          84px;    /* recalculated on scroll — see main.js  */

    /* ---------- Radii, shadows, motion ----------------------------------- */

    --r-sm:              3px;
    --r-md:              5px;
    --r-lg:              8px;
    --r-pill:            999px;

    --shadow-sm:         0 1px 2px rgba(3, 28, 42, 0.06),
                         0 4px 12px rgba(3, 28, 42, 0.05);
    --shadow-md:         0 2px 6px rgba(3, 28, 42, 0.07),
                         0 14px 36px rgba(3, 28, 42, 0.09);
    --shadow-lg:         0 4px 12px rgba(3, 28, 42, 0.09),
                         0 30px 70px rgba(3, 28, 42, 0.16);

    --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:       cubic-bezier(0.34, 1.4, 0.64, 1);

    --t-fast:            180ms;
    --t-base:            320ms;
    --t-slow:            620ms;

    --z-base:            1;
    --z-sticky:          40;
    --z-header:          60;
    --z-drawer:          80;
    --z-modal:           100;
}


/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Offset anchor jumps so targets are not hidden beneath the fixed header. */
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* Respect users who have asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

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

/* The [hidden] attribute must win over component display rules such as
   `display: flex`, otherwise toggling `el.hidden = true` in JS does nothing. */
[hidden] {
    display: none !important;
}

table {
    border-collapse: collapse;
    width: 100%;
}

::selection {
    background: var(--c-copper);
    color: #FFFFFF;
}


/* ==========================================================================
   3. BASE ELEMENT STYLING
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    font-weight: 350;
    color: var(--c-ink);
    background-color: var(--c-ivory);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* The site is never wider than the viewport; this guards against any
       single overflowing child dragging a horizontal scrollbar into view. */
}

/* Locks page scrolling while the mobile drawer or a modal is open. */
body.is-locked {
    overflow: hidden;
}

/* Thin custom scrollbar — WebKit only, degrades gracefully elsewhere. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--c-navy-900);
}

::-webkit-scrollbar-thumb {
    background: var(--c-navy-600);
    border: 2px solid var(--c-navy-900);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-copper-600);
}


/* ==========================================================================
   4. TYPOGRAPHY SCALE
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.display {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    color: var(--fg);
    text-wrap: balance;      /* progressive enhancement — ignored if unsupported */
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 400; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.14;            font-weight: 400; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

p {
    color: var(--fg-muted);
    text-wrap: pretty;
}

p + p {
    margin-top: var(--sp-4);
}

/* Lead paragraph — used directly beneath section titles. */
.lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    font-weight: 300;
}

/* Small-caps tracked label. The workhorse of the whole design. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-copper);
}

/* Decorative hairline that precedes an eyebrow label. */
.eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    flex: none;
    opacity: 0.7;
}

.eyebrow--center::before {
    display: none;
}

/* Copper-coloured inline emphasis inside display headings. */
.accent {
    color: var(--c-copper);
}

/* Italic serif emphasis — used sparingly for editorial texture. */
.script {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
}

/* Editorial index numeral, e.g. "01" beside a section title. */
.index-num {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    color: var(--c-copper);
    opacity: 0.85;
}


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.container--wide {
    max-width: 1560px;
}

/* Auto-fitting card grid. --min sets the smallest acceptable column width. */
.grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr));
}

.grid--2 { --min: 420px; }
.grid--3 { --min: 300px; }
.grid--4 { --min: 220px; }

/* Explicit two-column split used for text-beside-image blocks. */
.split {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {

    .split {
        grid-template-columns: 1fr 1fr;
    }

    .split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
    .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }

    /* Visually swaps the two columns without changing DOM order, so the
       reading order stays correct for screen readers and on mobile. */
    .split__media--first { order: -1; }
}

/* Vertical stack with a consistent gap. */
.stack     { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }

/* Horizontal flex row that wraps. */
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}


/* ==========================================================================
   6. SECTION RHYTHM + ALTERNATING THEMES
   ========================================================================== */

.section {
    position: relative;
    padding-block: var(--section-y);
    background-color: var(--bg);
    color: var(--fg);
}

.section--tight {
    padding-block: var(--section-y-tight);
}

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* --- Light theme (ivory) ------------------------------------------------ */
.theme-light {
    --fg:       var(--c-ink);
    --fg-muted: var(--c-ink-muted);
    --bg:       var(--c-ivory);
    --surface:  var(--c-ivory-soft);
    --rule:     var(--c-rule-light);
}

/* --- Light-alt theme (warmer, one step down) ---------------------------- */
.theme-light-alt {
    --fg:       var(--c-ink);
    --fg-muted: var(--c-ink-muted);
    --bg:       #EFE8DC;
    --surface:  var(--c-ivory-soft);
    --rule:     var(--c-rule-light);
}

/* --- Dark theme (deep midnight teal) ------------------------------------ */
.theme-dark {
    --fg:       var(--c-on-dark);
    --fg-muted: var(--c-on-dark-muted);
    --bg:       var(--c-navy);
    --surface:  var(--c-navy-800);
    --rule:     var(--c-rule-dark);
}

.theme-dark-deep {
    --fg:       var(--c-on-dark);
    --fg-muted: var(--c-on-dark-muted);
    --bg:       var(--c-navy-900);
    --surface:  var(--c-navy-800);
    --rule:     var(--c-rule-dark);
}

/* Subtle paper grain overlay. Adds tactility so large flat colour fields
   do not read as a flat CSS block. Purely decorative and non-interactive. */
.section--grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}


/* ==========================================================================
   7. SECTION HEADING BLOCK
   ========================================================================== */

.sec-head {
    display: grid;
    gap: var(--sp-4);
    max-width: 62ch;
    margin-bottom: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

.sec-head--center {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
}

.sec-head--center .eyebrow::before {
    display: none;
}

/* Title + index numeral sitting on one baseline. */
.sec-head__title {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.sec-head__title .index-num {
    padding-top: 0.55em;
    flex: none;
}

/* Wider heading block for sections whose title runs long. */
.sec-head--wide {
    max-width: 78ch;
}

/* Heading block that sits beside a right-aligned action button. */
.sec-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

.sec-head-row .sec-head {
    margin-bottom: 0;
}

/* Thin decorative divider with a copper diamond at its centre. */
.rule-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--rule);
}

.rule-ornament::before,
.rule-ornament::after {
    content: "";
    height: 1px;
    width: clamp(40px, 12vw, 120px);
    background: currentColor;
}

.rule-ornament__gem {
    width: 6px;
    height: 6px;
    background: var(--c-copper);
    transform: rotate(45deg);
    flex: none;
}


/* ==========================================================================
   8. SCROLL-REVEAL ANIMATION STATES
   --------------------------------------------------------------------------
   Elements marked [data-reveal] start hidden and are revealed by main.js
   when they intersect the viewport. If JavaScript fails to run, the
   .no-js fallback at the bottom of this block keeps everything visible.
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity   var(--t-slow) var(--ease-out),
        transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
[data-reveal="right"] { transform: translate3d(30px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

/* Masked line-by-line reveal for large display headings. */
.reveal-mask {
    display: block;
    overflow: hidden;
}

.reveal-mask > span {
    display: block;
    transform: translate3d(0, 105%, 0);
    transition: transform 900ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.is-revealed .reveal-mask > span,
.reveal-mask.is-revealed > span {
    transform: translate3d(0, 0, 0);
}

/* No-JS safety net. main.js removes .no-js from <html> immediately. */
.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}

.no-js .reveal-mask > span {
    transform: none;
}


/* ==========================================================================
   9. ACCESSIBILITY + UTILITY HELPERS
   ========================================================================== */

/* Visually hidden but still announced by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — becomes visible on keyboard focus. */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: var(--z-modal);
    padding: 0.75rem 1.5rem;
    background: var(--c-copper);
    color: #FFFFFF;
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    border-radius: 0 0 var(--r-md) var(--r-md);
    transition: transform var(--t-fast) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
}

/* Consistent focus ring across every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-copper);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* Alignment + spacing utilities. */
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.mx-auto         { margin-inline: auto; }
.mt-0            { margin-top: 0; }
.mt-4            { margin-top: var(--sp-4); }
.mt-6            { margin-top: var(--sp-6); }
.mt-8            { margin-top: var(--sp-8); }
.mb-0            { margin-bottom: 0; }
.w-full          { width: 100%; }
.measure         { max-width: 60ch; }
.measure--narrow { max-width: 46ch; }

/* Responsive visibility. */
.hide-mobile  { display: none; }
.show-mobile  { display: revert; }

@media (min-width: 1024px) {
    .hide-mobile { display: revert; }
    .show-mobile { display: none; }
}

/* Prevents long unbroken strings (emails, URLs) from forcing overflow. */
.break-word {
    overflow-wrap: anywhere;
    word-break: break-word;
}