/* Alternate opening only. Original production palette and authentic star. */
.cream-hero{
  --cream:#E7DCC9;--cream-ink:#241A15;--cream-accent:#90192D;
  background:var(--cream);color:var(--cream-ink);isolation:isolate;
  min-height:var(--opening-height);padding:32px 0 36px;display:block;overflow:hidden;
}
.cream-hero::before,.cream-hero::after{content:none}
.cream-hero .wrap{
  width:min(calc(100% - 2 * var(--gut)),1280px);max-width:none;padding:0;
  min-height:calc(var(--opening-height) - 68px);
  display:grid;grid-template-rows:auto 1fr auto;position:relative;z-index:1;
}
/* Original white lettering and burgundy star, unchanged on the cream ground. */
.cream-top{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand chapters language";align-items:center;gap:28px;margin-bottom:0}
.cream-brand{grid-area:brand;position:relative;width:240px}
.cream-brand .lockup{display:block;width:100%;height:auto;margin:0}
.cream-top .chapter-nav{grid-area:chapters;justify-self:end}
.cream-header-language{grid-area:language;display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;color:var(--cream-ink);text-decoration:none;
  font:500 12px/1.5 var(--ui);white-space:nowrap;transform:none}
.cream-header-language[lang="ar"]{font-family:'Mug AR Label',var(--ui);font-size:15px}
.cream-header-language:hover{color:var(--cream-accent)}
.cream-kicker,.cream-drum{font:600 11px/1.5 var(--ui);
  letter-spacing:.18em;text-transform:uppercase}
.cream-kicker{color:var(--cream-accent);margin:0 0 24px}
.cream-hero .chapter-nav{position:static;opacity:1;pointer-events:auto;color:var(--cream-ink)}
.cream-hero .chapter-nav ol{gap:4px 28px}
.cream-hero .chapter-nav a{color:var(--cream-ink);white-space:nowrap}
.cream-hero .chapter-nav a:hover{color:var(--cream-accent)}
.cream-hero .chapter-nav a:focus-visible{color:var(--cream-ink);outline-color:var(--cream-accent)}
.cream-main{align-self:center;padding:56px 0 64px}
.cream-hero h1{color:var(--cream-ink);font-family:var(--display);font-weight:400;
  font-size:clamp(70px,9.4vw,140px);line-height:.96;letter-spacing:-.035em;
  max-width:none;margin:0 0 36px}
.cream-hero h1>span{display:block}
.cream-hero .lede{color:var(--cream-ink);opacity:1;
  font-size:clamp(16px,1.22vw,19px);line-height:1.85;max-width:49ch}
.cream-foot{display:flex;align-items:center;justify-content:space-between;
  gap:32px;padding-top:22px;border-top:1px solid rgba(102,44,58,.22)}
.cream-drum{font-size:11px;letter-spacing:.17em}
.cream-actions{display:flex;align-items:center;gap:40px}
.cream-order{display:inline-flex;align-items:center;gap:28px;min-height:48px;
  color:var(--cream-accent);font:600 13px/1.5 var(--ui);text-decoration:none;
  border-bottom:1px solid currentColor}
.cream-order svg{width:32px;height:12px;fill:none;stroke:currentColor;stroke-width:1;
  transition:transform .25s}
.cream-order:hover svg{transform:translateX(5px)}
.cream-hero a:focus-visible{outline:2px solid var(--cream-accent);outline-offset:6px}
.cream-mark{position:absolute;z-index:0;pointer-events:none;
  width:min(82vw,1160px);aspect-ratio:1;inset-inline-end:-14%;top:50%;
  transform:translateY(-50%)}
.cream-mark svg{display:block;width:100%;height:100%;overflow:visible}
.cream-mark path{fill:rgba(102,44,58,.052);stroke:rgba(102,44,58,.13);
  stroke-width:.7px;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1.5px 0 rgba(255,252,246,.58))}
