/* ════════════════════════════════════════════════════
   project.css — the single-project pages under /work/.
   Rides on studio.css for the palette, fonts and buttons;
   everything here is layout for this one page shape.
════════════════════════════════════════════════════ */

.pj-body{cursor:auto;min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255,46,151,.09), transparent 62%),
    radial-gradient(760px 460px at 8% 22%, rgba(47,240,255,.055), transparent 60%),
    var(--bk)}

/* ── nav ──────────────────────────────────────────────────────────────
   The page wears the site's own <nav>, which studio.css fixes to the top at
   56px, so the content starts below it. .pj-pn is a <nav> too and inherits
   every one of those properties, so each has to be answered — not only the
   ones this layout happens to care about.                              */
.pj-pn{position:static;height:auto;grid-template-columns:none;
  border-bottom:0;backdrop-filter:none;background:none;padding:0}

/* 12px tall on a phone, which is a quarter of what a thumb can reliably
   hit — and this is the way back to the work. The padding is negative-
   margined off so the type sits exactly where it did; only the target
   grew. */
.pj-back{display:inline-block;margin-bottom:8px;padding:11px 12px 11px 0;
  margin-left:0;font-size:10.5px;letter-spacing:.24em;
  color:var(--mt);text-decoration:none;text-transform:uppercase;
  transition:color .2s,letter-spacing .3s;white-space:nowrap}
.pj-back:hover{color:var(--lm);letter-spacing:.3em}

/* the closing call to action, above the site footer */
.pj-cta{display:flex;justify-content:center;padding:0 clamp(18px,5vw,54px) clamp(46px,7vw,74px)}
.pj-cta .btn-y{animation:none}

/* ── head ────────────────────────────────────────── */
.pj-wrap{flex:1;width:100%;max-width:1180px;margin:0 auto;
  padding:calc(56px + clamp(28px,5vw,54px)) clamp(18px,5vw,54px) clamp(50px,8vw,90px)}
/* the phone dock is fixed to the bottom edge — keep the footer clear of it */
.exp-mobile footer{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
/* the wordmark is a link home here; it must still read as the wordmark */
.ft-big{text-decoration:none;color:var(--wh);display:block}
.pj-kicker{font-size:10.5px;letter-spacing:.3em;color:var(--cy);text-transform:uppercase;
  margin-bottom:14px}
.pj-title{font-family:var(--fd);font-size:clamp(38px,6.6vw,84px);line-height:.92;
  letter-spacing:.02em;color:var(--wh);margin-bottom:clamp(26px,4vw,40px);
  text-wrap:balance}
.pj-title.ar{font-family:var(--fa);font-size:clamp(28px,4.4vw,54px);line-height:1.28;
  font-weight:600;letter-spacing:0;unicode-bidi:plaintext;text-align:left}

/* ── the video ───────────────────────────────────── */
.pj-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
  background:linear-gradient(140deg,#0f0b18,#080611 62%);
  border:1px solid var(--bd);isolation:isolate}
.pj-stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 120px rgba(6,5,9,.85)}
.pj-poster{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease-out),transform 8s linear;
  z-index:1;filter:saturate(.86) contrast(1.05)}
.pj-poster.on{opacity:.62;transform:scale(1)}
.pj-stage:hover .pj-poster.on{opacity:.8}
.pj-scan{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 3px)}
.pj-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.pj-stage.live .pj-play,.pj-stage.live .pj-scan{opacity:0;pointer-events:none}

.pj-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;transition:opacity .3s,
  background .3s,box-shadow .3s,transform .3s var(--ease-out);
  background:rgba(185,255,46,.14);border:1px solid var(--lm);
  box-shadow:0 0 28px rgba(185,255,46,.16);animation:breathe 3.4s ease-in-out infinite}
.pj-play svg{width:32%;height:32%;fill:var(--lm);margin-left:9%}
.pj-play:hover{background:var(--lm);box-shadow:0 0 48px rgba(185,255,46,.5);
  transform:translate(-50%,-50%) scale(1.08)}
.pj-play:hover svg{fill:#060509}
.pj-play:focus-visible{outline:2px solid var(--cy);outline-offset:5px}

/* ── brief + facts ───────────────────────────────── */
.pj-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr);
  gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);align-items:start}
