/* Chalhoub Graphic — generated 2026-09-29T16:03:37.762Z by tools/build.mjs. Edit src/, not this file. */

/* ---- src/css/chg-tokens.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Design tokens
   File:     src/css/chg-tokens.css
   Purpose:  Single source of truth for colour, typography, spacing, grid,
             motion and layering. Every other file reads from these tokens.
   Naming:   Custom properties use the --cg- prefix (the accent is named
             --cg-accent by project decision). Classes and IDs use chg-.
   Depends:  nothing. Load first.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ colour
     Neutral system only. No brand accent is locked yet (Phase 2 decision).  */
  /* Phase 2C: the system is LIGHT by default (warm limestone / ivory).
     Dark values remain for contrast and for a future dark section
     (.chg-theme-dark remaps the semantic aliases below).                   */
  --cg-ivory:      #f4efe7;   /* page base */
  --cg-bone:       #ece5da;
  --cg-limestone:  #ddd2c2;
  --cg-stone:      #c9bca9;
  --cg-warm-grey:  #9a9083;
  --cg-taupe:      #6b6259;   /* labels on ivory (~5.6:1) */
  --cg-charcoal:   #2b2825;
  --cg-ink:        #161412;   /* primary text on light */
  --cg-black:      #0b0a09;   /* rich black, used intentionally */

  /* legacy dark-scale names kept for .chg-theme-dark and old references */
  --cg-hero-black: #000000;
  --cg-graphite:   #0e0e0f;
  --cg-slate:      #1f1f22;
  --cg-grey-700:   #3a3937;
  --cg-grey-500:   #6b6966;
  --cg-grey-300:   #b5b2ac;
  --cg-mute:       #8c8a86;

  /* The single accent: a restrained warm terracotta, used ONLY for the
     selected-square marker and tiny active details (< 1% of any view).
     Change here only.                                                     */
  --cg-accent: #a4573a;

  /* Semantic aliases (components use these, not the raw values) */
  --cg-bg:             var(--cg-ivory);
  --cg-surface-raised: rgba(244, 239, 231, 0.92);
  --cg-text:           var(--cg-ink);
  --cg-text-2:         #4a443e;
  --cg-text-mute:      var(--cg-taupe);
  --cg-line:           rgba(22, 20, 18, 0.12);
  --cg-line-strong:    rgba(22, 20, 18, 0.28);
  --cg-line-ink:       rgba(22, 20, 18, 0.14);
  --cg-invert-bg:      var(--cg-ink);
  --cg-invert-text:    var(--cg-ivory);
  --cg-focus:          var(--cg-ink);

  /* -------------------------------------------------------------- typography
     Central so an Arabic stack can be swapped in per :lang() later.
     Families are registered under "CG …" names on purpose: the live theme
     (Hostinger AI) also declares "IBM Plex Mono" (a 131 KB TTF), and a
     shared name would make the browser download and mix both.            */
  --cg-font-sans: "CG Archivo", "CG Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --cg-font-mono: "CG Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Reserved, not loaded in Phase 2: "IBM Plex Sans Arabic"               */
  --cg-font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  --cg-type-mega:    clamp(4.5rem, 13vw, 15rem);
  --cg-type-display: clamp(3.25rem, 7.2vw, 8.5rem);
  --cg-type-h2:      clamp(2.25rem, 4.2vw, 4.5rem);
  --cg-type-h3:      clamp(1.375rem, 2vw, 2rem);
  --cg-type-lead:    clamp(1.0625rem, 1.25vw, 1.375rem);
  --cg-type-body:    1rem;
  --cg-type-small:   0.875rem;
  --cg-type-label:   0.75rem;

  --cg-lh-tight: 0.9;
  --cg-lh-heading: 1.05;
  --cg-lh-body: 1.65;

  --cg-track-display: -0.04em;
  --cg-track-heading: -0.025em;
  --cg-track-label: 0.08em;

  /* Archivo width axis (font-stretch). 100% = normal. */
  --cg-stretch-condensed: 80%;
  --cg-stretch-normal: 100%;
  --cg-stretch-wide: 112%;

  /* ---------------------------------------------------------------- spacing
     8px base. Named by size, not by use.                                   */
  --cg-space-1: 0.25rem;  /* 4 */
  --cg-space-2: 0.5rem;   /* 8 */
  --cg-space-3: 0.75rem;  /* 12 */
  --cg-space-4: 1rem;     /* 16 */
  --cg-space-5: 1.5rem;   /* 24 */
  --cg-space-6: 2rem;     /* 32 */
  --cg-space-7: 3rem;     /* 48 */
  --cg-space-8: 4rem;     /* 64 */
  --cg-space-9: 6rem;     /* 96 */
  --cg-space-10: 8rem;    /* 128 */
  --cg-space-11: 12rem;   /* 192 */
  --cg-section-space: clamp(6rem, 14vw, 16rem);

  /* ------------------------------------------------------------------- grid
     8 columns named a–h (internal rule, never shown to visitors).          */
  --cg-cols: 8;
  --cg-gutter: 24px;
  --cg-margin: clamp(32px, 4vw, 72px);
  --cg-max: 1600px;
  --cg-header-h: 76px;

  /* ----------------------------------------------------------------- motion */
  --cg-dur-ui: 240ms;
  --cg-dur-reveal: 900ms;
  --cg-dur-slow: 1400ms;
  --cg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cg-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --cg-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* ----------------------------------------------------------------- layers */
  --cg-z-scene: 0;
  --cg-z-content: 10;
  --cg-z-header: 100;
  --cg-z-menu: 200;
  --cg-z-skip: 300;

  /* ------------------------------------------------------------- direction
     1 in LTR, -1 in RTL. Multiply any horizontal translate by this.        */
  --cg-dir: 1;
}

[dir="rtl"] { --cg-dir: -1; }

/* Optional dark surface for a future section (the "perspective change"). */
.chg-theme-dark {
  --cg-bg: var(--cg-black);
  --cg-surface-raised: rgba(14, 14, 15, 0.9);
  --cg-text: var(--cg-bone);
  --cg-text-2: var(--cg-grey-300);
  --cg-text-mute: var(--cg-mute);
  --cg-line: rgba(237, 234, 228, 0.12);
  --cg-line-strong: rgba(237, 234, 228, 0.28);
  --cg-invert-bg: var(--cg-bone);
  --cg-invert-text: var(--cg-ink);
  --cg-focus: var(--cg-bone);
}

@media (max-width: 1279px) { :root { --cg-gutter: 20px; --cg-margin: 32px; } }
@media (max-width: 1023px) { :root { --cg-gutter: 16px; --cg-margin: 28px; --cg-header-h: 68px; } }
@media (max-width: 767px)  { :root { --cg-cols: 4; --cg-gutter: 12px; --cg-margin: 20px; --cg-header-h: 64px; } }


