/* Musafir — shared stylesheet. Identity: the Musafir character, a Bedouin-style
   traveller with keffiyeh, agal and staff, walking into a low desert sun.
   Palette "desert at dusk": sand, dune, oasis, dusk sky, sun. Type: Reem Kufi
   (headings, wordmark) and Hind (text; Hind Siliguri / Hind Devanagari / Noto
   Nastaliq Urdu join for the other languages). Logical properties only, so RTL
   pages mirror. Every colour is a token below. */

@font-face{font-family:"Reem Kufi";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/reem-kufi-latin-500.woff2) format("woff2")}
@font-face{font-family:"Reem Kufi";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/reem-kufi-latin-700.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hind-latin-400.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hind-latin-600.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hind-latin-700.woff2) format("woff2")}

:root{
  --sand:#f7ecda; --card:#fffaf1; --ink:#2b1a10; --text:#36281d; --muted:#6a5644;
  --dune:#a8481a; --oasis:#17635d; --sun:#f0a830; --sun-soft:#fbe1a8;
  --line:#e6d2b3; --notice-bg:#fbe1a8; --notice-ink:#5a3500;
  /* night-sky band and the illustration (same in both modes: it is always dusk) */
  --dusk:#232a4d; --on-dusk:#f7ecda; --dusk-muted:#c9c3d6;
  --sc-sky-low:#7a3b3a; --sc-dune-far:#c8642a; --sc-dune-mid:#a9501f; --sc-dune-near:#8e3f19;
  --sc-shadow:#1a1426; --sc-cloth:#f3e6cc; --sc-cloak:#5c2f17; --sc-trim:#f0a830; --sc-skin:#a0623a; --sc-staff:#3d2414; --sc-star:#fff4d6;
  --head:"Reem Kufi","Hind",system-ui,sans-serif;
  --font:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px; --wrap:1060px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --sand:#15120f; --card:#1f1a15; --ink:#f6e8d2; --text:#eadcc6; --muted:#c0ad96;
  --dune:#f29a63; --oasis:#6fcac0; --sun:#f3b545; --sun-soft:#3b2c12;
  --line:#3a2f24; --notice-bg:#3b2c12; --notice-ink:#f6dca0;
  --dusk:#0f1428;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%}
a{color:var(--oasis);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.2;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.45rem,3vw,1.95rem);font-weight:700}
h3{font-size:1.15rem;font-weight:500;letter-spacing:.01em}
p{margin:0 0 1em;max-width:65ch}
ul{margin:0 0 1em;padding-inline-start:1.2em}
li{margin-block-end:.4em}
li::marker{color:var(--dune)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.wrap>*{min-width:0}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:16px;top:16px;z-index:10;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:8px}

/* Under-construction notice (top) */
.site-notice{background:var(--notice-bg);color:var(--notice-ink);font-size:.92rem;padding-block:.55rem;text-align:center}
.site-notice p{margin:0 auto;max-width:none;padding-inline:16px}

/* Header: a night-sky band carrying the badge and wordmark */
.top{background:var(--dusk);color:var(--on-dusk)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-dusk)}
.brand img{width:48px;height:48px}
.brand b{font-family:var(--head);font-size:1.6rem;font-weight:700;letter-spacing:.02em;line-height:1}
.brand span{font-family:var(--head);font-size:.95rem;font-weight:500;color:var(--sun);letter-spacing:.14em;text-transform:uppercase}
.langs{display:flex;gap:6px;flex-wrap:wrap;font-size:.95rem}
.langs a,.langs span{padding:4px 12px;border:1px solid var(--dusk-muted);border-radius:999px;text-decoration:none;color:var(--on-dusk)}
.langs [aria-current]{background:var(--sun);color:var(--sc-shadow);border-color:var(--sun);font-weight:600}
.langs .soon{color:var(--dusk-muted);border-style:dashed}

/* Dune-wave divider (replaces a plain rule) */
.dunes{height:14px;border:0;margin-block:2.4rem;background:var(--dune);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M0 10C10 2 20 2 30 10S50 18 60 10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/60px 14px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M0 10C10 2 20 2 30 10S50 18 60 10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/60px 14px}

/* Hero */
.hero{padding-block:2.4rem 1rem;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:center}
.hero .eyebrow{font-weight:600;color:var(--oasis);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;margin-block-end:.4rem}
.hero .lead{font-size:1.2rem}
.scene{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px -18px var(--sc-shadow);line-height:0}
.scene svg{width:100%;height:auto;display:block}
@media (max-width:760px){.hero{grid-template-columns:1fr}}

