/*
 * brand-rox-ae.css — Roksolana Pyrtko · United Arab Emirates edition
 * (roksolanapyrtko.ae). Loads AFTER base.css; brand-roksolana.css is NOT loaded
 * for this site, so this file is fully STANDALONE — it carries every brand token
 * and every rule the rk-* / article / archive markup needs.
 *
 * Archetype: the Dubai edition reads as a PRIVATE CAPITAL CABINET, not a mall
 * brochure — quiet, expensive, mono-mineral. Where the flagship is loud
 * (carmine accent + gold hairlines), .ae is restrained and BI-SCRIPTAL: a single
 * brass/bronze accent, a deep Gulf-teal-graphite ink (never brown-black), a cool
 * limestone-pearl paper, and a signature MASHRABIYA lattice (§9 of the direction
 * doc) that replaces the flagship gold colophon. NO carmine appears anywhere.
 *
 * Fonts (self-hosted, replicated here because brand-roksolana.css is absent at
 * runtime): Playfair Display 400 normal+italic for Latin display headings; IBM
 * Plex Sans Arabic 400/600/700 for Arabic (Playfair has no Arabic glyphs); body
 * + meta stay on the system sans (zero body web-font cost, instant LCP).
 *
 * Order: tokens -> fonts -> base/masthead -> hero -> home sections ->
 * article/page/archive -> mashrabiya signature -> RTL/Arabic -> responsive ->
 * reduced-motion.
 */

/* .rk-sources carries its own .wrap padding; zero it inside main. */
.article-main .rk-sources { padding-inline: 0; max-width: 100%; }

/* ============================================================= *
 * 0. SELF-HOSTED FONTS
 * -------------------------------------------------------------
 * Playfair Display — Latin display serif, weight 400 (normal + italic). Latin
 * subset covers EN/typographic punctuation. IBM Plex Sans Arabic — Arabic script
 * only (unicode-range), so Latin runs inside an RTL page keep the Helvetica
 * stack. font-display:swap paints instantly in the fallback then swaps.
 * Paths are relative to THIS file (assets/css/ -> ../fonts/).
 * ============================================================= */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-400.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: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-400-italic.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: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-600.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-700.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ============================================================= *
 * 1. TOKENS — palette, type, spacing, mashrabiya gradients
 * ============================================================= */
:root {
  /* ---- rae palette (limestone paper + Gulf-ink + single brass accent) ---- */
  --rae-bg:            #F0EDE6;            /* paper — limestone-pearl              */
  --rae-bg-2:          #E6E0D4;            /* second surface — dune (bands)        */
  --rae-surface:       #F7F4EE;            /* raised surface — alabaster (cards)   */
  --rae-ink:           #152420;            /* primary text / dark masthead / hero  */
  --rae-ink-2:         #22322D;            /* headings on light / hover fill       */
  --rae-ink-soft:      #54605B;            /* meta / kicker-2 / caption (5.5:1)    */
  --rae-accent:        #7E4E22;            /* THE accent — deep bronze; TEXT only  */
  --rae-accent-metal:  #B48A4E;            /* brass — hairlines/frames/lattice ONLY*/
  --rae-accent-soft:   #E4C88C;            /* champagne — text ONLY on dark ink     */
  --rae-hairline:      rgba(21, 36, 32, .14);
  --rae-on-dark:       #EDE7DA;            /* text on ink (masthead/hero/footer)   */
  --rae-mist:          #D8D0C1;            /* card borders on paper                */
  --rae-focus:         #7E4E22;            /* focus ring on paper                  */
  --rae-accent-deep:   #5E3A19;            /* bronze pressed / link-hover          */

  /* ---- font stacks ---- */
  --rae-display: "Playfair Display", "Didot", "Bodoni MT", "Bodoni 72", "Hoefler Text", Georgia, "Times New Roman", serif;
  --rae-sans:    "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --rae-arabic:  "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --display:     var(--rae-display);       /* alias used by shared article rules   */
  --rk-sans:     var(--rae-sans);
  --font-serif:  var(--rae-display);
  --font-sans:   var(--rae-sans);

  /* ---- re-skin the shared engine tokens so article/archive/page inherit the
     limestone + Gulf-ink + bronze palette automatically (contract §2) ---- */
  --nn-bg:          #F0EDE6;
  --nn-paper:       #F7F4EE;
  --nn-ink:         #152420;
  --nn-indigo:      #152420;               /* headings render as Gulf-ink          */
  --nn-indigo-deep: #22322D;
  --nn-teal:        #7E4E22;               /* links = deep bronze                  */
  --nn-teal-deep:   #5E3A19;               /* link hover / accents                 */
  --nn-gold:        #B48A4E;               /* brass hairlines                      */
  --nn-gray:        #54605B;
  --nn-mist:        #D8D0C1;

  /* ---- reused scale tokens (must exist standalone; contract §3/§4) ---- */
  --wrap: 1240px;                          /* full-bleed wrapper (hero/mosaic)     */
  --rk-measure: 44rem;                     /* reading column ≈ 66-70ch @17-19px    */

  --rk-space-1: 0.25rem;                   /*  4px */
  --rk-space-2: 0.5rem;                    /*  8px */
  --rk-space-3: 1rem;                      /* 16px */
  --rk-space-4: 1.5rem;                    /* 24px */
  --rk-space-5: 2.5rem;                    /* 40px */
  --rk-space-6: 4rem;                      /* 64px */

  --rk-step--1: clamp(0.6875rem, 0.66rem + 0.1vw,  0.75rem);   /* 11 -> 12 micro   */
  --rk-step-0:  clamp(0.75rem,   0.72rem + 0.13vw, 0.8125rem); /* 12 -> 13 caption */
  --rk-step-1:  clamp(1.0625rem, 1rem + 0.3vw,     1.1875rem); /* 17 -> 19 subhead */
  --rk-step-2:  clamp(1.375rem,  1.2rem + 0.9vw,   1.625rem);  /* 22 -> 26 mkt/foot*/
  --rk-step-3:  clamp(1.75rem,   3.4vw,            2.5rem);    /* 28 -> 40 sect H2 */
  --rk-step-4:  clamp(2.375rem,  6.4vw,            4.875rem);  /* 38 -> 78 hero H1 */

  /* ---- mashrabiya lattice: two crossed ±45° repeating gradients, symmetric ->
     RTL-safe (never mirrored). 12px step for bands, 10px for the marginal ribbon
     + byline frame. Fixed step so it never distorts at 390px. ---- */
  --rae-fret-12:
    repeating-linear-gradient( 45deg, var(--rae-accent-metal) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, var(--rae-accent-metal) 0 1px, transparent 1px 12px);
  --rae-fret-10:
    repeating-linear-gradient( 45deg, var(--rae-accent-metal) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, var(--rae-accent-metal) 0 1px, transparent 1px 10px);
}

/* ============================================================= *
 * 2. BASE / GLOBAL REFINEMENTS
 * ============================================================= */
html { scroll-padding-top: 84px; }        /* clear the sticky masthead on #anchors */
body {
  background: var(--rae-bg);
  color: var(--rae-ink);
  font-family: var(--rae-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 30px; }
/* The "dead right half" fix: win on SPECIFICITY (0,2,0 > the brand .wrap's 0,1,0)
   so no later .wrap rule can regress the narrow reading measure. Article
   head/dek/body all collapse onto one centred 44rem column. */
.wrap.wrap--narrow { max-width: var(--rk-measure); margin-inline: auto; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--rae-display);
  font-weight: 400;
  color: var(--rae-ink);
  letter-spacing: .005em;
}

/* focus-visible: bronze on paper, champagne on the dark surfaces */
:focus-visible { outline: 2.5px solid var(--rae-focus); outline-offset: 3px; border-radius: 2px; }
.rk-siteheader :focus-visible,
#rk-mobilenav :focus-visible,
.rk-hero :focus-visible,
.rk-contactstrip :focus-visible,
.rk-footer :focus-visible { outline-color: var(--rae-accent-soft); }