/* ---- src/css/chg-base.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Base
   File:     src/css/chg-base.css
   Purpose:  Fonts, scoped reset, typography foundation, the 8-column grid,
             the interface marks (square, hairline, label), buttons/links,
             reveal utility and accessibility helpers.
   Depends:  chg-tokens.css
   Notes:    - Uses logical properties (inline/block) so RTL works later.
             - The reset is scoped to .chg-site so it does not fight
               WordPress or Elementor styles outside our sections.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts
   Self-hosted, Latin subset. Paths are relative to this file; the build
   script rewrites them for the WordPress child theme.                     */
@font-face {
  font-family: "CG Archivo";
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: "CG Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "CG Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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-adjusted fallback to reduce layout shift while Archivo loads.
   Approximate values; fine-tune after real-device testing.              */
@font-face {
  font-family: "CG Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- page
   Applied to <body class="chg-site"> (child theme adds the class).       */
.chg-site {
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-text);
  font-family: var(--cg-font-sans);
  font-size: var(--cg-type-body);
  line-height: var(--cg-lh-body);
  font-weight: 400;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:has(.chg-site) { background: var(--cg-bg); }

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

.chg-site :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }

/* Host compatibility. WordPress global styles and themes set fonts with
   selectors like "body.elementor-page" or "h1, h2 …". Restate ours with a
   slightly stronger, still scoped selector, and let headings inherit. */
html body.chg-site {
  font-family: var(--cg-font-sans);
  color: var(--cg-text);
  background: var(--cg-bg);
}
.chg-site :where(h1, h2, h3, h4, h5, h6, p, li, button, input, select, textarea) { font-family: inherit; }
.chg-site :where(ul, ol)[role="list"],
.chg-site :where(.chg-list-reset) { list-style: none; padding: 0; }
.chg-site :where(img, svg, video, picture) { display: block; max-inline-size: 100%; }
.chg-site :where(a) { color: inherit; text-decoration: none; }
.chg-site :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Language hooks: when Arabic content arrives, set lang="ar" dir="rtl" and
   the stack switches here. The Arabic font is NOT loaded in Phase 2.       */
.chg-site :lang(ar) { font-family: var(--cg-font-arabic); letter-spacing: 0; }

/* ---------------------------------------------------------------- grid
   Columns a–h. Place with grid-column using the letter lines, e.g.
   grid-column: a / e  -> spans columns a, b, c, d.
   On mobile the grid has 4 columns (a–d); components must re-place there. */
.chg-container {
  inline-size: 100%;
  max-inline-size: calc(var(--cg-max) + 2 * var(--cg-margin));
  margin-inline: auto;
  padding-inline: var(--cg-margin);
}
.chg-grid {
  display: grid;
  grid-template-columns:
    [a] minmax(0, 1fr) [b] minmax(0, 1fr) [c] minmax(0, 1fr) [d] minmax(0, 1fr)
    [e] minmax(0, 1fr) [f] minmax(0, 1fr) [g] minmax(0, 1fr) [h] minmax(0, 1fr) [end];
  column-gap: var(--cg-gutter);
}
@media (max-width: 767px) {
  .chg-grid {
    grid-template-columns:
      [a] minmax(0, 1fr) [b] minmax(0, 1fr) [c] minmax(0, 1fr) [d] minmax(0, 1fr) [end];
  }
}

/* ---------------------------------------------------------------- type */
.chg-display {
  font-size: var(--cg-type-display);
  line-height: var(--cg-lh-tight);
  letter-spacing: var(--cg-track-display);
  font-weight: 500;
}
.chg-h2 {
  font-size: var(--cg-type-h2);
  line-height: 0.95;
  letter-spacing: var(--cg-track-heading);
  font-weight: 500;
}
.chg-lead {
  font-size: var(--cg-type-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.chg-label {
  font-family: var(--cg-font-mono);
  font-size: var(--cg-type-label);
  line-height: 1.4;
  letter-spacing: var(--cg-track-label);
  text-transform: uppercase;
  font-weight: 400;
}
.chg-mute { color: var(--cg-text-mute); }

/* Masked line: outer clips, inner moves. Used by reveals. */
.chg-line { display: block; overflow: clip; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.chg-line__inner { display: block; will-change: auto; }

/* ---------------------------------------------------------------- marks */
/* The square: "selected square". Replaces pills and dots. */
.chg-square {
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  background: currentColor;
  flex: none;
}
.chg-square--accent { background: var(--cg-accent); }

.chg-rule {
  display: block;
  block-size: 1px;
  inline-size: 100%;
  background: var(--cg-line);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- actions */
/* Primary action. Rectangular, zero radius. The fill travels in from the
   inline-start edge on hover: a small "move", not a colour flash.         */
.chg-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-block-size: 52px;
  padding-inline: 22px 26px;
  border: 1px solid var(--cg-line-strong);
  color: var(--cg-text);
  font-size: var(--cg-type-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: color var(--cg-dur-ui) var(--cg-ease-soft), border-color var(--cg-dur-ui) var(--cg-ease-soft);
}
.chg-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cg-invert-bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--cg-ease-out);
}
[dir="rtl"] .chg-button::before { transform-origin: right center; }
.chg-button:hover,
.chg-button:focus-visible { color: var(--cg-invert-text); border-color: var(--cg-invert-bg); }
.chg-button:hover::before,
.chg-button:focus-visible::before { transform: scaleX(1); }
.chg-button .chg-square { background: var(--cg-accent); transition: background var(--cg-dur-ui); }
.chg-button:hover .chg-square,
.chg-button:focus-visible .chg-square { background: var(--cg-invert-text); }

/* Text link with hairline underline that draws from inline-start. */
.chg-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--cg-text);
  font-size: var(--cg-type-small);
  font-weight: 500;
}
.chg-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  transition: transform 420ms var(--cg-ease-out), opacity var(--cg-dur-ui);
}
[dir="rtl"] .chg-link::after { transform-origin: right center; }
.chg-link:hover::after,
.chg-link:focus-visible::after { opacity: 1; animation: chg-underline 620ms var(--cg-ease-out); }
@keyframes chg-underline { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.chg-link__arrow { display: inline-block; transition: transform 420ms var(--cg-ease-out); }
[dir="rtl"] .chg-link__arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------- reveal
   [data-chg-reveal] elements start hidden ONLY when JS + motion are on
   (html.chg-motion). Without JS or with reduced motion they are visible.  */
.chg-motion [data-chg-reveal="line"] .chg-line__inner {
  transform: translate3d(0, 105%, 0);
  transition: transform var(--cg-dur-reveal) var(--cg-ease-out);
  transition-delay: calc(var(--chg-i, 0) * 90ms);
}
.chg-motion [data-chg-reveal="line"].is-revealed .chg-line__inner { transform: none; }

.chg-motion [data-chg-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 700ms var(--cg-ease-soft), transform 900ms var(--cg-ease-out);
  transition-delay: calc(var(--chg-i, 0) * 90ms);
}
.chg-motion [data-chg-reveal="fade"].is-revealed { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- a11y */
.chg-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.chg-skip {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: var(--cg-z-skip);
  padding: 12px 16px;
  background: var(--cg-ink);
  color: var(--cg-ivory);
  font-size: var(--cg-type-small);
  transform: translateY(-160%);
  transition: transform var(--cg-dur-ui);
}
.chg-skip:focus-visible { transform: none; }

.chg-site :focus-visible {
  outline: 1px solid var(--cg-focus);
  outline-offset: 4px;
}
.chg-site :focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.chg-site) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .chg-site *, .chg-site *::before, .chg-site *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* ---- src/css/sections/chg-header.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Header + mobile menu
   File:     src/css/sections/chg-header.css
   Markup:   src/sections/chg-header.html
   Script:   src/js/sections/chg-header.js
   Depends:  chg-tokens.css, chg-base.css
   Layout:   brand a–b · nav e–g · action h (desktop). Menu overlay < 1024px.
   ========================================================================== */

.chg-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--cg-z-header);
  block-size: var(--cg-header-h);
  color: var(--cg-text);
  transition:
    transform 520ms var(--cg-ease-out),
    background-color 320ms var(--cg-ease-soft),
    border-color 320ms var(--cg-ease-soft);
  border-block-end: 1px solid transparent;
}
.chg-header.is-scrolled {
  background-color: var(--cg-surface-raised);
  -webkit-backdrop-filter: saturate(1.1);
  border-block-end-color: var(--cg-line);
}
.chg-header.is-hidden { transform: translate3d(0, -100%, 0); }

