/*
Theme Name: Wara El Ceema
Theme URI: https://waraelceema.com
Author: Scoop Empire
Description: Behind the Frame — a bilingual film and TV archive. Hand-written, no parent, no build step.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: waraelceema
*/

/* ===========================================================================
   Light page, dark chrome. The masthead and footer keep the near-black the
   wordmark was drawn for — it is a white logo and has nowhere else to live —
   while everything between them sits on white, where long-form reading and a
   wall of photographs both do better.

   Contrast on white: ink 17.9:1, dim 9.1:1, muted 4.7:1. On chrome:
   chrome-ink 15.9:1, chrome-muted 9.1:1.

   Nothing is below weight 400. Thin type was the reason this stopped being
   readable the first time.
   =========================================================================== */
:root{
  --page:#FFFFFF;
  --surface:#F4F6F7;
  --frame:#E7ECEE;
  --ink:#101619;
  --ink-dim:#3D4B52;
  --muted:#667780;
  --rule:#E1E6E8;
  --rule-soft:#EFF2F3;

  --chrome:#0A1519;
  --chrome-ink:#F2F7F7;
  --chrome-dim:#D7E4E8;
  --chrome-muted:#9FBAC4;
  --chrome-rule:#22404C;

  --body:'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --gap:24px;
  --shell:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink-dim);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wec-shell{max-width:var(--shell);margin-inline:auto;padding-inline:30px}
.wec-skip{position:absolute;inset-inline-start:-9999px}
.wec-skip:focus{position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:99;
  background:var(--chrome);color:var(--chrome-ink);padding:12px 16px;inset-inline-end:auto}

/* ------------------------------------------------- surfaces we did not draw */
::selection{background:#CFE4EC;color:var(--ink)}
:root{color-scheme:light;accent-color:var(--chrome)}
body{caret-color:var(--ink);scrollbar-color:#C3CDD2 var(--page);scrollbar-width:thin}
::-webkit-scrollbar{inline-size:12px;block-size:12px}
::-webkit-scrollbar-track{background:var(--page)}
::-webkit-scrollbar-thumb{background:#C3CDD2;border:2px solid var(--page);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#9AA8AF}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
.wec-tc,.wec-meta,.wec-n,.wec-row time,.wec-foot-nav a span{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- masthead */
.wec-mast{
  position:sticky;inset-block-start:0;z-index:20;
  background:var(--chrome);
  color:var(--chrome-ink);
}
.wec-mast .wec-shell{display:flex;align-items:center;gap:34px;min-block-size:104px}
.wec-logo{display:block;flex:none}
.wec-logo img{block-size:62px;width:auto}
.wec-nav{
  display:flex;gap:30px;margin-inline-start:auto;flex-wrap:wrap;align-items:center;
  font-size:16px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
}
.wec-nav a{color:var(--chrome-muted);text-decoration:none;padding-block:6px;
  border-block-end:2px solid transparent;transition:color .18s,border-color .18s}
.wec-nav a:hover,.wec-nav a[aria-current]{color:var(--chrome-ink);border-block-end-color:var(--chrome-ink)}
.wec-lang{
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--chrome-ink);
  border:1px solid var(--chrome-rule);padding:9px 13px;text-decoration:none;white-space:nowrap;flex:none;
}
.wec-lang:hover{border-color:var(--chrome-muted);background:rgba(255,255,255,.06)}

/* ------------------------------------------------------------------ search */
.wec-search{display:flex;align-items:center;border:1px solid var(--chrome-rule);
  background:rgba(255,255,255,.05);min-inline-size:0;flex:none}
.wec-search:focus-within{border-color:var(--chrome-muted)}
.wec-search input{
  appearance:none;background:none;border:0;color:var(--chrome-ink);font-family:var(--body);
  font-weight:400;font-size:15px;padding:11px 14px;inline-size:15rem;min-inline-size:0;
}
.wec-search input::placeholder{color:var(--chrome-muted);opacity:1}
.wec-search input:focus{outline:none}
.wec-search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.wec-search button{appearance:none;background:none;border:0;color:var(--chrome-muted);cursor:pointer;
  padding:11px 13px;display:grid;place-items:center}
.wec-search button:hover{color:var(--chrome-ink)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------- section rule */
.wec-srule{
  display:flex;align-items:baseline;gap:16px;
  margin-block:56px 20px;border-block-start:1px solid var(--rule);padding-block-start:18px;
}
/* The first rail sits directly under the masthead, so it needs no rule above
   it and less air — the page should start on the work. */
.wec-srule--first{margin-block-start:42px;border-block-start:0;padding-block-start:0}
.wec-srule h2{font-size:19px;letter-spacing:.06em;text-transform:uppercase;margin:0;
  font-weight:700;color:var(--ink)}
.wec-srule h2 a{text-decoration:none}
.wec-srule .wec-n{font-family:var(--mono);font-size:13px;color:var(--muted);margin-inline-start:auto}
.wec-srule .wec-n a{text-decoration:none;border-block-end:1px solid var(--rule);padding-block-end:2px}
.wec-srule .wec-n a:hover{color:var(--ink);border-color:var(--muted)}

/* ---------------------------------------------------------------- the wall
   A real grid: no gaps, no margins, cards butted edge to edge so the archive
   reads as one surface of faces rather than a scatter of cards. With gap:0 a
   2x2 span is exactly twice a 1x1 in both directions, so the big card keeps the
   same 5:4 shape as its neighbours and no row is left ragged.

   Layout, 4 columns: one double card opens, eight singles follow — 4 + 8 = 12
   cells, three complete rows.

   The category and headline sit ON the picture. That only works because the
   15%-60% crop takes out the reels' own burned-in wordmark and translation;
   over a raw frame the two sets of text fought each other. */
.wec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.wec-tile{
  position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--frame);
  display:block;text-decoration:none;color:#fff;
}
.wec-tile img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 27%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.wec-tile:hover img,.wec-tile:focus-visible img{transform:scale(1.05)}
.wec-tile:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.wec-shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,14,18,.92) 0%,rgba(6,14,18,.55) 32%,rgba(6,14,18,.06) 62%,transparent 78%)}