/* shared label atoms — bronze kicker (text-safe AA), teal-grey meta */
.kicker {
  font-family: var(--rae-sans);
  font-size: var(--rk-step--1);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rae-accent);
  margin: 0;
}
.meta {
  font-family: var(--rae-sans);
  font-size: var(--rk-step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rae-ink-soft);
  font-weight: 600;
}

/* ============================================================= *
 * 3. MASHRABIYA SECTION BAND (.rae-fret) — this edition signature rhythm
 * -------------------------------------------------------------
 * An <hr class="rae-fret" aria-hidden> between home sections. Decorative only.
 * ============================================================= */
.rae-fret {
  height: 10px;
  margin: 0;
  border: 0;
  border-block: 1px solid var(--rae-hairline);
  background-image: var(--rae-fret-12);
  opacity: .5;
}

/* ============================================================= *
 * 4. MASTHEAD (dark, sticky) — .rk-siteheader
 * ============================================================= */
.rk-siteheader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21, 36, 32, .96);
  color: var(--rae-on-dark);
  border-bottom: 1px solid rgba(180, 138, 78, .24);
}
.rk-siteheader .wrap { display: flex; align-items: center; gap: 20px; height: 70px; }

.rk-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--rae-on-dark); }
.rk-logo-mark { width: 26px; height: auto; color: currentColor; transition: color .25s ease; }
.rk-brand:hover .rk-logo-mark { color: var(--rae-accent-soft); }
.rk-brand .wm { display: flex; flex-direction: column; line-height: 1; }
.rk-brand .wm b { font-family: var(--rae-display); font-weight: 400; font-size: 21px; letter-spacing: .02em; }
.rk-brand .wm b em { font-style: italic; color: var(--rae-accent-soft); }
.rk-brand .wm span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--rae-accent-soft); margin-top: 4px; }

.rk-mainnav { display: flex; gap: 2px; margin-inline-start: auto; }
.rk-mainnav a {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: 8px 13px; color: var(--rae-on-dark); position: relative; opacity: .92;
}
.rk-mainnav a:hover { opacity: 1; color: var(--rae-accent-soft); }
.rk-mainnav a::after {
  content: ""; position: absolute; inset-inline: 13px; bottom: 2px; height: 2px;
  background: var(--rae-accent-metal); transform: scaleX(0); transform-origin: inline-start;
  transition: transform .3s ease;
}
.rk-mainnav a:hover::after { transform: scaleX(1); }

.rk-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rk-lang { display: inline-flex; border: 1px solid rgba(180, 138, 78, .44); border-radius: 999px; overflow: hidden; }
.rk-lang a, .rk-lang span {
  font-family: var(--rae-sans); font-size: 11px; letter-spacing: .14em; font-weight: 700;
  padding: 5px 11px; background: transparent; color: var(--rae-accent-soft);
}
.rk-lang a:hover { color: #fff; text-decoration: none; }
.rk-lang [aria-current="true"] { background: var(--rae-on-dark); color: var(--rae-ink); }

/* Buttons — bronze fill primary + hairline ghost. Explicit transitions (no all). */
.rk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rae-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 11px 20px; cursor: pointer;
  border: 1px solid transparent;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
/* kill the 300ms double-tap delay + grey flash on the interactive controls */
.rk-mainnav a, .rk-lang a, #rk-mobilenav a, .rk-mnav-lang a,
.rk-nav-toggle, .rk-card, .rk-authority-cta, .rk-mkt li a, .rk-method-links a {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rk-btn .arrow { font-family: var(--rae-display); font-style: normal; }
.rk-btn-primary { background: var(--rae-accent); color: #fff; }
.rk-btn-primary:hover { background: var(--rae-accent-deep); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(126, 78, 34, .6); color: #fff; text-decoration: none; }
.rk-btn-ghost { background: transparent; color: var(--rae-on-dark); border-color: rgba(237, 231, 218, .5); }
.rk-btn-ghost:hover { background: var(--rae-on-dark); color: var(--rae-ink); text-decoration: none; }

/* Mobile disclosure */
.rk-nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(180, 138, 78, .44); color: var(--rae-on-dark);
  cursor: pointer; border-radius: 4px;
}
.rk-nav-toggle svg { width: 20px; height: 20px; }
#rk-mobilenav { display: none; background: var(--rae-ink-2); border-bottom: 1px solid rgba(180, 138, 78, .22); }
#rk-mobilenav[data-open="true"] { display: block; }
#rk-mobilenav .wrap { padding-top: 6px; padding-bottom: 14px; }
#rk-mobilenav a {
  display: block; color: var(--rae-on-dark); font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: 13px 4px;
  border-bottom: 1px solid rgba(180, 138, 78, .16);
}
#rk-mobilenav .wrap > a:last-of-type { border-bottom: 0; }
#rk-mobilenav a:hover { color: var(--rae-accent-soft); }
#rk-mobilenav .rk-mnav-lang {
  display: flex; gap: 10px; align-items: center; padding: 16px 4px 4px; margin-top: 6px;
  border-top: 1px solid rgba(180, 138, 78, .16);
}
#rk-mobilenav .rk-mnav-lang a,
#rk-mobilenav .rk-mnav-lang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; min-height: 44px; padding: 0 16px;
  font-family: var(--rae-sans); font-size: 13px; letter-spacing: .14em; font-weight: 700;
  text-transform: uppercase; border: 1px solid rgba(180, 138, 78, .44); border-radius: 999px;
  color: var(--rae-accent-soft);
}
#rk-mobilenav .rk-mnav-lang [aria-current="true"] { background: var(--rae-on-dark); color: var(--rae-ink); border-color: var(--rae-on-dark); }
#rk-mobilenav .rk-mnav-lang a:hover { color: #fff; text-decoration: none; }

/* ============================================================= *
 * 5. FULL-BLEED DARK HERO — .rk-hero
 * -------------------------------------------------------------
 * Dubai retail-district at dusk: Gulf-ink -> bronze horizon (contract §2).
 * ============================================================= */
