/* Mug Coffee & Roastery — Arabic layer.
   Loaded AFTER styles.css. It changes nothing about the grammar: the six acts,
   the timeline, the one continuous Act 3 world and the single star exit are the
   English build's, untouched. This file does exactly two jobs.

   1. MIRROR THE READING, NOT THE ROOM. What the reader navigates by — the
      folio, the reading column and its scrims, the editorial sheet, the edge
      the paper is uncovered from, the arrows, the figure overlaps — is restated
      for right-to-left. What the CAMERA saw is not. The Act 3 plate and the
      three vessel renders are the same unmirrored files the English page loads,
      so the key light in them still comes from the upper left; the travelling
      highlight, the depth masses and the cast shadow that describe that light
      are therefore left exactly as English states them. Logical properties
      (grid order, text-align, justify-self, flex direction) already mirror
      themselves under dir="rtl" and are deliberately untouched: re-stating them
      would double-flip and undo the mirror.

   2. SET ARABIC. Arabic is cursive: letter-spacing severs the joins between
      letters, and text-transform:uppercase does nothing to Arabic while
      shouting at any Latin caught inside the same run. The English page leans
      on both for its eyebrows, folio, captions and meta. Every one of those
      beats is re-expressed here with weight, size and burgundy instead, and
      given the line-height that naskh needs to clear its own descenders. */

/* ── type ──────────────────────────────────────────────────────────────────
   Per-glyph fallback does the work: Latin resolves in Newsreader and Manrope
   exactly as on the English page, and only the Arabic falls through to Amiri
   and IBM Plex Sans Arabic. The wordmark, the years and the folio numerals are
   therefore the same letterforms in both languages. */
:root{
  --display:'Newsreader','Amiri',Georgia,'Times New Roman',serif;
  --ui:'Manrope','IBM Plex Sans Arabic','Helvetica Neue',Arial,sans-serif;
  --measure:52ch;
}

body{letter-spacing:normal;line-height:1.85}

/* the Latin wordmark keeps its own metrics; the Arabic display line does not */
h2{font-size:clamp(32px,4.4vw,76px);line-height:1.32;letter-spacing:normal}

/* Every tracked, uppercased micro-label on the page. Tracking is removed
   because it breaks the cursive join; the hierarchy is carried by weight and
   size instead, which is how the same beat is set in Arabic print. */
.eyebrow,.folio a,.title-meta,.cue,.band-label,.stages li,.counts dd,
.fig figcaption,.pair-side figcaption,.o-s,.branches b,.mast{
  letter-spacing:normal;text-transform:none}
/* Latin numerals are not cursive, so the folio, the ranked list and the roast
   stages keep the tracking that makes them read as figures rather than words */
.folio i,.orders i,.stages i{letter-spacing:.12em}

.eyebrow{font-size:13.5px;line-height:1.6}
.lede{font-size:clamp(16px,1.15vw,21px);line-height:1.9;max-width:42ch}
.act--place p,.act--pair p{line-height:1.9}
.act--roast p{line-height:1.85}
.silence p{line-height:1.5}
.cue{font-size:11px;line-height:1.4}

/* ── 01 title: a masthead, not a bilingual heading ─────────────────────────
   Two lines of equal weight in two scripts is exactly the corporate lockup this
   avoids. So the two are set as a masthead instead: MUG is the mark, once, in
   Newsreader and in its own direction; the Arabic descriptor sits beneath it at
   real display scale and is the larger mass on the page — fifteen characters of
   Amiri against three of Newsreader — so it, not the Latin, carries the hero.
   Both hang on the right margin, because that is where this column starts.
   No traced brand asset is touched anywhere in here: this is type. */
.act--title h1{text-align:right;max-width:none;margin-bottom:34px;
  letter-spacing:normal;line-height:1}
.hero-mark{display:block;font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:clamp(46px,7.8vw,136px);line-height:.94;
  letter-spacing:.075em;text-indent:.075em}
/* the descriptor holds one line at every width the site supports: at 320px it
   sets to ~213px inside a 272px measure, so it is never allowed to break into
   a two-word stack that would read as a strapline */
.hero-desc{display:block;font-family:'Amiri',Georgia,serif;font-weight:400;
  font-size:clamp(34px,5.5vw,96px);line-height:1.24;letter-spacing:normal;
  margin-top:.04em;text-wrap:balance}
/* Parked off the TOP, not off the right: left:-9999px is safe in a left-to-right
   page because it grows the page in the direction nothing scrolls, but its
   mirror grows the page to the right of the viewport and leans on overflow-x
   to hide it. Off the top is off-canvas in both directions. */
.skip{left:auto;right:12px;top:-9999px}
.skip:focus{left:auto;right:12px;top:12px}
.titlemark{right:auto;left:-19vw}
.cue{left:auto;right:var(--gut)}

/* ── folio: the printed margin moves to the right margin ──────────────── */
.folio{left:auto;right:clamp(14px,2.2vw,46px)}
.folio::before{left:auto;right:3px}
.folio a{padding-left:0;padding-right:16px;font-size:11.5px;line-height:1.5}
.folio a::before{left:auto;right:0;transform-origin:100% 50%}
.folio a.is-here{font-size:13px;letter-spacing:normal}
.folio a.is-here i{font-size:12.5px}
.folio a:hover span,.folio a.is-here span{max-width:230px}

/* ── 02 the place ─────────────────────────────────────────────────────── */
/* the reading scrim runs from the reading edge inward, so its angle mirrors */
.act--place::before{background:linear-gradient(264deg,rgba(226,217,199,.92) 0%,
  rgba(226,217,199,.62) 38%,rgba(226,217,199,.20) 66%,rgba(226,217,199,.42) 100%)}
