/* The Most Beautiful Names (/names/): one name per screen over the quiet room, and a zoomed-out view
   of all 99. Builds on site.css (the lights, the room layers and focus mode). */
@font-face { font-family: "Amiri"; src: url("/assets/fonts/amiri-names.woff2?v=5ffb73659e") format("woff2"); font-display: swap; }

/* ---------- Colours for each light ----------
   The name rests in a soft solid tone (never see-through: Arabic letters overlap where they join) and
   is lit in gold; the veil keeps the text readable over the room. */
:root {
  /* The names are set in the Mushaf's own typeface, like the verses beneath them. Amiri, a book naskh, sets the
     hadith, ﷺ and the numbers (the Mushaf face draws its numerals inside an ayah ornament). */
  --names-ar: var(--arabic); --naskh: "Amiri", var(--arabic);
  --nm-base: #d9dfe5; --nm-veil: rgba(250, 246, 238, .7); --nm-top: rgba(244, 239, 230, .7);
  --nm-dim: #b9b1a2; --nm-lit: #b07a1c; --nm-glow: rgba(255, 212, 120, .7);
  --nm-gold: #86621f; --nm-line: rgba(134, 98, 31, .3);
  --nm-ov: rgba(247, 243, 235, .96); --nm-ov-solid: #f7f3eb; --nm-cell: rgba(255, 253, 248, .6); --nm-cell-line: rgba(134, 98, 31, .22);
}
:root[data-scene="dawn"] {
  --nm-base: #aeb2d3; --nm-veil: rgba(247, 244, 251, .66); --nm-top: rgba(240, 238, 247, .66);
  --nm-dim: #aaa4b6; --nm-lit: #9c6a17; --nm-gold: #6e4f19; --nm-line: rgba(110, 79, 25, .3);
  --nm-ov: rgba(244, 241, 249, .96); --nm-ov-solid: #f4f1f9;
}
:root[data-scene="sunset"] {
  --nm-base: #8f6a70; --nm-veil: rgba(255, 243, 236, .62); --nm-top: rgba(255, 240, 232, .6);
  --nm-dim: #b89c94; --nm-lit: #9e5f14; --nm-glow: rgba(255, 190, 110, .7); --nm-gold: #7c4a12; --nm-line: rgba(124, 74, 18, .3);
  --nm-ov: rgba(250, 241, 236, .96); --nm-ov-solid: #faf1ec;
}
:root[data-scene="night"] {
  --nm-base: #0b1230; --nm-veil: rgba(6, 10, 30, .6); --nm-top: rgba(6, 10, 30, .6);
  --nm-dim: #4f5669; --nm-lit: #ffd77a; --nm-glow: rgba(255, 196, 90, .8); --nm-gold: #ecc46a; --nm-line: rgba(236, 196, 106, .28);
  --nm-ov: rgba(9, 13, 34, .96); --nm-ov-solid: #0a0e23; --nm-cell: rgba(255, 255, 255, .045); --nm-cell-line: rgba(236, 196, 106, .2);
}
/* The name in the colour chosen in the Aa panel: ivory with a soft shadow on the pale lights, ink with a
   gold aura (gold, the default, is above). */