.rk-hero {
  position: relative; background: var(--rae-ink); color: var(--rae-on-dark);
  overflow: hidden; min-height: clamp(520px, 82vh, 760px);
  display: flex; align-items: flex-end;
}
.rk-hero-art { position: absolute; inset: 0; z-index: 0; }
.rk-hero-art .grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 26, 23, .94) 0%, rgba(16, 26, 23, .72) 42%, rgba(16, 26, 23, .28) 100%),
    linear-gradient(0deg,  rgba(16, 26, 23, .92) 0%, rgba(16, 26, 23, 0) 55%),
    linear-gradient(125deg, #10201C 0%, #1B2A24 46%, #4A3418 100%);
}
.rk-hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-hero-inner { position: relative; z-index: 2; width: 100%; padding-block-end: clamp(48px, 7vw, 84px); }
.rk-hero-eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.rk-hero-eyebrow .kline { width: 46px; height: 1px; background: var(--rae-accent-metal); }
.rk-hero-eyebrow .k { font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rae-accent-soft); }
.rk-hero h1 {
  font-family: var(--rae-display); font-weight: 400; margin: 0 0 26px; max-width: 17ch;
  font-size: var(--rk-step-4); line-height: 1.0; letter-spacing: .005em; color: var(--rae-on-dark);
}
.rk-hero h1 em { font-style: italic; color: var(--rae-accent-soft); }
.rk-hero .lede { font-size: clamp(15px, 1.7vw, 19px); color: #E4DCCB; max-width: 56ch; margin: 0 0 34px; line-height: 1.6; }
.rk-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rk-hero-corner {
  position: absolute; top: 26px; inset-inline-end: 30px; z-index: 2; text-align: end;
  font-size: var(--rk-step--1); letter-spacing: .22em; text-transform: uppercase;
  color: var(--rae-accent-soft); opacity: .9;
}
.rk-hero-imglabel {
  position: absolute; inset-inline-start: 30px; bottom: 14px; z-index: 2;
  font-size: var(--rk-step--1); letter-spacing: .2em; text-transform: uppercase;
  color: #D8CDBE; opacity: .75;
}

/* ============================================================= *
 * 6. APPROACH BAND — .rk-approach (dune surface, brass cell dividers)
 * ============================================================= */
.rk-approach { background: var(--rae-bg-2); border-bottom: 1px solid var(--rae-hairline); }
.rk-approach .wrap { padding-block: var(--rk-space-5); }   /* block-only: keep wrap inline padding */
.rk-approach-grid { display: grid; grid-template-columns: 1.15fr 2fr; gap: 44px; align-items: center; }
.rk-approach-lead { font-family: var(--rae-display); font-weight: 400; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.28; margin: 0; color: var(--rae-ink); }
.rk-approach-lead em { font-style: italic; color: var(--rae-accent); }
.rk-cap-row { display: flex; gap: 0; flex-wrap: wrap; }
.rk-cap-cell { flex: 1 1 180px; padding-block: var(--rk-space-1); padding-inline: 22px; border-inline-start: 1px solid var(--rae-accent-metal); }
.rk-cap-cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
.rk-cap-cell h3 { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-1); margin: 0 0 7px; color: var(--rae-ink); }
.rk-cap-cell p { font-size: var(--rk-step-0); color: var(--rae-ink-soft); margin: 0; line-height: 1.5; }

/* ============================================================= *
 * 7. AUTHORITY / "ABOUT THE EDITORIAL" — .rk-authority
 * ============================================================= */
.rk-authority { background: var(--rae-bg); border-bottom: 1px solid var(--rae-hairline); padding-block: var(--rk-space-6); }
.rk-authority-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rk-authority-portrait { position: relative; align-self: stretch; }
.rk-authority-portrait img { width: 100%; height: auto; display: block; border: 1px solid var(--rae-accent-metal); }
.rk-authority-portrait-ph {
  aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--rae-ink) 0%, #1B2A24 62%, #4A3418 130%);
  border: 1px solid var(--rae-accent-metal);
}
.rk-authority-portrait-ph .rk-authority-mark { width: 92px; height: auto; color: var(--rae-accent-soft); opacity: .5; }
.rk-authority .kicker { display: block; margin-bottom: var(--rk-space-2); }
.rk-authority h2 { font-size: var(--rk-step-3); line-height: 1.05; margin: 0 0 var(--rk-space-3); color: var(--rae-ink); }
.rk-authority-lead { font-size: var(--rk-step-1); line-height: 1.6; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 60ch; }
.rk-authority-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rk-space-3);
  margin: 0 0 var(--rk-space-4); padding: var(--rk-space-4) 0 0; border-top: 1px solid var(--rae-accent-metal);
}
.rk-authority-kpis .rk-kpi { margin: 0; display: flex; flex-direction: column; gap: var(--rk-space-1); }
.rk-authority-kpis dt { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); color: var(--rae-accent); line-height: 1; }
.rk-authority-kpis dd { margin: 0; font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; line-height: 1.35; }
.rk-authority-cta {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--rae-sans);
  font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--rae-accent); padding: 12px 22px;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.rk-authority-cta .arrow { font-family: var(--rae-display); font-style: normal; }
.rk-authority-cta:hover { background: var(--rae-accent-deep); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(126, 78, 34, .6); }

/* ============================================================= *
 * 8. PORTFOLIO MOSAIC — .rk-portfolio (asymmetric desks grid)
 * ============================================================= */
.rk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 26px; }
.rk-section-head .st { display: flex; flex-direction: column; gap: 8px; }
.rk-section-head h2 { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-3); margin: 0; line-height: 1; color: var(--rae-ink); }
.rk-section-head .lk { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--rae-accent); }
.rk-section-head .lk:hover { color: var(--rae-accent-deep); }

.rk-portfolio { padding: var(--rk-space-6) 0 20px; }
.rk-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: var(--rk-space-3); }
.rk-card {
  position: relative; overflow: hidden; background: var(--rae-ink);
  border: 1px solid var(--rae-accent-metal); display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rk-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(21, 36, 32, .7); text-decoration: none; }
