/* SKHAI Luxury tokens — from mockups/luxury/css/tokens.css (29 Sep 2026). Loaded only when skx_lux_active().
   Fonts are self-hosted (Google Fonts woff2, OFL): Bodoni Moda 400 roman + 400 italic (variable opsz axis clamped to 6-20 with fontTools instancer:
   at the browser's automatic opsz >= 28 the hairlines, e crossbars and dashes vanish on display sizes — 'Nct', 'V illas')
   and Jost (variable, declared 400-500 so nothing lighter or bolder is ever used) = 2 families, 4 styles.
   The two critical latin files (Bodoni roman, Jost) are preloaded from PHP. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bodoni-moda-normal-latin-ext-o20.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bodoni-moda-normal-latin-o20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/bodoni-moda-italic-latin-ext-o20.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/bodoni-moda-italic-latin-o20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ---------- Metric-matched fallbacks (CLS on font swap) -------------------------------------------------
   While Bodoni Moda / Jost load (font-display: swap) text renders in these local faces, scaled to the web
   fonts' average advance and vertical metrics, so the swap does not rewrap the hero headings (the Luxury
   heroes are bottom-anchored: a rewrap moved the whole hero copy). Computed 2026-09-30 with fontTools from
   the shipped woff2 against Liberation Serif/Sans (metric-compatible with Times New Roman / Arial).
   Devices without any of the local() fonts skip the face and use the stack below as before. */
@font-face { font-family: "Bodoni Moda Fallback"; font-style: normal; font-weight: 400 500;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos");
  size-adjust: 114.34%; ascent-override: 98.39%; descent-override: 34.98%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda Fallback"; font-style: italic; font-weight: 400 500;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic");
  size-adjust: 107.44%; ascent-override: 104.71%; descent-override: 37.23%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost Fallback"; font-style: normal; font-weight: 400 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  size-adjust: 95.90%; ascent-override: 111.58%; descent-override: 39.10%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Baht glyph-only faces (U+0E3F), inlined: no extra request ---------- */
@font-face { font-family: "SKHAI Baht Sans"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2");
  unicode-range: U+0E3F; size-adjust: 97%; }   /* Noto Sans Thai cap 714 -> Jost cap ~700 */
@font-face { font-family: "SKHAI Baht Serif"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAMkAA4AAAAABfQAAALPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cOgZgP1NUQVREADwRCAqBPIE3CwgAATYCJAMMBCAFhFYHIBvyBMgEHkjv681ksgBzXvOglZQ9dOoAlucKQAV2cCf/n7+m3gEOvBp0ir/u3kXZoimwG3DA0wHd0SoEhwPfsbzyawCumtiDAOwIEDZi7vz8cmxQMMtiiegApFBZx59Pbls82o/RNdrRh9HfYg5imN0tPRjAGS17JeeIdeggV8hqouQlfqKRODH7lpS6tNJ1KdVSaEMZ0SNZRUVZXMJwmqFC/n1EfSpEeiHYSEvSR96hiQYSgcAmAx6Cm/zRwq5uUyhY2G52Cx2BCwpSlSKZdgka5mSDWAfy3Eyq7Mh4oB1z0ANFCGClJckN4KPgpGJ58ekqgFxKXVgsOGey1lCtAj5DnQ/Q1QJfUUoF2doqe91RtTrqDjOE/cqTh4S29OAJOzthv/LRI5YcvzeZ649Y8tCu0n7lA7H0ceevPhBL79vZNVjbWzXe2XmnKy6xPRH3qfaeNmkBp/xTvT3sp34q7JwQOz8l5Ibrb+15fnFW1WjleF1kdf7HrKzU2cU1kTOKts6a/SI/M/1GVngWAPsQa3Jevv/98QNNzhnfbDTtPS4/2PDqTOL0ImXt7n/G/xDlpB5Ftlo/fgv0Rjq9/xkWQzmdBXNrmqym8QYqMpqJA40al3Ch/zRnqCxJ2p4V524qW5nbIpIKjyBI+HgkTsLOozGTOx5FFLs8On4s81gRRrXbiSQmRgiFA14pHTtJMCSLV6GQIUYZoIV+quihHZNuBB0YujCyXjcxGWaMNKKJZow2RulhGFO4ohjL9BM1xWAX0RQxn/wpG02GKKMDmOqkHEOLuBxJKR10MU4/LYxSOYgmeDTEIAZxRBFDDHFi28C6IZMZUzr/Kp0siigii/QtzKmssGzjHIYYZnEXuSC0ZUTVOMBuB4Y+FJPGIXrpoA2WmcX4paLr2j+GQcgFQxdGg7fGaSWKNoYYIJrByeTOa0JXL0cD0HbU0L94EJZdxOEC) format("woff2");
  unicode-range: U+0E3F; size-adjust: 94%; }   /* Noto Serif Thai cap 714 -> Bodoni Moda cap ~670 */