.pj-lbl{font-size:10px;letter-spacing:.3em;color:var(--yw);margin-bottom:12px}
/* ── PROSE GETS A PROPORTIONAL FACE ──────────────────────────────────────
   body sets --fn (JetBrains Mono) for the whole site, and that is right for
   what this site is mostly made of: labels, timecode, counts, the facts
   list. It is wrong for the one thing on these pages that is actually READ.
   In a monospaced face every letter occupies the same width, so a word has
   no silhouette to recognise — fine for a column of numbers, tiring for a
   hundred and fifty words of prose, and these are the pages a client reads
   to decide.

   --fa is IBM Plex Sans Arabic, which is ALREADY loaded and subsetted for
   both scripts, so this costs nothing new over the wire and the Arabic
   pages (which were already overriding to it) stop being a special case.
   Everything else on the page stays mono, so the room still feels like an
   edit suite. */
.pj-copy p,.pj-craft p,.sv-list li,.sv-q p{font-family:var(--fa);letter-spacing:0}
.pj-copy p{font-size:15px;line-height:1.85;color:var(--nv);max-width:62ch}
.pj-src{margin-top:22px;animation:none}

.pj-facts{border-top:1px solid var(--bd)}
.pj-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 2px;border-bottom:1px solid var(--bd)}
.pj-facts dt{font-size:9.5px;letter-spacing:.24em;color:var(--mt);text-transform:uppercase;
  flex-shrink:0}
.pj-facts dd{font-size:12.5px;letter-spacing:.06em;color:var(--wh);text-align:right}

/* ── prev / next ─────────────────────────────────── */
.pj-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;
  margin-top:clamp(44px,6vw,76px);border-top:1px solid var(--bd);padding-top:22px}
.pn-link{display:flex;flex-direction:column;gap:7px;text-decoration:none;padding:16px 18px;
  border:1px solid var(--bd);transition:border-color .25s,background .25s,transform .25s var(--ease-out)}
.pn-link:hover{border-color:var(--yw);background:var(--yg);transform:translateY(-3px)}
.pn-next{text-align:right;align-items:flex-end}
.pn-dir{font-size:9.5px;letter-spacing:.26em;color:var(--mt);text-transform:uppercase}
.pn-link:hover .pn-dir{color:var(--yw)}
.pn-name{font-family:var(--fh);font-size:15px;font-weight:400;letter-spacing:.06em;
  color:var(--wh);line-height:1.3}
/* direction:rtl flips text-align:start to the right, so each side says which
   edge it wants rather than letting the script decide */
.pn-name.ar{font-family:var(--fa);font-size:14px;unicode-bidi:plaintext;text-align:left}
.pn-next .pn-name.ar{text-align:right}

/* ── more work ───────────────────────────────────── */
.pj-more{margin-top:clamp(48px,7vw,86px)}
.pj-more .pj-lbl{margin-bottom:18px}
.mw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.mw-card{position:relative;display:block;text-decoration:none;overflow:hidden;
  border:1px solid var(--bd);background:linear-gradient(140deg,#0f0b18,#080611 62%);
  transition:border-color .28s,transform .28s var(--ease-out)}
.mw-card:hover{border-color:var(--yw);transform:translateY(-4px)}
.mw-card:focus-visible{outline:1px solid var(--lm);outline-offset:3px}
.mw-thumb{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);
  filter:saturate(.8) contrast(1.04)}
.mw-thumb.on{opacity:.58}
.mw-card:hover .mw-thumb.on{opacity:.9;transform:scale(1.05)}
.mw-meta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;
  padding:26px 13px 11px;
  background:linear-gradient(to top,rgba(6,5,9,.94) 22%,transparent)}
