/* ═══════════════════════════════════════════════════════════════════════════
   «إعلان» — the announcement slide in the entrance hall's carousel.

   Its own sheet, loaded after home.css and before motion.css, so the slide's look
   lives with the slide and not scattered through the hall's 1,000 lines. Every size,
   duration and curve is the site's own token: motion.css re-points --m-* and the
   reduced-motion rule there collapses everything here too.

   TOLD APART AT A GLANCE, and by more than a colour:
     · the «إعلان» cartouche is FILLED gold — content slides have a hairline eyebrow;
     · the text stands in a frame of four gilded corners — content slides are unframed;
     · the picture takes the EMBLEM'S LANE under an arch while the crest steps aside;
     · the band itself warms a little while a notice is up.

   THE ENTRANCE, and then stillness. The arch rises into view, one narrow passage of
   warm light crosses it, and the cartouche, the headline, the message and the button
   arrive in that order — just under a second in all. Nothing loops, nothing glows
   behind the words, and the text never sits over the picture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the lane ─────────────────────────────────────────────────────────────
   The viewport keeps a lane at its inline end for the emblem (home.css: the
   padding-inline-end of .hero-updates__viewport, in two tiers). The plate goes into
   that lane, so it needs the lane's width. MIRRORED FROM home.css — if the lane
   changes there, change it here. */
.hero-updates__viewport{--notice-lane:0px}
@media (min-width:961px){
  .hero-updates__viewport{--notice-lane:clamp(270px,26vw,390px)}
}
@media (max-width:960px){
  .hero-updates__viewport{--notice-lane:calc(min(33vw,170px) + 14px)}
}

/* ── the slide ────────────────────────────────────────────────────────────
   Stretched to the viewport's height rather than centred on its own, so the plate —
   which is measured from the slide — has the full height of the band to stand in. */
.notice{align-self:stretch;display:flex;align-items:center}

.notice__body{position:relative;max-width:580px;padding:20px 24px 22px}

/* The frame: four gilded corners, not a box. A full border would read as a card laid
   on the band; four corners read as a notice pinned to it. */
.notice__frame i{position:absolute;width:18px;height:18px;border:1px solid var(--acc);opacity:.85}
.notice__frame i:nth-child(1){inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0}
.notice__frame i:nth-child(2){inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0}
.notice__frame i:nth-child(3){inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0}
.notice__frame i:nth-child(4){inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0}

/* The cartouche. Letter-spacing only in English: spacing Arabic pulls the joined
   letters apart, which is breaking the script, not styling it. */
.hero-update.notice p.notice__mark{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  padding:6px 13px 6px 12px;border-radius:2px;
  background:linear-gradient(135deg,var(--gold-champagne),var(--gold) 55%,var(--gold-antique));
  color:#17120a;font-family:var(--font-ui);font-size:12.5px;font-weight:600;line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px rgba(0,0,0,.28)}
html[lang="en"] .hero-update.notice p.notice__mark{letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.notice__seal{width:7px;height:7px;background:#17120a;transform:rotate(45deg);flex:none}

.notice .notice__title{margin:0 0 10px;max-width:560px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.8rem,2.4vw,2.7rem);line-height:1.6;color:var(--txt);text-wrap:balance}
/* 1.6 is for Amiri's marks and tails; English sets Cormorant and keeps its 1.26 */
:where(html[data-lang="en"]) .notice .notice__title{line-height:1.26}
.notice--long .notice__title{font-size:clamp(1.5rem,1.95vw,2.2rem)}

.notice p.notice__text{margin:0;max-width:510px;color:var(--txt2);font-size:15px;line-height:1.85;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.notice__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}

/* The way onward. Gold, as the hall's own buttons are — but with its arrow set in a
   chip of its own, so it reads as the one thing to do next rather than as one more
   «افتح». Hover moves the arrow along the reading direction; nothing else moves. */
.notice__cta{position:relative;z-index:3;display:inline-flex;align-items:center;gap:12px;
  min-height:46px;padding-block:8px;padding-inline:20px 8px;border-radius:3px;
  background:var(--gold-brushed,linear-gradient(135deg,var(--gold-champagne),var(--gold)));
  color:var(--on-gold,#17120a);font-family:var(--font-ui);font-size:14px;font-weight:600;
  text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 26px rgba(0,0,0,.42);
  transition:filter var(--m-quick) var(--m-enter),transform var(--m-instant) var(--m-exit)}
.notice__arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(23,18,10,.9);color:var(--gold-champagne);font-size:15px;font-weight:400;
  transition:transform var(--m-quick) var(--m-enter)}
.notice__cta:hover{filter:brightness(1.06)}
.notice__cta:hover .notice__arrow{transform:translateX(-4px)}
html[dir="ltr"] .notice__cta:hover .notice__arrow{transform:translateX(4px)}
.notice__cta:active{transform:scale(.98)}
.notice__cta:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:3px}

.notice__until{display:inline-flex;align-items:center;gap:7px;color:var(--mut);
  font-family:var(--font-ui);font-size:12.5px}
.notice__until svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* ── the plate ────────────────────────────────────────────────────────────
   Positioned out of the slide's own box and into the lane. (.hero-update is
   transformed, which makes it the containing block — hence the negative inset.) */