:root[data-ink="ivory"] { --nm-name: #fffbf2; --nm-name-glow: rgba(70, 52, 28, .55); }
:root[data-ink="ivory"][data-scene="night"] { --nm-name: #fbf6ea; --nm-name-glow: rgba(255, 246, 225, .5); }
:root[data-ink="ink"] { --nm-name: #2b2018; --nm-name-glow: rgba(255, 206, 120, .75); }
:root[data-ink="ink"][data-scene="dawn"] { --nm-name: #2a2133; }
:root[data-ink="ink"][data-scene="sunset"] { --nm-name: #2f151a; --nm-name-glow: rgba(255, 196, 120, .8); }
:root[data-ink="ink"][data-scene="night"] { --nm-name: #2a3152; --nm-name-glow: rgba(240, 200, 112, 1); }
/* at night the ink name takes a fine gold rim, like gilded edges, and a soft lamp-glow */
:root[data-ink="ink"][data-scene="night"] .nm__ar::after { text-shadow: 1px 0 0 var(--nm-name-glow), -1px 0 0 var(--nm-name-glow), 0 1px 0 var(--nm-name-glow), 0 -1px 0 var(--nm-name-glow), 0 0 .3em rgba(255, 205, 120, .55); }
/* Over the dimmed room the header and the page read in the page's own ink. */
:root[data-scene="sunset"].is-focus .names .masthead { color: var(--ink); }
:root[data-scene="sunset"].is-focus .names .nav a { text-shadow: 0 0 14px rgba(255, 250, 238, .9); }
:root[data-scene="sunset"].is-focus .names .masthead .wordmark { filter: drop-shadow(0 0 5px rgba(255, 250, 238, .9)); }

/* ---------- Page and room ---------- */
/* Each name is a page the scroll settles on. On phones and short screens a page can be taller than
   the screen, so there the scroll only settles when it comes close to a name. */
html.names-page { scroll-snap-type: y mandatory; }
@media (max-height: 699px), (max-width: 700px) { html.names-page { scroll-snap-type: y proximity; } }
body.names { background: var(--nm-base); color: var(--ink); }
.names .room__bg { position: fixed; z-index: -1; }
.names .room__sky, .names .room__plate { transform: none; inset: 0; }
.names .room__veil { background: radial-gradient(ellipse 62% 70% at 50% 52%, var(--nm-veil) 30%, transparent 78%); }
.names .masthead { position: fixed; z-index: 25; }
.names .masthead::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--nm-top), transparent); }

/* ---------- One name per screen ---------- */
.nm { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always;
  padding: clamp(60px, 8vh, 92px) clamp(16px, 6vw, 72px) clamp(76px, 9.6vh, 108px); }
.nm:focus { outline: none; }
.nm__inner { width: min(100%, 47rem); text-align: center; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; }

.nm__num { position: relative; width: clamp(38px, 5.2vh, 46px); height: clamp(38px, 5.2vh, 46px); display: grid; place-items: center; margin: 0 auto .2rem; color: var(--nm-gold); }
.nm__star, .nm__star svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* out of the flow, so the number centres in the star */
.nm__num-ar { position: relative; font-family: var(--naskh); font-size: 1.05rem; line-height: 1; color: var(--ink); }

/* The names are fully vowelled: the highest marks stand about a quarter of an em above the line and a kasra
   a third of an em below it, so the padding holds them clear of the number and the transliteration. */
.nm__ar { --above: .32em; --below: .38em; position: relative; margin: 0; padding: var(--above) 0 var(--below);
  font-family: var(--names-ar); font-weight: 400; font-size: clamp(3.35rem, min(9.6vw, 11.9vh), 7.8rem); line-height: 1.1; color: var(--nm-dim); }
.nm__ar--long { font-size: clamp(2.6rem, min(6.7vw, 8.5vh), 5.6rem); }
/* The lit name: a gold copy revealed from the right, the way Arabic is read. The mask that drives the
   sweep would cut the glow off at the edges of its box, so the box reaches well above and below the
   line, and once the name is lit (.is-done, from names.js) the mask is gone altogether. */
.nm__ar::after { content: attr(data-t); position: absolute; inset: -.5em 0; padding: calc(var(--above) + .5em) 0 calc(var(--below) + .5em); pointer-events: none;
  color: var(--nm-name, var(--nm-lit)); text-shadow: 0 0 .04em var(--nm-name-glow, var(--nm-glow)), 0 0 .3em var(--nm-name-glow, var(--nm-glow)); }
.js .nm:not(.is-done) .nm__ar::after {
  -webkit-mask-image: linear-gradient(to left, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(to left, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 25% 0; mask-position: 25% 0; }
.js .nm.is-lit:not(.is-done) .nm__ar::after { animation: nm-sweep 2s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes nm-sweep { from { -webkit-mask-position: 25% 0; mask-position: 25% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }

.nm__tl { margin: 0; font-size: .9rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.nm__en { margin: .2rem 0 0; font-style: italic; font-size: clamp(1.4rem, min(2.7vw, 4vh), 2.15rem); line-height: 1.15; }

.nm__rule { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); margin: clamp(.6rem, 1.8vh, 1.2rem) auto; color: var(--nm-gold); }
.nm__rule span { flex: 1; height: 1px; background: var(--nm-line); }
.nm__rule svg { width: 20px; height: 20px; flex: none; }
.nm__meaning { max-width: 36em; margin: 0 auto; font-size: clamp(.98rem, min(1.4vw, 2.15vh), 1.18rem); line-height: 1.62; text-wrap: pretty; }
.nm__sunnah { max-width: 34em; margin: clamp(.5rem, 1.3vh, .8rem) auto 0; font-style: italic; font-size: clamp(.95rem, min(1.25vw, 2vh), 1.08rem); line-height: 1.5; }
.nm__sunnah .nm__by { display: block; margin-top: .15rem; font-style: normal; font-size: .78rem; letter-spacing: .12em; color: var(--ink-soft); }

/* the verse (or hadith) */
.nm__src { margin: clamp(.8rem, 2.1vh, 1.5rem) auto 0; max-width: 38em; padding-top: clamp(.6rem, 1.6vh, 1rem); border-top: 1px solid var(--nm-line); }
.nm__src--frame { border-top: 0; padding-top: 0; }
.nm__label { margin: 0; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--nm-gold); }
.nm__ayah { margin: .25rem 0 0; font-family: var(--arabic); font-size: clamp(1.2rem, min(2.1vw, 3.05vh), 1.72rem); line-height: 1.85; color: var(--ink); }
.nm__hadith { margin: .3rem 0 0; font-family: var(--naskh); font-size: clamp(1.25rem, min(2.2vw, 3.15vh), 1.78rem); line-height: 1.75; color: var(--ink); }
.nm mark { background: none; color: var(--nm-gold); }
:root[data-scene="night"] .nm mark { text-shadow: 0 0 .35em rgba(255, 196, 90, .45); }
.nm__ayah-en { margin: .2rem auto 0; max-width: 36em; font-style: italic; font-size: clamp(.92rem, min(1.15vw, 1.85vh), 1.05rem); line-height: 1.45; color: var(--ink-soft); }
.nm__ayah-en em { font-style: normal; color: var(--nm-gold); }
.nm .add { opacity: .72; }
.nm__ref { display: inline-block; margin-top: .3rem; font-size: .8rem; letter-spacing: .14em; color: var(--nm-gold); text-decoration: none; border-bottom: 1px solid transparent; }
.nm__ref:hover { border-color: currentColor; }
.nm__ref::after { content: " ›"; }
.nm__cite { margin: .35rem 0 0; font-size: .78rem; letter-spacing: .1em; color: var(--ink-soft); }
.nm__pair { margin: clamp(.4rem, 1.2vh, .8rem) 0 0; font-size: .9rem; color: var(--ink-soft); }
.nm__pair a { color: var(--nm-gold); text-decoration: none; border-bottom: 1px solid var(--nm-line); }
.nm__note { max-width: 32em; margin: .7rem auto 0; font-size: .82rem; font-style: italic; color: var(--ink-soft); }
.saw { margin: 0 .08em; font-family: var(--naskh); font-style: normal; }
.nb { white-space: nowrap; } /* a transliterated name never breaks at its hyphen */

/* the meaning and verse settle in after the name lights */
.nm__reveal { transition: opacity 1s ease .7s, transform 1s ease .7s; }
.nm__reveal--late { transition-delay: 1.05s; }
.js .nm:not(.is-lit) .nm__reveal { opacity: 0; transform: translateY(10px); }

/* ---------- Opening and closing ---------- */
.nm__eyebrow { margin: 0; font-size: .8rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--nm-gold); }
.nm__title-ar { margin: 0; font-family: var(--arabic); font-size: clamp(2.8rem, min(8vw, 11.5vh), 6.2rem); line-height: 1.5; color: var(--nm-lit);
  text-shadow: 0 0 .04em var(--nm-glow), 0 0 .3em var(--nm-glow); }
.nm__title { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(2rem, min(4.4vw, 6.4vh), 3.3rem); line-height: 1.1; }
.nm__hadith-en { max-width: 33em; margin: clamp(.7rem, 1.8vh, 1.1rem) auto 0; font-style: italic; font-size: clamp(.98rem, 1.3vw, 1.1rem); line-height: 1.6; }
.nm__hadith-en .nm__by { display: block; margin-top: .2rem; font-style: normal; font-size: .76rem; letter-spacing: .14em; color: var(--ink-soft); }
.nm__begin { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; margin: clamp(1rem, 2.4vh, 1.5rem) 0 0; }
.nm__btn { font: inherit; font-size: 1rem; padding: .55rem 1.4rem; border-radius: 999px; border: 1px solid var(--nm-gold); color: var(--ink); text-decoration: none;
  background: transparent; cursor: pointer; transition: background .25s; }
.nm__btn:hover { background: color-mix(in srgb, var(--nm-gold) 14%, transparent); }
.nm__btn--quiet { border-color: var(--nm-line); }
.nm__hint { display: flex; flex-direction: column; align-items: center; margin: clamp(.9rem, 2.4vh, 1.6rem) 0 0; font-style: italic; font-size: .9rem; color: var(--ink-soft); }
.nm__hint svg { width: 20px; height: 20px; margin-top: .2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.6s ease-in-out infinite; }
.nm--outro .nm__eyebrow { font-size: .8rem; }
.nm__about { max-width: 42em; margin: clamp(1.2rem, 3vh, 2rem) auto 0; padding-top: 1.1rem; border-top: 1px solid var(--nm-line); text-align: left; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.nm__about h3 { margin: 0 0 .5rem; font-weight: 400; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--nm-gold); text-align: center; }
.nm__about p { margin: 0 0 .7rem; }
.nm__about a { color: var(--nm-gold); }

/* ---------- The pill: previous, where you are, all 99, next ---------- */
.nm-pill { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%);
  display: flex; align-items: center; padding: 5px; border-radius: 999px; color: var(--glass-ink);
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(40, 30, 10, .14); }
.nm-pill button { display: grid; place-items: center; height: 38px; color: inherit; border-radius: 999px; }
.nm-pill__step { width: 40px; }
.nm-pill__step:disabled { opacity: .3; cursor: default; }
.nm-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nm-pill__count { min-width: 6.2em; padding: 0 .4rem; text-align: center; font-size: .95rem; letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }
.nm-pill__all { display: flex !important; gap: .45rem; padding: 0 .9rem 0 .7rem; border-left: 1px solid var(--glass-line) !important; border-right: 1px solid var(--glass-line) !important; border-radius: 0 !important; font-size: .95rem; }
.nm-pill__all svg { fill: currentColor; stroke: none; width: 15px; height: 15px; opacity: .85; }
.is-menu .nm-pill { display: none; }

/* ---------- All 99 at a glance ---------- */
.is-overview { overflow: hidden; }
.nm-ov { --ov-max: 1360px; --ov-gap: 8px; position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: var(--nm-ov);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: scale(1.06);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s; }
.is-overview .nm-ov { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.is-overview.is-leaving .nm-ov { opacity: 0; transform: scale(1.3); }
.is-overview .nm.is-current .nm__inner { transform: scale(.86); opacity: 0; }
.nm.is-arriving .nm__inner { animation: nm-arrive .75s cubic-bezier(.2, .7, .2, 1); }
@keyframes nm-arrive { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* The header spans the whole width (a narrower band would show its edges over the backdrop) and lines up with the grid. */
.nm-ov__head { position: sticky; top: 0; z-index: 1; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(12px, 2vh, 22px) calc(max(0px, (100% - var(--ov-max)) / 2) + clamp(16px, 4vw, 40px)) 12px;
  background: linear-gradient(var(--nm-ov) 75%, transparent); }
.nm-ov { --ctl: 44px; }
.nm-ov__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.nm-ov__titles { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 1rem; min-width: 0; text-align: right; }
.nm-ov__title { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; }
.nm-ov__ar { margin: 0; font-family: var(--arabic); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--nm-gold); }
.nm-ov__close { width: var(--ctl); height: var(--ctl); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--nm-cell-line); color: inherit; flex: none; }
.nm-ov__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Finding a name: a round button beside the close button that opens into a pill to type in. */
.nm-find { --w: var(--ctl); flex: none; display: flex; align-items: center; width: var(--w); height: var(--ctl); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--nm-cell-line); transition: width .45s cubic-bezier(.2, .7, .2, 1), border-color .25s, background-color .25s; }
.nm-find__btn { flex: none; width: calc(var(--ctl) - 2px); height: calc(var(--ctl) - 2px); display: grid; place-items: center; border-radius: 50%; color: inherit; }
.nm-find__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nm-find__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 1rem; color: inherit;
  -webkit-appearance: none; appearance: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
.nm-find__input:focus, .nm-find__input:focus-visible { outline: none; }
.nm-find__input::placeholder { color: var(--ink-soft); opacity: .7; font-style: italic; }
.nm-find__input::-webkit-search-cancel-button, .nm-find__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.nm-find__count { flex: none; padding: 0 16px 0 8px; font-size: .82rem; font-style: italic; color: var(--nm-gold); white-space: nowrap; }
.nm-find__count:empty { display: none; }
.is-searching .nm-find { --w: min(360px, calc(100vw - 2 * clamp(16px, 4vw, 40px) - var(--ctl) - 8px)); background: var(--nm-cell); }
.is-searching .nm-find__input { opacity: 1; visibility: visible; transition: opacity .25s ease .15s, visibility 0s; }
.nm-find:focus-within { border-color: var(--nm-gold); }
/* the tiles that match stay bright, gold-edged, their numbers filled in gold; the rest step back */
.nm-ov.is-filtering .g:not(.is-match) { opacity: .2; }
.nm-ov.is-filtering .g:not(.is-match):hover, .nm-ov.is-filtering .g:not(.is-match):focus-visible { opacity: .6; } /* still there to choose */
.nm-ov.is-filtering .g.is-match { border-color: var(--nm-gold); box-shadow: 0 0 0 1px var(--nm-gold), 0 0 20px var(--nm-glow); }
.nm-ov.is-filtering .g.is-match .g__ar { color: var(--nm-lit); }
.nm-ov.is-filtering .g.is-match .g__n { background: var(--nm-gold); border-color: var(--nm-gold); color: var(--nm-ov-solid); }

/* All 99 tiles: number, name and transliteration (the meanings stay on the name's own page). */
/* The names run right to left, as Arabic is read: the first at the top right. */
.nm-grid { --row-gap: 13px; direction: rtl; flex: 1 1 0; width: 100%; max-width: var(--ov-max); list-style: none; margin: 0 auto; padding: 12px clamp(16px, 4vw, 40px) 14px;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: minmax(72px, auto); gap: var(--row-gap) var(--ov-gap); }
.g { position: relative; direction: ltr; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
  padding: var(--g-top, 16px) 3px 4px; border-radius: 10px; border: 1px solid var(--nm-cell-line); background: var(--nm-cell); color: var(--ink); text-decoration: none; text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .25s, opacity .25s; }
.g:hover, .g:focus-visible { border-color: var(--nm-gold); transform: translateY(-2px); }
/* The number rides on the tile's top edge, like the medallion over each name, clear of the vowel marks. */
.g__n { position: absolute; top: 0; left: 50%; transform: translate(-50%, -62%); min-width: 2.3em; padding: 0 .45em; border-radius: 999px;
  border: 1px solid var(--nm-cell-line); background: var(--nm-ov-solid); font-size: .62rem; line-height: 1.4; letter-spacing: .04em;
  color: var(--nm-gold); font-variant-numeric: lining-nums tabular-nums; transition: border-color .2s; }
.g:hover .g__n, .g:focus-visible .g__n, .g.is-current .g__n { border-color: var(--nm-gold); }
.g__ar { font-family: var(--names-ar); font-size: 1.55rem; line-height: 1.35; white-space: nowrap; color: var(--ink); }
/* the two names of more than one word are sized to the tile's width */
.g--long .g__ar { font-size: 1.1rem; font-size: min(1.4rem, 24cqi); }
.g--xlong .g__ar { font-size: .9rem; font-size: min(1.15rem, 15.5cqi); line-height: 1.3; }
.g__tl { margin-top: 2px; font-size: .7rem; line-height: 1.22; letter-spacing: .03em; color: var(--ink-soft); text-wrap: balance; }
.g--xlong .g__tl { font-size: min(.66rem, 1.3vh); line-height: 1.08; }
.g.is-current { border-color: var(--nm-gold); box-shadow: 0 0 0 1px var(--nm-gold), 0 0 22px var(--nm-glow); }
.g.is-current .g__ar { color: var(--nm-lit); }

/* Wide screens see all 99 at once: eleven across, nine down, sized to the screen. */
@media (min-width: 1000px) and (min-aspect-ratio: 4/5) {
  .nm-ov__head { padding-top: clamp(10px, 1.8vh, 22px); padding-bottom: 10px; }
  .nm-ov { --ctl: 40px; }
  /* the grid takes the height left under the header (never less than nine rows of 58px), and the rows share it */
  .nm-grid { --row-gap: 13px; min-height: calc(9 * 58px + 8 * var(--row-gap) + 28px); padding-top: 12px; padding-bottom: 16px;
    grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(58px, 116px)); grid-auto-rows: auto; align-content: center; }
  .g { --g-top: clamp(13px, 1.9vh, 20px); padding-bottom: 2px; }
  .g__ar { font-size: clamp(1.2rem, 2.9vh, 1.9rem); }
  .g__tl { font-size: clamp(.62rem, 1.3vh, .74rem); }
}

/* ---------- Phones and short screens ---------- */
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  .nm { padding: 76px 18px calc(80px + env(safe-area-inset-bottom)); } /* clear of the header (68px) */
  .nm__num { width: 36px; height: 36px; }
  .nm__num-ar { font-size: .9rem; }
  .nm__ar { font-size: clamp(2.9rem, min(16.8vw, 9.4vh), 6.7rem); }
  .nm__ar--long { font-size: clamp(2.25rem, min(10.7vw, 6.7vh), 4.5rem); }
  .nm__tl { font-size: .82rem; letter-spacing: .2em; }
  .nm__en { font-size: clamp(1.3rem, 5.6vw, 1.9rem); }
  .nm__meaning { font-size: 1rem; line-height: 1.56; }
  .nm__ayah { font-size: clamp(1.15rem, 5.2vw, 1.55rem); line-height: 1.75; }
  .nm__hadith { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
  .nm__ayah-en { font-size: .92rem; }
  .nm-pill__count { min-width: 5.4em; font-size: .9rem; }
  .nm-pill__all span { display: none; }
  .nm-pill__all { padding: 0 .85rem !important; }
}
@media (min-width: 701px) and (max-width: 1099px) {
  .g__tl { font-size: .64rem; letter-spacing: 0; }
}
@media (max-width: 760px) {
  .is-searching .nm-ov__titles { display: none; }
}
@media (max-width: 700px) {
  .nm-ov__titles { flex-wrap: nowrap; gap: 0 .7rem; white-space: nowrap; }
  .nm-ov__title { font-size: 1.25rem; }
  .nm-ov__ar { font-size: 1.05rem; }
  .nm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(74px, auto); column-gap: 6px; padding-inline: 12px; }
  .g__ar { font-size: 1.4rem; }
  .g__tl { font-size: .64rem; letter-spacing: 0; }
}

/* Short landscape screens (most laptops): everything a little closer, so even the longest page fits. */
@media (max-height: 800px) and (min-aspect-ratio: 4/5) and (min-width: 701px) {
  .nm { padding-top: 56px; padding-bottom: 72px; }
  .nm__num { width: 34px; height: 34px; }
  .nm__num-ar { font-size: .9rem; }
  .nm__ar { font-size: clamp(3.1rem, min(9.6vw, 11vh), 7.8rem); }
  .nm__ar--long { font-size: clamp(2.45rem, min(6.7vw, 7.8vh), 5.6rem); }
  .nm__rule { margin: .55rem auto; }
  .nm__src { margin-top: .75rem; padding-top: .55rem; }
  .nm__sunnah { margin-top: .4rem; }
  .nm__sunnah .nm__by { margin-top: 0; }
  .nm__pair { margin-top: .35rem; }
}

/* Without motion the name and its meaning fade in place: no sweep, no rise. */
@media (prefers-reduced-motion: reduce) {
  .js .nm:not(.is-done) .nm__ar::after, .js .nm.is-lit:not(.is-done) .nm__ar::after { -webkit-mask-image: none; mask-image: none; animation: none; }
  .js .nm .nm__ar::after { transition: opacity .8s ease; }
  .js .nm:not(.is-lit) .nm__ar::after { opacity: 0; }
  .nm__reveal, .nm__reveal--late { transition: opacity .8s ease .3s; }
  .js .nm:not(.is-lit) .nm__reveal { transform: none; }
  .nm-ov, .is-overview .nm-ov, .nm__inner { transition: opacity .2s ease, visibility 0s; transform: none !important; }
  .nm-find { transition: none; }
  .nm.is-arriving .nm__inner { animation: none; }
  .nm__hint svg { animation: none; }
}