.mw-cat{font-size:8.5px;letter-spacing:.24em;color:var(--cy);text-transform:uppercase}
.mw-name{font-family:var(--fh);font-size:12.5px;font-weight:500;letter-spacing:.05em;
  color:var(--wh);text-transform:uppercase;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mw-name.ar{font-family:var(--fa);text-transform:none;letter-spacing:0;
  unicode-bidi:plaintext;text-align:left}
.mw-all{display:inline-block;margin-top:12px;padding:12px 14px 12px 0;
  font-size:10px;letter-spacing:.26em;
  color:var(--mt);text-decoration:none;text-transform:uppercase;transition:color .2s,letter-spacing .3s}
.mw-all:hover{color:var(--lm);letter-spacing:.31em}

@media (max-width:820px){
  .pj-grid{grid-template-columns:1fr}
  .pj-facts{margin-top:4px}
}
@media (max-width:560px){
  .pj-pn{grid-template-columns:1fr}
  .pn-next{text-align:left;align-items:flex-start}
  .pn-next .pn-dir::before{content:''}
  .mw-grid{grid-template-columns:repeat(2,1fr)}
  .mw-meta{padding:20px 10px 9px}
  .mw-name{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .pj-play,.pj-poster{animation:none;transition:none}
}

/* ── BEHIND THE SCENES ────────────────────────────────────────────────
   The making-of sits under the film it belongs to, at half its size and
   in pairs: the same stage, the same facade, plainly secondary to the
   piece itself. One on its own does not stretch to full width — a lone
   banner would read as a second hero rather than an extra. */
.pj-bts{margin-top:clamp(40px,6vw,72px)}
.pj-bts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px)}
.pj-bts-grid.one{grid-template-columns:minmax(0,min(100%,640px))}
.pj-bts-item{margin:0;min-width:0}
.pj-bts-item .pj-stage{border-color:var(--bd)}
.pj-bts-item .pj-play{width:52px;height:52px}
.pj-bts-cap{display:flex;align-items:baseline;gap:10px;margin-top:9px;
  font-family:var(--fn);font-size:11.5px;letter-spacing:.08em;color:var(--nv);
  text-transform:uppercase}
.pj-bts-cap.ar{font-family:var(--fa);letter-spacing:0;text-transform:none;
  direction:rtl;unicode-bidi:plaintext;text-align:left}
.pj-bts-cap span{margin-inline-start:auto;flex:none;font-family:var(--fn);
  font-size:9.5px;letter-spacing:.18em;color:var(--mt);border:1px solid var(--gr);
  padding:3px 6px;line-height:1;text-transform:uppercase}
@media (max-width:720px){
  .pj-bts-grid{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICE PAGES

   /services/<x>/ and /ar/services/<x>/ — the pages that exist so the site
   can be found for the work rather than only for the name. They wear the
   project page's furniture (pj-wrap, pj-grid, pj-copy, pj-facts, mw-grid),
   so almost nothing new is needed here: what follows is the four blocks a
   project page has no equivalent of.

   The RTL side is not a separate stylesheet. dir="rtl" on <html> already
   flips the grid, the flex rows and the text alignment; only the handful of
   places that name a physical side rather than a logical one need saying
   twice, and those are marked below.
   ══════════════════════════════════════════════════════════════════════ */

/* what it covers */
.sv-block{margin-top:clamp(40px,6vw,72px)}
.sv-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(20px,3vw,40px)}
.sv-list li{position:relative;padding:13px 0 13px 22px;border-bottom:1px solid var(--bd);
  font-size:14px;line-height:1.6;color:var(--nv)}
.sv-list li::before{content:'';position:absolute;left:0;top:20px;width:8px;height:2px;
  background:var(--lm)}
[dir=rtl] .sv-list li{padding:13px 22px 13px 0}
[dir=rtl] .sv-list li::before{left:auto;right:0}
.sv-formats{margin-top:18px;font-family:var(--fn);font-size:11.5px;letter-spacing:.14em;
  color:var(--mt);text-transform:uppercase;line-height:2}
/* THE TOOLKIT — AI page only. Same rhythm as .sv-list (a hairline rule per
   row, lime accent) so it reads as part of the page rather than as a spec
   sheet bolted on. The <dd> is forced dir=ltr in the markup: a run of Latin
   product names inside an RTL paragraph gets reordered by the bidi
   algorithm, and "Runway · Sora · Veo" comes out with the separators in the
   wrong places. The label beside it stays Arabic and stays RTL. */
.sv-tool-list{margin:0;padding:0;display:grid;gap:0}
.sv-tool-list>div{display:grid;grid-template-columns:minmax(150px,210px) 1fr;
  gap:clamp(12px,2vw,28px);padding:13px 0;border-bottom:1px solid var(--bd);align-items:baseline}
.sv-tool-list dt{font-family:var(--fn);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lm);margin:0}
.sv-tool-list dd{margin:0;font-size:13.5px;line-height:1.75;color:var(--nv)}
/* Arabic labels: uppercase and wide tracking do nothing for Arabic and the
   tracking breaks the joins, so neither applies here. */
[dir=rtl] .sv-tool-list dt{font-family:var(--fa);font-size:13px;letter-spacing:0;text-transform:none}
@media (max-width:620px){
  .sv-tool-list>div{grid-template-columns:1fr;gap:5px}
}

.sv-cta{margin-top:26px;display:inline-block;animation:none}