/* Illustration parts (classes so the scene uses tokens) */
.sc-sky-hi{stop-color:var(--dusk)} .sc-sky-lo{stop-color:var(--sc-sky-low)}
.sc-sun{fill:var(--sun)} .sc-far{fill:var(--sc-dune-far)} .sc-mid{fill:var(--sc-dune-mid)} .sc-near{fill:var(--sc-dune-near)}
.sc-shadow{fill:var(--sc-shadow)} .sc-cloth{fill:var(--sc-cloth)} .sc-cloak{fill:var(--sc-cloak)} .sc-skin{fill:var(--sc-skin)}
.sc-star{fill:var(--sc-star)} .sc-trim{fill:none;stroke:var(--sc-trim)} .sc-staff{stroke:var(--sc-staff)} .sc-agal{fill:none;stroke:var(--sc-shadow)}
/* Short entrance: the traveller strides a few steps, footprints appear, stars blink; then still (under 5 s) */
.walker{animation:mz-walk .9s ease-in-out 4 alternate}
.tail{transform-box:fill-box;transform-origin:100% 0;animation:mz-flap .6s ease-in-out 6 alternate}
.step-print{opacity:0;animation:mz-print .4s ease-out forwards;animation-delay:var(--d,0s)}
.twinkle{animation:mz-twinkle 1.6s ease-in-out 2 alternate}
@keyframes mz-walk{to{transform:translateY(-3px)}}
@keyframes mz-flap{to{transform:rotate(-8deg)}}
@keyframes mz-print{to{opacity:1}}
@keyframes mz-twinkle{to{opacity:.3}}

/* Steps along the journey: numbered waypoints on a footprint trail */
.journey{list-style:none;padding:0;margin:0;display:grid;gap:14px;position:relative}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--dusk);color:var(--sun);display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.15rem;box-shadow:0 0 0 4px var(--sun-soft)}
.step h3{margin-block-end:.3em}
.step p:last-child,.step ul:last-child{margin-block-end:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-block-start:4px solid var(--sun);border-radius:var(--radius);padding:18px 20px;min-width:0}
.card h3{margin-block-end:.3em}
.card p:last-child{margin:0}

.callout{border-inline-start:5px solid var(--dune);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin-block:1.4rem}
.callout p:last-child{margin:0}

.sources{font-size:.95rem}

/* Language chooser (old home list, kept for reference pages) */
.choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-block:1.2rem 2rem}
.choose a,.choose div{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink)}
.choose a{border-color:var(--sun);border-width:2px}
.choose a:hover{background:var(--sun-soft)}
.choose b{display:block;font-size:1.3rem}
.choose small{color:var(--muted);font-size:.9rem}
.choose div{border-style:dashed}

/* Footer: the night band again */
footer{background:var(--dusk);color:var(--dusk-muted);margin-block-start:3rem;padding-block:1.8rem 2.4rem;font-size:.92rem}
footer p{max-width:none}
footer a{color:var(--sun)}
.footer-notice{color:var(--notice-ink);background:var(--notice-bg);padding:8px 12px;border-radius:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.step-print{opacity:1}}

/* Dashboard home (family-wide rule, in Musafir's own tokens): tiles, 2 columns on phones, 3-4 on desktop */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:1rem 1.6rem}
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:900px){.tiles:not(.tiles-jump){grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:2px;min-height:88px;padding:14px;color:var(--text);text-decoration:none;background:var(--card);border:1px solid var(--line);border-block-start:4px solid var(--tone,var(--sun));border-radius:var(--radius);transition:transform .18s ease,border-color .18s ease}
.tile-title{font-family:var(--head);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.tile-text{color:var(--muted);font-size:.9rem;line-height:1.35}
a.tile:hover{border-color:var(--tone,var(--sun));transform:translateY(-2px)}
.tile-soon{border-style:dashed;border-block-start-style:solid}
.tile[data-tone="sun"]{--tone:var(--sun)}
.tile[data-tone="dune"]{--tone:var(--dune)}
.tile[data-tone="oasis"]{--tone:var(--oasis)}
.tile[data-tone="ink"]{--tone:var(--ink)}
@media (prefers-reduced-motion:reduce){.tile{transition:none}a.tile:hover{transform:none}}