/* Logged-in WordPress users: sit below the admin toolbar */
.admin-bar .chg-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .chg-header.is-hidden {
  transform: translate3d(0, calc(-100% - var(--wp-admin--admin-bar--height, 32px)), 0);
}

.chg-header__inner {
  block-size: 100%;
  align-items: center;
}

/* Brand ------------------------------------------------------------------ */
.chg-header__brand {
  grid-column: a / d;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
/* TEMPORARY text wordmark. Replace the inner content of .chg-header__brand
   with the official logo (inline SVG preferred) when the asset is supplied. */
.chg-wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-stretch: var(--cg-stretch-wide);
  white-space: nowrap;
}
.chg-wordmark__second { font-weight: 400; color: var(--cg-text-2); }

/* Nav -------------------------------------------------------------------- */
.chg-header__nav { grid-column: e / h; justify-self: stretch; }
.chg-nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chg-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cg-text-2);
  transition: color var(--cg-dur-ui) var(--cg-ease-soft);
}
.chg-nav__link:hover,
.chg-nav__link:focus-visible,
.chg-nav__link[aria-current] { color: var(--cg-text); }
/* Active page: the selected square appears before the label */
.chg-nav__link .chg-square {
  inline-size: 5px; block-size: 5px;
  background: var(--cg-accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--cg-dur-ui), transform 360ms var(--cg-ease-out);
}
.chg-nav__link[aria-current] .chg-square,
.chg-nav__link:hover .chg-square { opacity: 1; transform: none; }

.chg-header__action { grid-column: h / end; justify-self: end; }
.chg-header__action .chg-link { font-size: 14px; }
.chg-header__action .chg-square { background: var(--cg-accent); inline-size: 6px; block-size: 6px; }

/* Menu button (hidden on desktop) ---------------------------------------- */
.chg-header__menu-btn {
  display: none;
  grid-column: c / end;
  justify-self: end;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding-inline: 4px;
  font-family: var(--cg-font-mono);
  font-size: 12px;
  letter-spacing: var(--cg-track-label);
  text-transform: uppercase;
}
.chg-header__menu-icon {
  position: relative;
  inline-size: 18px;
  block-size: 8px;
}
.chg-header__menu-icon::before,
.chg-header__menu-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: currentColor;
  transition: transform 420ms var(--cg-ease-out), inset 420ms var(--cg-ease-out);
}
.chg-header__menu-icon::before { inset-block-start: 0; }
.chg-header__menu-icon::after { inset-block-end: 0; }
.chg-header__menu-btn[aria-expanded="true"] .chg-header__menu-icon::before { inset-block-start: 3.5px; transform: rotate(45deg); }
.chg-header__menu-btn[aria-expanded="true"] .chg-header__menu-icon::after { inset-block-end: 3.5px; transform: rotate(-45deg); }

/* 1024–1279px: the action needs two columns or it wraps onto two lines */
@media (max-width: 1279px) {
  .chg-header__nav { grid-column: d / g; }
  .chg-header__action { grid-column: g / end; }
}
.chg-header__action .chg-link { white-space: nowrap; }

@media (max-width: 1023px) {
  .chg-header__nav,
  .chg-header__action { display: none; }
  .chg-header__menu-btn { display: inline-flex; grid-row: 1; }
  .chg-header__brand { grid-column: a / c; grid-row: 1; }
}
@media (max-width: 767px) {
  .chg-header__brand { grid-column: a / c; grid-row: 1; }
  .chg-header__menu-btn { grid-column: c / end; grid-row: 1; }
}

/* ==========================================================================
   Menu overlay
   ========================================================================== */
.chg-menu {
  position: fixed;
  inset: 0;
  z-index: var(--cg-z-menu);
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--cg-header-h) + 32px) 32px;
  background: var(--cg-bg);
  color: var(--cg-text);
  visibility: hidden;
  opacity: 0;
  transition: opacity 360ms var(--cg-ease-soft), visibility 0s linear 360ms;
}
.chg-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 360ms var(--cg-ease-soft), visibility 0s;
}
.chg-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chg-menu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 6px;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  line-height: 1;
  letter-spacing: var(--cg-track-display);
  font-weight: 500;
}
.chg-menu__num {
  font-family: var(--cg-font-mono);
  font-size: 12px;
  letter-spacing: var(--cg-track-label);
  color: var(--cg-text-mute);
  transform: translateY(-0.4em);
}
.chg-menu__item { overflow: clip; }
.chg-menu__item > .chg-menu__link {
  transform: translate3d(0, 100%, 0);
  transition: transform 700ms var(--cg-ease-out);
  transition-delay: calc(var(--chg-i, 0) * 70ms + 80ms);
}
.chg-menu.is-open .chg-menu__item > .chg-menu__link { transform: none; }

.chg-menu__foot {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--cg-line);
}

html.chg-menu-open { overflow: hidden; }

/* Large screens never show the overlay even if left open on resize */
@media (min-width: 1024px) {
  .chg-menu { display: none; }
}

/* While the menu is open the header sits above the overlay so the
   Close control stays visible and reachable. */
.chg-menu-open .chg-header {
  z-index: calc(var(--cg-z-menu) + 1);
  transform: none;
  background-color: transparent;
  border-block-end-color: transparent;
}