@font-face { font-family: "SKHAI Baht Serif"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAN0AA8AAAAABuQAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cKAZgP1NUQVRIADwRCAqCVIIuCw4AATYCJAMYBCAFhRQHIAwHG6wFyAQe+Dzr/SQDOCu1HdnbDjIr4nABcKKO8I3IxDX183zgqQPclPaZtA6KSLICi6b/0d9sAL5pRefk3qi4D6d1BwKwJ9B8IDKyCiqwRUHXdb2gbnDDNUFCrXtv6+R+nM0JyWNFShHrsQJppVQDMX/lJpoIE84Vko2VbGOtCvJ+0BFV64k/LiouyuQyKsPk3f/PgnJcZKmwqePgVemzeqciIxDYIgGeJjA0Na17/OShvTRPbu0VVgg8UURxSViPOyADeoQQ60E6fwGVBM8AX9kURoLWrAA+CmI+hJbWX+vPBWRbZaHruOzI1kFH0I6rADhP8j7FuYQkpFo/ja4riqK4urq6KrV2LrZtTnaOM2aOmdEyetaoypVPnogFT586rHr8mPmPHuWtOvdULHhy1n7l6UfMf3ym/tYXosdh/NzMl2Ne3vLVDmveX6/7RlyP8Y24vtC3+IPFcMMmvCTcUJ+YaGgoCQ8PLw03NCQmGupLw4cGBjkX5Rc4FwcFBgU5FRfkOxUFcaNJaMaBj/EHPsIIZO7AuzHgAzYI8eqlqDXqP+U26Tc5M0nkhHucj212SfhmK8vvzdTDZ/tXr14+l65F/J/9/6yVWZnJVJaeG/kujFht/j/7v62V+QnQca+1PIp5Yhu+DvdBAXfS8gaMouOsacGGadjWEZTDkCNbnzyvPLfoeZG2cwh8xWg/os4iEA6ZBJ7j74l0Gg4r4pjrsGY4NXZnohjMi34kb6yJ9hqEFY7Yg7M2jaAMjT5a6SeXyaZnL2baqaaz3M14JmedkxlgEnEYTaNJtDMRMwNMZhIGBM30ao81JtKNkWKyKPAfm2ljIp2kodFhWe3HzDjK6KSbKfTSykSq6LTw2vgt6yphGDBhIpJ4uuliMhoavVZlPSYMxGI7jHAa295ULV/qRGvXUUQxRWQSP7IpB3P1VpuOxgAzeJC08Dm8MhFKGCoVjBfPOdZXJUxEw0In7fXCqUwhjrPcPwmVkfTD3Zhv1k6hDQPtTw+/gHPiulW4k66W8WezbuzVe1zYyKi/EeYc0ncTRlx9WuhLDitrAAA=) format("woff2");
  unicode-range: U+0025; }   /* Libre Bodoni "%" (0.9 KB, Google Fonts text=% subset): Bodoni Moda's Didone per-cent reads as "⁰o" at figure sizes */

