/* ==========================================================================
   Dāstān HOME page: a full-bleed VIDEO hero (assets/hero.mp4, see the .hero-video element in index.html) under the shared header and menu sheet.
   The header icons and logo are the vector paths of the client's design (placed in design px: 1 design px = var(--u) = 100vw / 1082 on phones).
   Sections: 1 fonts+tokens, 2 base, 3 hero, 4 header, 5 (menu: see menu.css), 7 desktop header.
   ========================================================================== */

/* 1. fonts + tokens --------------------------------------------------------- */
@font-face{font-family:Nian;src:url('assets/fonts/nian-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nian;src:url('assets/fonts/meem-regular.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Nian;src:url('assets/fonts/nian-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nian;src:url('assets/fonts/meem-bold.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
/* Persian pages (html[lang=fa] sets --nf): Nian's Latin letters and digits drawn 122% large (Latin ranges only, no space: the Nian files also hold Arabic glyphs that must keep coming from Meem, and Persian word spacing stays as it was) to match Meem's Persian glyphs; 700 uses the Black cut because Nian is lighter than Meem. Persian glyphs fall through to the Nian faces above. */
@font-face{font-family:NianFa;src:url('assets/fonts/nian-regular.woff2') format('woff2');font-weight:400;font-display:swap;size-adjust:122%;ascent-override:82%;descent-override:49%;line-gap-override:0%;unicode-range:U+0000-001F,U+0021-009F,U+00A1-05FF,U+2000-200B,U+200E-2BFF}
@font-face{font-family:NianFa;src:url('assets/fonts/nian-black.woff2') format('woff2');font-weight:700 900;font-display:swap;size-adjust:122%;ascent-override:82%;descent-override:49%;line-gap-override:0%;unicode-range:U+0000-001F,U+0021-009F,U+00A1-05FF,U+2000-200B,U+200E-2BFF}
html[lang=fa]{--nf:NianFa}
@font-face{font-family:Minercraftory;src:url('assets/fonts/minercraftory.woff2') format('woff2');font-weight:400;font-display:block}
:root{--cream:#fff0e1;--black:#000;--green:#285746;--coral:#e0a39e;--mint:#6cb28d;
  --mc:Minercraftory,"Arial Narrow",Arial,sans-serif;--nian:var(--nf,Nian),Nian,Tahoma,Arial,sans-serif}

/* 2. base ------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--th-bg)}
body{margin:0;background:var(--th-bg);color:var(--th-fg);font:400 16px/1.5 var(--nian);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--th-ring);outline-offset:3px}
::selection{background:var(--coral);color:#000}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;background:var(--cream);color:#000;padding:12px 16px;z-index:999;font:700 16px var(--nian)}
.skip-link:focus{top:12px}
[hidden]{display:none!important}

/* 3. hero: the frame is exactly one viewport high; the video covers it on every screen (object-fit: cover crops, never letterboxes).
      The solid background shows until the video has loaded, and for good while assets/hero.mp4 does not exist yet. */
.frame{--u:calc(100vw / 1082);position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden;background:var(--green)}
.hero{position:absolute;inset:0;z-index:0;background:var(--green)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--green)}
/* a soft dark band behind the header keeps the cream icons and logo readable over bright footage */
/* centred text block near the bottom of the video: small line, big title, underlined link (the link is the call to action) */
.hero-txt{position:absolute;left:0;right:0;bottom:clamp(88px,12vh,128px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px;text-align:center;color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero-kicker{order:2;margin:0;font-size:clamp(14px,1.4vw,18px);font-weight:700}
/* the logo mark in an outlined capsule at the centre of the hero; every few seconds it dips and a chevron appears under it, so people see the page goes on below */
.hero-mark{position:relative;display:block;width:clamp(86px,24vw,120px);aspect-ratio:1;filter:drop-shadow(0 1px 10px rgba(0,0,0,.4));animation:hero-dip 6s ease-in-out 3s infinite}
.hero-seal{display:block;width:100%;height:100%;overflow:visible;direction:ltr}
@font-face{font-family:Ubuntu;src:url('assets/fonts/ubuntu-500.woff2') format('woff2');font-weight:500;font-display:swap}
.hero-ring{transform-origin:1525.46px 994.92px;animation:hero-spin 30s linear infinite}
.hero-rg{font-family:Ubuntu,var(--nf,Nian),Nian,Arial,sans-serif;font-weight:500;fill:var(--cream);text-rendering:geometricPrecision}
@keyframes hero-spin{to{transform:rotate(360deg)}}
@keyframes hero-dip{0%,72%,100%{translate:0 0}78%{translate:0 10px}86%{translate:0 0}92%{translate:0 4px}96%{translate:0 0}}
@media (prefers-reduced-motion:reduce){.hero-mark,.hero-ring{animation:none}}
/* scroll cue: three hairline chevrons that light up one after the other, downwards, forever; above them the words "please scroll" once the page has hopped (first.js adds .hint to the frame). The link jumps to #more */
.hero-scroll{position:absolute;left:50%;bottom:clamp(14px,2.6vh,24px);z-index:3;min-width:48px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-scroll-txt{font:400 13px/1.2 var(--nian);letter-spacing:.04em;white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .5s,translate .5s}
.frame.hint .hero-scroll-txt{opacity:1;translate:0 0}
.hero-scroll-line{position:relative;display:block;width:26px;height:34px}
.hero-scroll-line::before,.hero-scroll-line::after,.hero-scroll:after{content:'';position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;border-right:1.5px solid var(--cream);border-bottom:1.5px solid var(--cream);rotate:45deg;opacity:.2;animation:hero-chev 1.3s ease-in-out infinite;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
.hero-scroll-line::before{top:2px}
.hero-scroll-line::after{top:12px;animation-delay:.22s}
.hero-scroll:after{bottom:2px;animation-delay:.44s}
@keyframes hero-chev{0%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-scroll-line::before,.hero-scroll-line::after,.hero-scroll:after{animation:none;opacity:.8}}
/* short landscape phones: the frame may be as short as the screen (no 420 px floor), the stamp is smaller, so the stamp, slogan and scroll cue all stay on screen */
@media (max-height:480px){.frame{min-height:300px}.hero-mark{width:clamp(64px,22vh,86px)}.hero-txt{gap:6px;bottom:clamp(50px,13vh,60px)}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero:before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(220px,38vh,420px);z-index:1;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.hero:after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(110px,16vh,180px);background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,0));pointer-events:none}

/* 4. header: icons and logo are the vector paths of the design (cream strokes, dark green logo) ---------------- */
.fh{position:fixed;left:0;top:0;width:100%;height:calc(300 * var(--u));z-index:30;direction:ltr;pointer-events:none}
.hd{position:absolute;display:block;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));color:var(--cream);padding:0;pointer-events:auto}
.hd>.ic{display:block;width:100%;height:100%;overflow:visible}
.hd:after{content:"";position:absolute;inset:min(-6px,calc((100% - 44px) / 2))}
body[data-page=home] .hd.brand{color:var(--cream)}
.hd.brand:after{inset:min(-10px,calc((100% - 44px) / 2)) -6px}
.acct-link .in-dot{display:none;fill:var(--mint)}
.acct-link.is-in .in-dot{display:inline}
.list-count{position:absolute;right:calc(-7.2 * var(--u));top:calc(-2.4 * var(--u));width:calc(40.4 * var(--u));height:calc(40.4 * var(--u));min-width:19px;min-height:19px;border-radius:50%;background:var(--coral);color:#000;
  font:900 calc(34 * var(--u))/1 var(--nian);display:grid;place-items:center;pointer-events:none}
.menu-open .fh{z-index:40}
.menu-open .hd.brand{color:var(--cream)}

/* the header stays at the top while the page scrolls (position:fixed); once scrolled (html.is-stuck, boot.js) a soft frosted-glass blur (fading out downwards) sits behind it, see chrome.css for the other pages */
:root{--hdh:64px;--sat:env(safe-area-inset-top,0px);scroll-padding-top:calc(var(--hdh) + var(--sat) + 8px)}
.fh{--gh:64px}
.fh:before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--gh) + var(--sat) + 28px);background:color-mix(in srgb,var(--th-bg) 30%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);-webkit-mask-image:linear-gradient(#000 calc((var(--gh) + var(--sat)) * .55),transparent);mask-image:linear-gradient(#000 calc((var(--gh) + var(--sat)) * .55),transparent);pointer-events:none;transition:opacity .2s ease}
html.js:not(.is-stuck) .fh:before{opacity:0}
@media (prefers-reduced-motion:reduce){.fh:before{transition:none}}
.hd{margin-top:var(--sat)}
/* over the video the icons are cream; once the page has scrolled they sit on the page ground's fade, so they take the theme's header colour (cream in dark, black in light) */
html.is-stuck body:not(.menu-open) .hd,html.is-stuck body[data-page=home]:not(.menu-open) .hd.brand{color:var(--th-hdr)}
.menu-open .fh:before{opacity:0}
@media (min-width:901px) and (min-aspect-ratio:4/5){:root{--hdh:clamp(86.4px,7.2vw,105.6px)}.fh{--gh:clamp(86.4px,7.2vw,105.6px)}}

/* phone header (everything that is not the desktop header below): three elements, symmetrical: hamburger (left) and bag (right), both 24 px (the hamburger 24 wide, the bag 24 high)
   with 2 px strokes, glyph edges 20 px from the screen edges, 44 px hit boxes; the logo 26 px high, centred on the screen; the content row is centred at y = 32 px. Only the controls
   are placed; the header box (and so every page's content offset) is unchanged. */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){
  .fh .hd{left:auto;top:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .fh.ph .hd{top:calc((var(--fhh) - 44px) / 2)}
  .fh .hd>.ic{flex:none;width:calc(var(--ig) * var(--iw));height:calc(var(--ig) * var(--ih))}
  .fh .hd:after{inset:0}
  .fh .hd .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:2px}
  .fh :is(.menu-button,.lang-link,.list-link,.home-link,.acct-link){--ig:20px}
  .fh .menu-button{left:8px}
  .fh .list-link{right:6.97px}
  .fh .acct-link{right:50.97px}
  .fh .home-link{right:94.97px}
  .fh .hd.brand{display:block;left:calc(50% - 45px);top:20.75px;width:90px;height:22.5px}
  .fh.ph .hd.brand{top:calc((var(--fhh) - 22.5px) / 2)}
  .fh .hd.brand>.ic{width:100%;height:100%}
  .fh .hd.brand:after{inset:-9px -6px}
  .fh .list-count{right:-1px;top:1px;width:16px;height:16px;min-width:0;min-height:0;font-size:10.5px}
}
/* narrow phones: three 44 px icons on the right must not touch the centred logo (it is 90 px, 135-225 px on a 360 px screen) */
@media (max-width:379px){
  .fh .list-link{right:1px}
  .fh .acct-link{right:45px}
  .fh .home-link{right:89px}
  .fh .hd.brand:after{inset:-9px 0}
}
@media (max-width:357px){
  .fh .hd.brand{left:calc(50% - 36px);width:72px;height:18px;top:23px}
  .fh .list-link{right:0}
  .fh .acct-link{right:44px}
  .fh .home-link{right:88px}
}