/* ---- src/css/sections/chg-hero.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Hero, Phase 2C ("Every move changes the game.")
   File:     src/css/sections/chg-hero.css
   Markup:   src/sections/chg-hero.html
   Script:   src/js/sections/chg-hero.js
   Depends:  chg-tokens.css, chg-base.css
   --------------------------------------------------------------------------
   COMPOSITION CONTROLS (per breakpoint; change these, not layers):
     --horizon   where the wall meets the floor (% of hero height)
     --floor     where the pieces touch the floor (% of hero height)
     --qh        queen image height (a length). Everything scales from it:
                   --qw  queen/king image width  = qh × 0.41667
                   --kh  king image height       = qh × 1.1317
     --q-x       queen centre (% of hero width, from the left of the stage)
     --arch-x    horizontal anchor of the wall image (arch centre)
   GEOMETRY CONSTANTS (from assets/hero/pieces/pieces.json — keep in sync
   if the renders are replaced):
     queen fall pivot   9.362% 95.942% of the queen canvas
     queen fall angle   92.2deg (counter-clockwise; the queen tips left)
     base contact line  97% of each canvas height
   STATE:
     Default CSS = FINAL composition (queen fallen, king on her square).
     html.chg-intro = start state (queen standing, king off-stage, no copy).
     --p = scroll-out progress 0 → 1 (chg-hero.js).
   ========================================================================== */

.chg-hero {
  --horizon: 62%;
  --floor: 88%;
  --qh: min(48svh, 500px);
  --qw: calc(var(--qh) * 0.41667);
  --kh: calc(var(--qh) * 1.1317);
  --q-x: 64%;
  --k-x: calc(var(--q-x) + var(--qw) * 0.22);
  --arch-x: 67%;
  --p: 0;

  position: relative;
  isolation: isolate;
  block-size: min(max(640px, 100vh), 1100px);
  block-size: min(max(640px, 100svh), 1100px);
  overflow: clip;
  background: var(--cg-bone);
  color: var(--cg-text);
}

/* ==========================================================================
   Scene
   ========================================================================== */
.chg-hero__scene {
  position: absolute;
  inset: 0;
  z-index: var(--cg-z-scene);
  pointer-events: none;
}
.chg-hero__scene > * { position: absolute; }

/* Limestone wall with the recessed triple arch (bottom edge = horizon) */
.chg-hero .chg-hero__wall {
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--horizon);
  overflow: hidden;
  transform: translate3d(0, calc(var(--p) * 6%), 0);
}
.chg-hero .chg-hero__wall img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: var(--arch-x) 100%;
}

/* Polished limestone floor (top edge = horizon) */
.chg-hero .chg-hero__floor {
  inset-block-start: var(--horizon);
  inset-block-end: 0;
  inset-inline: 0;
  overflow: hidden;
}
.chg-hero .chg-hero__floor img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 60% 0;
}

/* Warm sunlight falling through openings off-camera, cast on the floor */
.chg-hero__sun {
  inset-block-start: var(--horizon);
  inset-block-end: 0;
  inset-inline: 0;
  background: url("../hero/stage/stage-sun.webp") 30% 0 / cover no-repeat;
  animation: chg-sun-breathe 11s ease-in-out infinite alternate;
}
@keyframes chg-sun-breathe { from { opacity: 0.86; } to { opacity: 1; } }

/* Morning light from the upper left + slight warm falloff on the right */
.chg-hero__wash {
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 12% 8%, rgb(255 249 238 / 0.55), transparent 70%),
    linear-gradient(to left, rgb(120 96 70 / 0.10), transparent 30%);
}

/* ---------------------------------------------------------------- stage
   Inside the stage, positions are PHYSICAL (left/top): the stage element is
   mirrored with scaleX(-1) in RTL, so the whole move mirrors at once. */
.chg-hero__stage {
  inset: 0;
  transform: scaleX(var(--cg-dir));          /* RTL: the whole move mirrors */
}
.chg-hero__stage-pointer {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--p) * 4%), 0) scale(calc(1 - var(--p) * 0.04));
  transform-origin: 60% 90%;
}

.chg-hero__queen,
.chg-hero__king {
  position: absolute;
  inline-size: var(--qw);
}
.chg-hero__queen {
  left: calc(var(--q-x) - var(--qw) / 2);
  inset-block-start: calc(var(--floor) - var(--qh) * 0.97);
  block-size: var(--qh);
}
.chg-hero__king {
  left: calc(var(--k-x) - var(--qw) / 2);
  inset-block-start: calc(var(--floor) - var(--kh) * 0.97);
  block-size: var(--kh);
}

.chg-hero__queen-body,
.chg-hero__king-move,
.chg-hero__king-body {
  position: absolute;
  inset: 0;
}
.chg-hero__queen-body {
  transform-origin: 9.362% 95.942%;        /* left edge of the base, on the floor */
  transform: rotate(-92.2deg);             /* FINAL: lying on the floor */
}
.chg-hero__king-body { transform-origin: 50% 97%; }

.chg-hero .chg-hero__piece {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  user-select: none;
}
.chg-hero .chg-hero__piece--upright { opacity: 0; }   /* FINAL: fallen-lit version shows */
.chg-hero .chg-hero__piece--fallen { opacity: 1; }

/* ---------------------------------------------------------------- shadows
   Sun from the upper left: tight contact shadows + long soft cast shadows
   to the right. The queen's shadows swap from standing to lying as she falls. */
.chg-hero__shadow { position: absolute; pointer-events: none; }

.chg-hero__shadow--q-stand,
.chg-hero__shadow--k-stand {
  left: 4%;
  inline-size: 92%;
  inset-block-start: calc(97% - var(--qw) * 0.07);
  block-size: calc(var(--qw) * 0.14);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(52 38 24 / 0.55), rgb(52 38 24 / 0.18) 55%, transparent 72%);
}
.chg-hero__shadow--q-cast,
.chg-hero__shadow--k-cast {
  left: 45%;
  inline-size: 190%;
  inset-block-start: calc(97% - var(--qw) * 0.09);
  block-size: calc(var(--qw) * 0.2);
  background: radial-gradient(ellipse 50% 50% at 0% 50%, rgb(70 52 34 / 0.26), rgb(70 52 34 / 0.08) 55%, transparent 75%);
  transform-origin: 0 50%;
  transform: skewX(-38deg);
}
.chg-hero__shadow--k-stand { inset-block-start: calc(97% - var(--qw) * 0.07); }
.chg-hero__shadow--k-cast { inset-block-start: calc(97% - var(--qw) * 0.09); }

/* shadow under the lying queen (right end sits at the pivot) */
.chg-hero__shadow--q-fall {
  left: calc(9.362% - var(--qh) * 0.96);
  inline-size: calc(var(--qh) * 1.0);
  inset-block-start: calc(96% - var(--qh) * 0.035);
  block-size: calc(var(--qh) * 0.1);
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgb(52 38 24 / 0.42), rgb(52 38 24 / 0.14) 55%, transparent 74%);
  transform-origin: 100% 50%;
}
/* FINAL state of the queen's shadows */
.chg-hero__shadow--q-stand,
.chg-hero__shadow--q-cast { opacity: 0; }

/* ---------------------------------------------------------------- front */
.chg-hero__dust {
  inset-inline: 0;
  inset-block-start: 10%;
  block-size: 60%;
  overflow: hidden;
  opacity: 0.35;
}
.chg-hero__dust > span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 200%;
  background: url("../hero/haze.webp") repeat-x 0 50% / auto 100%;
  animation: chg-dust-drift 160s linear infinite alternate;
}
@keyframes chg-dust-drift { from { translate: 0 0; } to { translate: -25% 0; } }

