/* ==========================================================================
   Dāstān LISTING pages: the shared base of /blend, /specialty and /accessories (blend.html + blend.css, specialty.html + specialty-home.css, accessories.html + accessories.css).
   Hand-maintained, fluid: nothing is scaled from a design frame any more. Sizes are clamp() values of the viewport, every block shares the
   same side gutter, the same content width and the same vertical rhythm as the home sections (home-sections.css).
   Loaded after chrome.css (header + menu). The product pages still use home.css / specialty.css.
   Sections: 1 fonts + tokens, 2 base, 3 hero, 4 mode switch, 5 colour bands (the "tab" headings), 6 footer, 7 page-switch cover, 8 Persian, 9 motion.
   ========================================================================== */

/* 1. fonts + tokens --------------------------------------------------------- */
@font-face{font-family:Ubuntu;src:url('assets/fonts/ubuntu-500.woff2') format('woff2');font-weight:500;font-display:swap}
: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;
  /* spacing scale: gutter, content width, section rhythm, heading ("tab") height */
  --gut:clamp(16px,5vw,72px);
  --max:1320px;
  --inset:max(var(--gut),calc((100% - var(--max)) / 2));
  --sec:clamp(40px,6vw,96px);
  --tf:clamp(44px,5.4vw,100px);
}

/* 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}
:focus-visible{outline:3px solid var(--focus,var(--th-ring));outline-offset:3px}
::selection{background:var(--coral);color:#000}
img{max-width:100%}
h1,h2,h3,p,ul{margin:0}
.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}
.page{position:relative;width:100%;overflow-x:clip}
/* the header is the shared chrome one; on phones and small tablets its box is only as tall as its 44 px controls (the design-scaled height left a gap) */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){.fh{--fhh:64px}}

/* 3. hero: page switch (section 4), title, lead text --------------------- */
.ls-hero{position:relative;background:var(--th-bg);color:var(--th-fg);padding:clamp(16px,2.6vw,40px) var(--inset) calc(var(--tf) + clamp(20px,3vw,44px))}
.ls-h1{font:400 clamp(27px,4.2vw,64px)/1 var(--mc);letter-spacing:.005em;color:var(--th-hl);text-wrap:balance;overflow-wrap:anywhere}
.ls-lead{margin-top:clamp(14px,1.8vw,24px);max-width:38em;font:400 clamp(15px,1.7vw,26px)/1.28 var(--nian);color:rgb(var(--th-fg-rgb) / .92)}

/* 4. PAGE SWITCH (shared by /blend, /specialty and /accessories): BLEND | SPECIALTY | ACCESSORIES, a bar of square tabs numbered like the menu rows (01 02 03).
      Each tab owns a colour (--tc: coral / mint / cream). The current tab is a filled block of that colour with a stepped pixel arrow hanging under it; the others are outlines
      that fill from the reading edge in pixel steps on hover / focus (and the current one fills the same way when the page arrives). Time-based CSS only; off under reduced motion. ------------ */