.rk-card .art { position: absolute; inset: 0; }
.rk-card .art img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.rk-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-card .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 16, .96) 6%, rgba(11, 19, 16, .38) 52%, rgba(11, 19, 16, .05) 80%); }
.rk-card .figc { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; color: var(--rae-on-dark); padding: 18px; }
.rk-card .cat { font-size: var(--rk-step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--rae-accent-soft); font-weight: 700; }
.rk-card .ttl {
  font-family: var(--rae-display); font-weight: 400; line-height: 1.1; margin-top: 7px;
  color: var(--rae-on-dark); text-shadow: 0 1px 6px rgba(11, 19, 16, .55);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.rk-card:hover .ttl { color: var(--rae-accent-soft); }
.rk-card .kpi { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3; font-family: var(--rae-display); background: rgba(126, 78, 34, .94); color: var(--rae-on-dark); padding: 6px 11px; font-size: 14px; letter-spacing: .02em; }
.rk-card .flag { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; font-size: var(--rk-step--1); letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 700; background: rgba(11, 19, 16, .85); padding: 5px 9px; }
.rk-c-feature { grid-column: span 7; grid-row: span 3; }
.rk-c-feature .ttl { font-size: clamp(24px, 2.4vw, 32px); }
.rk-c-tall { grid-column: span 5; grid-row: span 3; }
.rk-c-tall .ttl { font-size: 22px; }
.rk-c-wide { grid-column: span 5; grid-row: span 2; }
.rk-c-wide .ttl { font-size: 20px; }
.rk-c-sm { grid-column: span 4; grid-row: span 2; }
.rk-c-sm .ttl { font-size: 18px; }
.rk-c-3 { grid-column: span 3; grid-row: span 2; }
.rk-c-3 .ttl { font-size: 17px; }
/* Gradient placeholders — Gulf-ink -> bronze (NO carmine). */
.rk-d1 { background: linear-gradient(150deg, #1b2a24, #4a3418); }
.rk-d2 { background: linear-gradient(150deg, #152420, #5e3a19); }
.rk-d3 { background: linear-gradient(150deg, #22322d, #3d2c14); }
.rk-d4 { background: linear-gradient(150deg, #18261f, #4a3418); }
.rk-d5 { background: linear-gradient(150deg, #10201c, #33240f); }
.rk-d6 { background: linear-gradient(150deg, #1f2f28, #5e3a19); }

/* ============================================================= *
 * 9. TRUST / METHODOLOGY STRIP — .rk-method
 * ============================================================= */
.rk-method { background: var(--rae-bg-2); border-block: 1px solid var(--rae-hairline); padding-block: var(--rk-space-5); }
.rk-method-grid { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.rk-method-intro .kicker { display: block; margin-bottom: var(--rk-space-2); }
.rk-method-intro h2 { font-size: var(--rk-step-2); line-height: 1.1; margin: 0; color: var(--rae-ink); }
.rk-method-trust { font-size: var(--rk-step-1); line-height: 1.55; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-method-links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); }
.rk-method-links a {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--rae-sans);
  font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rae-accent); border-bottom: 1px solid var(--rae-accent-metal); padding-bottom: 3px;
}
.rk-method-links a:hover { color: var(--rae-accent-deep); }
.rk-method-links .arrow { font-family: var(--rae-display); font-style: normal; }

/* ============================================================= *
 * 10. SECTOR INDEX — .rk-markets (contents-page grid, 01-05)
 * -------------------------------------------------------------
 * 5-desk variant: auto-fit -> 3-up desktop, 3+2 wrap, 1-up mobile (no orphan).
 * ============================================================= */
.rk-markets { padding: 56px 0 var(--rk-space-4); }
.rk-mkt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rae-accent-metal); border: 1px solid var(--rae-accent-metal); }
.rk-mkt-grid--5 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rk-mkt { background: var(--rae-bg); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.rk-mkt .top { display: flex; align-items: baseline; justify-content: space-between; }
.rk-mkt h3 { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); margin: 0; color: var(--rae-ink); }
.rk-mkt h3 a { color: inherit; }
.rk-mkt h3 a:hover { color: var(--rae-accent); text-decoration: none; }
.rk-mkt .idx { font-family: var(--rae-display); font-size: 15px; color: var(--rae-accent); }
.rk-mkt .desk-line { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; padding-bottom: 12px; border-bottom: 2px solid var(--rae-accent-metal); }
.rk-mkt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rk-mkt li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rae-hairline); font-family: var(--rae-display); font-size: 17px; line-height: 1.22; color: var(--rae-ink); }
.rk-mkt li:last-child a { border-bottom: 0; }
.rk-mkt li a:hover { color: var(--rae-accent); text-decoration: none; }
.rk-mkt li a span { display: block; font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--rae-ink-soft); margin-top: 5px; font-weight: 600; }
.rk-mkt-empty { font-family: var(--rae-sans); font-size: var(--rk-step-0); letter-spacing: .04em; color: var(--rae-ink-soft); padding: 12px 0; }

/* ============================================================= *
 * 11. CONTACT STRIP — .rk-contactstrip (dark)
 * ============================================================= */
.rk-contactstrip { margin-top: 60px; background: var(--rae-ink); color: var(--rae-on-dark); }
.rk-contactstrip .wrap { padding-block: 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.rk-contactstrip h2 { font-family: var(--rae-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); margin: 0; max-width: 20ch; line-height: 1.08; color: var(--rae-on-dark); }
.rk-contactstrip h2 em { font-style: italic; color: var(--rae-accent-soft); }

/* ============================================================= *
 * 12. FOOTER — .rk-footer (dark, 4-track)
 * ============================================================= */
.rk-footer { background: var(--rae-ink-2); color: var(--rae-on-dark); padding: 44px 0 30px; }
.rk-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; align-items: start; }
.rk-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rk-foot-brand .rk-logo-mark { width: 24px; color: var(--rae-accent-soft); }
.rk-footer .rk-foot-name { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); margin: 0; color: var(--rae-on-dark); }
.rk-footer .rk-foot-name em { font-style: italic; color: var(--rae-accent-soft); }
.rk-foot-pub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rae-accent-soft); font-weight: 600; }
.rk-foot-trust { font-size: 12.5px; color: #D3C8B7; max-width: 42ch; margin-top: 14px; line-height: 1.6; }
.rk-fcol .meta { color: var(--rae-accent-soft); margin-bottom: 12px; display: block; }
.rk-fcol a { font-size: 13px; color: #E7DDCC; display: block; padding: 4px 0; }
.rk-fcol a:hover { color: var(--rae-accent-soft); }
.rk-foot-focus { display: block; font-size: 13px; color: #C7BCA9; padding: 4px 0; letter-spacing: .04em; }
.rk-foot-base {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(180, 138, 78, .2);
  display: flex; justify-content: space-between; gap: var(--rk-space-3); flex-wrap: wrap;
  font-size: var(--rk-step--1); letter-spacing: .14em; text-transform: uppercase; color: #A99C8C;
}

/* ============================================================= *
 * 13. ARTICLE / ARCHIVE / PAGE — mineral limestone treatment
 * ============================================================= */
.article-title, .page-title { font-family: var(--rae-display); font-weight: 400; color: var(--rae-ink); letter-spacing: .005em; }
.article-title { max-width: none; text-wrap: balance; }        /* fill the 44rem measure */
.page-title { text-wrap: balance; }
.article-dek { font-family: var(--rae-display); color: var(--rae-ink-soft); max-width: none; text-wrap: pretty; }
/* give the breadcrumb air under the sticky masthead */
.article-head { padding-block-start: clamp(var(--rk-space-4), 4vw, var(--rk-space-6)); }
.breadcrumbs { font-family: var(--rae-sans); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--rae-ink-soft); font-weight: 600; }
.breadcrumbs li::after { color: var(--rae-accent-metal); }

.article-body { font-family: var(--rae-sans); }
.article-body h2, .article-body h3, .entry-content h2, .entry-content h3 { font-family: var(--rae-display); font-weight: 400; color: var(--rae-ink); }
.article-body a { color: var(--rae-accent); border-bottom: 1px solid var(--rae-accent-metal); }
.article-body a:hover { color: var(--rae-accent-deep); }
.article-body blockquote { border-inline-start: 3px solid var(--rae-accent-metal); font-family: var(--rae-display); color: var(--rae-ink); font-style: italic; }

.byline__avatar { background: var(--rae-accent); font-family: var(--rae-display); }
.byline__name a { color: var(--rae-ink); }
.author-box { background: var(--rae-bg-2); border-inline-start: 3px solid var(--rae-accent-metal); }

.related { border-top: 2px solid var(--rae-ink); }
.translation-note { background: var(--rae-bg-2); border: 1px solid var(--rae-mist); }
.translation-note a { color: var(--rae-accent); }
.section-head { border-bottom-color: var(--rae-ink); }

.card { background: var(--rae-surface); border: 1px solid var(--rae-mist); border-radius: 0; box-shadow: none; }
.card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(21, 36, 32, .5); }
.card__media { border-bottom: 1px solid var(--rae-mist); }
.card__title { font-family: var(--rae-display); font-weight: 400; }
.card__title a { color: var(--rae-ink); }
.card__title a:hover { color: var(--rae-accent); }
/* one category label per card: keep the bronze kicker, drop the duplicate in meta */
.card__meta > a,
.card__meta > a + .dot { display: none; }

.pagination .page-numbers { border: 1px solid var(--rae-mist); border-radius: 0; color: var(--rae-ink); background: transparent; }
.pagination .page-numbers.current { background: var(--rae-ink); border-color: var(--rae-ink); color: var(--rae-on-dark); }
.pagination a.page-numbers:hover { border-color: var(--rae-accent); color: var(--rae-accent); }
.btn { background: var(--rae-accent); border-radius: 0; }
.btn:hover { background: var(--rae-accent-deep); }
.page-header { border-bottom: 2px solid var(--rae-ink); }

/* --- rk-article structural divergence (drop-cap / pull-quote / H2 divider) --- */
.rk-article > p:first-of-type::first-letter {
  float: inline-start;
  font-family: var(--rae-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  margin: 0.02em 0.04em 0 0;
  color: var(--rae-accent);
}
.rk-article blockquote.rk-pullquote {
  position: relative; border-inline-start: 0; margin: var(--rk-space-6) 0;
  padding: var(--rk-space-2) 0 var(--rk-space-2) var(--rk-space-5);
  font-family: var(--rae-display); font-style: italic; font-size: var(--rk-step-2);
  line-height: 1.28; color: var(--rae-ink);
}
.rk-article blockquote.rk-pullquote::before {
  content: "\201C"; position: absolute; inset-inline-start: 0; top: -0.12em;
  font-family: var(--rae-display); font-size: 2.4em; line-height: 1; color: var(--rae-accent);
}
/* pull-quote spine = an 8px vertical mashrabiya ribbon (not a solid gold bar) */
.rk-article blockquote.rk-pullquote::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.35em; bottom: 0.2em;
  inline-size: 8px; background-image: var(--rae-fret-10); opacity: .5;
}
.rk-article blockquote.rk-pullquote p { margin: 0 0 0.4em; }
.rk-article blockquote.rk-pullquote p:last-child { margin-bottom: 0; }
/* body H2 divider: a brass hairline + a short brass lattice tick */
.rk-article h2 {
  position: relative; margin-top: 2em; padding-top: var(--rk-space-4);
  border-top: 1px solid var(--rae-accent-metal);
}
.rk-article h2::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0;
  width: 48px; height: 3px; background: var(--rae-accent-metal);
}

/* --- Post-article "Sources & methodology" (.rk-sources) --- */
.rk-sources { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--rae-ink); }
.rk-sources__title { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); line-height: 1.1; margin: 0 0 var(--rk-space-3); color: var(--rae-ink); }
.rk-sources__trust { font-family: var(--rae-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-sources__links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); margin-bottom: var(--rk-space-4); }
.rk-sources__links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rae-accent); border-bottom: 1px solid var(--rae-accent-metal); padding-bottom: 3px; }
.rk-sources__links a:hover { color: var(--rae-accent-deep); }
.rk-sources__links .arrow { font-family: var(--rae-display); font-style: normal; }
.rk-sources__disclaimer { font-family: var(--rae-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--rae-ink-soft); margin: 0; padding: var(--rk-space-3) var(--rk-space-4); border-inline-start: 3px solid var(--rae-accent-metal); background: var(--rae-bg-2); }