:root {
  /* ---------- Palette ------------------------------------------------------
     Contrast (WCAG 2.x relative luminance, computed 29 Sep 2026 — full table in DIRECTION.md):
       ink        on linen 13.88 | ivory 15.26 | beige 12.86
       mute       on linen  5.30 | ivory  5.83 | beige 4.91
       mute-on-beige on beige 5.58 | linen 6.03           (meta text on beige bands)
       brass-text on linen  4.89 | ivory  5.37 | beige 4.53 (links, italic accents, focus ring)
       brass-line on linen  3.93 | ivory  4.32 | beige 3.64 (rules that carry meaning, CTA edge, active tab, progress)
       line-strong on linen 3.44 | ivory  3.78 | beige 3.18 (input/button/checkbox edges — 1.4.11)
       ink on brass 5.20 (primary CTA) · hover = espresso fill + linen 12.43 (never a darker brass)
       linen on espresso 12.43 · taupe 6.72 · brass-light 7.11 · brass 4.65 (>=14px accents)
       line-on-dark (linen 50%) on espresso 4.21 | umber 3.58
       error on linen 6.23 | ivory 6.84 · success on linen 6.31
     Decorative brass (#A88A5E) hairlines are ornament only, never the sole signifier. */
  --c-linen:        #EFE8DE;  /* page background */
  --c-ivory:        #F7F3EC;  /* raised surfaces, inputs, cards */
  --c-beige:        #E5E0D9;  /* SKHAI heritage beige — bands */
  --c-sand:         #D9CEBE;  /* hairlines, image placeholders, dividers */
  --c-espresso:     #2B2521;  /* dark bands, footer, mobile sheet */
  --c-umber:        #3A302A;  /* raised surface on espresso */
  --c-ink:          #1D1D1B;  /* SKHAI heritage near-black — type */
  --c-mute:         #665D54;  /* meta text on light */
  --c-mute-on-beige:#5C554E;  /* meta text on beige bands (5.58) */
  --c-taupe:        #B8AB9A;  /* meta text on dark */
  --c-brass:        #A88A5E;  /* signature accent: primary CTA fill + key rules */
  --c-brass-text:   #7A5F3E;  /* brass for text/links/focus on light */
  --c-brass-light:  #C9AE84;  /* brass for text/focus on dark */
  --c-brass-line:   #8A6E45;  /* functional brass: CTA edge, active indicators, meaningful rules (>=3:1) */
  --c-line-strong:  #877A6B;  /* control edges on light: inputs, icon buttons, checkboxes (>=3:1) */
  --c-error:        #9B2C1F;
  --c-success:      #3F5A3A;
  --c-white:        #FFFFFF;
  --c-scrim:        rgba(29, 24, 20, .62);   /* photo scrim under light text */
  --c-scrim-soft:   rgba(29, 24, 20, .28);
  --c-veil:         rgba(43, 37, 33, .55);   /* modal backdrop */

  /* Semantic aliases (light context — default) */
  --bg:             var(--c-linen);
  --surface:        var(--c-ivory);
  --band:           var(--c-beige);
  --text:           var(--c-ink);
  --text-soft:      var(--c-mute);
  --rule:           var(--c-sand);
  --rule-strong:    var(--c-line-strong);
  --accent:         var(--c-brass);
  --accent-text:    var(--c-brass-text);
  --focus:          var(--c-brass-text);   /* 2px ring … */
  --focus-halo:     var(--c-linen);        /* … + light halo so it reads on any surface */

  /* ---------- Typography --------------------------------------------------- */
  --font-display: "SKHAI Baht Serif", "Bodoni Moda", "Bodoni Moda Fallback", "Noto Serif Thai", "Didot", "Bodoni 72", Georgia, serif;
  --font-sans:    "SKHAI Baht Sans", "Jost", "Jost Fallback", "Noto Sans Thai", "IBM Plex Sans Thai", "Thonburi", "Leelawadee UI", "Futura", "Avenir Next", system-ui, sans-serif;

  --fw-regular: 400;   /* the lightest weight loaded — 300 retired (DESIGN-SYSTEM-CORRECTIONS §2) */
  --fw-medium:  500;

  /* Fluid type scale (390 → 1920). 9 steps only; replaces 73 live sizes. */
  --fs-hero:    clamp(2.875rem, 1.7rem + 3.7vw, 6rem);    /* 46 → 96   project & home hero */
  --fs-display: clamp(2.75rem, 1.95rem + 3.2vw, 5.5rem);  /* 44 → 88   page display H1     */
  --fs-h2:      clamp(2rem,    1.55rem + 1.8vw, 3.5rem);  /* 32 → 56 */
  --fs-h3:      clamp(1.5rem,  1.35rem + .6vw,  2rem);    /* 24 → 32 */
  --fs-h4:      clamp(1.25rem, 1.2rem + .2vw,   1.375rem);/* 20 → 22 */
  --fs-lead:    clamp(1.125rem,1.07rem + .22vw, 1.3125rem);/* 18 → 21  Jost 400 */
  --fs-body:    clamp(1rem,    .98rem + .08vw,  1.0625rem);/* 16 → 17  Jost 400 */
  --fs-small:   .875rem;   /* 14 */
  --fs-label:   .75rem;    /* 12 — Jost 500 caps, never smaller */
  --fs-numeral: clamp(2.25rem, 1.8rem + 1.8vw, 3.75rem);  /* stat figures, Bodoni Moda */

  --lh-tight:   1.04;  /* hero/display */
  --lh-heading: 1.18;
  --lh-snug:    1.35;
  --lh-body:    1.7;

  --tr-display: -0.012em;
  --tr-heading: -0.005em;
  --tr-body:    0.005em;
  --tr-button:  0.08em;
  --tr-label:   0.2em;
  --tr-wordmark:0.42em;

  /* ---------- Spacing (8px base) ------------------------------------------ */
  --sp-1: .25rem;  /* 4 */
  --sp-2: .5rem;   /* 8 */
  --sp-3: .75rem;  /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-5: 1.5rem;  /* 24 */
  --sp-6: 2rem;    /* 32 */
  --sp-7: 3rem;    /* 48 */
  --sp-8: 4rem;    /* 64 */
  --sp-9: 6rem;    /* 96 */
  --sp-10: 8rem;   /* 128 */
  --sp-11: 10rem;  /* 160 */
  --section-y:  clamp(5.5rem, 3.6rem + 5vw, 9rem);   /* 88 → 144 */
  --section-y-sm: clamp(3.5rem, 2.6rem + 2.8vw, 6rem);
  --gutter:     clamp(1rem, .55rem + 1.9vw, 2.5rem); /* 16 → 40 side gutter */
  --grid-gap:   clamp(1rem, .6rem + 1.4vw, 2rem);

  /* ---------- Layout ------------------------------------------------------- */
  --container-max:   1320px;
  --container-wide:  1600px;   /* galleries, rails */
  --measure:         680px;    /* long-form text */
  --measure-intro:   560px;    /* centred section intros */
  --header-h:        88px;
  --header-h-mobile: 64px;
  --sticky-cta-h:    64px;

  /* ---------- Shape -------------------------------------------------------- */
  --radius-0:    0;       /* the brand: square corners */
  --radius-pill: 999px;   /* reserved: sheet handle, review bar pill */
  --hairline:    1px;
  --rule-accent: 1px solid var(--c-brass);
  --rule-functional: 1px solid var(--c-brass-line);

  /* ---------- Elevation (warm, low, diffuse) ------------------------------- */
  --shadow-1: 0 1px 2px rgba(43, 37, 33, .06), 0 2px 8px rgba(43, 37, 33, .05);
  --shadow-2: 0 10px 30px -12px rgba(43, 37, 33, .22);
  --shadow-3: 0 30px 80px -24px rgba(43, 37, 33, .38);

  /* ---------- Motion ------------------------------------------------------- */
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;
  --dur-fade:   800ms;     /* signature cross-fade */
  --dur-reveal: 900ms;
  --dur-kenburns: 16s;     /* hero still: scale 1 → 1.04 */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-silk:  cubic-bezier(.25, .1, .1, 1);   /* slow, elegant settle */
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --kenburns-scale: 1.04;

  /* ---------- Z-index layers ---------------------------------------------- */
  --z-base:        1;
  --z-chapter:     20;   /* sticky chapter label */
  --z-header:      100;
  --z-mega:        110;
  --z-sticky-cta:  200;  /* single mobile enquiry bar */
  --z-sheet:       300;  /* mobile menu, enquiry drawer */
  --z-modal:       400;  /* video/gallery modal */
  --z-toast:       450;
  --z-review:      500;  /* mockup review bar (not production) */
}

/* Dark context — apply .on-dark to any band/section to flip semantics. */
.on-dark {
  --bg:          var(--c-espresso);
  --surface:     var(--c-umber);
  --band:        var(--c-umber);
  --text:        var(--c-linen);
  --text-soft:   var(--c-taupe);
  --rule:        rgba(239, 232, 222, .18);
  --rule-strong: rgba(239, 232, 222, .5);
  --accent-text: var(--c-brass-light);
  --focus:       var(--c-brass-light);
  --focus-halo:  var(--c-espresso);
}