/* AROUB SOUBH · V02AROUB · Her colour, her line, at full size.
   Paper white, ink, cobalt, marigold, poppy, and the eye green as the mark. One colour per scene. Her strokes behind the big lines.
   Minimums by computed style: labels 15/16, nav-buttons-links 17/18, body 17/18. Never lowered on the phone. */


:root{
  --paper:#F3F0E8;   /* her Paper */
  --ink:#1E1E22;     /* her Ink: text, never a field */
  --cobalt:#006BC4;  /* Brand board Cobalt. white on cobalt 4.9:1 */
  --deep:#003576;    /* Brand board Deep Blue. white on deep 12:1 */
  --marigold:#E8BE4B;/* her Sun; ink on sun 9.6:1 */
  --poppy:#D65243;   /* her Coral Red: fields and display */
  --poppy-text:#B23A2C; /* coral at text weight, 5.6:1 on paper */
  --rose:#D97098;    /* her Dusty Rose: rare */
  --eye:#86C83B;
  --rule:rgba(20,20,20,.18);
  --ui:"Cabin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --story:"Lora",Georgia,"Times New Roman",serif;
  --display:"Playfair Display","Lora",Georgia,serif;
  --headline:"Playfair Display","Lora",Georgia,serif;
  --hl:var(--cobalt);
  --ease:cubic-bezier(.22,.61,.36,1);
  --fg:var(--ink);--bg:var(--paper);--accent:var(--cobalt);--accent-text:var(--cobalt);
}
html[lang="ar"]{--ui:"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;--story:"Amiri","Noto Naskh Arabic","Times New Roman",serif;--display:"Amiri","Noto Naskh Arabic",serif;--headline:"Changa","Noto Sans Arabic",sans-serif}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 18px/1.6 var(--story);background:var(--paper)}
html[lang="ar"] body{font-size:18px;line-height:1.7}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--accent-text)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--eye);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--paper);padding:12px 16px;font:500 17px var(--ui);z-index:20;text-decoration:none}
.skip:focus{top:12px}
.eye{flex:none}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 16px;background:rgba(243,240,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px}
.brand-stack{display:flex;flex-direction:column;line-height:1}
.brand-latin{font:600 19px/.95 "Cabin",var(--ui);letter-spacing:.06em;text-transform:uppercase}
.brand-arabic{font:600 15px/1.2 "Noto Sans Arabic",system-ui,sans-serif;letter-spacing:0;margin-top:3px;opacity:.85}
.brand-stack.big .brand-latin{font-size:28px}
.brand-stack.big .brand-arabic{font-size:22px;margin-top:6px}
.brand-alt{display:none}
.mainnav{display:none;gap:22px;margin-inline-start:auto}
.mainnav a{font:500 17px/44px var(--ui);text-decoration:none;color:var(--ink)}
html[lang="ar"] .mainnav a{font-size:18px}
.lang{margin-inline-start:auto}
.lang select{font:500 17px var(--ui);height:44px;min-width:64px;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:0 8px}
html[lang="ar"] .lang select{font-size:18px}
.langbtns{display:none;gap:4px}
.langbtns a{font:500 17px/44px var(--ui);padding:0 10px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.langbtns a[aria-current]{border-color:var(--ink)}

/* scenes: one colour each */
.scene{position:relative;padding:64px 0 48px;color:var(--fg);background:var(--bg);overflow:hidden}
.scene:first-child{padding-top:0}
.wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 20px}
.tone-ink,.tone-ink-yellow,.tone-ink-red,.tone-ink-nums{--fg:#fff;--bg:var(--deep);--accent:var(--marigold);--accent-text:var(--marigold)}
.tone-ink-red{--accent:var(--poppy);--accent-text:#FFB3A6}
.tone-ink-nums{--accent:var(--eye);--accent-text:var(--eye)}
.tone-cobalt,.tone-cobalt-ask{--fg:#fff;--bg:var(--cobalt);--accent:var(--marigold);--accent-text:#fff}
.tone-marigold{--fg:var(--ink);--bg:var(--marigold);--accent:var(--ink);--accent-text:var(--ink)}
.tone-gold{--fg:var(--ink);--bg:var(--paper);--accent:var(--marigold);--accent-text:var(--ink);overflow:hidden}
.tone-gold h2 .num{color:var(--marigold);font-size:150px;letter-spacing:-.05em}
.tone-gold .sub{font:italic 400 22px/1.3 var(--story);margin:0 0 18px}
.award{position:relative;margin:36px 0 26px;padding-inline-start:38%}
.award-nile{clip-path:polygon(0 8%,18% 0,100% 4%,96% 100%,10% 96%,2% 60%);aspect-ratio:3/4}
.award-nile img{width:100%;height:100%;object-fit:cover;display:block}
.award-trophy{position:absolute;inset-inline-start:0;bottom:4%;height:104%;width:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.award figcaption{font:500 14px/1.4 var(--ui);opacity:.7;margin-top:10px}
html[lang="ar"] .award figcaption{font-size:15px}
@media (min-width:900px){.tone-gold h2 .num{font-size:240px}.award{max-width:640px;margin-inline:auto}}
.tone-paper-red{--accent:var(--poppy);--accent-text:var(--poppy-text)}
.tone-white{--bg:#fff}
.tone-wash{background:var(--paper) url(img/aroub-wash-tricolour.webp) no-repeat right calc(100% + 80px)/min(110%,900px) auto;padding-bottom:200px}
.tone-paper-stroke{background:var(--paper) url(img/aroub-stroke-blue-wide.webp) no-repeat left bottom/120% auto;padding-bottom:150px}
.tone-paper-splat{background:var(--paper) url(img/aroub-splatter.webp) no-repeat right -10% top/60% auto}
.tone-ink-yellow::before{content:"";position:absolute;inset-inline-end:-70px;top:56px;width:220px;height:220px;background:var(--marigold);border-radius:50%;opacity:.95}
.tone-ink-yellow .next,.tone-ink-yellow .lbl{color:#fff}
.tone-ink-yellow .wrap{z-index:1}

.lbl{font:600 15px/1.3 var(--ui);color:var(--accent-text);letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px}
html[lang="ar"] .lbl{font-size:16px;letter-spacing:0;text-transform:none}
h1,h2{font:800 46px/1.02 var(--headline);margin:0 0 22px;max-width:16ch;letter-spacing:-.015em;color:var(--hl)}
html[lang="ar"] h1,html[lang="ar"] h2{font-size:44px;line-height:1.25;letter-spacing:0;max-width:none;font-weight:800}
h2 .num{display:block;font:italic 700 96px/.9 var(--display);letter-spacing:-.03em;margin:0 0 6px;color:var(--accent)}
html[lang="ar"] h2 .num{font-style:normal;font-size:84px;line-height:1}
.tone-paper h2 .num,.tone-white h2 .num,.tone-paper-red h2 .num,.tone-wash h2 .num,.tone-paper-stroke h2 .num,.tone-paper-splat h2 .num{color:var(--ink)}
.tone-marigold h2 .num{color:var(--ink)}
.tone-cobalt h2 .num{color:var(--marigold)}
h2 .rest{display:block}
.line h2{font-size:44px;max-width:20ch}
.sub{font:italic 400 26px/1.3 var(--display);margin:-8px 0 22px;color:var(--hl)}
html[lang="ar"] .sub{font-family:var(--story);font-style:normal}
html[lang="ar"] .sub{font-style:normal;font-size:24px;line-height:1.6}
.body,.intro{font-size:19px;line-height:1.62;margin:0 0 18px;max-width:56ch}
.wrap>.body:first-of-type{font-size:21px;line-height:1.5}
.intro{font:italic 400 23px/1.4 var(--display);color:var(--hl)}
html[lang="ar"] .intro{font-family:var(--story);font-style:normal}
html[lang="ar"] .body,html[lang="ar"] .intro{font-size:19px;line-height:1.75;max-width:none}
.intro{font-family:var(--ui);font-weight:500}
.turn{font:italic 800 30px/1.15 var(--display);margin:28px 0 18px;max-width:22ch;color:var(--hl)}
html[lang="ar"] .turn{font-family:var(--headline);font-style:normal;font-size:28px}
html[lang="ar"] .turn{font-style:normal;font-size:26px;line-height:1.45;max-width:none}
.tone-paper .turn,.tone-paper-stroke .turn{color:var(--cobalt)}
.aside{font:500 18px/1.4 var(--ui);border-inline-start:4px solid var(--accent);padding-inline-start:14px;margin:18px 0}
.next{display:inline-block;font:600 17px/44px var(--ui);color:var(--accent-text);text-decoration:none;margin-top:16px;min-height:44px;letter-spacing:.06em}
html[lang="ar"] .next{font-size:18px;letter-spacing:0}
.tone-paper .next,.tone-white .next,.tone-wash .next,.tone-paper-stroke .next,.tone-paper-splat .next,.tone-paper-red .next{color:var(--cobalt)}
.inline{display:inline-block;font:600 17px/44px var(--ui);color:var(--accent-text);min-height:44px;margin-inline-end:20px}
html[lang="ar"] .inline{font-size:18px}
.fig{margin:0 0 22px}
.fig figcaption{font:500 15px/1.4 var(--ui);opacity:.75;margin-top:8px}
html[lang="ar"] .fig figcaption{font-size:16px}

/* hero: her face, the eye behind her, the years under her */
.hero{padding-top:8px;padding-bottom:24px}
.hero .wrap{position:relative}
.hero-figure{position:relative;margin:0 -20px 12px;overflow:hidden}
.hero-figure img{position:relative;z-index:1;width:90%;max-width:460px;margin:0 0 0 auto;display:block;filter:drop-shadow(0 18px 30px rgba(30,30,34,.18))}
html[dir="rtl"] .hero-figure img{margin:0 auto 0 0}
.hero-eye{position:absolute;inset-inline-end:-38%;top:-6%;width:130%;opacity:.95}
.hero-eye svg{width:100%;height:auto}
.hero-eye circle:nth-child(1){fill:var(--ink)}.hero-eye circle:nth-child(2){fill:var(--cobalt)}.hero-eye circle:nth-child(3){fill:var(--eye)}.hero-eye circle:nth-child(4){fill:var(--ink)}
.pre{font:700 32px/1.1 var(--story);margin:0 0 10px;max-width:14ch}
html[lang="ar"] .pre{font-size:32px;line-height:1.3;max-width:none}
.hero h1{font:800 48px/1.02 var(--headline);color:var(--cobalt);max-width:14ch;letter-spacing:-.02em;margin:0 0 16px}
html[lang="ar"] .hero h1{font-family:var(--headline);font-weight:800;font-size:44px;line-height:1.25;letter-spacing:0;max-width:none}
.hero .body{font:400 24px/1.35 var(--story);max-width:22ch}
html[lang="ar"] .hero .body{font-size:24px;line-height:1.6;max-width:none}
.route{font:600 18px/1.4 var(--ui);color:var(--cobalt);margin:0 0 18px}
html[lang="ar"] .route{font-size:18px}
.timeline{display:flex;justify-content:space-between;gap:6px;list-style:none;margin:8px 0 0;padding:14px 0 0;border-top:2px solid var(--cobalt);position:relative}
.timeline li{position:relative;flex:1;text-align:center}
.timeline li::before{content:"";position:absolute;top:-21px;left:50%;width:12px;height:12px;margin-left:-6px;border:2px solid var(--cobalt);border-radius:50%;background:var(--paper)}
.timeline a{font:600 17px/44px var(--ui);color:var(--ink);text-decoration:none;display:block}
html[lang="ar"] .timeline a{font-size:18px}
.timeline a:hover,.timeline a:focus-visible{color:var(--cobalt)}
.hero .next{display:none}
.hero-photo{margin-top:8px}

/* inverse and number scenes */
.nums{list-style:none;padding:0;margin:0 0 10px}
.nums li{border-top:1px solid rgba(255,255,255,.3);padding:14px 0 22px}
.nums b{display:block;font:italic 700 64px/1 var(--display);letter-spacing:-.02em}
html[lang="ar"] .nums b{font-style:normal;font-size:60px}
.nums li:nth-child(3n+1) b{color:var(--marigold)}.nums li:nth-child(3n+2) b{color:#fff}.nums li:nth-child(3n) b{color:var(--rose)}
.nums span{display:block;font:500 15px/1.4 var(--ui);color:#fff;margin-top:8px;letter-spacing:.06em;text-transform:uppercase}
html[lang="ar"] .nums span{font-size:16px;letter-spacing:0;text-transform:none}
.two{margin:0 0 18px}
.two span{display:block;font:800 46px/1.05 var(--display)}
.two span+span{color:var(--accent);margin-top:10px;font-style:italic}
html[lang="ar"] .two span{line-height:1.3;font-style:normal}

/* the television: 1993 and 2026 in the same frame */
.tv{position:relative;margin:0 0 22px}
.tv-frame{background:var(--ink);padding:14px;border-radius:16px 16px 18px 18px/12px 12px 24px 24px;box-shadow:0 0 0 6px var(--accent)}
.tone-paper .tv-frame,.tone-paper-stroke .tv-frame{box-shadow:0 0 0 6px var(--cobalt)}
.tv-screen{position:relative;background:#111;border-radius:10px/8px;overflow:hidden;aspect-ratio:4/3}
.tv-screen img,.tv-screen video{width:100%;height:100%;object-fit:cover}
.tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.25) 100%)}
.tv figcaption{font:500 15px/1.4 var(--ui);opacity:.8;margin-top:10px}
html[lang="ar"] .tv figcaption{font-size:16px}
.tv.small{max-width:360px}
.film .tv-screen{aspect-ratio:16/9}
.play{position:absolute;inset-inline-start:12px;bottom:12px;z-index:2;font:600 17px var(--ui);height:44px;padding:0 16px;background:var(--marigold);color:var(--ink);border:0;border-radius:0}
html[lang="ar"] .play{font-size:18px}
.side-art{display:none}

/* document with three captions */
.doc{margin:0 0 22px;padding:12px;border:4px solid var(--poppy);background:#fff;max-width:420px;transform:rotate(-1.5deg)}
.doc img{width:100%;height:auto}
.caps{margin:0 0 20px}
.caps dt{font:600 15px/1.3 var(--ui);color:var(--poppy-text);letter-spacing:.08em;text-transform:uppercase;margin:16px 0 4px}
html[lang="ar"] .caps dt{font-size:16px;letter-spacing:0;text-transform:none}
.caps dd{margin:0;font-size:18px;line-height:1.5;max-width:58ch}
html[lang="ar"] .caps dd{font-size:19px;line-height:1.75}

/* quotes */
.quotes{margin:8px 0 22px}
.qlabel{font:600 15px/1.3 var(--ui);color:var(--cobalt);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
html[lang="ar"] .qlabel{font-size:16px;letter-spacing:0;text-transform:none}
blockquote{margin:0 0 16px;padding-inline-start:16px;border-inline-start:4px solid var(--marigold)}
blockquote p{margin:0;font:400 20px/1.7 "Amiri","Noto Naskh Arabic",serif}
blockquote .qt{font:italic 400 19px/1.45 var(--display);margin-top:8px;color:var(--cobalt)}

/* the record */
.secnav{display:flex;gap:18px;overflow-x:auto;padding:0 0 12px;margin:0 0 4px;white-space:nowrap;-webkit-overflow-scrolling:touch}
.secnav a{font:600 17px/44px var(--ui);color:var(--cobalt);text-decoration:none}
html[lang="ar"] .secnav a{font-size:18px}
.rec h3{font:800 26px/1.2 var(--display);color:var(--cobalt);margin:30px 0 10px;padding-top:14px;border-top:2px solid var(--ink)}
html[lang="ar"] .rec h3{font-family:var(--headline)}
html[lang="ar"] .rec h3{font-size:18px}
.rec dl{display:grid;grid-template-columns:64px 1fr;gap:10px 14px;margin:0}
.rec dt{font:italic 700 20px/1.3 var(--display);font-variant-numeric:tabular-nums;color:var(--poppy-text)}
html[lang="ar"] .rec dt{font-style:normal;font-family:var(--ui);font-weight:600;font-size:18px;line-height:1.7}
.rec dd{margin:0;font-size:17px;line-height:1.5}
html[lang="ar"] .rec dd{font-size:18px;line-height:1.7}

/* chain on marigold */
.chain{margin:0 0 18px;padding-inline-start:30px;font:400 24px/1.35 var(--story)}
.chain li{margin:0 0 12px;font:800 24px/1.25 var(--display)}
html[lang="ar"] .chain li{font-family:var(--headline);font-weight:700}
.chain li::marker{font:italic 700 24px var(--display)}
html[lang="ar"] .chain{font-size:26px;line-height:1.6}

/* shop: white, the drawings large */
.cards{list-style:none;padding:0;margin:0 0 6px}
.card{padding:22px 0 26px;border-top:1px solid var(--rule)}
.card img{width:100%;max-width:560px;background:#fff}
.cmeta{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin-top:14px;align-items:baseline}
.ctitle{font:800 24px/1.2 var(--display);color:var(--cobalt)}
html[lang="ar"] .ctitle{font-family:var(--headline)}
.ctitle-alt{font:400 18px/1.3 var(--story);color:var(--cobalt);grid-column:1}
html[lang="ar"] .ctitle-alt{font-family:var(--ui);font-size:17px}
.cline{grid-column:1;font:italic 400 18px/1.5 var(--story)}
html[lang="ar"] .cline{font-style:normal;font-size:18px}
.cbuy{grid-column:1}
.cprice{grid-column:2;grid-row:1/5;font:600 17px/1.3 var(--ui);color:var(--ink);background:var(--marigold);padding:6px 10px;white-space:nowrap;align-self:start}
html[lang="ar"] .cprice{font-size:18px}
.setline{display:flex;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);padding:16px 0;margin:0 0 6px;font:800 22px/1.4 var(--display);color:var(--cobalt)}
html[lang="ar"] .setline{font-family:var(--headline)}
.setline .cprice{grid-column:auto;grid-row:auto}
.terms{font:400 17px/1.5 var(--story);opacity:.85;margin:0 0 18px;max-width:58ch}
html[lang="ar"] .terms{font-size:18px;line-height:1.7}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:600 17px var(--ui);background:var(--ink);color:var(--paper);border:0;border-radius:0;text-decoration:none;cursor:pointer;letter-spacing:.04em}
html[lang="ar"] .btn{font-size:18px;letter-spacing:0}
.tone-cobalt-ask .btn{background:var(--marigold);color:var(--ink)}
.back{margin:24px 0 0;max-width:220px}
.back img{border:1px solid var(--rule);background:#fff}

/* the question: cobalt field, white type, marigold action */
.tone-cobalt-ask h2{font-size:48px;max-width:14ch}
html[lang="ar"] .tone-cobalt-ask h2{font-size:44px}
.askwrap{margin:0 0 28px}
textarea,input[type=email]{width:100%;font:400 18px/1.45 var(--story);padding:14px;border:0;background:#fff;color:var(--ink);border-radius:0;margin:0 0 10px}
html[lang="ar"] textarea,html[lang="ar"] input[type=email]{font-size:19px;line-height:1.7}
textarea{resize:vertical;min-height:130px}
.help{font:500 15px/1.45 var(--ui);opacity:.9;margin:0 0 14px}
html[lang="ar"] .help{font-size:16px}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.tool{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;font:500 17px var(--ui);background:transparent;color:inherit;border:2px solid currentColor;border-radius:0;cursor:pointer;flex:1 1 160px}
html[lang="ar"] .tool{font-size:18px}
.tool.file input{position:absolute;width:1px;height:1px;opacity:0}
.tool.file{position:relative}
.tool.file:focus-within{outline:3px solid var(--eye);outline-offset:3px}
.tool.rec.on{background:#fff;color:var(--cobalt)}
.msg{font:500 17px/1.4 var(--ui);min-height:24px;margin:10px 0 0}
html[lang="ar"] .msg{font-size:18px}
.received,.thanks{font:700 26px/1.25 var(--story);margin:0 0 12px}
html[lang="ar"] .received,html[lang="ar"] .thanks{line-height:1.5}
.cbuy{display:inline-block;margin-top:6px;font:600 14px/1.3 var(--ui);color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
html[lang="ar"] .cbuy{font-size:15px}
.example{margin:28px 0 8px}.example img{width:100%;height:auto;display:block;background:#fff;padding:12px;box-sizing:border-box}.example figcaption{font:500 15px/1.4 var(--ui);margin-top:8px;opacity:.9}
html[lang="ar"] .example figcaption{font-size:16px}
.voice{margin:6px 0 26px}.voice audio{display:block;width:100%;max-width:420px;height:44px}.voice figcaption{font:500 14px/1.4 var(--ui);opacity:.75;margin-top:8px}
html[lang="ar"] .voice figcaption{font-size:15px}
.through{margin:8px 0 28px}
.through .tl{margin:0 0 22px;display:flex;flex-wrap:wrap;gap:4px 14px}
.through .tl1 span{font:600 22px/1.25 var(--ui);letter-spacing:.06em;color:#fff}
.through .tl2 span{font:600 22px/1.25 var(--ui);letter-spacing:.06em;color:var(--marigold)}
.through .tl3{display:block}
.through .tl3 span:first-child{display:block;font:italic 700 88px/.9 var(--display);color:var(--marigold);letter-spacing:-.03em}
.through .tl3 span:last-child{display:block;font:italic 400 30px/1.2 var(--story);color:#fff;margin-top:10px}
html[lang="ar"] .through .tl1 span,html[lang="ar"] .through .tl2 span{letter-spacing:0;font-size:23px}
html[lang="ar"] .through .tl3 span:first-child{font-style:normal;font-size:76px}
html[lang="ar"] .through .tl3 span:last-child{font-style:normal}
@media (min-width:900px){.through .tl1 span,.through .tl2 span{font-size:30px}.through .tl3 span:first-child{font-size:180px}.through .tl3 span:last-child{font-size:40px}}
.portrait{margin:26px 0 0;max-width:100%}
.portrait img{border:4px solid var(--marigold)}
.comms{margin:0 0 14px;padding:0}
.comms div{border-top:1px solid rgba(255,255,255,.35);padding:14px 0}
.comms dt{font:800 26px/1.2 var(--display);margin:0 0 6px;color:var(--marigold)}
html[lang="ar"] .comms dt{font-family:var(--headline)}
.comms dd{margin:0;font-size:17px;line-height:1.5}
html[lang="ar"] .comms dd{font-size:18px;line-height:1.7}
.comms dd.cprice{grid-column:auto;grid-row:auto;margin-top:6px;white-space:normal;display:inline-block}
.mailto{font:400 15px/1.45 var(--ui);opacity:.9;margin:0 0 6px}
html[lang="ar"] .mailto{font-size:16px}
.mailto .inline{font-size:17px;line-height:44px;margin-inline-end:8px;color:#fff;text-decoration:underline}
html[lang="ar"] .mailto .inline{font-size:18px}

/* colophon */
.colophon{border-top:2px solid var(--ink);padding:48px 0 64px;font:400 17px/1.55 var(--story);background:var(--paper)}
html[lang="ar"] .colophon{font-size:18px;line-height:1.7}
.colophon p{margin:0 0 12px;max-width:60ch}
.cname{display:flex;align-items:center;gap:16px}
.credit{margin-top:32px!important}.credit a{display:block;text-decoration:none;color:var(--ink)}.credit img{display:block;width:min(300px,100%);height:auto;margin:0 0 10px}.credit span{font:600 15px/1.4 var(--ui);color:var(--cobalt);letter-spacing:.02em}
html[lang="ar"] .credit a{font-size:18px}

/* 404 */
.p404 .fig{max-width:360px}
.p404 .links a{margin-inline-end:16px;font:600 17px/44px var(--ui);color:var(--cobalt)}

/* reveal: one curve; off under reduced motion */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
[data-reveal].in,.no-js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.top{position:static}}

/* desktop */
@media (min-width:900px){
  .top{padding:0 32px;min-height:64px}
  .brand-alt{display:inline}
  .mainnav{display:flex}
  .lang select{display:none}
  .langbtns{display:flex}
  .scene{padding:112px 0 80px}
  .wrap{padding:0 32px}
  h1,h2{font-size:76px}
  html[lang="ar"] h1,html[lang="ar"] h2{font-size:56px}
  h2 .num{font-size:180px;line-height:.85}
  html[lang="ar"] h2 .num{font-size:140px}
  .line h2{font-size:80px;max-width:16ch}
  html[lang="ar"] .line h2{font-size:64px}
  .hero{padding-top:24px}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:center}
  .hero-figure{grid-column:2;grid-row:1/6;margin:0 -32px 0 0;min-height:560px;display:flex;align-items:flex-end}
  html[dir="rtl"] .hero-figure{margin:0 0 0 -32px}
  .hero-figure img{width:100%;max-width:520px;margin:0 auto}
  .hero-eye{inset-inline-end:-55%;top:-10%;width:150%}
  .hero .pre,.hero h2,.hero .body,.hero .route{grid-column:1}
  .hero .pre{font-size:44px}
  .hero .body{font-size:30px}
  html[lang="ar"] .hero .body{font-size:28px}
  .route{font-size:20px}
  html[lang="ar"] .hero .pre{font-size:40px}
  .hero h2{font-size:72px;max-width:13ch}
  html[lang="ar"] .hero h2{font-size:60px}
  .timeline{grid-column:1/-1;margin-top:24px}
  .timeline a{font-size:17px}
  .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
  .nums b{font-size:110px}
  .two span{font-size:88px}
  .tv{max-width:680px}
  .tone-paper-splat .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
  .tone-paper-splat .lbl,.tone-paper-splat h2,.tone-paper-splat .body,.tone-paper-splat .next{grid-column:1}
  .tone-paper-splat .side-art{display:block;grid-column:2;grid-row:1/6;transform:rotate(3deg) translateX(8%)}
  .tone-paper-splat .tv{grid-column:1}
  .cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 40px}
  .card{border-top:0}
  .rec dl{grid-template-columns:96px 1fr}
  .askwrap{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
  .portrait{margin:0}
  .comms{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
  .tone-cobalt-ask h2{font-size:96px;max-width:12ch}
  html[lang="ar"] .tone-cobalt-ask h2{font-size:64px}
}


/* ===== V04 · designed with her media ===== */

/* 1 · the shop is the balcony: cards on a string with pegs */
.tone-white{--bg:var(--paper)}
.shop .wrap{max-width:none;padding:0}
.shop .lbl,.shop h2,.shop .intro,.shop .setline,.shop .terms,.shop .btn,.shop .back,.shop .next{margin-inline:20px}
.shop .setline{max-width:680px}
.cards{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:38px 24px 24px;margin:0 0 6px;list-style:none;position:relative;-webkit-overflow-scrolling:touch}
.cards::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--ink);opacity:.85}
.card{flex:0 0 270px;scroll-snap-align:center;position:relative;padding:0;border:0;background:#fff;box-shadow:0 12px 28px rgba(30,30,34,.14);transform-origin:50% -20px}
.card:nth-child(odd){transform:rotate(-2.2deg)}.card:nth-child(even){transform:rotate(1.8deg)}.card:nth-child(3n){transform:rotate(-1deg)}
.card::before{content:"";position:absolute;top:-30px;left:50%;width:14px;height:34px;margin-left:-7px;background:linear-gradient(#c9a26b,#a97e46);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);z-index:2}
.card img{width:100%;max-width:none;background:#fff}
.cmeta{margin:0;padding:12px 14px 14px;border-top:1px solid var(--rule)}
.cprice{background:var(--marigold)}
@media (min-width:900px){
  .cards{flex-wrap:wrap;overflow:visible;justify-content:center;gap:48px 40px;padding:44px 40px 24px;max-width:1180px;margin:0 auto 6px}
  .cards::before{top:22px}
  .cards::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 24px);height:2px;background:var(--ink);opacity:.85}
  .card{flex:0 0 300px}
}

/* 2 · the record is the stack of tapes */
.record{--fg:#fff;--bg:var(--deep);--accent:var(--marigold);--accent-text:var(--marigold);background:var(--deep)}
.record .intro{color:#fff;opacity:.9}
.record .secnav a{color:var(--marigold)}
.record .rec h3{color:var(--marigold);border-top:2px solid rgba(255,255,255,.35)}
.record .rec dl{display:block}
.record .rec dt{display:none}
.record .rec dd{position:relative;margin:0 0 8px;background:var(--ink);color:var(--paper);padding:14px 16px 14px 96px;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.35);font-size:17px;line-height:1.5}
html[lang="ar"] .record .rec dd{padding:14px 96px 14px 16px;font-size:18px}
.record .rec dd::before{content:attr(data-y);position:absolute;inset-inline-start:12px;top:12px;width:68px;background:#fff;color:var(--ink);font:600 16px/26px var(--ui);text-align:center;border-radius:1px}
.record .rec dd.green::before{background:var(--eye);color:var(--ink)}
.record .next{color:var(--marigold)}

/* 3 · the exhibition, huge, over Only You */
.tone-paper-splat{background:var(--paper) url(img/aroub-wash-tricolour-flip.webp) no-repeat right -30% bottom/95% auto}
.tone-paper-splat h2{font:600 52px/.98 var(--ui);text-transform:uppercase;letter-spacing:-.02em;color:var(--cobalt);max-width:9ch}
html[lang="ar"] .tone-paper-splat h2{font-family:var(--story);font-weight:700;font-size:44px;line-height:1.22;text-transform:none;letter-spacing:0;max-width:none}
.side-art{display:block;position:absolute;inset-inline-end:-18%;top:-4%;width:64%;opacity:.95;pointer-events:none}
.tone-paper-splat .wrap{padding-top:120px}
@media (min-width:900px){
  .tone-paper-splat h2{font-size:110px;max-width:9ch}
  html[lang="ar"] .tone-paper-splat h2{font-size:72px}
  .tone-paper-splat .wrap{display:block;padding-top:40px}
  .side-art{inset-inline-end:-6%;top:-8%;width:46%;transform:rotate(3deg)}
}

/* 4 · her strokes cut the scenes */
.tone-ink::before,.tone-cobalt::before,.tone-ink-nums::before{content:"";position:absolute;left:0;right:0;top:-2px;height:70px;background:url(img/aroub-stroke-blue-wide.webp) no-repeat center top/140% auto;opacity:.9;pointer-events:none}
.tone-ink,.tone-cobalt,.tone-ink-nums{padding-top:96px}
.tone-marigold::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-24px;height:60px;background:url(img/aroub-splatter.webp) no-repeat center/120% auto;opacity:.55;pointer-events:none}

/* 5 · the years are stickers */
h2 .num{display:inline-block;padding:6px 18px 2px;background:var(--marigold);color:var(--ink);transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--poppy);margin:0 0 18px}
.tone-ink h2 .num,.tone-ink-yellow h2 .num,.tone-cobalt h2 .num{background:var(--marigold);color:var(--ink);box-shadow:4px 4px 0 var(--poppy)}
.tone-marigold h2 .num{background:var(--poppy);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.tone-paper-red h2 .num{background:var(--poppy);color:#fff;box-shadow:4px 4px 0 var(--marigold)}
html[dir="rtl"] h2 .num{transform:rotate(2.5deg);box-shadow:-4px 4px 0 var(--poppy)}
.hero-figure::before{content:"";position:absolute;left:-10%;bottom:-8%;width:70%;height:40%;background:url(img/aroub-splatter.webp) no-repeat center/cover;opacity:.7;pointer-events:none}

/* V07 · her today on the timeline and by the lake */
.timeline li.today a{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.2;padding-top:0}
.today-face{width:56px;height:56px;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--cobalt);margin-top:-26px;object-fit:cover}
.timeline li.today::before{display:none}
.tone-paper.s16 .fig img{width:100%}
.fig.second{max-width:520px}
.portrait{max-width:100%}.portrait img{border:4px solid var(--eye)}
@media (min-width:900px){.today-face{width:72px;height:72px;margin-top:-34px}.fig.second{max-width:420px}}

/* V12 · the identity lockup: eye, stacked AROUB / SOUBH in Cabin SemiBold, عروب صبح beneath, as RC1 */
.langbtns a{font-family:"Cabin",var(--ui);letter-spacing:.04em}
.mainnav a{font-family:"Cabin",var(--ui);letter-spacing:.04em;text-transform:uppercase;font-size:15px;font-weight:600}
html[lang="ar"] .mainnav a{font-family:"Noto Sans Arabic",var(--ui);text-transform:none;letter-spacing:0;font-size:17px}
@media (min-width:900px){.mainnav a{font-size:17px}html[lang="ar"] .mainnav a{font-size:18px}}

/* V13 · press still, 2013 */
.press{margin:0 0 20px;max-width:300px;padding:8px;background:#fff;border:1px solid var(--rule);transform:rotate(1.5deg)}
.press img{width:100%;height:auto;image-rendering:auto}
.press figcaption{font:500 15px/1.4 var(--ui);color:var(--ink);margin-top:8px;opacity:.8}
html[lang="ar"] .press figcaption{font-size:16px}
.tone-cobalt .quotes blockquote{border-inline-start-color:var(--marigold)}
.tone-cobalt .quotes blockquote p,.tone-cobalt .quotes .qt,.tone-cobalt .qlabel{color:#fff}
@media (min-width:900px){.tone-cobalt .wrap{display:grid;grid-template-columns:1fr 320px;gap:0 48px}.tone-cobalt .lbl,.tone-cobalt h2,.tone-cobalt .body,.tone-cobalt .quotes,.tone-cobalt .aside,.tone-cobalt .next{grid-column:1}.tone-cobalt .press{grid-column:2;grid-row:2/6;align-self:start;margin-top:8px}}

/* V14 · a 16:9 archival frame inside the television keeps its full width */
.tv-screen img[height="471"]{object-fit:contain;background:#0d0d0d}

.tone-gold h2 .num,html[dir="rtl"] .tone-gold h2 .num{display:block;background:none;color:var(--marigold);box-shadow:none;transform:none;padding:0 0 .08em;margin:0 0 14px;line-height:1;-webkit-text-stroke:1.5px var(--ink);text-shadow:6px 6px 0 var(--poppy)}
.tone-gold h2 .rest{display:block;padding-top:6px}

/* one card after the hero: the balcony string, one peg, one card */
.tone-wash .onecard{position:relative;margin:26px -20px 22px;padding:42px 0 30px;overflow:hidden}
.tone-wash .onecard::before{content:"";position:absolute;inset:auto -10% 6% -10%;height:46%;background:url(img/aroub-stroke-blue-wide.webp) center/cover no-repeat;opacity:.9;transform:rotate(-3deg);z-index:0}
.onecard .line,.onecard .hang{z-index:1}
.onecard .line{position:absolute;left:-4%;right:-4%;top:26px;height:3px;background:var(--ink);opacity:.9;transform:rotate(-1.6deg)}
.onecard .hang{position:relative;width:min(86%,440px);margin:0 auto;background:#fff;padding:0;box-shadow:0 22px 44px rgba(30,30,34,.22),0 2px 0 rgba(255,255,255,.9) inset;transform:rotate(-2.6deg);transform-origin:50% -26px;animation:sway 6s ease-in-out infinite alternate}
.onecard .hang::before{content:"";position:absolute;top:-34px;left:50%;width:16px;height:40px;margin-left:-8px;background:linear-gradient(#c9a26b,#a97e46);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.25);z-index:2}
.onecard .hang img{display:block;width:100%;height:auto}
@keyframes sway{from{transform:rotate(-2.6deg)}to{transform:rotate(-1.2deg)}}
@media (prefers-reduced-motion:reduce){.onecard .hang{animation:none}}
.tone-wash h2{font-size:44px}
@media (min-width:900px){.onecard .hang{width:440px}.tone-wash .onecard{margin:20px 0 28px}.tone-wash h2{font-size:64px}}

.signed{position:relative}.sig{display:block;width:170px;height:auto;margin:0 0 10px}.tone-cobalt-ask .sig{filter:brightness(0) invert(1)}
.credit span{font:600 15px/1.4 var(--ui);color:var(--cobalt);letter-spacing:.02em;display:block;max-width:34ch}

@media (min-width:900px){.portrait{max-width:360px}}

/* ---------- the breath, deep: scroll-driven, off under reduced motion ---------- */
.scene{position:relative}
.scene>.wrap{position:relative;z-index:1}
/* progress: a hairline of cobalt across the top that fills as she is read */
.readline{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
html[dir="rtl"] .readline{transform-origin:100% 50%}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .readline{animation:readline linear both;animation-timeline:scroll(root)}
    @keyframes readline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    /* every scene: a deep inhale on entry (rises 70px from 92%, dark to light), a long hold, an exhale that lifts and dims */
    .scene:not(.hero){animation:breathe linear both;animation-timeline:view();animation-range:entry 0% exit 100%;transform-origin:50% 40%}
    @keyframes breathe{0%{opacity:.08;transform:translate3d(0,72px,0) scale(.92)}22%{opacity:1;transform:none}74%{opacity:1;transform:none}100%{opacity:.25;transform:translate3d(0,-54px,0) scale(.975)}}
    /* the colour fields breathe under the words: the scene background swells as it enters */
    .scene:not(.hero)::before,.scene:not(.hero)::after{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{translate:0 60px;rotate:-1.5deg}to{translate:0 -60px;rotate:1.5deg}}
    /* photographs: arrive 12% large, unmask from the bottom, settle, then keep rising slower than the page */
    .scene .fig img,.scene .press img,.scene .tv-frame,.scene .award,.scene .doc img,.scene .example img,.scene .portrait img,.scene .onecard,.scene .back img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% exit 100%;transform-origin:50% 60%}
    @keyframes settle{0%{transform:scale(1.12) translate3d(0,40px,0);clip-path:inset(12% 4% 0 4% round 2px)}28%{transform:none;clip-path:inset(0 0 0 0 round 0)}100%{transform:scale(1) translate3d(0,-36px,0);clip-path:inset(0 0 0 0 round 0)}}
    .scene .fig{overflow:visible}
    /* the big lines rise a beat after their scene, and the year swings in from small */
    .scene h2,.scene .two,.scene .chain{animation:rise linear both;animation-timeline:view();animation-range:entry 10% entry 62%}
    @keyframes rise{from{opacity:0;transform:translate3d(0,44px,0);letter-spacing:.02em}to{opacity:1;transform:none;letter-spacing:0}}
    .scene h2 .num{animation:numin linear both;animation-timeline:view();animation-range:entry 0% entry 72%;transform-origin:0 100%}
    html[dir="rtl"] .scene h2 .num{transform-origin:100% 100%}
    @keyframes numin{from{transform:scale(.72) rotate(-7deg);opacity:0}60%{opacity:1}to{transform:scale(1) rotate(-2.5deg);opacity:1}}
    html[dir="rtl"] .scene h2 .num{animation-name:numinrtl}
    @keyframes numinrtl{from{transform:scale(.72) rotate(7deg);opacity:0}60%{opacity:1}to{transform:scale(1) rotate(2.5deg);opacity:1}}
    .tone-gold h2 .num{animation-name:numgold}
    @keyframes numgold{from{transform:scale(.7) translate3d(-40px,0,0);opacity:0}to{transform:none;opacity:1}}
    /* the through-line: six words, two lines, one word, each on its own beat */
    .through .tl1{animation:soft linear both;animation-timeline:view();animation-range:entry 10% entry 45%}
    .through .tl2{animation:soft linear both;animation-timeline:view();animation-range:entry 30% entry 65%}
    .through .tl3{animation:people linear both;animation-timeline:view();animation-range:entry 45% entry 90%}
    @keyframes people{from{opacity:0;transform:translate3d(0,40px,0) scale(.86)}to{opacity:1;transform:none}}
    /* the numbers scene: each number slides in from alternate sides */
    .nums li{animation:slidein linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .nums li:nth-child(even){animation-name:slideinr}
    @keyframes slidein{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
    @keyframes slideinr{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
    /* quotes, body copy, cards, record: later still */
    .scene .quotes,.scene .body,.scene .rec,.scene .comms,.scene .intro,.scene .aside,.scene .turn{animation:soft linear both;animation-timeline:view();animation-range:entry 22% entry 78%}
    .scene .cards .card{animation:pegin linear both;animation-timeline:view();animation-range:entry 0% entry 60%;transform-origin:50% -20px}
    @keyframes pegin{from{opacity:0;transform:rotate(-10deg) translate3d(0,30px,0)}to{opacity:1;transform:rotate(-2.2deg)}}
    @keyframes soft{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
    /* the one card on the string swings in from the peg */
    .onecard .hang{animation:swingin linear both, sway 6s ease-in-out infinite alternate;animation-timeline:view(), auto;animation-range:entry 0% entry 70%, normal}
    @keyframes swingin{from{transform:rotate(-16deg) translate3d(0,-20px,0);opacity:0}to{transform:rotate(-2.6deg);opacity:1}}
    /* the hero: she stays a beat longer than the page as you leave; the eye opens and turns */
    .hero .hero-eye{animation:eyeaway linear both;animation-timeline:view();animation-range:exit 0% exit 100%;transform-origin:50% 50%}
    @keyframes eyeaway{from{transform:none;opacity:1}to{transform:scale(1.4) rotate(14deg);opacity:.4}}
    .hero .hero-figure img{animation:herodrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes herodrift{from{transform:none}to{transform:translate3d(0,110px,0) scale(1.06)}}
    .hero .pre,.hero h1,.hero .body,.hero .route,.hero .timeline{animation:heroout linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
    @keyframes heroout{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-40px,0)}}
    /* the header thins as the page begins to move */
    .top{animation:topthin linear both;animation-timeline:scroll(root);animation-range:0 220px}
    @keyframes topthin{from{padding-block:14px}to{padding-block:6px;box-shadow:0 1px 0 rgba(30,30,34,.08),0 10px 30px rgba(30,30,34,.06)}}
    [data-reveal]{transition:none}
    .next{animation:nextbob 3.2s ease-in-out infinite}
    @keyframes nextbob{0%,100%{translate:0 0}50%{translate:0 5px}}
  }
}
/* the first breath: on load, before any scroll, she arrives; the scroll exit rides on the same elements */
@media (prefers-reduced-motion: no-preference){
  @keyframes herein{from{transform:translate3d(0,60px,0) scale(1.04)}to{transform:none}}
  @keyframes eyeopen{from{transform:scale(.55) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes lineup{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
  .hero .hero-figure img{animation:herein 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
  .hero .hero-eye{animation:eyeopen 1.8s cubic-bezier(.2,.7,.2,1) both}
  .hero .pre{animation:lineup .9s cubic-bezier(.2,.7,.2,1) .7s both}
  .hero h1{animation:lineup 1s cubic-bezier(.2,.7,.2,1) .9s both}
  .hero .body{animation:lineup 1s cubic-bezier(.2,.7,.2,1) 1.15s both}
  .hero .route,.hero .timeline{animation:lineup 1s cubic-bezier(.2,.7,.2,1) 1.35s both}
  @supports (animation-timeline: view()){
    .hero .hero-figure img{animation:herein 1.4s cubic-bezier(.2,.7,.2,1) .1s both, herodrift linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 100%}
    .hero .hero-eye{animation:eyeopen 1.8s cubic-bezier(.2,.7,.2,1) both, eyeaway linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 100%}
    .hero .pre{animation:lineup .9s cubic-bezier(.2,.7,.2,1) .7s both, heroout linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 80%}
    .hero h1{animation:lineup 1s cubic-bezier(.2,.7,.2,1) .9s both, heroout linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 80%}
    .hero .body{animation:lineup 1s cubic-bezier(.2,.7,.2,1) 1.15s both, heroout linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 80%}
    .hero .route,.hero .timeline{animation:lineup 1s cubic-bezier(.2,.7,.2,1) 1.35s both, heroout linear both;animation-timeline:auto, view();animation-range:normal, exit 0% exit 80%}
  }
}
.inline.mcd{display:inline-flex;align-items:center;gap:12px;text-decoration:none}.inline.mcd img{width:44px;height:44px;flex:0 0 44px;border-radius:2px}.inline.mcd span{text-decoration:underline;text-underline-offset:3px}

.award-stamp{position:absolute;inset-inline-end:3%;top:-4%;width:42%;height:auto;transform:rotate(-9deg);mix-blend-mode:multiply;opacity:.92;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
html[dir="rtl"] .award-stamp{transform:rotate(9deg)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.award-stamp{animation:stampin linear both;animation-timeline:view();animation-range:entry 40% entry 90%}@keyframes stampin{from{transform:rotate(-9deg) scale(1.6);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.92}}html[dir="rtl"] .award-stamp{animation-name:stampinrtl}@keyframes stampinrtl{from{transform:rotate(9deg) scale(1.6);opacity:0}to{transform:rotate(9deg) scale(1);opacity:.92}}}}

/* headline colour by scene: one colour per scene, never ink on paper */
.tone-paper,.tone-white,.tone-wash,.tone-paper-stroke,.tone-paper-splat{--hl:var(--cobalt)}
.tone-paper-red{--hl:var(--poppy)}
.tone-marigold{--hl:var(--deep)}
.tone-gold{--hl:var(--ink)}
.tone-ink,.tone-ink-yellow,.tone-ink-nums,.tone-ink-red{--hl:var(--marigold)}
.tone-cobalt,.tone-cobalt-ask{--hl:#fff}
.tone-cobalt h2 .rest,.tone-cobalt-ask h2 .rest,.tone-ink h2 .rest,.tone-ink-yellow h2 .rest{color:var(--hl)}
.tone-paper h2 .rest,.tone-wash h2 .rest,.tone-white h2 .rest,.tone-paper-stroke h2 .rest,.tone-paper-splat h2 .rest{color:var(--hl)}
.tone-marigold h2 .rest{color:var(--deep)}
.tone-paper-red h2 .rest{color:var(--poppy)}
.line h2{color:var(--cobalt)}
.tone-ink-yellow h2,.tone-ink h2{color:var(--marigold)}
.tone-gold h2{color:var(--ink)}
/* the header carries the formal bilingual identity: the eye beside the name */
.brand .eye{width:36px;height:36px;flex:0 0 36px}

.qlabel,.lbl{font-weight:700}
.hero .route{font:800 20px/1.3 var(--display);color:var(--cobalt)}
html[lang="ar"] .hero .route{font-family:var(--headline)}
.next{font-family:var(--display);font-weight:800;font-style:italic;letter-spacing:0;text-transform:none;font-size:20px}
html[lang="ar"] .next{font-family:var(--headline);font-style:normal}
.timeline a{font-family:var(--display);font-weight:800}
html[lang="ar"] .timeline a{font-family:var(--headline)}