/* --- E-E-A-T page hooks (.rk-eeat-facts / .rk-source-chips) --- */
.rk-eeat-facts { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--rae-ink); }
.rk-eeat-facts__label { font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rae-accent); margin: 0 0 var(--rk-space-4); }
.rk-eeat-facts__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rk-space-4) var(--rk-space-3); margin: 0 0 var(--rk-space-4); padding: 0; }
.rk-eeat-facts__kpis .rk-kpi { margin: 0; display: flex; flex-direction: column; gap: var(--rk-space-1); }
.rk-eeat-facts__kpis dt { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); color: var(--rae-accent); line-height: 1; }
.rk-eeat-facts__kpis dd { margin: 0; font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; line-height: 1.35; }
.rk-eeat-facts__trust { font-family: var(--rae-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-eeat-facts__links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); }
.rk-eeat-facts__links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rae-accent); border-bottom: 1px solid var(--rae-accent-metal); padding-bottom: 3px; }
.rk-eeat-facts__links a:hover { color: var(--rae-accent-deep); }
.rk-eeat-facts__links .arrow { font-family: var(--rae-display); font-style: normal; }

.rk-source-chips { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--rae-ink); }
.rk-source-chips__label { font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rae-accent); margin: 0 0 var(--rk-space-3); }
.rk-source-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rk-space-2); }
.rk-source-chips__list li { font-family: var(--rae-sans); font-size: var(--rk-step-0); font-weight: 600; letter-spacing: .04em; color: var(--rae-ink); background: var(--rae-bg-2); border: 1px solid var(--rae-accent-metal); padding: 6px 14px; }

/* --- Editorial contact form (.rk-contact) — family-shared, renders on the
   roksolana contact page. Kept in the limestone/bronze palette so the live page
   never ships an unstyled form. --- */
.rk-contact { padding: var(--rk-space-6) 0 0; }
.rk-contact:focus { outline: none; }
.rk-contact__title { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-3); line-height: 1.05; margin: 0 0 var(--rk-space-3); color: var(--rae-ink); }
.rk-contact__intro { font-size: var(--rk-step-1); line-height: 1.6; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 60ch; }
.rk-contact__status { margin: 0 0 var(--rk-space-4); }
.rk-contact__status p { margin: 0; font-family: var(--rae-sans); font-size: var(--rk-step-0); line-height: 1.5; padding: var(--rk-space-3) var(--rk-space-4); border-inline-start: 3px solid var(--rae-accent-metal); background: var(--rae-bg-2); color: var(--rae-ink); }
.rk-contact__status.is-ok p { border-inline-start-color: #2F7D4F; }
.rk-contact__status.is-error p { border-inline-start-color: var(--rae-accent); color: var(--rae-accent-deep); }
.rk-contact__form { max-width: 640px; }
.rk-field { margin-bottom: var(--rk-space-4); }
.rk-field label { display: block; font-family: var(--rae-sans); font-size: var(--rk-step-0); font-weight: 700; letter-spacing: .04em; color: var(--rae-ink); margin-bottom: var(--rk-space-2); }
.rk-req { color: var(--rae-accent); }
.rk-field input[type="text"],
.rk-field input[type="email"],
.rk-field textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  font-family: var(--rae-sans); font-size: var(--rk-step-1); line-height: 1.5; color: var(--rae-ink);
  background: var(--rae-surface); border: 1px solid var(--rae-ink-soft); border-radius: 0;
  padding: 12px 14px; transition: border-color .18s ease, box-shadow .18s ease;
}
.rk-field textarea { resize: vertical; min-height: 140px; }
.rk-field input::placeholder,
.rk-field textarea::placeholder { color: var(--rae-ink-soft); }
.rk-field input:focus,
.rk-field textarea:focus { outline: none; border-color: var(--rae-accent); box-shadow: 0 0 0 3px rgba(126, 78, 34, .18); }
.rk-field input[aria-invalid="true"],
.rk-field textarea[aria-invalid="true"] { border-color: var(--rae-accent); background: #F6EEE4; }
.rk-field__err { display: block; margin-top: var(--rk-space-2); font-family: var(--rae-sans); font-size: var(--rk-step-0); font-weight: 600; color: var(--rae-accent-deep); }
.rk-field--check { display: grid; grid-template-columns: auto 1fr; column-gap: var(--rk-space-3); row-gap: var(--rk-space-2); align-items: start; }
.rk-field--check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rae-accent); flex-shrink: 0; }
.rk-field--check label { grid-column: 2; margin: 0; font-weight: 400; font-size: var(--rk-step-0); line-height: 1.5; color: var(--rae-ink-2); letter-spacing: normal; }
.rk-field--check .rk-field__err { grid-column: 2; }
.rk-contact__actions { margin-top: var(--rk-space-5); }
.rk-contact__actions .rk-btn { padding-block: 14px; }
.rk-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ============================================================= *
 * 14. MASHRABIYA SIGNATURE — marginal ribbon + byline lattice frame
 * -------------------------------------------------------------
 * Contract §9(b)/(c): this edition divergence replaces the flagship's single gold spine with
 * an 8px brass diamond-lattice ribbon in the wide article gutter, and frames the
 * byline with the same motif. Decorative only (aria-hidden by construction).
 * ============================================================= */
.rk-article { position: relative; }
@media (min-width: 1024px) {
  .rk-article::before {
    content: ""; position: absolute; top: 0.35em; bottom: 0;
    inset-inline-start: calc(-1 * var(--rk-space-5));
    inline-size: 8px; background-image: var(--rae-fret-10); opacity: .45;
  }
}
/* byline lockup: a mashrabiya-hairline dateline frame (not a loose row) */
.article-head .byline {
  flex-wrap: nowrap; align-items: center; gap: var(--rk-space-3);
  margin-top: var(--rk-space-4); padding-block: var(--rk-space-3);
  border-block: 1px solid var(--rae-hairline);
  background-image: var(--rae-fret-10);
  background-repeat: no-repeat;
  background-position: top center, top center;
  background-size: 100% 6px;
}
.article-head .byline > div { min-width: 0; }

/* ============================================================= *
 * 15. RTL / ARABIC (contract §7) — logical props already flip layout;
 * this block swaps the font, relaxes leading, and strips Latin tracking.
 * ============================================================= */
