/* NARA, a café demo by WASL. Plain CSS, no build step.
   The colours follow the time of day in Amman: nara.js sets <html data-part="morning|noon|asr|evening|closed">.
   Fonts: Reem Kufi and Rubik (SIL Open Font License), self-hosted from /demos/nara/fonts/. */

@font-face{font-family:'Reem Kufi';font-style:normal;font-weight:400 700;font-display:swap;src:url(/demos/nara/fonts/reem-kufi-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Reem Kufi';font-style:normal;font-weight:400 700;font-display:swap;src:url(/demos/nara/fonts/reem-kufi-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(/demos/nara/fonts/rubik-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(/demos/nara/fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- the five times of day ---- */
:root{--bg:#F3C13A;--ink:#1C2A4A;--soft:#33415F;--line:rgba(28,42,74,.22);--card:rgba(255,255,255,.34);--halo:rgba(28,42,74,.16);--halo2:rgba(28,42,74,.07);--filter:none;--tint:#F3C13A;--tint-op:0;--ease:cubic-bezier(.77,0,.175,1);--out:cubic-bezier(.23,1,.32,1)}
:root[data-part="noon"]{--bg:#BCD7E6;--ink:#10304A;--soft:#2A4C66;--line:rgba(16,48,74,.2);--card:rgba(255,255,255,.4);--halo:rgba(16,48,74,.15);--halo2:rgba(16,48,74,.06);--filter:saturate(.92) brightness(1.04);--tint:#BCD7E6;--tint-op:.12}
:root[data-part="asr"]{--bg:#F08A4E;--ink:#251229;--soft:#3D1F3A;--line:rgba(37,18,41,.22);--card:rgba(255,236,220,.3);--halo:rgba(37,18,41,.16);--halo2:rgba(37,18,41,.07);--filter:sepia(.16) saturate(1.12);--tint:#F08A4E;--tint-op:.22}
:root[data-part="evening"]{--bg:#1E2452;--ink:#F6D79B;--soft:#D7D2EE;--line:rgba(246,215,155,.22);--card:rgba(246,215,155,.08);--halo:rgba(246,215,155,.2);--halo2:rgba(246,215,155,.08);--filter:brightness(.74) saturate(.85);--tint:#2A3170;--tint-op:.55}
:root[data-part="closed"]{--bg:#12142A;--ink:#B9C1E6;--soft:#9AA3CC;--line:rgba(185,193,230,.2);--card:rgba(185,193,230,.07);--halo:rgba(185,193,230,.16);--halo2:rgba(185,193,230,.06);--filter:brightness(.52) saturate(.6);--tint:#1A1D40;--tint-op:.6}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:'Rubik',system-ui,sans-serif;font-size:17px;line-height:1.6;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .8s var(--ease),color .8s var(--ease)}
:root[lang="ar"] body{line-height:1.8}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
img{max-width:100%}
/* while nara.js fills in the words and the fonts arrive, the page stays hidden (never more than 2 s, in case
   the script fails), so nothing jumps; and no colour fade while it starts: nara.js adds .shown, then .ready */
:root.js:not(.shown) body>*{visibility:hidden;animation:nara-show 0s 2s forwards}
@keyframes nara-show{to{visibility:visible}}
:root:not(.ready) *,:root:not(.ready) body{transition:none !important}

/* ---- WASL demo bar ---- */
.wbar{background:#18414B;color:#F7F5F0;font-size:14px;line-height:1.4;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;justify-content:space-between;padding:6px 20px}
:root[lang="ar"] .wbar{line-height:1.8}
.wlinks{display:flex;flex-wrap:wrap;gap:0 14px;align-items:center}
.wbar a,.wbar button{color:#F7F5F0}
.wbar a{display:inline-flex;align-items:center;min-height:44px}
.wbar .lang{appearance:none;background:transparent;border:1px solid rgba(247,245,240,.55);border-radius:999px;padding:0 16px;min-height:44px;font:inherit;cursor:pointer}

/* ---- layout ---- */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.word{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:32px;letter-spacing:.04em;line-height:1}
.nav{display:flex;gap:22px;align-items:center;font-size:16px;font-weight:500}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;font-weight:500;font-size:15px;line-height:1.4}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--ink);display:block;flex:none}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center;padding:20px 0 0}
.greet{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:clamp(46px,7.6vw,96px);line-height:1.1;margin:0;text-wrap:balance}
:root[lang="en"] .greet{font-size:clamp(44px,5.3vw,76px);line-height:1.04;letter-spacing:-.01em}
.sub{font-size:clamp(18px,1.55vw,22px);line-height:1.55;max-width:32ch;margin:20px 0 0;color:var(--soft)}
:root[lang="ar"] .sub{line-height:1.8}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{appearance:none;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:999px;padding:12px 24px;min-height:50px;font:inherit;font-weight:600;font-size:17px;line-height:1.3;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:transform .16s var(--out),background-color .8s var(--ease),color .8s var(--ease),border-color .8s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink)}
.photo{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/5;background:var(--line)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:var(--filter);transition:filter .8s var(--ease)}
.photo .tint{position:absolute;inset:0;mix-blend-mode:multiply;background-color:var(--tint);opacity:var(--tint-op);transition:background-color .8s var(--ease),opacity .8s var(--ease)}

/* ---- the sun dial ---- */
.dialbox{margin:44px 0 0}
.dial{position:relative;aspect-ratio:1000/240;width:100%}
.dot{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--ink);opacity:.55}
:root:not(.js) .dialbox{display:none}
.bead{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--ink);background:var(--bg)}
.bead.on{background:var(--ink)}
.bead.off{border-color:var(--soft)}
.sun{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 10px var(--halo),0 0 0 22px var(--halo2)}
.sunlabel{position:absolute;transform:translate(-50%,-64px);font-weight:600;font-size:15px;line-height:1.4;white-space:nowrap;background:var(--bg);padding:4px 10px;border-radius:999px;border:1.5px solid var(--ink);transition:background-color .8s var(--ease)}
.sun.glide,.sunlabel.glide{transition:left .7s var(--ease),top .7s var(--ease),background-color .8s var(--ease)}
.hint{display:block;margin-top:8px;font-size:15px;color:var(--soft)}
.scrub{display:block;width:100%;height:44px;margin:6px 0 0;accent-color:var(--ink);cursor:grab;background:transparent}
.scrub:active{cursor:grabbing}
.ticks{display:flex;justify-content:space-between;gap:6px;font-size:13px;line-height:1.4;color:var(--soft);margin-top:2px}
.dialfoot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:8px 18px;min-height:44px;font:inherit;font-weight:500;font-size:15px;line-height:1.4;cursor:pointer;transition:transform .16s var(--out),background-color .25s ease,color .25s ease}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--ink);color:var(--bg)}
.chip[hidden]{display:none}