.notice__plate{position:absolute;inset-block:0;inset-inline-end:calc(-1 * var(--notice-lane));
  width:var(--notice-lane);margin:0;display:grid;place-items:center;pointer-events:none}

/* THE POSTER, WHOLE. It used to stand in an arch that cropped it to a window
   (object-fit:cover under a rounded top) — and a notice's poster keeps its day, its
   hour and its link exactly in the corners and the foot that the crop removed. It is
   now shown entire, in a gilded frame with only the gentlest rounding, at 3:4 (what
   the curator is asked for), as tall as the band and the lane allow.

   And it is a BUTTON (notice-viewer.js): pressing it opens the notice full-screen.
   The plate around it stays inert, so a swipe across the band still turns slides. */
.notice__arch{position:relative;display:block;pointer-events:auto;cursor:zoom-in;text-decoration:none;
  height:min(100% - 30px, 480px, (var(--notice-lane) - 18px) * 4 / 3);aspect-ratio:3/4;
  padding:0;margin:0 0 14px;font:inherit;color:inherit;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--gold-champagne) 70%,transparent);
  box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 6px color-mix(in srgb,var(--gold) 10%,transparent);
  background:#0c1d17;transition:transform var(--m-quick) var(--m-enter),box-shadow var(--m-quick) var(--m-enter)}
/* The picture's own box carries the clip, so the chip below can sit half outside it. */
.notice__poster{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.notice__poster::after{content:"";position:absolute;inset:6px;border-radius:6px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold-champagne) 30%,transparent)}
.notice__arch picture{display:block;width:100%;height:100%}
.notice__arch img{display:block;width:100%;height:100%;object-fit:contain}
.notice__arch:hover{transform:translateY(-2px);
  box-shadow:0 26px 56px rgba(0,0,0,.5),0 0 0 6px color-mix(in srgb,var(--gold) 18%,transparent)}
.notice__arch:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:4px}

/* «اضغطْ للتكبير» — said on the poster itself, because a reader who cannot read the
   small print is exactly the reader who must learn that they can. */
.notice__zoom{position:absolute;z-index:2;inset-inline:0;inset-block-end:-14px;margin-inline:auto;
  width:max-content;max-width:calc(100% - 16px);display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;background:rgba(12,10,7,.82);color:var(--gold-champagne);
  border:1px solid color-mix(in srgb,var(--gold-champagne) 45%,transparent);
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.4)}
.notice__zoom svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ROOM FOR IT. With a poster anywhere in the slider the band stands taller on a wide
   screen, so the poster reaches a readable size (about 480px at 1440). Set for the
   whole slider rather than per slide, so the band never changes height as the slides
   turn and the page below never jumps. */
@media (min-width:961px){
  .hero-updates--plate .hero-updates__viewport{min-height:clamp(380px,34vw,480px)}
}

/* The passage of light: narrow, warm, once. */
.notice__light{position:absolute;inset:-10% -70%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,236,190,.55) 50%,transparent 58%)}

/* ── the band, while a notice is up ───────────────────────────────────────
   home.js marks the hall: .is-announcing whenever the showing slide is a notice, and
   .is-announcing-plate when that notice has a picture in the lane. The crest steps
   aside for the plate and returns when the carousel moves on; the band warms a
   little toward the lane. Both are transitions, so moving between a notice and an
   archive slide — either way — is one continuous change rather than a cut.

   .hero .centerpiece.reveal outranks motion.css's `.hero .reveal{transition:none}`
   on purpose: that rule is about the emblem's arrival, and this is its departure. */