.wec-cap{position:absolute;inset-inline:0;inset-block-end:0;padding:20px 20px 22px;display:block}
.wec-cat{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-block-end:8px;
}
.wec-tile h3{
  margin:0;font-size:17px;line-height:1.32;font-weight:600;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.wec-who{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);
  margin-block-end:3px;letter-spacing:.01em}

/* The opener: twice the size, and the only card that gets room for three lines.
   It keeps the SAME 5:4 ratio as a single card — with gap:0 a 2x2 span is
   exactly twice a 1x1 in both directions, so the shapes agree. Setting
   aspect-ratio:auto here instead let the portrait source's intrinsic size drive
   the card: 610x1084 rather than 610x488, which stretched two rows to 542px
   each and left a hole beside it. */
.wec-tile--big{grid-column:span 2;grid-row:span 2;aspect-ratio:5/4}
.wec-tile--big .wec-cap{padding:30px 32px 32px}
.wec-tile--big h3{font-size:29px;line-height:1.18;font-weight:700;-webkit-line-clamp:3;
  letter-spacing:-.015em}
.wec-tile--big .wec-cat{font-size:12.5px;margin-block-end:12px}
.wec-tile--big .wec-who{font-size:15px}

/* ------------------------------------------------- the spaced rail variant
   The front page's per-section rails are ordinary cards: gaps between them,
   headline underneath the picture, and no section label — the rail's own
   heading already says which section this is, so printing it on every card
   nine times adds nothing. */
.wec-grid--rail{gap:34px 22px}
.wec-tile--below{
  aspect-ratio:auto;overflow:visible;background:none;color:inherit;
  display:flex;flex-direction:column;gap:14px;
}
.wec-tile--below .wec-tile-frame{
  display:block;position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--frame);
}
.wec-tile--below h3{
  color:var(--ink);text-shadow:none;font-size:17px;line-height:1.4;font-weight:600;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  transition:color .18s;
}
.wec-tile--below:hover h3{color:#000}
.wec-tile--below .wec-who{color:var(--muted);font-size:14px;margin-block-end:4px}

/* ------------------------------------------------------------------- the lead */
.wec-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;
  padding-block:52px 10px}