@supports (animation-timeline:view()){
  .cream-hero{view-timeline-name:--cream-exit;view-timeline-axis:block}
  .cream-mark svg{animation:cream-drift linear both;
    animation-timeline:--cream-exit;animation-range:exit 0% exit 100%}
  @keyframes cream-drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(12%) rotate(3deg)}}
}
/* Arabic retains the production masthead, with an independent optical scale. */
html[lang="ar"] .cream-kicker,
html[lang="ar"] .cream-drum{font-family:'Mug AR Label',var(--ui);letter-spacing:normal;font-size:14px}
html[lang="ar"] .cream-hero h1{line-height:1.05;letter-spacing:normal}
html[lang="ar"] .cream-word{font-family:var(--display);font-size:clamp(100px,11.4vw,164px);
  line-height:.84;letter-spacing:-.025em;margin-bottom:20px}
html[lang="ar"] .cream-desc{font-size:clamp(42px,4.4vw,68px);line-height:1.35}
html[lang="ar"] .cream-hero .lede{font-size:clamp(16px,1.22vw,19px);line-height:1.95;max-width:53ch}
html[lang="ar"] .cream-order{font-family:'Mug AR Label',var(--ui);font-size:16px}
html[lang="ar"] .cream-order svg{transform:scaleX(-1)}
html[lang="ar"] .cream-order:hover svg{transform:scaleX(-1) translateX(5px)}
@media(max-width:1000px){
  .cream-top{grid-template-columns:1fr auto;grid-template-areas:"brand language" "chapters chapters";
    column-gap:24px;row-gap:16px}
  .cream-hero .chapter-nav{justify-self:stretch}
  .cream-hero .chapter-nav ol{justify-content:flex-start}
  .cream-mark{width:112vw;inset-inline-end:-35%;top:54%}
  .cream-hero h1{font-size:clamp(62px,9.4vw,94px)}
  .cream-main{padding:48px 0 56px}
  .cream-actions{gap:28px}
}
@media(max-width:720px){
  /* The opening fills the current viewport; natural flow handles short screens. */
  .cream-hero{padding:24px 0 32px;min-height:var(--opening-height)}
  .cream-hero .wrap{width:calc(100% - 48px);min-height:calc(var(--opening-height) - 56px);grid-template-rows:auto 1fr auto}
  .cream-top{row-gap:14px;column-gap:20px}
  .cream-brand{width:220px;max-width:100%}
  .cream-header-language{min-width:44px}
  .cream-hero .chapter-nav{width:100%}
  .cream-hero .chapter-nav ol{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px}
  .cream-hero .chapter-nav li:has(a[data-ch]){display:block}
  .cream-hero .chapter-nav a{min-height:44px;width:fit-content;font-size:12px;letter-spacing:0}
  .cream-kicker{font-size:10px;letter-spacing:.16em;margin-bottom:16px}
  .cream-main{padding:44px 0 28px}
  .cream-hero h1{font-size:clamp(45px,12.8vw,76px);line-height:1.02;letter-spacing:-.035em;margin-bottom:24px}
  .cream-hero .lede{font-size:15px;line-height:1.8;max-width:43ch}
  .cream-mark{width:165vw;inset-inline-end:-76%;top:43%}
  .cream-mark path{fill:rgba(102,44,58,.032);stroke:rgba(102,44,58,.06)}
  .cream-foot{display:flex;flex-direction:column-reverse;align-items:flex-start;
    gap:22px;padding:0;border:0}
  .cream-drum{font-size:10px;letter-spacing:.12em;color:var(--cream-accent)}
  .cream-actions{margin:0;gap:0}
  .cream-order{font-size:13px;gap:30px;min-height:44px}
  html[lang="ar"] .cream-hero .chapter-nav a{font-size:13px;line-height:1.65}
  html[lang="ar"] .cream-kicker{font-size:13px}
  html[lang="ar"] .cream-word{font-size:clamp(94px,28vw,138px);margin-bottom:16px}
  html[lang="ar"] .cream-desc{font-size:clamp(32px,8.7vw,48px);line-height:1.4}
  html[lang="ar"] .cream-hero .lede{font-size:15px;line-height:1.95}
  html[lang="ar"] .cream-drum{font-size:12px;line-height:1.7}
}
@media(max-width:359px){
  .cream-brand{width:192px}
  .cream-top{column-gap:12px}
  .cream-hero .chapter-nav ol{gap:8px}
  .cream-hero .chapter-nav a{font-size:11px}
  html[lang="ar"] .cream-hero .chapter-nav a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .cream-mark svg{animation:none;transform:none}
  .cream-order svg{transition:none}
}