.hero .centerpiece.reveal{transition:opacity var(--m-settle) var(--m-enter),visibility var(--m-settle)}
.hero.is-announcing-plate .centerpiece.reveal{opacity:0;visibility:hidden}

.hero .hero__weave::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(48% 70% at 22% 50%,rgba(227,201,138,.13),transparent 72%);
  transition:opacity var(--m-scene) var(--m-enter)}
html[dir="ltr"] .hero .hero__weave::after{
  background:radial-gradient(48% 70% at 78% 50%,rgba(227,201,138,.13),transparent 72%)}
.hero.is-announcing .hero__weave::after{opacity:1}

/* ── the entrance ─────────────────────────────────────────────────────────
   Keyed on .is-active, so it plays each time the notice becomes the showing slide —
   arriving on it, or moving to it by hand — and at no other time. */
.notice.is-active .notice__poster{animation:nPlate 760ms var(--m-light) both}
.notice.is-active .notice__light{animation:nLight 900ms var(--m-light) 360ms both}
.notice.is-active .notice__frame i{animation:nCorner 420ms var(--m-enter) 100ms both}
.notice.is-active .notice__mark{animation:nRise 420ms var(--m-enter) 260ms both}
.notice.is-active .notice__title{animation:nRise 420ms var(--m-enter) 340ms both}
.notice.is-active .notice__text{animation:nRise 420ms var(--m-enter) 420ms both}
.notice.is-active .notice__foot{animation:nRise 420ms var(--m-enter) 500ms both}
/* Without a plate the text leads at once: there is nothing for it to wait behind. */
.notice--bare.is-active .notice__mark{animation-delay:120ms}
.notice--bare.is-active .notice__title{animation-delay:200ms}
.notice--bare.is-active .notice__text{animation-delay:280ms}
.notice--bare.is-active .notice__foot{animation-delay:360ms}

@keyframes nPlate{
  from{clip-path:inset(100% 0 0 0);transform:scale(1.035)}
  to{clip-path:inset(0 0 0 0);transform:none}
}
@keyframes nLight{
  0%{opacity:0;transform:translateX(-55%)}
  25%{opacity:1}
  100%{opacity:0;transform:translateX(55%)}
}
html[dir="ltr"] .notice.is-active .notice__light{animation-name:nLightLtr}
@keyframes nLightLtr{
  0%{opacity:0;transform:translateX(55%)}
  25%{opacity:1}
  100%{opacity:0;transform:translateX(-55%)}
}
@keyframes nCorner{from{opacity:0;transform:scale(.4)}to{opacity:.85;transform:none}}
@keyframes nRise{from{opacity:0;transform:translateY(var(--m-lift,6px))}to{opacity:1;transform:none}}