/* the storefront inset overlaps the interior's lower RIGHT on this composition */
.fig--a{margin:0 -6% -20% 0;transform-origin:100% 100%}
.fig--b figcaption{text-align:left}
.fig figcaption,.pair-side figcaption{line-height:1.7}

/* ── 03 the stage ─────────────────────────────────────────────────────── */
/* the vessel crosses to the left field; the editorial sheet takes the right,
   which is where the reader's eye starts on this page */
.pin{--cupX:34.5vw}
.planeanchor{left:auto;right:4vw}
/* EDITORIAL: the sheet is uncovered from its own leading edge — the right one.
   Only the reveal mirrors. The sheet's own sheen does NOT: it is a sheet lying
   in a room lit from the upper left, so its highlight stays at 22% 12% exactly
   as English states it, and the base sheet's background is inherited untouched. */
.paper{clip-path:inset(0 0 0 100%)}
/* The vignette is the one optical override kept mirrored. It is a framing
   device, not illumination: its transparent centre sits over the subject, and
   the subject is the vessel, which this composition places on the left. */
.wvig{background:radial-gradient(120% 88% at 38% 44%,transparent 42%,rgba(0,0,0,.30))}
/* PHOTOGRAPHIC — deliberately NOT restated here:
     .wlight   the travelling highlight, anchored left:0, sweeping left to right
     .fg--l    near mass, lower left
     .fg--r    far mass, upper right
     .edge--l  the architectural upright at the left edge
   All four describe the light and geometry of a photograph that is not
   mirrored. They inherit the English values, and app.js no longer negates
   their motion. See AR_LOCALIZATION.md for the photometry that settled it. */
.said h2{font-size:clamp(28px,2.55vw,50px);line-height:1.3;min-height:1.45em;
  margin-top:14px}
.said .note{line-height:1.85;max-width:30ch}

/* ── 04 roasting ──────────────────────────────────────────────────────── */
.act--roast .scrim{background:linear-gradient(268deg,rgba(10,9,7,.93) 0%,
  rgba(10,9,7,.80) 42%,rgba(10,9,7,.34) 74%,rgba(10,9,7,.50) 100%)}
.band-label{line-height:1.5}
.stages li{line-height:1.6}
.counts dd{line-height:1.7}

/* ── 05 pairing ───────────────────────────────────────────────────────── */
.act--pair::before{background:radial-gradient(78% 62% at 32% 44%,rgba(255,243,222,.85),
  transparent 70%),linear-gradient(180deg,#F2EADB,#E8DDC8)}
.pair-text{padding-right:0;padding-left:clamp(0px,2vw,40px)}
/* justify-self already mirrors under dir=rtl; only the physical nudge flips */
.pair-side{transform:translate(-26%,0) translateY(var(--e5,14px))}

/* ── 06 colophon ──────────────────────────────────────────────────────── */
.act--colophon::before{background:radial-gradient(76% 70% at 78% 34%,rgba(160,32,56,.55),
  transparent 68%),linear-gradient(200deg,#6B1224,#3F0A16)}
.close-line{font-size:clamp(30px,4.6vw,80px);line-height:1.32;letter-spacing:normal}
.o-k{line-height:1.5;letter-spacing:normal}
.orders li:last-child .o-k{font-size:clamp(20px,1.9vw,32px)}
.branches b{line-height:1.5}
.mast{line-height:1.7}
/* the arrow points the way the reader is going */
.o-a{transform:scaleX(-1)}
.orders a:hover .o-a,.orders a:focus-visible .o-a{transform:scaleX(-1) translateX(8px)}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width:1024px) and (orientation:landscape){
  .pin{--cupX:34vw}
  .planeanchor{left:auto;right:4vw}
}
@media (max-width:1024px) and (orientation:portrait){
  /* Stacked: the vessel is centred, so --cupX carries no mirror here. It still
     has to be re-stated — this file loads after the base sheet, so the
     unconditional --cupX above would otherwise beat the base sheet's own
     media-query value and drag the phone vessel off its counter. */
  .pin{--cupX:50vw}
  .planeanchor{left:7vw;right:5vw}
  .pair-side{transform:translateY(var(--e5,14px))}
}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .pin{--cupX:50vw}
  /* the same 20px reserved lane, mirrored. The padding and the two font sizes
     have to be restated because this file's unconditional folio rules load
     after the base sheet and would otherwise beat its media-query values. */
  .folio{left:auto;right:0}
  .folio::before{left:auto;right:1px}
  .folio a{padding-left:0;padding-right:0}
  .folio i,.folio a.is-here i{font-size:11.5px}
  .planeanchor{left:7vw;right:5vw}
  /* stacked, not overlapped, exactly as on the English phone composition */
  .fig--a{margin:0}
  .titlemark{right:auto;left:-46vw}
  .pair-side{transform:translateX(-6%) translateY(var(--e5,14px))}
  .fig--b figcaption{text-align:right}
  .said h2{font-size:clamp(25px,6.6vw,33px);min-height:1.5em}
  .said .note{font-size:15px}
  .eyebrow{font-size:12.5px}
}

/* ── the reading column clears the folio's expanded label ─────────────── */
@media (min-width:1025px){
  .wrap{padding-left:var(--gut);padding-right:max(var(--gut),240px)}
  .silence{padding-left:var(--gut);padding-right:max(var(--gut),240px)}
  .cue{left:auto;right:max(var(--gut),240px)}
  .planeanchor{left:auto;right:7vw}
}