[lang="ar"], [dir="rtl"] { font-family: var(--rae-arabic); }
/* Article/static bodies set their own Latin font on the element, which beats the
   [dir=rtl] ancestor rule by direct application — re-assert the Arabic face on the
   content containers in RTL so Arabic prose does not fall back to Helvetica. */
[dir="rtl"] .article-body, [lang="ar"] .article-body,
[dir="rtl"] .entry-content, [lang="ar"] .entry-content,
[dir="rtl"] .rk-authority-lead, [dir="rtl"] .rk-method-trust,
[dir="rtl"] .article-dek, [dir="rtl"] .page-title { font-family: var(--rae-arabic); }
/* Arabic body + headings need more leading (1.8); Playfair lacks Arabic glyphs,
   so Arabic headings carry weight through IBM Plex Sans Arabic 600-700. */
[dir="rtl"] { line-height: 1.8; }

/* Skip-link — RTL-safe. The shared critical block hides it with a physical
   left:-999px, which in RTL stretches the element off the right edge and creates
   a page-wide horizontal scroll. Replace with the direction-agnostic clip
   pattern: the element keeps its normal flow position (no negative offset in any
   writing mode) but is clipped to 1px until focused. */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  z-index: 1000;
  background: var(--rae-ink);
  color: var(--rae-on-dark);
  padding: 10px 16px;
  border-radius: 2px;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 {
  font-family: var(--rae-arabic); font-weight: 700; line-height: 1.8;
}
[dir="rtl"] .article-body, [dir="rtl"] .entry-content,
[dir="rtl"] .rk-authority-lead, [dir="rtl"] .rk-method-trust { line-height: 1.8; }
/* Latin tracking + uppercase break Arabic ligatures — neutralise on every label,
   kicker, meta, nav, flag, index in RTL. */
[dir="rtl"] .kicker, [lang="ar"] .kicker,
[dir="rtl"] .meta, [lang="ar"] .meta,
[dir="rtl"] .rk-mainnav a,
[dir="rtl"] .rk-hero-eyebrow .k,
[dir="rtl"] .rk-hero-corner, [dir="rtl"] .rk-hero-imglabel,
[dir="rtl"] .rk-card .cat, [dir="rtl"] .rk-card .flag,
[dir="rtl"] .rk-section-head .lk,
[dir="rtl"] .rk-mkt .desk-line, [dir="rtl"] .rk-mkt li a span,
[dir="rtl"] .rk-method-links a, [dir="rtl"] .rk-sources__links a,
[dir="rtl"] .rk-eeat-facts__label, [dir="rtl"] .rk-eeat-facts__links a,
[dir="rtl"] .rk-eeat-facts__kpis dd, [dir="rtl"] .rk-authority-kpis dd,
[dir="rtl"] .rk-source-chips__label,
[dir="rtl"] .rk-foot-pub, [dir="rtl"] .rk-foot-base,
[dir="rtl"] .breadcrumbs, [dir="rtl"] .rk-lang a, [dir="rtl"] .rk-lang span,
[dir="rtl"] .rk-btn, [dir="rtl"] .rk-authority-cta {
  letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .kicker, [lang="ar"] .kicker,
[dir="rtl"] .meta, [lang="ar"] .meta { text-align: start; }
/* CTA arrows are literal → glyphs in the markup; mirror them so they point in the
   reading direction (→ becomes ← in RTL) without touching the PHP. */
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
/* drop-cap floats to the logical start automatically (float:inline-start) — no
   extra rule needed. Numerals/percentages read LTR via Unicode bidi; no dir hacks. */

/* ============================================================= *
 * 16. RESPONSIVE
 * ============================================================= */
/* Collapse to the mobile disclosure before the masthead can overflow (matches the
   header-rox-ae.php noscript breakpoint of 1100px). */
@media (max-width: 1100px) {
  .rk-mainnav, .rk-head-actions .rk-btn, .rk-head-actions .rk-lang { display: none; }
  .rk-nav-toggle { display: inline-flex; }
}
@media (max-width: 1000px) {
  .rk-approach-grid { grid-template-columns: 1fr; gap: 26px; }
  .rk-method-grid { grid-template-columns: 1fr; gap: var(--rk-space-3); }
  .rk-mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; }
  .rk-c-feature { grid-column: span 6; grid-row: span 3; }
  .rk-c-tall { grid-column: span 6; grid-row: span 2; }
  .rk-c-wide, .rk-c-sm { grid-column: span 3; grid-row: span 2; }
  .rk-c-3 { grid-column: span 3; grid-row: span 2; }
}
@media (max-width: 820px) {
  .rk-authority { padding-block: var(--rk-space-5); }
  .rk-authority-grid { grid-template-columns: 1fr; gap: var(--rk-space-4); }
  .rk-authority-portrait { max-width: 260px; }
  .rk-authority-kpis { grid-template-columns: repeat(2, 1fr); gap: var(--rk-space-4) var(--rk-space-3); }
  .rk-eeat-facts__kpis { grid-template-columns: repeat(2, 1fr); }
  .rk-portfolio { padding-top: var(--rk-space-5); }
  .rk-markets { padding-top: var(--rk-space-5); }
  .rk-contactstrip { margin-top: var(--rk-space-5); }
  .rk-contactstrip .wrap { padding-block: var(--rk-space-5); }
  .rk-mosaic { gap: 12px; }
  .rk-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--rk-space-4); }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 18px; }
  .rk-siteheader .wrap { height: 60px; }
  .rk-brand .wm span { display: none; }
  /* tap targets >=44px (WCAG 2.5.5) */
  .rk-hero .rk-btn { padding-block: 14px; }
  .rk-fcol a, .rk-foot-focus { padding: 13px 0; }
  .rk-cap-cell { flex: 1 1 100%; border-inline-start: 0; padding: 14px 0; border-top: 1px solid var(--rae-accent-metal); }
  .rk-cap-cell:first-child { border-top: 0; padding-top: 0; }
  /* mosaic keeps its editorial hierarchy: 2 cols, feature spans full + taller */
  .rk-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .rk-c-feature { grid-column: span 2; grid-row: span 3; }
  .rk-c-tall, .rk-c-wide, .rk-c-sm, .rk-c-3 { grid-column: span 2; grid-row: span 2; }
  /* sector index -> 1 col (no orphan) */
  .rk-mkt-grid, .rk-mkt-grid--5 { grid-template-columns: 1fr; }
  .rk-contactstrip .wrap { flex-direction: column; align-items: flex-start; }
  .rk-foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .rk-article > p:first-of-type::first-letter { font-size: 3em; }
  .rk-article blockquote.rk-pullquote { padding-inline-start: var(--rk-space-4); font-size: var(--rk-step-1); }
  .rk-contact { padding-top: var(--rk-space-5); }
  .rk-contact__actions .rk-btn { width: 100%; justify-content: center; }
  /* mobile hero: scrim so the SVG skyline recedes behind the text/CTA (LCP-safe) */
  .rk-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 26, 23, .32) 0%, rgba(16, 26, 23, .74) 52%, rgba(16, 26, 23, .93) 100%);
  }
  .rk-hero-imglabel { display: none; }
  .rk-hero .lede { margin-bottom: var(--rk-space-5); }
}
/* Related block degenerate counts (:has() progressive enhancement). */
.related .grid--3:has(> .card:only-child) { grid-template-columns: minmax(0, var(--rk-measure)); justify-content: center; }
@media (min-width: 621px) {
  .related .grid--3:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================= *
 * 17. MOTION — staggered reveal; LCP-safe hero H1
 * ============================================================= */
.reveal { opacity: 0; transform: translateY(16px); animation: rae-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.rk-d-1 { animation-delay: .05s; }
.rk-d-2 { animation-delay: .16s; }
.rk-d-3 { animation-delay: .28s; }
.rk-d-4 { animation-delay: .4s; }
@keyframes rae-rise { to { opacity: 1; transform: none; } }
/* Hero content is the LCP surface — never opacity-gate it; transform-only rise so
   the H1 paints immediately at full opacity even without JS. */
.rk-hero .reveal { opacity: 1; animation-name: rae-rise-y; }
@keyframes rae-rise-y { from { transform: translateY(16px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .rk-hero .reveal { animation: none; transform: none; }
  .rk-mainnav a::after, .rk-card, .rk-logo-mark { transition: none; }
  .rk-siteheader { position: static; }
  /* the mashrabiya motif carries no drift animation, so nothing else to disable */
}

/* =====================================================================
 * D2 · APPEND — Variant (b) SIDE-RAIL polish (roksolanapyrtko.ae)
 * ===================================================================== */

/* Section label + head/dek already inherit Playfair + bronze kicker globally. */
.layout-b .rail-section .kicker { color: var(--rae-accent); }

/* Rail divider = an 8px brass mashrabiya ribbon (RTL-safe: the fret is a
   symmetric +/-45deg pair, never mirrored). Replaces the plain scaffolding border. */
@media (min-width: 721px) {
  .layout-b .article-rail {
    border-inline-start: 0;
    padding-inline-start: clamp(1.4rem, 2.5vw, 2.2rem);
    position: relative;
  }
  .layout-b .article-rail::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 8px; background-image: var(--rae-fret-10); opacity: 0.5;
  }
}

.layout-b .rail-related__head {
  font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--rae-accent);
  border-bottom: 1px solid var(--rae-accent-metal); padding-bottom: var(--rk-space-2);
  margin-bottom: var(--rk-space-3);
}
.layout-b .rail-related__item { border-bottom-color: var(--rae-hairline); }
.layout-b .rail-related__title { font-family: var(--rae-display); font-weight: 400; }
.layout-b .rail-related__title a { color: var(--rae-ink); }
.layout-b .rail-related__title a:hover { color: var(--rae-accent); }
.layout-b .rail-related__meta {
  font-family: var(--rae-sans); color: var(--rae-ink-soft);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.layout-b .article-hero--inline figcaption { color: var(--rae-ink-soft); }

/* Page (b) decorative rail = the same brass ribbon on the rail's inline-end edge. */
@media (min-width: 721px) {
  .page-layout-b .page-rail { position: relative; }
  .page-layout-b .page-rail::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
    inline-size: 8px; background-image: var(--rae-fret-10); opacity: 0.5;
  }
}

/* RTL: neutralise Latin tracking/upper-casing on the rail labels (mirrors section 15). */
[dir="rtl"] .layout-b .rail-related__head,
[dir="rtl"] .layout-b .rail-related__meta { letter-spacing: 0; text-transform: none; }

/* =====================================================================
 * D3 · N1c-ae — CABINET FRONT PAGE (rax-* home skeleton, roksolanapyrtko.ae)
 * ---------------------------------------------------------------------
 * Anti-footprint recomposition of the homepage: a NEW namespace (rax-*) with a
 * NEW DOM anatomy unique to .ae — folio -> cover statement -> lead+rail ->
 * uneven reading rooms -> marginal editor note -> light colophon. NONE of the
 * banned patterns (numbered indices, KPI/stat rows, ticker/ledger, dark
 * full-bleed hero, the other editions' block order) appear. Uses ONLY the existing
 * --rae-* / --rk-* tokens + the mashrabiya fret; logical properties throughout
 * (RTL-safe); NO carmine. The old rk-hero/approach/authority/mosaic/method/
 * markets/contactstrip rules above are now unused on this site (kept intact for
 * reversibility; a prune is a safe follow-up).
 * ===================================================================== */

/* --- 1. FOLIO / DATELINE STRIP (methodology as ONE line) --- */
.rax-folio { background: var(--rae-bg); position: relative; }
.rax-folio .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--rk-space-2) var(--rk-space-4); flex-wrap: wrap;
  padding-block: var(--rk-space-3);
}
.rax-folio::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 6px;
  background-image: var(--rae-fret-12); opacity: .5; border-block-start: 1px solid var(--rae-hairline);
}
.rax-folio__edition {
  font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rae-ink-soft);
}
.rax-folio__date {
  font-family: var(--rae-display); font-style: italic; font-size: var(--rk-step-0);
  color: var(--rae-ink-2); margin-inline-start: auto;
}
.rax-folio__method {
  font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rae-accent);
  border-block-end: 1px solid var(--rae-accent-metal); padding-block-end: 2px;
}
.rax-folio__method:hover { color: var(--rae-accent-deep); }