/* 7. desktop (windows wider than 900 px and at least 4:5): a normal site header (logo --lw wide in the middle, 24-28 px icons on 44 px hit areas,
      row --hh high, side padding --pad), all clamped. */
@media (min-width:901px) and (min-aspect-ratio:4/5){
  .frame{--hh:clamp(86.4px,7.2vw,105.6px);--pad:clamp(33.6px,3.36vw,57.6px);--lw:clamp(156px,12.6vw,192px);--ig:clamp(28.8px,2.28vw,33.6px)}
  .fh{height:var(--hh)}
  .hd{left:auto;top:calc((var(--hh) - 44px) / 2);width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .hd>.ic{flex:none;width:calc(var(--ig) * var(--iw));height:calc(var(--ig) * var(--ih))}
  .hd:after{inset:0}
  .hd .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.92px}
  .menu-button{left:calc(var(--pad) - (44px - var(--ig)) / 2)}
  .list-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2)}
  .acct-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 48px)}
  .home-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 96px)}
  .hd.brand{display:block;left:calc(50% - var(--lw) / 2);top:calc((var(--hh) - var(--lw) * .24975) / 2);width:var(--lw);height:calc(var(--lw) * .24975)}
  .hd.brand>.ic{width:100%;height:100%}
  .hd.brand:after{inset:-10px -6px}
  .list-count{right:-2px;top:-3px;width:19px;height:19px;font-size:12px}
}

