/* ============================================================
   HALA HIJAZI STUDIO — COLOUR SYSTEM 02 OVERRIDE
   Load LAST, after every existing stylesheet.
   <link rel="stylesheet" href="/assets/hhs-system-02.css">
   Nothing below re-cuts the signature. Fills and sizes only.
   ============================================================ */

:root{
  /* --- the five masters --- */
  --paper:#F4EDE7;        /* Warm Cream — the ground */
  --paper-deep:#EDE4DB;
  --white:#FBF7F1;
  --ink:#0F0F0E;          /* Warm Black — body text only */
  --muted:#6B6760;
  --blue:#0A2168;         /* Prussian Navy — display ink, system, links */
  --cobalt:#0A2168;       /* kills the stray #314EB0 used 374× in worlds.css */
  --rule:#CFBBB1;         /* Stone */
  --stone:#CFBBB1;
  --persimmon:#D85A3D;    /* Ember Persimmon — turns of thought, one accent */

  /* --- type --- */
  --serif:'Bodoni Moda',Didot,'GFS Didot','Bodoni MT',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --p-display:'Bodoni Moda',Didot,'GFS Didot',Georgia,serif;
  --p-text:'IBM Plex Sans',Helvetica,Arial,sans-serif;
  --p-ar-display:Amiri,'Noto Naskh Arabic',serif;
  --p-ar:'IBM Plex Sans Arabic',Tahoma,sans-serif;

  --header:132px;
}

/* the approved opening scene now carries the measured navy, not #102C75 */
.portrait-home{--header:132px;--portrait-blue:#0A2168;
  --portrait-serif:'Bodoni Moda',Didot,'GFS Didot','Bodoni MT',Georgia,serif;}

/* one Arabic pair, everywhere. Five stacks were in the build. */
html[dir=rtl] body{font-family:var(--p-ar)}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,
html[dir=rtl] .hero-word,html[dir=rtl] .founder-quote,
html[dir=rtl] .chain-finish{font-family:var(--p-ar-display)}

/* MISHKAH is Deep Green. #172C6B is a jewellery enamel and never a surface. */
.world-mishkah,.desk-card:nth-child(5){background:#15352D!important;color:#F3EADF!important}

/* --- 16px floor: every label that carried a decision --- */
.eyebrow,.label,.caption,.text-link,.circle-link,.index-number,
.object-foot,.object-foot b,.object-foot i,.colour-field small,
.desk-hint,.desk-foot .caption,.world-index a,.world-name,.world-kicker,
.world-colophon,.world-colophon .caption,.stat span,
.founder-visual figcaption,.desktop-nav,.desktop-nav a,.header-cta,
.lang-links a,.hero-endnote .label,.hero-topline .eyebrow,
.peel-caption,.peel-labels,.peel-decisions span,.peel-decisions b,
.chain-tab strong,.chain-text p,.chain-image .chain-corner,
.range-item p,.ai-note p,
.dialog-copy .caption,.dialog-copy .text-link,
.case-cover figcaption,.gallery-item figcaption,.case-end p,
.case-scope li,.case-reading h2,.next-case .label,
.tabrizi-note .label,.method-step p,
.footer-links a,.footer-links .label,.footer-bottom,
.footer-bottom button,.footer-bottom a,
.field>span,.brief-form .caption,.form-status,.secondary-button{
  font-size:16px!important;line-height:1.6;
}
@media(max-width:600px){
  .eyebrow,.label,.caption,.text-link,.circle-link,.object-foot,
  .desk-hint,.desk-foot .caption,.world-index a,.world-name,.world-kicker,
  .world-colophon,.world-colophon .caption,.stat span,
  .founder-visual figcaption,.lang-links a,.hero-endnote .label,
  .hero-topline .eyebrow,.peel-caption,.peel-labels,.peel-decisions span,
  .peel-decisions b,.chain-tab strong,.range-item p,
  .dialog-copy .caption,.case-cover figcaption,.gallery-item figcaption,
  .case-end p,.case-scope li,.footer-links a,.footer-links .label,
  .footer-bottom,.footer-bottom button,.footer-bottom a{
    font-size:16px!important;line-height:1.65;
  }
  body{font-size:17px}
}

/* --- signature at its own minimum: stack 120px, never below --- */
.brand img,.portrait-home .brand img{width:clamp(120px,12vw,152px)!important;height:auto}
.brand{min-width:120px!important}
.footer-logo{width:clamp(130px,13vw,172px)!important}
@media(max-width:1150px){:root{--header:122px}}
@media(max-width:850px){:root{--header:114px}.brand img{width:120px!important}}
@media(max-width:600px){:root{--header:108px}}

/* --- ink states, persimmon turns --- */
.turn,.turn-of-thought,em.turn{color:var(--persimmon)}
.reading-progress{background:var(--blue)}
::selection{background:var(--blue);color:var(--paper)}
@media(max-width:1150px){.portrait-home{--header:122px}}
@media(max-width:850px){.portrait-home{--header:114px}}
@media(max-width:600px){.portrait-home{--header:108px}}