/* the questions — real headings, because they are real questions, and
   because the FAQ schema on these pages has to describe something the
   visitor can actually see */
.sv-faq{margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--bd);padding-top:26px}
.sv-q{padding:18px 0;border-bottom:1px solid var(--bd)}
.sv-q h2{font-family:var(--fh);font-size:16px;font-weight:500;letter-spacing:.05em;
  color:var(--wh);line-height:1.4;margin-bottom:9px}
[dir=rtl] .sv-q h2{font-family:var(--fa);letter-spacing:0}
.sv-q p{font-size:14px;line-height:1.9;color:var(--nv);max-width:72ch}

/* every service links to every other one */
.sv-also{margin-top:clamp(40px,6vw,72px)}
.sv-also-list{display:flex;flex-wrap:wrap;gap:9px}
.sv-also-list a{font-family:var(--fn);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--nv);
  padding:9px 14px;border:1px solid var(--bd);transition:all .22s}
.sv-also-list a:hover{color:var(--bk);background:var(--lm);border-color:var(--lm)}
[dir=rtl] .sv-also-list a{font-family:var(--fa);letter-spacing:0;text-transform:none}

/* the index */
.sv-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(10px,1.4vw,16px)}
.sv-item{display:block;text-decoration:none;padding:20px 20px 22px;
  border:1px solid var(--bd);transition:border-color .25s,background .25s,transform .25s var(--ease-out)}
.sv-item:hover{border-color:var(--yw);background:var(--yg);transform:translateY(-3px)}
.sv-num{display:block;font-family:var(--fn);font-size:10px;letter-spacing:.24em;color:var(--mt)}
.sv-item-name{display:block;margin-top:10px;font-family:var(--fh);font-size:19px;
  font-weight:500;letter-spacing:.05em;color:var(--wh)}
[dir=rtl] .sv-item-name{font-family:var(--fa);letter-spacing:0}
.sv-item-desc{display:block;margin-top:8px;font-family:var(--fn);font-size:10.5px;
  letter-spacing:.1em;color:var(--mt);text-transform:uppercase;line-height:1.9}
[dir=rtl] .sv-item-desc{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12px}

/* the other language. A visitor who wants it should not have to guess the
   URL, and the link is what tells a crawler the two pages are a pair as
   surely as the hreflang tag does. */
/* THE ROUTE TO THE OTHER LANGUAGE IS NOT A FOOTNOTE. This sat at the foot
   of the page as 12px of cyan text on a hairline — the visual weight of a
   legal disclaimer — on a site whose whole second half is Arabic and whose
   readers are in Riyadh. It is the most important secondary action on any
   page here, so it looks like an action: a bordered chip with an arrow,
   sized to be seen and to be tapped. */
.sv-lang{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--bd);padding-top:26px}
.sv-lang a{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;
  border:1px solid var(--bd);border-radius:2px;transition:border-color .2s,color .2s,background .2s}
.sv-lang a::after{content:'\2192';font-family:var(--fn);opacity:.7}
.sv-lang a[dir=rtl]::after{content:'\2190'}
.sv-lang a:hover{border-color:var(--cy);background:rgba(34,211,238,.06)}
.sv-lang a{font-family:var(--fn);font-size:12px;letter-spacing:.14em;color:var(--cy);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.sv-lang a:hover{border-bottom-color:var(--cy)}
.sv-lang a[dir=rtl]{font-family:var(--fa);letter-spacing:0;font-size:15px}

/* Arabic body copy wants its own face and a little more line height — the
   Latin stack renders Arabic in whatever the system happens to have. */
/* the face is shared now (see above); Arabic just wants more air between
   lines, because its ascenders and descenders reach further */
[dir=rtl] .pj-copy p,[dir=rtl] .sv-list li,[dir=rtl] .sv-q p{line-height:2.05}
[dir=rtl] .pj-title{font-family:var(--fa);letter-spacing:0;line-height:1.25}
[dir=rtl] .pj-facts dd{text-align:left}

@media(max-width:760px){
  .sv-list{grid-template-columns:1fr}
}

/* ── what was done to this film ────────────────────────────────────────
   The link back from a project to the crafts it belongs to. Service pages
   already pointed at their projects; nothing pointed the other way, so
   every project page was a dead end.

   The Arabic gets its own paragraph rather than trailing the English one.
   Sharing a line, the two directions fought over the wrap and the result
   ran into the right margin — two sentences in two scripts are two
   paragraphs. */
.pj-craft{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--bd);padding-top:22px}
.pj-craft p{font-size:14.5px;line-height:1.9;color:var(--nv);max-width:74ch}
.pj-craft a{color:var(--wh);text-decoration:none;border-bottom:1px solid var(--md);
  transition:color .2s,border-color .2s}
