/* Tamkeen (/tamkeen/): one hero slide on a moving background of mosque doors (next/tamkeen.js), and a loading screen in a quiet arcade.
   Colours (the owner's green and bone scheme): dark green #20321E for the ground, Bone #DDD8CA for the type, hunter green #466245 as a tint in the line work;
   gold is the ACCENT only: the status label, the small English name, the rule, the primary button, the lantern light. Contrast on the ground: Bone 9.6:1,
   gold #D4AF37 6.5:1, dark green on gold (the primary button) 6.5:1. No pure white or black anywhere.
   Type: Inter, and Reem Kufi for the Arabic name. */
/* Arabic: Reem Kufi (SIL OFL 1.1, licence in next/fonts/OFL-ReemKufi.txt), a geometric Kufi that sits well with Inter and the arches; added at the owner's
   request. A subset (Arabic blocks only, 13 KB), self-hosted. Weights 400-700. */
@font-face { font-family: "Reem Kufi"; src: url(/next/fonts/reem-kufi-arabic-wght.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+200C-200F, U+2010-2015, U+FB50-FDFF, U+FE70-FEFF; }
:root { --tk-ground: #20321E; --tk-hunter: #466245; --tk-bone: #DDD8CA; --tk-bone-hi: #EAE6DA; --tk-bone-lo: #C4BDA8; --tk-gold: #D4AF37; --tk-gold-hi: #E8CC74; --tk-arab: "Reem Kufi", sans-serif; }

.tk-page { --ink: var(--tk-ground); background: var(--ink); }
html:has(.tk-page) { background: var(--tk-ground); }
.tk-gates { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* keeps the text clear of the bright sunlit wall: dense on the left, open on the right where the light falls */
.tk-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(32, 50, 30, .8) 0, rgba(32, 50, 30, 0) 16%),
    linear-gradient(0deg, rgba(32, 50, 30, .94) 0, rgba(32, 50, 30, .7) 7%, rgba(32, 50, 30, 0) 22%),
    linear-gradient(90deg, rgba(32, 50, 30, .96) 0%, rgba(32, 50, 30, .95) 58%, rgba(32, 50, 30, .45) 76%, rgba(32, 50, 30, 0) 94%); }

.tk { --accent: var(--tk-gold); --accent-text: var(--tk-gold); --btn-bg: var(--tk-gold); --btn-fg: var(--ink); --line: rgba(221, 216, 202, .22); }
.tk .frame { justify-content: center; }
.tk-copy > * { max-width: 780px; }

.tk-status { display: flex; align-items: center; gap: 13px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tk-gold); }
.tk-status::before { content: ""; flex: none; width: .75em; height: .75em; background: var(--tk-gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* the name: the Arabic is the name, large, in ivory; the English sits small beside it, in gold */
.tk-name { margin-top: clamp(4px, 1.2vh, 14px); display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 clamp(14px, 1.8vw, 30px); max-width: none; line-height: 1; }
.tk-ar { font-family: var(--tk-arab); font-weight: 600; font-size: clamp(88px, min(15vw, 24vh), 244px); line-height: 1.16; letter-spacing: 0; padding: 0 .04em .1em; color: var(--tk-bone); }
/* where the gradient can be clipped to the letters the bone deepens a shade toward the foot; otherwise (or in a forced-colours mode) it is plain bone / the system text colour */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tk-ar { background: linear-gradient(180deg, #F1EDE2 0%, var(--tk-bone) 52%, #CFC9B6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) { .tk-ar { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; } }
.tk-latin { font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.5vw, 24px); letter-spacing: .38em; text-transform: uppercase; color: var(--tk-gold); padding-bottom: clamp(20px, 3.2vw, 52px); }
.tk-rule { width: 72px; height: 2px; margin: clamp(2px, 1vh, 12px) 0 clamp(14px, 2.4vh, 26px); background: var(--tk-gold); }
.tk-sub { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 46px); line-height: 1.14; letter-spacing: -.025em; color: var(--tk-bone); text-wrap: balance; }
.tk-lede { margin-top: clamp(12px, 2vh, 22px); max-width: 54ch; color: #CFCABB; }
.tk .acts { margin-top: clamp(20px, 3.4vh, 38px); }
.tk .btn-a { background: var(--tk-gold); color: var(--ink); }
.tk .btn-a:hover, .tk .btn-a:focus-visible { background: var(--tk-bone); color: var(--ink); }
.tk .btn-b { border: 1px solid rgba(212, 175, 55, .65); color: var(--tk-bone); }
.tk .btn-b:hover, .tk .btn-b:focus-visible { background: rgba(212, 175, 55, .14); border-color: var(--tk-gold); color: var(--tk-bone); }
.tk .btn:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 3px; }
.tk-note { margin-top: clamp(16px, 2.6vh, 30px); max-width: 54ch; padding-left: 14px; border-left: 2px solid var(--tk-gold); font-size: var(--t-dense); line-height: 1.55; color: #B3AE9F; }

/* the pause control (WCAG 2.2.2): a plain square with two bars, always visible */
.tk-pause { position: fixed; right: var(--gut); bottom: clamp(52px, 8vh, 80px); z-index: 45; width: 38px; height: 38px; padding: 0; background: rgba(32, 50, 30, .7); border: 1px solid rgba(212, 175, 55, .55); color: var(--tk-gold); cursor: pointer; }
.tk-pause::before { content: ""; position: absolute; left: 13px; top: 11px; width: 4px; height: 14px; background: currentColor; box-shadow: 7px 0 0 currentColor; }
.tk-pause.is-paused::before { left: 14px; top: 10px; width: 12px; height: 16px; box-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tk-pause:hover, .tk-pause:focus-visible { background: rgba(212, 175, 55, .16); color: var(--tk-gold-hi); }
.tk-pause:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 3px; }
.tk-pause[hidden] { display: none; }

@media (max-width: 900px) {
  .tk-scrim { background: linear-gradient(180deg, rgba(32, 50, 30, .86) 0%, rgba(32, 50, 30, .88) 55%, rgba(32, 50, 30, .93) 100%); }
  .tk-ar { font-size: clamp(84px, 30vw, 170px); }
  .tk-latin { padding-bottom: clamp(14px, 4vw, 28px); letter-spacing: .3em; }
}
@media (max-height: 700px) { .tk-note { display: none; } .tk-lede { font-size: 15px; } }
html[lang="hi"] .tk-sub { letter-spacing: 0; line-height: 1.35; }
html[lang="hi"] .tk-status { letter-spacing: 0; text-transform: none; }

/* 1 · Loading screen (next/tamkeen-loader.js; the shared .loader / html.is-loading rules are in overhaul.css) -------------------------------
   The hero's own picture (the sunlit facade, drawn by next/tamkeen.js on the same clock as the page behind it) under a soft dark plate, and the name in the
   middle: the Arabic large in bone, a gold rule that draws itself, the English small and gold beneath. When the page is ready the name lifts away and the
   picture and plate dissolve, so the page is already there, at the same moment of the same light. Under reduced motion everything is simply there. */
.tk-load__scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.tk-load__plate { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;
  background: radial-gradient(ellipse 54% 42% at 50% 50%, rgba(32, 50, 30, .92) 0%, rgba(32, 50, 30, .78) 46%, rgba(32, 50, 30, 0) 100%), rgba(32, 50, 30, .3); }
.tk-load.has-scene .tk-load__scene, .tk-load.has-scene .tk-load__plate { opacity: 1; }
.tk-load__word { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .5s ease, transform .9s ease; }
.tk-load__ar { font-family: var(--tk-arab); font-weight: 600; font-size: clamp(96px, min(18vw, 28vh), 270px); line-height: 1.2; letter-spacing: 0; padding: 0 .04em .08em; color: var(--tk-bone); opacity: 0; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tk-load__ar { background: linear-gradient(180deg, #F1EDE2 0%, var(--tk-bone) 52%, #CFC9B6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) { .tk-load__ar { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; } }
.tk-load__rule { display: block; width: 72px; height: 2px; margin: clamp(0px, .6vh, 8px) 0 clamp(12px, 2.2vh, 22px); background: var(--tk-gold); transform: scaleX(0); }
.tk-load__en { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.4vw, 22px); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--tk-gold); opacity: 0; }
.tk-load.is-go .tk-load__ar { animation: tk-word 1.1s var(--ease) .35s forwards; }
.tk-load.is-go .tk-load__rule { animation: tk-rule .8s var(--ease) .95s forwards; }
.tk-load.is-go .tk-load__en { animation: tk-appear .9s ease 1.25s forwards; }
html.is-loading .tk-load.is-leaving .tk-load__word { opacity: 0; transform: scale(1.06); }
html.is-loading .tk-load.is-leaving .tk-load__scene, html.is-loading .tk-load.is-leaving .tk-load__plate { opacity: 0; transition: opacity .9s ease .1s; }
@keyframes tk-appear { to { opacity: 1; } }
@keyframes tk-rule { to { transform: scaleX(1); } }
@keyframes tk-word { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .tk-load__ar { font-size: clamp(100px, 34vw, 190px); } }
@media (prefers-reduced-motion: reduce) {
  .tk-load__scene, .tk-load__plate { transition: none; }
  .tk-load__ar, .tk-load__en { opacity: 1; animation: none !important; transform: none; }
  .tk-load__rule { transform: none; animation: none !important; }
  html.is-loading .tk-load.is-leaving .tk-load__word { transform: none; }
}

/* Tamkeen's Get in touch and Register pages (<section class="beat tk tks">, tools/build-tamkeen.cjs). The page's own tone rule (.beat[data-tone="ink"]) sets the Frae vermilion as the
   accent and is more specific than `.tk`, so the gold (the only accent here) is set again at the tone's own specificity: the numeral, the required marks, the links, the focus ring.
   On a desktop the scrim is denser and the form and the cards stay left of the sunlit wall, so every line has the dark green behind it (Bone on it 9.6:1, gold 6.5:1). */
.tks.beat[data-tone] { --accent: var(--tk-gold); --accent-text: var(--tk-gold); --btn-bg: var(--tk-gold); --btn-fg: var(--ink); --line: rgba(221, 216, 202, .22); }
@media (min-width: 901px) {
  body:has(.tks) .tk-scrim { background: linear-gradient(180deg, rgba(32, 50, 30, .8) 0, rgba(32, 50, 30, 0) 16%),
    linear-gradient(0deg, rgba(32, 50, 30, .94) 0, rgba(32, 50, 30, .7) 7%, rgba(32, 50, 30, 0) 22%),
    linear-gradient(90deg, rgba(32, 50, 30, .96) 0%, rgba(32, 50, 30, .95) 62%, rgba(32, 50, 30, .5) 78%, rgba(32, 50, 30, 0) 96%); }
  .tks .rg-form, .tks .ct-routes, .tks .rg-thanks { max-width: min(860px, 56vw); }
}