/* ── narrower bands ───────────────────────────────────────────────────── */
@media (max-width:960px){
  .notice__body{padding:14px 16px 16px}
  .notice__frame i{width:14px;height:14px}
  .notice__arch{height:min(100% - 26px, 230px, (var(--notice-lane) - 6px) * 4 / 3);
    margin-bottom:12px;box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .notice__poster::after{inset:4px}
  .notice__zoom{font-size:11px;padding:5px 8px;gap:4px;inset-block-end:-12px}
  .notice__zoom svg{width:13px;height:13px}
}
/* The phone. The reading column beside the lane is about two hundred pixels, so the
   headline steps down, a long one steps down again, and nothing is allowed past five
   lines — the button must stay on the screen the reader is looking at. */
@media (max-width:767px){
  .hero-update.notice p.notice__mark{margin-bottom:10px;padding:5px 10px}
  /* Amiri (the display face since 2026-10-08) needs its ink inside a clamped box: 1.8
     and .15em on top, the measure of the slider's titles in home.css. */
  .notice .notice__title{font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1.8;padding-top:.15em;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  :where(html[data-lang="en"]) .notice .notice__title{line-height:1.3;padding-top:0}
  .notice--long .notice__title{font-size:clamp(1.08rem,4.7vw,1.42rem)}
  .notice p.notice__text{font-size:14px;line-height:1.7;-webkit-line-clamp:2}
  .notice__foot{margin-top:12px;gap:10px 14px}
  .notice__cta{min-height:44px;font-size:13.5px;padding-inline:14px 6px}
  .notice__arrow{width:28px;height:28px}
}

/* ── less motion ──────────────────────────────────────────────────────────
   motion.css already collapses every duration; the light is removed outright rather
   than flashed for a millisecond, and the plate and text are simply there. */
@media (prefers-reduced-motion:reduce){
  .notice__light{display:none}
  .notice.is-active .notice__poster,
  .notice.is-active .notice__frame i,
  .notice.is-active .notice__mark,
  .notice.is-active .notice__title,
  .notice.is-active .notice__text,
  .notice.is-active .notice__foot{animation:none}
}

/* ═══ the viewer ═════════════════════════════════════════════════════════════
   The notice at full size (notice-viewer.js). A native modal <dialog>, so it is above
   every layer of the page and Escape closes it. The poster leads and is as large as
   the screen allows; the words sit beside it on a wide screen and under it on a phone.
   One passage in, nothing that loops. */
/* The panel is always the archive's dark green, whatever the reader's world, so the
   viewer carries the dark world's accents: in the manuscript world the page's --acc is
   dark green, and a focus ring in it vanished against this panel. */
.nview{--acc:var(--gold);--acc-text:var(--gold-champagne);
  width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:0;background:transparent;color:var(--txt);overflow:visible}
.nview.nview--bare{width:min(640px,calc(100vw - 32px))}
/* Every part the script hides is hidden: the figure and the foot have display rules of
   their own, and an author rule outranks the browser's [hidden]. */
.nview [hidden]{display:none}
.nview::backdrop{background:rgba(4,10,8,.82);backdrop-filter:blur(3px)}
.nview[open]{animation:nvIn var(--m-settle) var(--m-enter) both}
@keyframes nvIn{from{opacity:0;transform:translateY(var(--m-lift,6px)) scale(.985)}to{opacity:1;transform:none}}

/* Side by side on a wide screen, the POSTER taking what the words leave: the words are
   capped, the picture is not. */
.nview__panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,min(32%,380px));
  gap:28px;align-items:center;max-height:calc(100dvh - 32px);padding:22px;border-radius:14px;
  overscroll-behavior:contain;
  background:linear-gradient(160deg,#0f2a20,#0a1d16);
  border:1px solid color-mix(in srgb,var(--gold-champagne) 55%,transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:auto}
.nview--bare .nview__panel{grid-template-columns:minmax(0,560px);justify-content:center;padding:34px 30px}

.nview__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.nview__fig img{display:block;max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;
  border-radius:8px;border:1px solid color-mix(in srgb,var(--gold-champagne) 40%,transparent);background:#0c1d17}
.nview__raw{color:var(--gold-champagne);font-family:var(--font-ui);font-size:13px;text-underline-offset:3px}
.nview__raw:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:3px}

.nview__text{min-width:0;color:#f4efe2;overflow-wrap:anywhere}
.nview__mark{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:2px;
  background:linear-gradient(135deg,var(--gold-champagne),var(--gold) 55%,var(--gold-antique));
  color:#17120a;font-family:var(--font-ui);font-size:12.5px;font-weight:600;line-height:1}
.nview__mark span{width:7px;height:7px;background:#17120a;transform:rotate(45deg)}
.nview__title{margin:0 0 10px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.5;color:#fff8ec}
.nview__body{margin:0;color:rgba(244,239,226,.86);font-size:15.5px;line-height:1.9}
.nview__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
.nview__foot .notice__until{color:rgba(244,239,226,.7)}

.nview__close{position:absolute;z-index:2;inset-block-start:10px;inset-inline-end:10px;width:40px;height:40px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  color:#f4efe2;background:rgba(12,10,7,.7);border:1px solid color-mix(in srgb,var(--gold-champagne) 45%,transparent)}
.nview__close:hover{background:rgba(12,10,7,.92)}
.nview__close:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:2px}

/* The phone — and a tablet held upright: one column, the poster first and as wide as
   the screen (two columns at 768–1100 upright left it a third of the width). The panel
   scrolls if the words do not fit under it, and the ✕, outside it, stays put; the top
   padding keeps the ✕ off the poster's corner. */
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .nview{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}
  .nview__panel{grid-template-columns:minmax(0,1fr);gap:16px;padding:58px 14px 18px;max-height:calc(100dvh - 20px)}
  .nview__fig img{max-height:none;width:100%}
  .nview__title{font-size:clamp(1.3rem,6vw,1.7rem)}
  .nview__body{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .nview[open]{animation:none}
}