/* --- 2. COVER STATEMENT (asymmetric spread on limestone; the page H1) --- */
.rax-cover { background: var(--rae-bg); padding-block: var(--rk-space-6); }
.rax-cover__grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.rax-cover__eyebrow { display: block; margin-block-end: var(--rk-space-3); }
.rax-cover__statement {
  font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-4);
  line-height: 1.02; letter-spacing: .005em; color: var(--rae-ink);
  margin: 0 0 var(--rk-space-4); max-width: 16ch;
}
.rax-cover__statement em { font-style: italic; color: var(--rae-accent); }
.rax-cover__enter {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--rae-sans);
  font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rae-accent); border-block-end: 1px solid var(--rae-accent-metal); padding-block-end: 3px;
}
.rax-cover__enter:hover { color: var(--rae-accent-deep); }
.rax-cover__enter .arrow { font-family: var(--rae-display); font-style: normal; }
.rax-cover__aside { display: flex; flex-direction: column; gap: var(--rk-space-5); padding-block-start: var(--rk-space-2); }
.rax-cover__dek { font-family: var(--rae-display); font-size: var(--rk-step-1); line-height: 1.55; color: var(--rae-ink-2); margin: 0; }
/* mashrabiya panel = quiet expensive decor replacing the dark skyline SVG. The
   limestone wash fades the fret without dimming the brass frame. */
.rax-cover__lattice {
  aspect-ratio: 4 / 5; border: 1px solid var(--rae-accent-metal); background-color: var(--rae-surface);
  background-image: linear-gradient(rgba(240, 237, 230, .55), rgba(240, 237, 230, .55)), var(--rae-fret-12);
}
.rax-cover__portrait {
  margin: 0; aspect-ratio: 4 / 5; border: 1px solid var(--rae-accent-metal);
  overflow: hidden; background-color: var(--rae-surface);
}
.rax-cover__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block;
}

/* --- 3. LEAD STORY + "ALSO IN THIS EDITION" RAIL --- */
.rax-lead { background: var(--rae-surface); border-block: 1px solid var(--rae-hairline); padding-block: var(--rk-space-6); }
.rax-lead__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.rax-lead__link { display: block; color: inherit; }
.rax-lead__media { display: block; margin-block-end: var(--rk-space-3); border-block-end: 1px solid var(--rae-accent-metal); }
.rax-lead__media img { width: 100%; height: auto; display: block; }
.rax-lead__cat { display: block; font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rae-accent); margin-block-end: var(--rk-space-2); }
.rax-lead__ttl { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-3); line-height: 1.08; color: var(--rae-ink); margin: 0 0 var(--rk-space-3); }
.rax-lead__link:hover .rax-lead__ttl { color: var(--rae-accent); }
.rax-lead__dek { font-family: var(--rae-sans); font-size: var(--rk-step-1); line-height: 1.6; color: var(--rae-ink-2); margin: 0; max-width: 60ch; }
.rax-lead__railhead {
  font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rae-accent);
  margin: 0 0 var(--rk-space-3); padding-block-end: var(--rk-space-2); border-block-end: 1px solid var(--rae-accent-metal);
}
.rax-lead__list { list-style: none; margin: 0; padding: 0; }
.rax-lead__list li { border-block-end: 1px solid var(--rae-hairline); }
.rax-lead__list li:last-child { border-block-end: 0; }
.rax-lead__list a { display: block; padding-block: var(--rk-space-3); color: inherit; }
.rax-lead__ircat { display: block; font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; margin-block-end: var(--rk-space-1); }
.rax-lead__irttl { display: block; font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-1); line-height: 1.22; color: var(--rae-ink); }
.rax-lead__list a:hover .rax-lead__irttl { color: var(--rae-accent); }