/* ---- sections ---- */
.sec{padding:96px 0 0}
.h2{font-family:'Reem Kufi',sans-serif;font-weight:600;font-size:clamp(34px,4.4vw,58px);line-height:1.2;margin:0 0 10px;text-wrap:balance}
:root[lang="en"] .h2{font-size:clamp(30px,4.4vw,58px)}
.lede{font-size:18px;line-height:1.6;color:var(--soft);margin:0 0 34px;max-width:52ch}
:root[lang="ar"] .lede{line-height:1.8}

.menu{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px;align-items:start}
.menu .photo{aspect-ratio:1/1}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:20px 0;border-bottom:1.5px solid var(--line);align-items:baseline}
.row:first-child{border-top:1.5px solid var(--line)}
.rn{font-family:'Reem Kufi',sans-serif;font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.3}
.rp{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.rd{grid-column:1/-1;font-size:16px;color:var(--soft)}
.small{font-size:14px;color:var(--soft);margin:16px 0 0}
.toggle{margin-top:22px}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px;padding:34px;border-radius:30px;background:var(--card)}
.groups[hidden]{display:none}
.gh{font-family:'Reem Kufi',sans-serif;font-weight:600;font-size:26px;line-height:1.3;margin:0 0 10px}
.gi{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:17px;border-bottom:1px solid var(--line)}
.gi span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.story .photo{aspect-ratio:5/4}
.storytext{font-family:'Reem Kufi',sans-serif;font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1.45;margin:0;max-width:30ch;text-wrap:pretty}
:root[lang="ar"] .storytext{line-height:1.75}