.wec-lead .wec-shot{position:relative;background:var(--frame);overflow:hidden;aspect-ratio:5/4}
.wec-lead .wec-shot img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 27%}
.wec-lead h1 a{text-decoration:none}
.wec-lead h1{font-size:clamp(30px,3.7vw,50px);line-height:1.1;margin:0 0 20px;
  font-weight:700;letter-spacing:-.022em;text-wrap:balance;color:var(--ink)}
.wec-stand{font-size:18px;line-height:1.62;color:var(--ink-dim);margin:0;max-width:46ch}
.wec-meta{font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 0;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.wec-meta a{text-decoration:none;border-block-end:1px solid var(--rule);padding-block-end:2px}
.wec-meta a:hover{color:var(--ink);border-color:var(--muted)}
.wec-meta span{opacity:.55}

/* ------------------------------------------------------- article + the player */
.wec-article{padding-block:48px 24px}
.wec-article-head{max-inline-size:54rem}
.wec-article h1{font-size:clamp(30px,3.4vw,46px);line-height:1.12;margin:0 0 18px;
  font-weight:700;letter-spacing:-.022em;text-wrap:balance;color:var(--ink)}
/* Size, leading, paragraph gap and measure match Wara El Mazzika's article body. */
.wec-body{max-inline-size:640px;font-size:19px;line-height:1.75;color:var(--ink-dim)}
.wec-body p{margin:0 0 1em}
.wec-body a{color:var(--ink)}

/* ------------------------------------------------- the title card
   The headline sits in the chrome, as though the masthead ran on into an
   opening title. A written article's featured image is the first frame: it
   starts in the dark and hangs over onto the page.

   Full bleed without 100vw. border-image paints outside the box but adds no
   scrollable overflow, so browsers that count the scrollbar inside 100vw do
   not grow a horizontal one. */
.wec-article{padding-block-start:0}
.wec-head{
  --hang:0px;
  border-image:linear-gradient(var(--chrome) calc(100% - var(--hang)),var(--page) 0) fill 0//0 100vw;
  padding-block:52px calc(52px + var(--hang));margin-block-end:48px;
}
.wec-head-text{max-inline-size:54rem}
.wec-head h1{color:var(--chrome-ink);font-size:clamp(32px,3.7vw,54px);line-height:1.1;margin-block-end:22px}
.wec-head .wec-meta{color:var(--chrome-muted);margin:0}
.wec-head .wec-meta a{border-block-end-color:var(--chrome-rule)}
.wec-head .wec-meta a:hover{color:var(--chrome-ink);border-color:var(--chrome-muted)}

.wec-head--hero{
  --hang:clamp(72px,10vw,150px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,4.5vw,64px);align-items:end;
  padding-block-end:0;margin-block-end:clamp(40px,5vw,64px);
}
/* Set on the lower edge of the dark part, like a title card, with air under
   it so the meta line never sits on the seam. */
.wec-head--hero .wec-head-text{padding-block-end:calc(var(--hang) + 40px)}
.wec-head-shot{margin:0;background:var(--chrome-rule);aspect-ratio:3/2;overflow:hidden}
.wec-head-shot img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 35%}

/* A written piece reads down the middle of the page. */
.wec-article--read .wec-body{margin-inline:auto}

.wec-body :is(h1,h2,h3){color:var(--ink);font-weight:700;line-height:1.28;letter-spacing:-.012em;
  margin:2.1em 0 .55em;text-wrap:balance}
.wec-body :is(h1,h2){font-size:clamp(23px,2.1vw,28px)}
.wec-body h3{font-size:21px}
.wec-num{font-family:var(--mono);font-weight:500;font-size:.6em;letter-spacing:.04em;color:var(--muted);
  vertical-align:.3em;margin-inline-end:.45em}

/* A heading that is nothing but a link is cross-promotion carried over from
   Scoop Empire ("Don't miss: …"), not a section of this piece. Set as heavy
   as the real sections, it doubled the apparent length of a seven-item list. */
.wec-body h2:has(> a:only-child){font-size:16px;font-weight:500;line-height:1.6;letter-spacing:0;
  margin:2em 0;padding-block:14px;border-block:1px solid var(--rule);color:var(--muted)}
.wec-body h2:has(> a:only-child) a{color:inherit;text-decoration:none}
.wec-body h2:has(> a:only-child) a:hover{color:var(--ink);text-decoration:underline}

