/* Optical alignment: share the numeral baseline, not the font's line box centre. */
.usage-example{align-items:baseline;padding-top:20px}
.usage-example .dirham-glyph{font-size:1em}
.usage-size .usage-dont .dirham-glyph{font-size:1.5em}
.usage-clearspace .usage-dont .dirham-glyph{font-size:110px}
.get-font-preview{border:0}

/* Separate the heading from the objects while keeping them inside the pinned view. */
.rules-sticky{gap:0;padding-top:112px}
.rules .section-heading{flex-shrink:0;margin-bottom:clamp(88px,11svh,144px)}
.mock-card{width:min(600px,54svh)}
.rail-hint{margin-top:20px}

.tamer-experience{position:relative}
.brand-pause{position:absolute;right:0;top:18px;border:0;background:transparent;color:var(--ink-muted);padding:10px;font-size:12px;text-decoration:underline}
.brand-window{overflow:hidden;margin-top:32px}
.brand-track{display:flex;width:max-content;animation:brand-drift 32s linear infinite}
.tamer-experience .brand-set{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:0;margin:0;padding:0}
.brand-set li{display:flex;justify-content:center;align-items:center;flex:0 0 240px;width:240px;height:96px;padding:12px 30px}
.brand-set img{display:block;width:180px;height:64px;object-fit:contain;filter:brightness(0);opacity:.85}
.brand-set img[src$="emirates.svg"]{height:76px}
.brand-window:hover .brand-track,.tamer-experience[data-paused="true"] .brand-track{animation-play-state:paused}
@keyframes brand-drift{to{transform:translateX(-50%)}}

/* A compact ending, without a second pinned-scroll sequence. */
.download{position:relative;display:flex;align-items:center;overflow:hidden;min-height:100svh;padding:24px var(--gutter)}
.download-copy{position:relative;width:48%;max-width:680px;transform:translate3d(0,var(--finale-y,0px),0);z-index:2}
.download-copy:focus-within{transform:none}
.download h2{font-size:clamp(90px,10vw,140px)}

.download{perspective:1300px}
.download-logo-stage{
  position:absolute;
  inset:0;
  right:clamp(-110px,-5vw,-24px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
  z-index:0;
}
.download-logo-wrap{
  position:relative;
  width:min(44vw, 500px);
  aspect-ratio:1 / 1;
  transform-style:preserve-3d;
  transform:
    translate3d(0, calc(-10% + var(--finale-y, 0px)), 0)
    rotateX(calc(24deg + var(--finale-rotate-x, 0deg)))
    rotateY(calc(-19deg + var(--finale-rotate-y, 0deg)))
    rotateZ(calc(-6deg + var(--finale-rotate-z, 0deg)))
    scale(var(--finale-scale, 1));
  filter: drop-shadow(0 28px 38px rgba(0,0,0,var(--finale-shadow, 0.58)));
  transition: transform .18s linear;
}
.download-logo-layer{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:Dirham, serif;
  font-size:clamp(220px,32vw,500px);
  line-height:1;
  transform-style:preserve-3d;
}
.download-logo-layer-a{
  color:var(--paper);
  opacity:.26;
  transform:translate3d(24px,28px,-32px) rotateX(7deg) rotateY(14deg) scale(0.995);
  filter:blur(0.2px);
}
.download-logo-layer-b{
  color:color-mix(in srgb,var(--ink) 42%, var(--paper) 58%);
  opacity:.7;
  transform:translate3d(9px,11px,-14px) rotateX(4deg) rotateY(7deg);
}
.download-logo-layer-c{
  color:var(--ink);
  transform:translate3d(-1px,-2px,0px) rotateX(0deg) rotateY(0deg);
  text-shadow:0 0 38px color-mix(in srgb,var(--ink) 24%, transparent);
}

@media(max-width:809px){
 .rules-sticky{padding-top:100px}
 .rules .section-heading{margin-bottom:64px}
 .mock-card{width:min(125vw,48svh)}
 .usage-example{padding-top:18px}
 .brand-set li{flex-basis:190px;width:190px;padding-inline:24px}
 .brand-set img{width:142px}
 .download{min-height:75svh;padding-top:340px;padding-bottom:100px}
  .download-copy{width:100%}
  .download h2{font-size:84px}

  .download-logo-stage{position:static;justify-content:center;margin-top:24px;padding-inline:20px}
  .download-logo-wrap{width:min(520px,70vw)}
  .download-logo-layer-a{opacity:.2}
  .download-logo-layer-b{transform:translate3d(7px,14px,-12px) rotateX(3deg) rotateY(5deg)}
}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}.brand-window{overflow-x:auto}.brand-set[aria-hidden]{display:none}.brand-pause{display:none}.download-copy{position:static}.download{min-height:105svh}}

/* The proof has its own breathing room, independent of the removed tester. */
.proof{padding-top:160px;padding-bottom:176px}
.proof-copy{max-width:800px}
.proof-copy.glass-copy:before{inset:-32px}
.font-key-demo{display:flex;align-items:center;justify-content:center;gap:40px;min-height:240px}
.font-key-demo kbd{display:grid;place-items:center;width:108px;height:108px;border:1px solid #F5F0E466;border-bottom-width:5px;border-radius:14px;font:400 56px/1 'Space Grotesk',sans-serif;color:#F5F0E4}
.font-key-demo svg{width:48px;height:24px;fill:none;stroke:#C9C7B3;stroke-width:1.5}
.font-key-demo .dirham-glyph{font-size:144px;line-height:1;color:#F5F0E4}
.get-font-preview figcaption strong{font-weight:500;color:#F5F0E4}
@media(max-width:809px){.proof{padding-top:120px;padding-bottom:136px}.font-key-demo{gap:28px;min-height:180px}.font-key-demo kbd{width:80px;height:80px;font-size:40px}.font-key-demo .dirham-glyph{font-size:112px}}