/* The Butcher : web design system
   Ported from the Vol.1 brand book and the print menu stylesheet.
   IBM Plex Sans primary, IBM Plex Sans Arabic, Lora serif accent.
   Maroon #521617 primary, cream / beige secondaries, fat marbling on objects.

   Typographic principle carried over from print: weight is earned.
   Light and regular carry the page; 600 appears only where the eye must stop. */

@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-200-normal.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexAr';src:url('fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'PlexAr';src:url('fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexAr';src:url('fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PlexAr';src:url('fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Serif';src:url('fonts/lora-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Serif';src:url('fonts/lora-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Serif';src:url('fonts/lora-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --maroon:#521617;
  --cream:#EBE1D7;
  --beige:#ECDCD2;
  --paper:#F9F7F5;
  --ink:#0E0C0C;
  --hair:rgba(82,22,23,.16);
  --hair-cream:rgba(235,225,215,.20);
  --pad:clamp(20px,5vw,64px);
  --shell:1140px;   /* page gutter width, header and footer */
  --measure:880px;  /* reading width, menu content and its sticky nav */
  --headerh:59px;   /* real header height, measured in site.js */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:'Plex','PlexAr',system-ui,sans-serif;
  color:var(--maroon);background:var(--paper);
  font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Arabic is set at 400 rather than 300: light Arabic drops under AA on paper. */
.ar{font-family:'PlexAr';font-weight:400;direction:rtl;unicode-bidi:isolate}
[dir="rtl"] body,body.rtl{font-family:'PlexAr','Plex'}

/* ---------- grounds ---------- */
.paper{background:var(--paper) url('paper.jpg') center/cover}
.dark{background:var(--ink) url('marbling_black.jpg') center/cover;color:var(--cream)}
.maroon{background:var(--maroon) url('marbling_maroon.jpg') center/cover;color:var(--cream)}

.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:760px;margin:0 auto}

/* ---------- shared type ----------
   Letter-spaced text gains a trailing space after the last character, which
   throws centred lines off by half the tracking. text-indent puts it back. */
.kicker{
  font-size:clamp(9px,1.5vw,11px);font-weight:400;letter-spacing:.42em;
  text-indent:.42em;text-transform:uppercase;opacity:.75;
  margin:0 0 18px;line-height:1.2;
}
html[lang="ar"] .kicker{font-family:'PlexAr';letter-spacing:0;text-indent:0;
  font-size:clamp(12px,1.7vw,14px);text-transform:none}
h1,h2,h3{font-family:'Serif';font-weight:400;letter-spacing:.01em;line-height:1.14;margin:0}
h1{font-size:clamp(34px,6.4vw,62px)}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:clamp(19px,2.4vw,25px)}
/* Arabic headlines carry more ink per line, so they need a touch more leading
   and one step more weight to hold the same presence as the serif. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{
  font-family:'PlexAr';font-weight:500;line-height:1.32;letter-spacing:0}
html[lang="ar"] h1{font-size:clamp(28px,5.2vw,52px)}
html[lang="ar"] h2{font-size:clamp(23px,3.5vw,36px)}

/* The counterpart line under a headline: always the other language.
   One element that swaps, instead of two that hide each other. */
.h-alt{font-family:'PlexAr';font-weight:400;direction:rtl;unicode-bidi:isolate;
  font-size:clamp(17px,2.6vw,25px);opacity:.82;margin-top:12px;line-height:1.45}
html[lang="ar"] .h-alt{font-family:'Serif';direction:ltr;letter-spacing:.02em;
  font-size:clamp(16px,2.2vw,22px);opacity:.7}
.h-ar{font-family:'PlexAr';font-weight:400;direction:rtl;unicode-bidi:isolate;
  font-size:clamp(17px,2.6vw,25px);opacity:.82;margin-top:12px}
.hair{height:1px;background:var(--hair);border:0;margin:34px 0}
.dark .hair,.maroon .hair{background:var(--hair-cream)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 30px;border:1px solid currentColor;
  font-size:11px;font-weight:400;letter-spacing:.26em;text-indent:.26em;
  text-transform:uppercase;background:transparent;color:inherit;cursor:pointer;
  transition:background .25s,color .25s;font-family:inherit;
}
.btn:hover{background:var(--cream);color:var(--maroon);border-color:var(--cream)}
.paper .btn:hover,.btn.on-paper:hover{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}
.btn .ar{font-size:12px;letter-spacing:0;text-indent:0;opacity:.72}

/* ---------- site header ---------- */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(14,12,12,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-cream);color:var(--cream);
}
header.site .bar{display:flex;align-items:center;gap:22px;
  padding:14px var(--pad);max-width:var(--shell);margin:0 auto}
header.site .logo{height:30px;width:auto;flex:0 0 auto}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header.site nav a{
  font-size:10px;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  padding:9px 13px;opacity:.78;transition:opacity .2s}
header.site nav a:hover,header.site nav a.active{opacity:1}
header.site nav a.active{border-bottom:1px solid var(--cream)}

/* language switch */
.lang{display:inline-flex;border:1px solid var(--hair-cream);flex:0 0 auto}
.lang button{
  background:none;border:0;color:inherit;cursor:pointer;font-family:inherit;
  padding:8px 13px;font-size:10px;letter-spacing:.16em;opacity:.6;transition:.2s}
.lang button.on{background:var(--cream);color:var(--maroon);opacity:1}
.lang button:nth-child(2){font-family:'PlexAr';letter-spacing:0;font-size:12px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--cream);padding:64px 0 46px;
  border-top:1px solid var(--hair-cream)}
/* four explicit columns, then two, then one: auto-fit orphans the last column
   at awkward widths and the footer stops looking deliberate */
footer.site .cols{display:grid;gap:38px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site .logo{width:132px;margin-bottom:20px}
footer.site .lab{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  opacity:.6;margin-bottom:12px}
footer.site p{margin:0 0 8px;font-size:14px;opacity:.82}
footer.site .base{margin-top:46px;padding-top:24px;border-top:1px solid var(--hair-cream);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}

/* ---------- claim strip ---------- */
.claims{background:var(--maroon) url('marbling_maroon.jpg') center/cover;color:var(--cream);
  padding:26px 0;text-align:center}
.claims .en{font-size:clamp(9px,1.5vw,11px);letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase}
.claims .ar{font-size:14px;opacity:.86;margin-top:9px}

@media (max-width:640px){
  header.site .bar{gap:12px;padding:11px 16px}
  header.site nav{gap:2px;width:100%;order:3;margin-left:0;
    border-top:1px solid var(--hair-cream);padding-top:8px}
  header.site nav a{padding:8px 9px;font-size:9px;letter-spacing:.18em}
  .lang{margin-left:auto}
}