.wec-body figure{margin:2em 0}
.wec-body figure img{inline-size:auto;max-block-size:min(78vh,760px);margin-inline:auto}
.wec-body figcaption{font-size:14px;line-height:1.55;color:var(--muted);margin-block-start:10px;text-align:center}
/* Pictures and clips step out past the text column; the words stay at measure. */
@media (min-width:1000px){
  .wec-article--read .wec-body > figure{margin-inline:-80px}
}

.wec-stage{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:44px;
  align-items:start;margin-block-end:40px}
.wec-stage--wide{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.wec-player{position:relative;background:var(--frame);overflow:hidden;min-inline-size:0}
.wec-player video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* Instagram writes its own iframe into the blockquote, so the container sets
   the width and lets the embed decide its height. */
.wec-embed{min-inline-size:0}
.wec-embed iframe{max-inline-size:100% !important;min-inline-size:0 !important;margin:0 !important}
.wec-embed blockquote{margin:0 !important}
.wec-embed-fallback{display:block;padding:18px;border:1px solid var(--rule);text-align:center;
  font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none}
.wec-embed-fallback:hover{color:var(--ink);border-color:var(--muted)}

/* --------------------------------------------- the signature: timecoded quotes */
.wec-tr{border-block-start:1px solid var(--rule);padding-block-start:22px;margin-block-start:26px}
.wec-tr-lbl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 12px}
.wec-row{
  display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:start;inline-size:100%;
  padding-block:12px;border:0;border-block-end:1px solid var(--rule-soft);
  background:none;color:inherit;text-align:start;font:inherit;cursor:pointer;
}
.wec-row[disabled]{cursor:default}
.wec-row:not([disabled]):hover{background:rgba(18,36,44,.7)}
.wec-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.wec-row time{font-family:var(--mono);font-size:13px;color:var(--muted);padding-block-start:3px}
.wec-row:not([disabled]):hover time{color:var(--ink)}
.wec-row q{font-size:16.5px;line-height:1.6;quotes:none;color:var(--ink-dim)}
.wec-tr-pending{font-size:15px;color:var(--muted);margin:0;line-height:1.65;max-inline-size:60ch}

/* -------------------------------------------------- the whole interview */
.wec-full{border-block-start:1px solid var(--rule);margin-block-start:26px;padding-block-start:20px}
.wec-full summary{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding-block:8px;
}
.wec-full summary::-webkit-details-marker{display:none}
.wec-full summary::before{
  content:"";inline-size:8px;block-size:8px;border-inline-end:2px solid currentColor;
  border-block-end:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s ease;
  margin-block-start:-4px;
}
.wec-full[open] summary::before{transform:rotate(45deg);margin-block-start:2px}
.wec-full summary:hover{color:var(--ink)}
.wec-full p{font-size:16.5px;line-height:1.85;color:var(--ink-dim);max-inline-size:66ch;margin:16px 0 0}

/* ------------------------------------------------------------------- archives */
.wec-archive-head{padding-block:52px 8px;border-block-end:1px solid var(--rule);margin-block-end:32px}
.wec-archive-head h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.02em;margin:0 0 12px;
  font-weight:700;color:var(--ink);text-transform:uppercase}
.wec-archive-head.is-search h1{text-transform:none;letter-spacing:-.022em}
.wec-archive-head p{margin:0;color:var(--muted);font-size:17px;max-inline-size:52ch}
.wec-empty{color:var(--ink-dim);padding-block:44px;font-size:17px;max-inline-size:48ch}
.wec-empty p{margin:0 0 12px}
.wec-empty-links{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:22px !important}
.wec-empty-links a{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--rule);padding:10px 14px;color:var(--muted)}
.wec-empty-links a:hover{color:var(--ink);border-color:var(--muted)}

/* Contact. Square fields like the pager; the button wears the chrome. */
.wec-contact{max-inline-size:640px;padding-block:8px 0}
.wec-field{margin:0 0 22px;display:grid;gap:8px}
.wec-field label{font-size:15px;font-weight:600;color:var(--ink-dim)}
.wec-field input,.wec-field select,.wec-field textarea{font:inherit;font-size:17px;color:var(--ink);
  background:var(--page);border:1px solid var(--rule);border-radius:0;padding:12px 14px;inline-size:100%;
  box-sizing:border-box}