.visit{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:52px;align-items:start}
.band{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;margin:6px 0 10px}
.seg{height:56px;border-radius:8px;border:1.5px solid var(--ink)}
.seg.on{background:var(--ink)}
.seg.off{opacity:.35}
.seg.now{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--ink)}
.bandlab{display:flex;justify-content:space-between;font-size:13px;line-height:1.4;color:var(--soft)}
.facts{display:grid;gap:22px}
.fact b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
:root[lang="en"] .fact b{letter-spacing:.02em}
.fact p{margin:0;font-size:19px;line-height:1.5}
:root[lang="ar"] .fact p{line-height:1.8}
.fact small{display:block;font-size:14px;color:var(--soft);margin-top:2px}
.toast{margin-top:16px;padding:14px 18px;border-radius:18px;background:var(--card);font-size:16px;line-height:1.5}
:root[lang="ar"] .toast{line-height:1.8}
.toast:empty{margin:0;padding:0;background:none}

/* ---- what WASL adds ---- */
.adds{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.tile{border-radius:30px;background:var(--card);padding:30px;display:flex;flex-direction:column;gap:14px}
.tile h3{font-family:'Reem Kufi',sans-serif;font-weight:600;font-size:28px;line-height:1.3;margin:0}
.tile p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:30em}
:root[lang="ar"] .tile p{line-height:1.8}
.t-stand{grid-column:span 7;grid-row:span 2;padding:0;overflow:hidden}
.t-stand .photo{border-radius:0;aspect-ratio:auto;flex:1 1 320px;min-height:320px}
.t-stand .tx{padding:30px;display:flex;flex-direction:column;gap:12px}
.t-card,.t-owner{grid-column:span 5}
.wallet{border-radius:22px;background:var(--ink);color:var(--bg);padding:22px;display:flex;flex-direction:column;gap:18px;transition:background-color .8s var(--ease),color .8s var(--ease)}
.wtop{display:flex;justify-content:space-between;align-items:center}
.wtop .word{font-size:24px}
.wcount,.wfoot{font-size:15px;font-weight:500}
.cups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cup{display:block;aspect-ratio:1;border-radius:50%;border:2px solid var(--bg);opacity:.5}
.cup.on{background:var(--bg);opacity:1}
.orow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.orow b{font-variant-numeric:tabular-nums;font-size:18px}
.obar{grid-column:1/-1;height:6px;border-radius:6px;background:var(--ink)}
.orow:nth-child(1) .obar{width:100%}
.orow:nth-child(2) .obar{width:15%}
.orow:nth-child(3) .obar{width:9%}
.orow:nth-child(4) .obar{width:7%}
.sample{font-size:13px;color:var(--soft)}

.close{padding:110px 0 90px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.close .h2{max-width:16ch}

/* ---- phones and small tablets ---- */
@media (max-width:880px){
  .wrap{padding:0 20px}
  .wbar{padding:4px 20px}
  .hero,.menu,.story,.visit{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero .photo{aspect-ratio:4/3;order:-1}
  :root[lang="en"] .greet{font-size:clamp(38px,10vw,72px)}
  .nav a{display:none}
  .groups{grid-template-columns:minmax(0,1fr);padding:24px;gap:26px}
  .t-stand,.t-card,.t-owner{grid-column:span 12}
  .sec{padding-top:72px}
  .dialbox{margin-top:30px}
  .sunlabel{transform:translate(-50%,-58px);font-size:14px}
  .sun{width:32px;height:32px;margin:-16px 0 0 -16px}
  .seg{height:40px;border-radius:5px}
  .band{gap:2px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after,body{transition-duration:.01s !important}
}