/* --- 4. SECTOR READING ROOMS (uneven grid weighted to coverage; NO numbers) --- */
.rax-rooms { background: var(--rae-bg); padding-block: var(--rk-space-6); }
.rax-rooms__title { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-3); line-height: 1; color: var(--rae-ink); margin: 0 0 var(--rk-space-5); }
.rax-rooms__grid { display: grid; grid-template-columns: 1.5fr 1.15fr 0.85fr; gap: 0; }
.rax-room { position: relative; display: flex; flex-direction: column; gap: var(--rk-space-3); }
.rax-room__name { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); margin: 0; color: var(--rae-ink); }
.rax-room__name a { color: inherit; }
.rax-room__name a:hover { color: var(--rae-accent); }
.rax-room__desk {
  font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; margin: 0;
  padding-block-end: var(--rk-space-3); border-block-end: 2px solid var(--rae-accent-metal);
}
.rax-room__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.rax-room__list li { border-block-end: 1px solid var(--rae-hairline); }
.rax-room__list li:last-child { border-block-end: 0; }
.rax-room__list a { display: block; padding-block: var(--rk-space-3); font-family: var(--rae-display); font-size: 17px; line-height: 1.22; color: var(--rae-ink); }
.rax-room__list a:hover { color: var(--rae-accent); }
.rax-room__empty { font-family: var(--rae-sans); font-size: var(--rk-step-0); color: var(--rae-ink-soft); padding-block: var(--rk-space-3); }
.rax-room__all {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rae-sans); font-size: var(--rk-step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rae-accent); margin-block-start: var(--rk-space-2);
}
.rax-room__all:hover { color: var(--rae-accent-deep); }
.rax-room__all .arrow { font-family: var(--rae-display); font-style: normal; }
/* Column dividers = vertical brass mashrabiya ribs (RTL-safe, symmetric fret). */
@media (min-width: 1001px) {
  .rax-room + .rax-room { padding-inline-start: clamp(1.5rem, 2.6vw, 2.8rem); }
  .rax-room + .rax-room::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 8px; background-image: var(--rae-fret-10); opacity: .5;
  }
}

/* --- 5. EDITOR'S NOTE (marginal person-as-context; NO KPI) --- */
.rax-editor { background: var(--rae-bg-2); border-block-start: 1px solid var(--rae-hairline); padding-block: var(--rk-space-5); }
.rax-editor__grid { display: grid; grid-template-columns: 132px 1fr; gap: var(--rk-space-4); align-items: start; max-width: 780px; }
.rax-editor__portrait { position: relative; }
.rax-editor__portrait img { width: 100%; height: auto; display: block; border: 1px solid var(--rae-accent-metal); }
.rax-editor__portrait-ph {
  aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--rae-ink) 0%, #1B2A24 62%, #4A3418 130%);
  border: 1px solid var(--rae-accent-metal);
}
.rax-editor__mark { width: 60px; height: auto; color: var(--rae-accent-soft); opacity: .5; }
.rax-editor__body .kicker { display: block; margin-block-end: var(--rk-space-2); }
.rax-editor__h { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); line-height: 1.1; color: var(--rae-ink); margin: 0 0 var(--rk-space-3); }
.rax-editor__lead { font-family: var(--rae-display); font-size: var(--rk-step-1); line-height: 1.55; color: var(--rae-ink-2); margin: 0 0 var(--rk-space-4); max-width: 56ch; }
.rax-editor__cta {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--rae-sans);
  font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rae-accent); border-block-end: 1px solid var(--rae-accent-metal); padding-block-end: 3px;
}
.rax-editor__cta:hover { color: var(--rae-accent-deep); }
.rax-editor__cta .arrow { font-family: var(--rae-display); font-style: normal; }

/* --- 6. COLOPHON (quiet LIGHT close; replaces the dark contact strip) --- */
.rax-colophon { background: var(--rae-bg-2); position: relative; }
.rax-colophon::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 6px;
  background-image: var(--rae-fret-12); opacity: .5; border-block-end: 1px solid var(--rae-hairline);
}
.rax-colophon .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--rk-space-4); flex-wrap: wrap; padding-block: var(--rk-space-5); }
.rax-colophon__name { font-family: var(--rae-display); font-weight: 400; font-size: var(--rk-step-2); color: var(--rae-ink); margin: 0; }
.rax-colophon__name em { font-style: italic; color: var(--rae-accent); }
.rax-colophon__pub { display: block; font-family: var(--rae-sans); font-size: var(--rk-step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--rae-ink-soft); font-weight: 600; margin-block-start: var(--rk-space-1); }
.rax-colophon__contact {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--rae-sans);
  font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rae-accent); border-block-end: 1px solid var(--rae-accent-metal); padding-block-end: 3px;
}
.rax-colophon__contact:hover { color: var(--rae-accent-deep); }
.rax-colophon__contact .arrow { font-family: var(--rae-display); font-style: normal; }

/* --- 7. RESPONSIVE (rax-*) --- */
@media (max-width: 1000px) {
  .rax-cover__grid { grid-template-columns: 1fr; gap: var(--rk-space-4); }
  .rax-lead__grid { grid-template-columns: 1fr; gap: var(--rk-space-5); }
  .rax-rooms__grid { grid-template-columns: 1fr; gap: 0; }
  /* horizontal brass fret between stacked rooms (vertical rib no longer applies) */
  .rax-room + .rax-room { padding-block-start: var(--rk-space-5); }
  .rax-room + .rax-room::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
    block-size: 8px; background-image: var(--rae-fret-10); opacity: .5;
  }
}
@media (max-width: 820px) {
  .rax-editor__grid { grid-template-columns: 110px 1fr; }
}
@media (max-width: 620px) {
  .rax-folio .wrap { row-gap: var(--rk-space-2); }
  .rax-folio__date { margin-inline-start: 0; }
  .rax-cover__lattice { display: none; }   /* decorative; save height, no text overlap */
  .rax-editor__grid { grid-template-columns: 96px 1fr; }
  .rax-colophon .wrap { flex-direction: column; align-items: flex-start; }
  .rax-colophon__contact { padding-block: 10px 3px; }
}

/* --- 8. RTL / ARABIC (rax-*) — re-assert Arabic face on display-font elements
   that set --rae-display directly (headings are covered by §15), and neutralise
   Latin tracking/upper-casing on the new label atoms (mirrors §15). --- */
[dir="rtl"] .rax-folio__date,
[dir="rtl"] .rax-cover__dek,
[dir="rtl"] .rax-lead__dek,
[dir="rtl"] .rax-lead__irttl,
[dir="rtl"] .rax-room__list a,
[dir="rtl"] .rax-editor__lead,
[dir="rtl"] .rax-colophon__name { font-family: var(--rae-arabic); }
[dir="rtl"] .rax-folio__date { font-style: normal; }
[dir="rtl"] .rax-folio__edition, [dir="rtl"] .rax-folio__method,
[dir="rtl"] .rax-cover__enter,
[dir="rtl"] .rax-lead__cat, [dir="rtl"] .rax-lead__railhead, [dir="rtl"] .rax-lead__ircat,
[dir="rtl"] .rax-room__desk, [dir="rtl"] .rax-room__all,
[dir="rtl"] .rax-editor__cta,
[dir="rtl"] .rax-colophon__pub, [dir="rtl"] .rax-colophon__contact {
  letter-spacing: 0; text-transform: none;
}