/* header icons: one stroke weight (1.7px, not scaled with the artboard) and one height for search, profile and bag */
.fh :is(.lang-link,.home-link,.acct-link,.list-link) .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.7px}
@media not all and (min-width:900px){.fh :is(.lang-link,.home-link,.acct-link)>.ic{width:auto;height:22px}.fh .list-link>.ic{width:auto;height:40px}}

/* LIGHT THEME (tokens: theme.css). The hero is a film under a dark veil in both themes, so what sits on it stays cream; the cream page starts below it. */
html[data-theme=light] .frame :focus-visible{outline-color:var(--cream)}

/* back to top (home only): a small line circle with an up-pointing chevron, bottom corner; it pops in once the visitor has scrolled past the first screen */
.to-top{position:fixed;z-index:29;inset-inline-end:max(14px,env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--th-bg);color:var(--th-hdr);cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;translate:0 14px;scale:.8;pointer-events:none;transition:opacity .25s,translate .45s cubic-bezier(.3,1.6,.5,1),scale .45s cubic-bezier(.3,1.6,.5,1)}
.to-top[hidden]{display:none}
.to-top.on{opacity:.95;translate:0 0;scale:1;pointer-events:auto}
.to-top{display:grid;place-items:center}
.to-top[hidden]{display:none}
.to-top svg{display:block;width:36px;height:36px}
.to-top svg :is(circle,path){vector-effect:non-scaling-stroke}
.to-top:focus-visible{outline:2px solid var(--th-ring);outline-offset:3px}
.menu-open .to-top{display:none}
@media (hover:hover){.to-top:hover{opacity:1}.to-top:hover path{translate:0 -2px}}
.to-top path{transition:translate .2s}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}}
@media (min-width:901px){.to-top{bottom:calc(28px + env(safe-area-inset-bottom));inset-inline-end:28px}}