.pj-craft a:hover{color:var(--lm);border-bottom-color:var(--lm)}
.pj-craft-ar{font-family:var(--fa);margin-top:10px;line-height:2.1;letter-spacing:0;
  color:var(--sv)}

/* ── ARABIC AT LABEL SIZE ────────────────────────────────────────────────
   The kickers and the facts-list terms are 9.5–10.5px with wide tracking.
   That is a deliberate look and it works for uppercase Latin, where the
   letterforms are distinguished by their outline. Arabic is distinguished
   by DOTS — ب ت ث ن ي differ by nothing else — and at 9.5px on a phone
   those dots stop resolving. Measured on /ar/: 49 Arabic elements under
   11px, six of them the facts terms at 9.5.

   So Arabic gets its own floor. Tracking goes to zero as well, because
   letter-spacing does not merely look wrong on Arabic — it breaks the
   joins between letters, which is how the script is read. */
[dir="rtl"] .pj-kicker,
[dir="rtl"] .pj-lbl,
[dir="rtl"] .pj-facts dt,
.pj-kicker[lang="ar"], .pj-lbl[lang="ar"] {
  font-size: 12px;
  letter-spacing: 0;
}
[dir="rtl"] .pj-facts dt { font-size: 11.5px; }

/* ── CLIENT PAGES ────────────────────────────────────────────────────────
   /clients/<slug>/ — everything made for one organisation, gathered from
   both the featured work and the archive. The logo sits beside the name
   rather than above it, so a client who arrives by recognising their own
   mark sees it confirmed on the same line as the heading. */
/* cp-, not cl-: .cl-head is already taken by the clients section on the
   home page, where it is a space-between row. Reusing the name put 826px
   between a client's logo and their name. */
.cp-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* .pj-title is a block heading everywhere else on the site, so inside a flex
   row it stretched the full width and carried its text to the far end —
   logo on the left, name on the right, a gap between them the size of the
   page. It sits next to the mark now. */
.cp-head .pj-title{margin:0;flex:0 1 auto}
.cl-logo{height:44px;width:auto;max-width:180px;object-fit:contain;flex-shrink:0;
  filter:grayscale(1) brightness(0) invert(.82);opacity:.95}
[dir=rtl] .cp-head{flex-direction:row-reverse;justify-content:flex-end}

/* An archive card leaves the site, because those forty-six films have no
   page here and the only way to watch one is where it lives. Say so on the
   card rather than letting it look like an internal link that misbehaves. */
.mw-card.mw-ext .mw-thumb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,5,9,.55),transparent 55%)}
.mw-src{position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--fn);font-size:9px;letter-spacing:.18em;color:var(--cy);
  background:rgba(6,5,9,.72);border:1px solid var(--bd);padding:4px 7px;border-radius:2px}
[dir=rtl] .mw-src{right:auto;left:10px}
.mw-card.mw-ext:hover .mw-src{color:var(--yw);border-color:var(--yw)}

/* the index: a mark beside every name, so the page scans as the wall does */
.cl-index a{display:flex;align-items:center;gap:14px}
.cl-logo-sm{height:26px;max-width:110px}
[dir=rtl] .cl-index a{flex-direction:row-reverse;justify-content:flex-end}
@media(max-width:560px){ .cl-logo{height:34px;max-width:140px} .cl-logo-sm{height:22px;max-width:92px} }

/* The written briefs on a client page — the same prose as the film's own
   page, gathered so a client can read what was done across all of it. */
.cp-briefs{margin-top:clamp(36px,5vw,60px)}
.cp-brief{padding:22px 0;border-bottom:1px solid var(--bd)}
.cp-brief:last-child{border-bottom:0}
.cp-brief-t{font-family:var(--fh);font-size:16px;font-weight:500;letter-spacing:.05em;
  margin:0 0 10px;text-transform:uppercase}
.cp-brief-t.ar{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:18px}
.cp-brief-t a{color:var(--wh);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cp-brief-t a:hover{color:var(--yw);border-bottom-color:var(--yw)}
.cp-brief p{font-family:var(--fa);font-size:15px;line-height:1.85;color:var(--nv);
  max-width:74ch;letter-spacing:0;margin:0}
[dir=rtl] .cp-brief p{line-height:2.05}