/* The offer bar (lib/offer.ts): a slim ink strip at the very top of the story home, the shop and every letter's page, edged like an airmail
   envelope. Linked by the story pages (/shop/offer.css) and imported by PageShell. Story tokens only (var(--…)), logical properties: RTL as is.
   Its height is --offer-h on :root while it shows (the inline script measures it before the first paint). */

.offer-slot { display: contents; }
.offer-bar {
  --offer-gold: #E2C27E;
  position: relative; z-index: 61; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 7px 56px 10px;                       /* the same room either side, so the line stays centred beside the × */
  background: var(--ink); color: var(--stock); text-align: center;
  overflow: hidden;
}
/* the airmail edge: the envelope's red and blue, laid on the ink */
.offer-bar::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--s2) 0 9px, var(--stock) 9px 13px, var(--s3) 13px 22px, var(--stock) 22px 26px); opacity: .92; }
.offer-line { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%;
  font: italic 400 16.5px/1.3 var(--serif); letter-spacing: .012em; color: var(--stock); }
.offer-text { color: inherit; text-decoration: none; text-wrap: balance; }
/* a linked line is ONE text: the words (.offer-words) wrap like the plain line, the arrow follows the last word and never wraps alone (no
   break between the words and the arrow: their common box is nowrap). The gold rule is an underline, so a link adds no height to the bar */
a.offer-text { display: block; min-width: 0; white-space: nowrap; border-radius: 2px; }
.offer-words { white-space: normal; text-decoration: underline 1px color-mix(in srgb, var(--offer-gold) 50%, transparent);
  text-underline-offset: .3em; text-decoration-skip-ink: auto; transition: text-decoration-color .2s var(--ease, ease); }
a.offer-text:hover .offer-words { text-decoration-color: var(--offer-gold); }
.offer-words .offer-num { padding-inline: 0; }   /* the rule runs straight under the figure, with no padded edge either side */
.offer-num { font: normal 500 .8em/1 var(--sans); letter-spacing: .08em; color: var(--offer-gold); padding-inline: .1em; }
.offer-mark { flex: none; width: 31px; height: 15px; fill: none; stroke: var(--offer-gold); stroke-width: 1.1; stroke-linecap: round; opacity: .9; }
[dir=rtl] .offer-mark, [dir=rtl] .offer-arr { scale: -1 1; }
.offer-arr { display: inline-block; vertical-align: -.16em; margin-inline-start: .4em; width: 15px; height: 15px; fill: none; stroke: var(--offer-gold); stroke-width: 1.4; }
.offer-x { position: absolute; top: calc(50% - 1.5px); inset-inline-end: max(6px, calc(var(--pad, 24px) - 14px)); translate: 0 -50%;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--stock); cursor: pointer; opacity: .8; transition: opacity .2s, background-color .2s; }
.offer-x:hover { opacity: 1; background: rgba(250, 246, 238, .1); }
.offer-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.offer-x:focus-visible, a.offer-text:focus-visible { outline: 2px solid var(--offer-gold); outline-offset: 2px; }
/* Arabic: Amiri and the system's own serif, never Aref Ruqaa as the stand-in (it often arrives first and is much narrower: it set the phone
   line on one line until Amiri came and put it back on two, a small layout shift on every Arabic page). The text boxes are named too: the
   story's `:lang(ar)` rule gives every element its sans, which would otherwise set the line in IBM Plex on the story home only */
html[lang=ar] .offer-line { font: 400 16px/1.55 'Amiri', serif; letter-spacing: 0; }
html[lang=ar] .offer-text, html[lang=ar] .offer-words { font-family: 'Amiri', serif; }
html[lang=ar] .offer-num { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
html[lang=ar] .offer-words { text-underline-offset: .42em; }
html[lang] .offer-bar.is-closing { transition: height .3s var(--ease, ease), padding .3s var(--ease, ease), min-height .3s var(--ease, ease), opacity .2s linear;
  min-height: 0; padding-block: 0; opacity: 0; }
@media (max-width: 600px) {
  /* two lines are always reserved on a phone: while the web fonts arrive, a narrower stand-in can set the line on one line for a moment,
     and the page under the bar must not jump up and back */
  .offer-bar { min-height: calc(2 * 15.5px * 1.25 + 16px); padding: 7px 46px 9px; }
  html[lang=ar] .offer-bar { min-height: calc(2 * 15px * 1.45 + 16px); }
  .offer-line { font-size: 15.5px; line-height: 1.25; }
  html[lang=ar] .offer-line { font-size: 15px; line-height: 1.45; }
  .offer-mark { display: none; }
  .offer-x { inset-inline-end: 4px; }
}
@media (prefers-reduced-motion: reduce) { html[lang] .offer-bar.is-closing, .offer-words, .offer-x { transition: none; } }
@media print { .offer-slot, .offer-bar { display: none !important; } }

/* the story: the fixed nav rides under the bar until it has scrolled away (the script keeps its top in step). On a laptop the hero fills
   the rest of the window, so the first screen is exactly one screen as before; on a phone (style.css, max-width 820px) the hero is as tall
   as its own content and is left alone, or its buttons and the stamp strip would be cut off */
#offerBar ~ .nav { top: var(--offer-h, 0px); }
@media (min-width: 821px) {
  #offerBar ~ #main > #top.hero { height: calc(100vh - var(--offer-h, 0px)); height: calc(100svh - var(--offer-h, 0px)); }
}