/* keeps the copy readable over the wall; hands over to the next section */
.chg-hero__legibility {
  inset: 0;
  background:
    linear-gradient(to right, rgb(244 239 231 / 0.78) 0%, rgb(244 239 231 / 0.45) 34%, transparent 56%),
    linear-gradient(to top, var(--cg-bone) 0%, rgb(236 229 218 / 0) 9%);
}
[dir="rtl"] .chg-hero__legibility {
  background:
    linear-gradient(to left, rgb(244 239 231 / 0.78) 0%, rgb(244 239 231 / 0.45) 34%, transparent 56%),
    linear-gradient(to top, var(--cg-bone) 0%, rgb(236 229 218 / 0) 9%);
}

.chg-hero__grain {
  inset: 0;
  background: url("../hero/stage/stage-grain.webp") 0 0 / 160px 160px repeat;
}

/* ==========================================================================
   Content
   ========================================================================== */
.chg-hero__content {
  position: relative;
  z-index: var(--cg-z-content);
  block-size: 100%;
  grid-template-rows: 1fr auto;
  padding-block: calc(var(--cg-header-h) + 2vh) clamp(16px, 3vh, 32px);
}

.chg-hero__copy {
  grid-column: a / f;
  grid-row: 1;
  align-self: center;
  margin-block-end: 12vh;                   /* keep the copy above the floor line */
  transform: translate3d(0, calc(var(--p) * -70px), 0);
  opacity: calc(1 - var(--p) * 1.4);
}

/* H1: descriptive, deliberately secondary */
.chg-hero__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: clamp(18px, 2.8vh, 32px);
  color: var(--cg-text-mute);
}
.chg-hero__title .chg-square { background: var(--cg-accent); inline-size: 7px; block-size: 7px; }

.chg-hero__statement {
  font-size: clamp(3rem, 5.6vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--cg-ink);
}
.chg-hero__line-1 { font-weight: 640; font-stretch: 104%; }
.chg-hero__line-2 { font-weight: 360; font-stretch: 100%; }

.chg-hero__lede {
  max-inline-size: 34ch;
  text-wrap: pretty;
  margin-block-start: clamp(20px, 3vh, 36px);
  font-size: var(--cg-type-lead);
  line-height: 1.45;
  color: var(--cg-text-2);
}

.chg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-block-start: clamp(22px, 3.2vh, 36px);
}

.chg-hero__scroll {
  grid-column: g / end;
  grid-row: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cg-text-mute);
  opacity: calc(1 - var(--p) * 3);
}
.chg-hero__scroll-line { inline-size: 1px; block-size: 28px; background: var(--cg-line-strong); }

/* ==========================================================================
   Intro start state (JS + motion only). chg-hero.js animates from here to
   the CSS final state and removes html.chg-intro. A 3s safety timer in
   <head> removes the class if the script never runs.
   ========================================================================== */
.chg-intro .chg-hero [data-chg-el="king-move"] { opacity: 0; }
.chg-intro .chg-hero [data-chg-el="queen-body"] { transform: none; }
.chg-intro .chg-hero .chg-hero__piece--upright { opacity: 1; }
.chg-intro .chg-hero .chg-hero__piece--fallen { opacity: 0; }
.chg-intro .chg-hero .chg-hero__shadow--q-stand,
.chg-intro .chg-hero .chg-hero__shadow--q-cast { opacity: 1; }
.chg-intro .chg-hero .chg-hero__shadow--q-fall { opacity: 0; }
.chg-intro .chg-hero [data-chg-el="title"],
.chg-intro .chg-hero [data-chg-el="lede"],
.chg-intro .chg-hero [data-chg-el="actions"],
.chg-intro .chg-hero [data-chg-el="scroll"] { opacity: 0; }
.chg-intro .chg-hero [data-chg-el="line-1"],
.chg-intro .chg-hero [data-chg-el="line-2"] { transform: translate3d(0, 105%, 0); }

/* Ambient motion pauses off-screen */
.chg-hero.is-offscreen .chg-hero__sun,
.chg-hero.is-offscreen .chg-hero__dust > span { animation-play-state: paused; }

/* ==========================================================================
   Responsive compositions
   ========================================================================== */

/* Large desktop: a little more room for the move */
@media (min-width: 1600px) {
  .chg-hero { --q-x: 63%; --qh: min(52svh, 580px); }
}

/* 1024–1279: tighter copy column */
@media (max-width: 1279px) and (min-width: 1024px) {
  .chg-hero { --q-x: 66%; --qh: min(46svh, 440px); }
  .chg-hero__statement { font-size: clamp(3rem, 6vw, 5rem); }
}

/* Tablet + mobile: stacked composition. The move happens in the upper part,
   the copy sits below the floor line. Not a scaled desktop. */
@media (max-width: 1023px) {
  .chg-hero {
    --horizon: 31%;
    --floor: 52%;
    --qh: min(30svh, 340px, 58vw);
    --q-x: 70%;
    --arch-x: 70%;
    block-size: clamp(640px, 100svh, 940px);
  }
  .chg-hero__legibility {
    background: linear-gradient(to top, var(--cg-bone) 0%, rgb(236 229 218 / 0.92) 36%, rgb(236 229 218 / 0) 52%);
  }
  [dir="rtl"] .chg-hero__legibility {
    background: linear-gradient(to top, var(--cg-bone) 0%, rgb(236 229 218 / 0.92) 36%, rgb(236 229 218 / 0) 52%);
  }
  .chg-hero__content { padding-block-end: 24px; }
  .chg-hero__copy { grid-column: a / end; align-self: end; margin-block-end: 0; }
  .chg-hero__statement { font-size: clamp(2.75rem, 9vw, 5rem); }
  .chg-hero__scroll { display: none; }
}

@media (max-width: 767px) {
  .chg-hero {
    --horizon: 30%;
    --floor: 49%;
    --qh: min(27svh, 58vw, 230px);
    --q-x: 72%;
    block-size: clamp(620px, 100svh, 860px);
  }
  .chg-hero__title { font-size: 10.5px; letter-spacing: 0.06em; margin-block-end: 14px; text-wrap: balance; }
  .chg-hero__statement { font-size: clamp(2.2rem, 10.2vw, 3.2rem); letter-spacing: -0.05em; }
  .chg-hero__lede { font-size: 1rem; margin-block-start: 16px; }
  .chg-hero__actions { margin-block-start: 20px; gap: 12px 22px; }
}

/* Phones in landscape / very short viewports: side by side, compact */
@media (max-height: 520px) and (orientation: landscape) {
  .chg-hero {
    --horizon: 56%;
    --floor: 90%;
    --qh: 58svh;
    --q-x: 74%;
    block-size: max(420px, 100svh);
  }
  .chg-hero__legibility {
    background: linear-gradient(to right, rgb(244 239 231 / 0.85) 0%, rgb(244 239 231 / 0.5) 40%, transparent 60%);
  }
  .chg-hero__copy { grid-column: a / f; align-self: center; margin-block-end: 0; }
  .chg-hero__statement { font-size: clamp(2rem, 9vh, 3.2rem); }
  .chg-hero__title, .chg-hero__lede, .chg-hero__scroll { display: none; }
  .chg-hero__actions { margin-block-start: 14px; }
}