.wec-field textarea{resize:vertical;min-block-size:180px;line-height:1.6}
.wec-field input:focus-visible,.wec-field select:focus-visible,.wec-field textarea:focus-visible,
.wec-actions button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wec-field [aria-invalid="true"]{border-color:#B42318}
.wec-field-error{font-size:15px;color:#B42318}
.wec-form-error{margin:0 0 22px;max-inline-size:640px}
.wec-pot{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.cf-turnstile{margin-block-end:22px}
.wec-actions{margin:0}
.wec-actions button{font:inherit;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chrome-ink);background:var(--chrome);border:0;padding:14px 30px;cursor:pointer}
.wec-actions button:hover{background:var(--chrome-rule)}
.wec-contact-done{font-size:19px;line-height:1.6;color:var(--ink);max-inline-size:52ch;padding-block:12px}

/* Team: opening-title cast credits. Each credit is centred above a row of
   people, photo over name; the row wraps and stays centred. */
.wec-credits{max-inline-size:1080px;margin-inline:auto;padding-block:24px 8px}
.wec-credits-group{padding-block:28px}
.wec-credits-role{margin:0 0 28px;text-align:center;font-size:19px;font-weight:400;
  color:var(--muted);letter-spacing:0}
.wec-credits-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:36px 28px}
.wec-credit{inline-size:180px;display:grid;justify-items:center;align-content:start;gap:14px;text-align:center}
.wec-credit-face{inline-size:96px;block-size:96px;border-radius:50%;object-fit:cover;
  background:var(--surface)}
.wec-credit-face.is-initial{display:grid;place-items:center;font-size:34px;font-weight:600;
  color:var(--ink-dim)}
.wec-credit-who{display:grid;gap:4px;min-inline-size:0}
.wec-credit-name{font-size:20px;font-weight:600;line-height:1.3;color:var(--ink)}
.wec-credit-title{font-size:15px;line-height:1.45;color:var(--muted)}
@media (max-width:620px){
  .wec-credits-group{padding-block:20px}
  .wec-credits-role{margin-block-end:22px;font-size:16px}
  .wec-credits-names{gap:28px 12px}
  .wec-credit{inline-size:calc(50% - 6px)}
  .wec-credit-face{inline-size:80px;block-size:80px}
  .wec-credit-name{font-size:18px}
}


.wec-pager{display:flex;gap:10px;margin-block-start:48px;font-family:var(--mono);font-size:14px;
  flex-wrap:wrap}
.wec-pager a,.wec-pager span{border:1px solid var(--rule);padding:10px 14px;text-decoration:none;
  color:var(--muted)}
.wec-pager a:hover{color:var(--ink);border-color:var(--muted)}
.wec-pager .current{color:var(--ink);border-color:var(--muted)}

/* --------------------------------------------------------------------- footer */
.wec-foot{margin-block-start:96px;background:var(--chrome);color:var(--chrome-dim);
  padding-block:64px 76px;font-size:16px}
/* Footer text is white throughout (Kareem, 12 Oct 2026, network-wide): the chrome text tokens,
   redefined for the footer only. */
.wec-foot{--chrome-ink:#FFFFFF;--chrome-dim:#FFFFFF;--chrome-muted:#FFFFFF}
.wec-foot a{color:var(--chrome-dim);text-decoration:none}
.wec-foot a:hover{color:var(--chrome-ink)}
/* Four columns that share the whole width, no hole and nothing orphaned underneath: brand | Sections | More |
   newsletter (Kareem, 12 Oct 2026). The newsletter's column is 328px at 1280, the width its form is built for. */
.wec-foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.25fr);
  gap:48px;align-items:start}