.pgsw{display:flex;gap:clamp(4px,.8vw,8px);width:100%;max-width:640px;margin:0 0 clamp(28px,3.6vw,52px)}
.pgsw-t{--tc:var(--coral);position:relative;isolation:isolate;display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.8em;min-height:50px;padding:.12em clamp(6px,1.6vw,22px) 0;border:2px solid var(--tc);color:var(--th-fg);font:400 clamp(11px,3.1vw,15px)/1 var(--mc);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pgsw-spec{--tc:var(--mint)}
.pgsw-acc{--tc:var(--th-fg)}
.pgsw-t:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tc);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s steps(7,end)}
html[dir=rtl] .pgsw-t:before{transform-origin:100% 50%}
.pgsw-w{display:block}
.pgsw-t[href]:hover,.pgsw-t[href]:focus-visible,.pgsw-t[aria-current=page]{color:#000;transition:color 0s .3s}
.pgsw-t[href]:hover:before,.pgsw-t[href]:focus-visible:before,.pgsw-t[aria-current=page]:before{transform:scaleX(1)}
.pgsw:has(.pgsw-t[aria-current=page],.pgsw-t[aria-selected=true]) .pgsw-t:not([aria-current=page],[aria-selected=true]){opacity:.5;transition:opacity .2s}
.pgsw:has(.pgsw-t[aria-current=page],.pgsw-t[aria-selected=true]) .pgsw-t:not([aria-current=page],[aria-selected=true]):is(:hover,:focus-visible){opacity:1}
.pgsw-t:focus-visible{outline:3px solid var(--th-ring);outline-offset:4px}
.pgsw-t[aria-current=page]{animation:pgsw-ink .5s steps(1,end) .1s backwards}
.pgsw-t[aria-current=page]:before{animation:pgsw-wipe .45s steps(8,end) .1s backwards}
@keyframes pgsw-wipe{from{transform:scaleX(0)}}
@keyframes pgsw-ink{from{color:var(--th-fg)}}
.menu-open .pgsw{visibility:hidden}
@media (min-width:560px){.pgsw-t{min-height:56px;font-size:clamp(13px,1.3vw,16px)}}
/* narrow phones: three Latin tab labels (ACCESSORIES is the longest) keep a little air inside their frame */
@media (max-width:400px){html:not([lang=fa]) .pgsw-t{font-size:10px;letter-spacing:.02em;padding-inline:4px}}

/* 5. colour bands: each band opens with its name as a "tab" in the band's own colour on the colour above (the brand's folded look);
      --pc = colour above, --bg = this band, --ink = text, --ink2 = accent text (ratio, names) -------------------------------------- */
.ls-band{--sh:var(--tf);--strip:clamp(14px,1.8vw,28px);position:relative;padding-bottom:var(--strip);background:linear-gradient(var(--pc,var(--th-bg)) 0 var(--sh),var(--bg) var(--sh) 100%);color:var(--ink)}
.ls-band.is-coral{--bg:var(--coral);--ink:#000;--ink2:var(--green);--focus:#000}
.ls-band.is-mint{--bg:var(--mint);--ink:#000;--ink2:var(--green);--focus:#000}
.ls-band.is-green{--bg:var(--green);--ink:var(--cream);--ink2:var(--cream);--focus:var(--cream)}
.ls-band.is-cream{--bg:var(--cream);--ink:#000;--ink2:var(--green);--focus:var(--green)}
.ls-tab{display:flex;align-items:flex-end;height:var(--sh);margin:0;padding:0 var(--inset);font:400 var(--tf)/1 var(--mc);letter-spacing:.005em;color:var(--bg);text-transform:uppercase;overflow-wrap:anywhere}
.ls-tab button,.ls-tab span{display:block;min-height:44px;text-align:start;font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;padding:0;margin-bottom:-.04em;line-height:1}
.ls-tab button:hover{opacity:.85}
.ls-tab button{display:flex;align-items:flex-end}
/* the tab sits on the colour above (black, coral, mint or green): a cream ring on a black halo reads on all of them */
.ls-tab :focus-visible{outline:3px solid var(--th-ring);outline-offset:2px;box-shadow:0 0 0 7px var(--th-bg)}
.ls-clip{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1),opacity .35s}
.ls-clip>div{min-height:0;overflow:hidden}
.ls-band:not(.is-open) .ls-clip{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1),opacity .25s,visibility 0s .55s}
.ls-more{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:clamp(14px,1.8vw,24px);padding-bottom:3px;border-bottom:2px solid currentColor;font:400 clamp(14px,1.25vw,18px)/1 var(--mc);letter-spacing:.05em;text-transform:uppercase}
.ls-ar{flex:none;width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transition:translate .25s ease}
.ls-ar use{display:none}
.ls-more:hover .ls-ar{translate:5px 0}
html[dir=rtl] .ls-ar{scale:-1 1}
html[dir=rtl] .ls-more:hover .ls-ar{translate:-5px 0}

/* 6. footer: the vector mosaic (+ turning ring on Blend), then the visible link row (same pattern as the home footer) --------------- */
.ls-foot{container-type:inline-size;overflow-x:clip;width:100%;position:relative;z-index:1;background:linear-gradient(var(--th-bg,#000) 0 3px,transparent 3px) var(--fbg,var(--mint));color:var(--green);--focus:var(--green)}
.ls-foot .pxfoot{--u:calc(100cqw / 1920);width:100%;flex:none;position:relative;height:calc(var(--fh,1399) * var(--u));overflow:hidden;background:var(--pf-img,url(assets/bl-footer.svg)) 0 0/100% 100% no-repeat,linear-gradient(var(--th-bg,#000) 0 50%,var(--mint) 50%)}
.ls-foot .pf-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none}
.ls-foot .ring-wrap{position:absolute;left:0;top:0;width:100%;height:calc(1399 * var(--u));pointer-events:none}
.ls-foot .ring{color:var(--cream);position:absolute;direction:ltr;inset:0;width:100%;height:100%;overflow:visible;transform-origin:calc(1487.985 * 100% / 1920) calc(467.293 * 100% / 1399);animation:ls-ring 40s linear infinite}
.ls-foot .ring text{font:500 94.413px Ubuntu,var(--nian);font-kerning:none;fill:currentColor}
.ls-foot .ring.paused{animation-play-state:paused}
@keyframes ls-ring{to{transform:rotate(360deg)}}
.ls-links{display:flex;flex-wrap:wrap;gap:4px clamp(20px,3vw,44px);padding:clamp(8px,1.4vw,16px) var(--gut) clamp(20px,3vw,36px);font:700 clamp(15px,1.3vw,19px)/1.2 var(--nian)}
.ls-links a{display:inline-flex;align-items:center;min-height:48px;min-width:44px}
.ls-links a:hover{text-decoration:underline;text-underline-offset:5px}

/* 7. page-switch cover (pixel.js) -------------------------------------------------------- */
html.px-cover:before{content:"";position:fixed;inset:0;z-index:300;background:var(--px-cover,var(--th-bg))}
.px-canvas{position:fixed;inset:0;z-index:310;pointer-events:none;display:block}
.px-fly{position:fixed;z-index:320;pointer-events:none}

/* 8. Persian: the pixel face has no Persian letters, so Persian headings use Nian Black; Latin names (SPARK, ARBEGONA ...) keep the pixel face --------- */
/* narrow phones: ACCESSORIES / COOPERATION must stay one word on one line */
@media (max-width:420px){.ls-h1{font-size:clamp(20px,6.6vw,27px)}}
html[lang=fa] .ls-h1,html[lang=fa] .pgsw-t{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .pgsw-t{font-size:clamp(13px,3.5vw,17px)}
html[lang=fa] .ls-h1{font-size:clamp(24px,3.8vw,56px);line-height:1.15}
html[lang=fa] .ls-lead{line-height:1.45}
html[lang=fa] .ls-tab:not(.is-lat){font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;line-height:1.1}
html[lang=fa] .ls-more{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}

/* 9. motion ------------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}
@media print{.px-canvas{display:none!important}}

/* 10. four tabs (BLEND | SPECIALTY | ACCESSORIES | ABOUT): two rows of two on phones, one row from 760px; the fourth tab is coral like the first */
.pgsw-about{--tc:var(--coral)}
.pgsw-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.pgsw-4 .pgsw-t{padding-inline:6px}
@media (min-width:760px){.pgsw-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pgsw-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px}
.pgsw-3 .pgsw-t{padding-inline:6px}

/* LIGHT THEME (tokens: theme.css): the cream tab (ACCESSORIES) fills black, a cream card gets a green outline so it stands on the cream page */
html[data-theme=light] .pgsw-acc[href]:hover,html[data-theme=light] .pgsw-acc[href]:focus-visible,html[data-theme=light] .pgsw-acc[aria-current=page]{color:var(--cream)}
html[data-theme=light] :is(.bc-cream,.sp-cream,.ax-cream,.ab-cf-cream){box-shadow:inset 0 0 0 2px var(--green)}
html[data-theme=light] .ls-foot.sp-foot,html[data-theme=light] .ls-foot.sp-foot .ls-links a:not(.soc){color:var(--th-fg)}