/* Reduced motion: final composition, no ambient movement, no scroll-out */
@media (prefers-reduced-motion: reduce) {
  .chg-hero__sun, .chg-hero__dust > span { animation: none; }
  .chg-hero .chg-hero__wall,
  .chg-hero__stage-pointer,
  .chg-hero__copy { transform: none; }
}


/* ---- src/css/sections/chg-work.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Selected Work (Phase 3)
   File:     src/css/sections/chg-work.css
   Markup:   src/sections/chg-work.html (+ tools/work-render.mjs)
   Script:   src/js/sections/chg-work.js
   Replaces: chg-work-intro.css (Phase 2 opening). The opening rules below
             are carried over unchanged.

   Desktop layouts (8 columns a–h, see docs/HOMEPAGE_PHASE_03_SELECTED_WORK.md)
     wide-start  image a–f (16:10)          · info g–h, bottom-aligned
     tall-end    info a–c, detail b–d low   · portrait image e–h (4:5)
     full        near full-bleed (21:9)     · title hangs from the image edge
     center      big index a–b              · image c–g (3:2) · caption below
     pair        landscape a–e + portrait g–h dropped · info under a–d
   Tablet: same order, simplified placements. Mobile: one stacked pattern
   (index, title, meta, full-width image, description).
   Everything is visible without JS and with reduced motion.
   ========================================================================== */

/* ------------------------------------------------------------ section */
.chg-work {
  --rule-p: 1;                 /* 0 → 1 hairline draw, set by JS on scroll */
  --cg-sbw: 0px;               /* scrollbar width, set by JS (full-bleed maths) */
  position: relative;
  /* Continues the bright hero: starts at the hero's floor tone (bone) and
     settles on the page ivory. No seam, no return to black. */
  background: linear-gradient(to bottom, var(--cg-bone) 0, var(--cg-bg) 50vh);
  color: var(--cg-text);
  padding-block: clamp(4rem, 9vw, 9rem) var(--cg-section-space);
  overflow-x: clip;            /* the full-bleed image may never cause page overflow */
}

/* ------------------------------------------------------------ opening (from Phase 2, unchanged) */
.chg-work__rule {
  background: var(--cg-line-strong);
  transform: scaleX(var(--rule-p));
  transform-origin: left center;
}
[dir="rtl"] .chg-work__rule { transform-origin: right center; }

.chg-work__head { row-gap: 28px; padding-block-start: clamp(20px, 2.4vw, 32px); }
.chg-work__index { grid-column: a / b; grid-row: 1; color: var(--cg-text-mute); padding-block-start: 0.9em; }
.chg-work__title {
  grid-column: b / g; grid-row: 1;
  font-size: var(--cg-type-display);
  line-height: var(--cg-lh-tight);
  letter-spacing: var(--cg-track-display);
  font-weight: 500;
}
.chg-work__count { grid-column: g / h; grid-row: 1; align-self: end; color: var(--cg-text-mute); padding-block-end: 0.8em; }
.chg-work__intro {
  grid-column: b / e; grid-row: 2;
  max-inline-size: 40ch;
  font-size: var(--cg-type-lead);
  line-height: 1.45;
  color: var(--cg-text-2);
}
.chg-work__all { grid-column: h / end; grid-row: 2; justify-self: end; align-self: end; }

/* ------------------------------------------------------------ project list */
.chg-work__list {
  padding-block-start: clamp(4rem, 8vw, 8.5rem);
}

.chg-project {
  position: relative;
  display: grid;
  grid-template-columns:
    [a] minmax(0, 1fr) [b] minmax(0, 1fr) [c] minmax(0, 1fr) [d] minmax(0, 1fr)
    [e] minmax(0, 1fr) [f] minmax(0, 1fr) [g] minmax(0, 1fr) [h] minmax(0, 1fr) [end];
  column-gap: var(--cg-gutter);
  row-gap: clamp(20px, 2.2vw, 36px);
  transition: opacity 600ms var(--cg-ease-soft);
}
.chg-project + .chg-project { margin-block-start: clamp(6rem, 12vw, 13rem); }

/* media ------------------------------------------------------------------
   Media wrappers are <div>s, not <figure>s: Elementor resets figure margins
   with a (0,4,1) selector, which would cancel the full-bleed and offset
   margins used by these layouts. */
.chg-project__media { position: relative; margin: 0; min-inline-size: 0; }

.chg-project__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 16 / 10);
  background: var(--cg-limestone);      /* shows while the image loads */
}
.chg-project__parallax {
  position: absolute;
  inset: 0;
  will-change: auto;
}
.chg-work .chg-project__img,
.chg-work .chg-social__img {            /* beats Elementor's img { height:auto } */
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.chg-project__img { transition: transform 900ms var(--cg-ease-out); }
.chg-project__video {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms var(--cg-ease-soft);
}
.chg-project__video.is-playing { opacity: 1; }

/* "View" indicator: contextual, inside the image, desktop hover only. */
.chg-project__view {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 12px;
  background: var(--cg-ink);
  color: var(--cg-ivory);
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--cg-ease-out);
}
[dir="rtl"] .chg-project__view { clip-path: inset(0 0 0 100%); }
.chg-project__view .chg-square { background: var(--cg-accent); }

/* info ----------------------------------------------------------------- */
.chg-project__info { position: relative; min-inline-size: 0; }

.chg-project__index {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: clamp(14px, 1.4vw, 22px);
}
.chg-project__num {
  font-size: clamp(2.25rem, 3.6vw, 4rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.chg-project__temp {
  display: inline-block;
  font-family: var(--cg-font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--cg-track-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 6px 4px;
  border: 1px solid var(--cg-line-strong);
  color: var(--cg-text-mute);
  vertical-align: middle;
}

.chg-project__title {
  font-size: clamp(1.75rem, 2.7vw, 3rem);
  line-height: 1;
  letter-spacing: var(--cg-track-heading);
  font-weight: 500;
  margin: 0 0 14px;
}
.chg-project__link { color: inherit; text-decoration: none; }
/* One tab stop per project (the title). The image repeats the link for
   pointer users only (tabindex -1, aria-hidden). */
.chg-project__media-link { display: block; color: inherit; }
.chg-project__link:focus-visible { outline: 2px solid var(--cg-focus); outline-offset: 6px; }

.chg-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--cg-text-mute);
  margin: 0 0 16px;
}
.chg-project__sep { opacity: 0.6; }
.chg-project__desc {
  max-inline-size: 38ch;
  color: var(--cg-text-2);
  font-size: var(--cg-type-small);
  line-height: 1.6;
  margin: 0;
}
.chg-project__outcome {
  margin: 14px 0 0;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--cg-line);
  font-size: var(--cg-type-small);
  font-weight: 500;
}