.wec-foot-brand p{margin:22px 0 0;max-inline-size:40ch;line-height:1.7;color:var(--chrome-dim)}
.wec-social{display:flex;flex-wrap:wrap;gap:4px;margin-block-start:18px;margin-inline-start:-10px}
.wec-social a{display:grid;place-items:center;inline-size:40px;block-size:40px;color:var(--chrome-dim)}
.wec-social a:hover{color:var(--chrome-ink)}
.wec-social a:focus-visible{outline:2px solid var(--chrome-ink);outline-offset:-2px}
.wec-social svg{inline-size:20px;block-size:20px}
.wec-foot-logo{block-size:82px;width:auto}
.wec-foot-nav{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
/* A column title is bold tracked caps with a gap under it; the links under it are ordinary weight, sentence case,
   one size up. The newsletter's own title (the widget's footer look) is set the same. */
.wec-foot-nav h2{font-size:14px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 9px;font-weight:700;color:var(--chrome-ink)}
.wec-foot-nav a{display:flex;gap:10px;align-items:baseline;font-weight:400}
.wec-foot-nav a span{font-family:var(--mono);font-size:12px;color:var(--chrome-muted)}
.wec-foot-newsletter{min-inline-size:0}
.wec-foot-legal{margin:52px 0 0;padding-block-start:24px;border-block-start:1px solid var(--chrome-rule);
  font-size:14px;line-height:1.7;color:var(--chrome-muted)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .wec-mast .wec-shell{flex-wrap:wrap;padding-block:14px;min-block-size:0;gap:12px 24px}
  .wec-nav{inline-size:100%;order:3;margin-inline-start:0;gap:8px 24px}
  .wec-nav a{padding-block:12px}
  .wec-search{order:2;flex:1 1 12rem}
  .wec-search input{inline-size:100%}
  .wec-lang{margin-inline-start:auto}
}
@media (max-width:1000px){
  .wec-grid{grid-template-columns:repeat(2,1fr)}
  /* At two columns a 2x2 card would be the entire viewport twice over. */
  .wec-tile--big{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
  .wec-tile--big h3{font-size:22px;-webkit-line-clamp:2}
  /* At two columns a double-width card is the whole row, which just makes it
     the lead again. It goes back to being an ordinary card. */
  .wec-tile--big{grid-column:span 2}
  .wec-tile--big .wec-tile-frame{aspect-ratio:16/9}
  .wec-tile--big h3{font-size:19px}
  .wec-lead{grid-template-columns:1fr;gap:26px}
  .wec-stage,.wec-stage--wide{grid-template-columns:1fr}
  .wec-player,.wec-embed{max-inline-size:460px}
  /* One column: the title first, then the frame hanging off the band. */
  .wec-head--hero{grid-template-columns:1fr;gap:30px;--hang:clamp(64px,16vw,120px)}
  .wec-head--hero .wec-head-text{padding-block-end:0}
}
@media (max-width:1000px){
  .wec-foot-top{grid-template-columns:1fr 1fr;gap:36px}
  .wec-foot-brand,.wec-foot-newsletter{grid-column:1 / -1}
}
@media (max-width:620px){
  .wec-shell{padding-inline:18px}
  body{font-size:16px}
  .wec-logo img{block-size:46px}
  .wec-nav{font-size:14px;gap:4px 18px}
  .wec-tile h3{font-size:15px}
  .wec-cap{padding:14px 14px 16px}
  .wec-tile--big h3{font-size:19px}
  .wec-foot-logo{block-size:58px}
  .wec-head{padding-block-start:34px}
  .wec-head h1{font-size:30px}
  /* The frame runs to the screen edges on a phone; a 18px inset reads as a mistake. */
  .wec-head-shot{margin-inline:-18px}
  .wec-body{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ------------------------------------------------------------ Arabic headlines
   Arabic needs more leading than Latin: marks above and below the line collide
   at 1.1, and negative tracking pulls joined letters into each other. The values
   follow Wara El Mazzika's Arabic headline and body (1.35 and 1.9, no tracking). */
[dir="rtl"] .wec-lead h1,
[dir="rtl"] .wec-article h1,
[dir="rtl"] .wec-archive-head h1{line-height:1.35;letter-spacing:0}
[dir="rtl"] .wec-tile h3{line-height:1.5}
[dir="rtl"] .wec-foot-nav h2{letter-spacing:0}
[dir="rtl"] .wec-tile--below h3{line-height:1.55}
[dir="rtl"] .wec-tile--big h3{line-height:1.35;letter-spacing:0}
[dir="rtl"] .wec-body{line-height:1.9}
[dir="rtl"] .wec-body :is(h1,h2,h3){line-height:1.5;letter-spacing:0}