/* ============================================================ DESKTOP ≥ 1024 */
@media (min-width: 1024px) {

  /* 01 · wide-start ---------------------------------------------------- */
  .chg-project--wide-start .chg-project__media--main { grid-column: a / g; grid-row: 1; }
  .chg-project--wide-start .chg-project__info { grid-column: g / end; grid-row: 1; align-self: end; }

  /* 02 · tall-end ------------------------------------------------------ */
  .chg-project--tall-end { grid-template-rows: auto 1fr; }
  .chg-project--tall-end .chg-project__media--main { grid-column: e / end; grid-row: 1 / 3; }
  .chg-project--tall-end .chg-project__info { grid-column: a / d; grid-row: 1; padding-block-start: clamp(2rem, 6vw, 7rem); }
  .chg-project--tall-end .chg-project__media--secondary { grid-column: b / d; grid-row: 2; align-self: end; }

  /* 03 · full (near full-bleed; title hangs from the image edge) -------- */
  .chg-project--full { row-gap: 0; }
  .chg-project--full .chg-project__media--main {
    grid-column: a / end; grid-row: 1;
    /* the grid area is the container width; stretch to the viewport minus 12px */
    margin-inline: calc(50% - 50vw + var(--cg-sbw) / 2 + 12px);
    z-index: 1;                                 /* the title tucks under the edge */
  }
  .chg-project--full .chg-project__info {
    grid-column: a / end; grid-row: 2;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .chg-project--full .chg-project__index { grid-column: a / b; grid-row: 1; margin-block-start: 22px; }
  .chg-project--full .chg-project__title {
    grid-column: b / f; grid-row: 1;
    font-size: clamp(3.5rem, 9vw, 10rem);
    line-height: 0.86;
    letter-spacing: var(--cg-track-display);
    margin-block-start: -0.1em;                 /* cap tops touch the image edge */
  }
  .chg-project--full .chg-project__meta { grid-column: f / end; grid-row: 1; margin-block-start: 26px; }
  .chg-project--full .chg-project__desc { grid-column: f / end; grid-row: 1; margin-block-start: 62px; }
  .chg-project--full .chg-project__outcome { grid-column: f / end; grid-row: 2; }

  /* 04 · center -------------------------------------------------------- */
  .chg-project--center .chg-project__media--main { grid-column: c / g; grid-row: 1; }
  .chg-project--center .chg-project__info {
    grid-column: a / end; grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    pointer-events: none;                        /* let hover reach the image */
  }
  .chg-project--center .chg-project__info > * { pointer-events: auto; }
  .chg-project--center .chg-project__index { grid-column: a / c; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; }
  .chg-project--center .chg-project__num { font-size: clamp(4rem, 8vw, 9rem); }
  .chg-project--center .chg-project__title { grid-column: c / e; grid-row: 2; font-size: clamp(2.25rem, 3.6vw, 4rem); }
  .chg-project--center .chg-project__meta { grid-column: e / g; grid-row: 2; margin-block-start: 0.6em; }
  .chg-project--center .chg-project__desc { grid-column: e / g; grid-row: 2; margin-block-start: 3.2em; }
  .chg-project--center .chg-project__outcome { grid-column: c / e; grid-row: 2; align-self: end; }

  /* 05 · pair ---------------------------------------------------------- */
  .chg-project--pair .chg-project__media--main { grid-column: a / f; grid-row: 1; }
  .chg-project--pair .chg-project__media--secondary { grid-column: g / end; grid-row: 1 / 3; margin-block-start: 34%; }
  .chg-project--pair .chg-project__info { grid-column: a / d; grid-row: 2; }
}

/* ============================================================ TABLET 768–1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  .chg-project .chg-project__info { grid-row: 2; }
  .chg-project--wide-start .chg-project__media--main { grid-column: a / end; grid-row: 1; }
  .chg-project--wide-start .chg-project__info { grid-column: b / g; }
  .chg-project--tall-end .chg-project__media--main { grid-column: c / end; grid-row: 1; }
  .chg-project--tall-end .chg-project__media--secondary { display: none; }
  .chg-project--tall-end .chg-project__info { grid-column: a / f; }
  .chg-project--full .chg-project__media--main {
    grid-column: a / end; grid-row: 1;
    margin-inline: calc(-1 * var(--cg-margin));
  }
  .chg-project--full .chg-project__info { grid-column: a / g; }
  .chg-project--full .chg-project__title { font-size: clamp(3rem, 9vw, 5.5rem); line-height: 0.9; }
  .chg-project--center .chg-project__media--main { grid-column: b / end; grid-row: 1; }
  .chg-project--center .chg-project__info { grid-column: b / g; }
  .chg-project--pair .chg-project__media--main { grid-column: a / f; grid-row: 1; }
  .chg-project--pair .chg-project__media--secondary { grid-column: f / end; grid-row: 1; margin-block-start: 30%; }
  .chg-project--pair .chg-project__info { grid-column: a / f; }
}

/* ============================================================ MOBILE < 768 */
@media (max-width: 767px) {
  .chg-work__index { grid-column: a / end; grid-row: 1; padding: 0; }
  .chg-work__title { grid-column: a / end; grid-row: 2; font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .chg-work__count { grid-column: a / end; grid-row: 3; align-self: start; padding: 0; }
  .chg-work__intro { grid-column: a / end; grid-row: 4; }
  .chg-work__all { grid-column: a / end; grid-row: 5; justify-self: start; }

  .chg-project {
    grid-template-columns: [a] minmax(0, 1fr) [b] minmax(0, 1fr) [c] minmax(0, 1fr) [d] minmax(0, 1fr) [end];
    row-gap: 0;
  }
  .chg-project + .chg-project { margin-block-start: clamp(4.5rem, 20vw, 6.5rem); }
  /* info children join the article grid so the image sits between the
     title block and the description (one pattern for every project) */
  .chg-project__info { display: contents; }
  .chg-project__index { grid-column: a / end; grid-row: 1; margin-block-end: 12px; }
  .chg-project__num { font-size: 2.5rem; }
  .chg-project__title { grid-column: a / end; grid-row: 2; font-size: clamp(1.9rem, 8.4vw, 2.5rem); margin-block-end: 10px; }
  .chg-project__meta { grid-column: a / end; grid-row: 3; margin-block-end: 20px; }
  .chg-project .chg-project__media--main {
    grid-column: a / end; grid-row: 4;
    margin-inline: calc(-1 * var(--cg-margin));   /* large, edge to edge */
  }
  .chg-project--full .chg-project__frame { aspect-ratio: 4 / 3; }
  .chg-project--full .chg-project__img { object-position: 20% 50%; }
  .chg-project .chg-project__media--secondary { display: none; }
  .chg-project--pair .chg-project__media--secondary {
    display: block;
    grid-column: c / end; grid-row: 5;
    margin-block: -18% 0;                           /* overlaps the main image edge */
    margin-inline-end: calc(-1 * var(--cg-margin) + 0px);
    z-index: 1;
  }
  .chg-project__desc { grid-column: a / end; grid-row: 6; margin-block-start: 18px; }
  .chg-project--pair .chg-project__desc { grid-column: a / c; grid-row: 5; align-self: end; margin-block-start: 18px; font-size: 0.8125rem; }
  .chg-project__outcome { grid-column: a / end; grid-row: 7; }
  .chg-project__view { display: none; }
}

/* ------------------------------------------------------------ hover & focus (desktop, fine pointer) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .chg-work__list.is-focusing .chg-project:not(.is-active) { opacity: 0.42; }
  .chg-project.is-active .chg-project__view,
  .chg-project:focus-within .chg-project__view { clip-path: inset(0 0 0 0); }
  .chg-project.is-active .chg-project__media--main .chg-project__img { transform: scale(1.025); }
  .chg-project .chg-project__link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 620ms var(--cg-ease-out); }
  .chg-project.is-active .chg-project__link { background-size: 100% 1px; }
}

/* ------------------------------------------------------------ social strip */
.chg-social { margin-block-start: clamp(6rem, 12vw, 12rem); }
.chg-social__head { row-gap: 10px; align-items: end; margin-block-end: clamp(20px, 2.4vw, 32px); }
.chg-social__title {
  grid-column: a / f;
  font-size: var(--cg-type-h2);
  line-height: 0.95;
  letter-spacing: var(--cg-track-heading);
  font-weight: 500;
}
.chg-social__note { grid-column: f / h; color: var(--cg-text-mute); padding-block-end: 0.5em; }
.chg-social__hint { grid-column: h / end; justify-self: end; color: var(--cg-text-mute); padding-block-end: 0.5em; }

.chg-social__track {
  --pad: max(var(--cg-margin), calc((100% - var(--cg-max)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  padding-block-end: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--cg-stone) transparent;
}
.chg-social__track:focus-visible { outline: 2px solid var(--cg-focus); outline-offset: -2px; }
.chg-social .chg-social__list {            /* beats .chg-site ul[role=list] reset */
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  inline-size: max-content;
  padding-inline: var(--pad);
  margin: 0;
  list-style: none;
}
.chg-social__item { flex: none; inline-size: clamp(190px, 17vw, 300px); scroll-snap-align: start; }
.chg-social__item:nth-child(even) { margin-block-start: clamp(18px, 3vw, 48px); }   /* feed rhythm */
.chg-social__frame { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--cg-limestone); }

@media (max-width: 1023px) {
  .chg-social__title { grid-column: a / f; }
  .chg-social__note { grid-column: a / f; grid-row: 2; }
  .chg-social__hint { grid-column: f / end; grid-row: 2; }
  .chg-social__item { inline-size: clamp(170px, 30vw, 260px); }
}
@media (max-width: 767px) {
  .chg-social__title { grid-column: a / end; font-size: clamp(2rem, 9vw, 2.75rem); }
  .chg-social__note { grid-column: a / d; }
  .chg-social__hint { grid-column: d / end; }
  .chg-social__item { inline-size: 58vw; }
}

/* ------------------------------------------------------------ closing */
.chg-work__end { margin-block-start: clamp(5rem, 10vw, 10rem); }
.chg-work__end-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block-start: clamp(20px, 2.4vw, 32px);
}
.chg-work__end-label { color: var(--cg-text-mute); }

/* ============================================================ MOTION
   Only with JS + motion (html.chg-motion). One move per element, one
   direction (upward), a clear end position. */
.chg-motion .chg-project__frame {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1150ms var(--cg-ease-out);
}
.chg-motion .chg-project__img { transform: scale(1.12); transition: transform 1600ms var(--cg-ease-out); }
.chg-motion .chg-project__media--secondary .chg-project__frame { transition-delay: 180ms; }
.chg-motion .chg-project__media--secondary .chg-project__img { transition-delay: 180ms; }
.chg-motion .chg-project.is-in .chg-project__frame { clip-path: inset(0 0 0 0); }
.chg-motion .chg-project.is-in .chg-project__img { transform: none; }

.chg-motion .chg-project__index,
.chg-motion .chg-project__title,
.chg-motion .chg-project__meta,
.chg-motion .chg-project__desc,
.chg-motion .chg-project__outcome {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 700ms var(--cg-ease-soft), transform 900ms var(--cg-ease-out);
}
.chg-motion .chg-project__title { transition-delay: 90ms; }
.chg-motion .chg-project__meta { transition-delay: 160ms; }
.chg-motion .chg-project__desc,
.chg-motion .chg-project__outcome { transition-delay: 230ms; }
.chg-motion .chg-project.is-in .chg-project__index,
.chg-motion .chg-project.is-in .chg-project__title,
.chg-motion .chg-project.is-in .chg-project__meta,
.chg-motion .chg-project.is-in .chg-project__desc,
.chg-motion .chg-project.is-in .chg-project__outcome { opacity: 1; transform: none; }

/* Scroll parallax (desktop only; JS writes --py -1…1 and --iy px).
   The image layer is 8% taller than its frame so it never shows an edge. */
@media (min-width: 1024px) {
  .chg-motion .chg-project__parallax {
    inset: -4% 0;
    transform: translate3d(0, calc(var(--py, 0) * 3.6%), 0);
  }
  .chg-motion .chg-project__info { transform: translate3d(0, calc(var(--iy, 0) * 1px), 0); }
}

.chg-motion .chg-social__item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--cg-ease-soft), transform 900ms var(--cg-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.chg-motion .chg-social.is-in .chg-social__item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chg-work__rule { transform: none; }
  .chg-project, .chg-project__img, .chg-project__view, .chg-project__link { transition: none !important; }
  .chg-project.is-active .chg-project__media--main .chg-project__img { transform: none; }
}


/* ---- src/css/chg-elementor.css ---- */
/* ==========================================================================
   Chalhoub Graphic — Elementor compatibility reset
   File:     src/css/chg-elementor.css
   Purpose:  The ONLY place where Elementor's own classes are touched.
             Removes container padding/gaps around widgets that hold a
             Chalhoub section, so sections control their own spacing.
   Bundle:   WordPress only (not loaded by the local preview).
   Rule:     keep this file small; do not style Elementor anywhere else.
   ========================================================================== */
.chg-site .e-con:has(> .elementor-widget-html [data-chg-section]),
.chg-site .e-con:has(> .e-con-inner > .elementor-widget-html [data-chg-section]) {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --gap: 0;
  --row-gap: 0;
  --column-gap: 0;
  --content-width: 100%;
}
.chg-site .elementor-widget-html:has([data-chg-section]) { margin: 0 !important; inline-size: 100%; }
.chg-site .elementor-widget-html:has([data-chg-section]) > .elementor-widget-container { margin: 0; padding: 0; }

/* The Elementor kit (post-6.css: `.elementor-kit-6 img { border-radius: 20px }`)
   rounds every image. Chalhoub images are always square-cornered: hero stage
   and pieces, project and social images. Found in Phase 3 live QA (it also
   affected the Phase 2C hero stage since 2B). */
.chg-site :is(.chg-hero, .chg-work, .chg-header) img { border-radius: 0; }