/* ============================================================
   my360place.com — a Signmak venture
   Inherits the Signmak token system (void / ink / dim / orange,
   Archivo + IBM Plex Mono, film grain). Adds one colour of its
   own: the red of the shop's product template, which is where
   the sphere in the logo comes from.
   Generated from build/. Edit here, never in site/.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --void:#09090a; --ink:#e8e5df; --dim:#8a867e;
  --orange:#d97e2b;            /* the ecosystem: Signmak */
  --red:#e5322b;               /* this venture: the shop's own rule colour */
  --red-lit:#ff6f63;           /* red at text contrast */
  --line:rgba(232,229,223,.12);
  --line-lit:rgba(232,229,223,.28);
  --disp:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --pad:6vw;
  --maxw:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--ink);font-family:var(--disp);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:1px}
::selection{background:var(--red);color:#fff}

.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.04;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--void);
  padding:.8rem 1.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}

.eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.4em;
  text-transform:uppercase;color:var(--red-lit)}

/* ── header ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.5rem var(--pad);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  background:linear-gradient(var(--void),rgba(9,9,10,.82) 55%,transparent)}
.nav .mark{display:flex;align-items:center;gap:.85rem}
/* The mark is a sphere with 360 cut through it, so the only turn it is ever
   allowed to make is exactly 360 degrees. Once on arrival, again on hover.
   Two keyframe names because a hover cannot restart an animation it already has. */
.nav .mark img{width:36px;height:36px;animation:turn 1.5s cubic-bezier(.62,.02,.16,1) .35s both}
.nav .mark:hover img{animation:turn-again 1.1s cubic-bezier(.62,.02,.16,1)}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes turn-again{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nav .mark b{font-weight:500;letter-spacing:.24em}

/* ── the stage: sphere unrolling into a rectangle ───────── */
.stage{position:relative;height:270vh}
.stick{position:sticky;top:0;height:100vh;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0d0d0f;touch-action:pan-y}
#glfall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the words sit on the left, so the scrim is heaviest there and lets the
   panorama stay bright on the right where nothing is written */
.stick .shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(9,9,10,.94) 0%,rgba(9,9,10,.86) 26%,rgba(9,9,10,.42) 52%,rgba(9,9,10,.14) 72%,rgba(9,9,10,.46) 100%),
    linear-gradient(rgba(9,9,10,.55),rgba(9,9,10,.18) 42%,rgba(9,9,10,.72))}
.stick .capshade{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(transparent 42%,rgba(9,9,10,.5) 68%,rgba(9,9,10,.9))}
@media(max-width:780px){
  .stick .shade{background:linear-gradient(rgba(9,9,10,.36) 10%,rgba(9,9,10,.76) 44%,rgba(9,9,10,.95))}
}

.words{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);max-width:var(--maxw);margin:0 auto;pointer-events:none}
.words > *{pointer-events:auto}
h1{font-size:clamp(1.55rem,8vw,5.8rem);font-weight:800;font-stretch:125%;line-height:.94;
  letter-spacing:-.02em;text-transform:uppercase;
  text-shadow:0 2px 40px rgba(9,9,10,.75)}
h1 .l{display:block;white-space:nowrap}
h1 .kw{display:block;margin-top:1.1rem;font-family:var(--mono);font-size:clamp(.68rem,1.15vw,.82rem);
  font-weight:400;font-stretch:100%;letter-spacing:.22em;text-transform:uppercase;color:#b6b2aa;
  text-shadow:0 1px 18px rgba(9,9,10,.95)}
h1 .l:nth-child(2){color:#9b978f}
.lead{max-width:46ch;margin-top:2rem;font-size:clamp(1rem,1.5vw,1.22rem);font-weight:300;
  line-height:1.75;color:#cfcbc3;text-shadow:0 1px 24px rgba(9,9,10,.9)}
.lead b{color:var(--ink);font-weight:500}
.drag{margin-top:2.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dim)}
.drag span{color:var(--red-lit)}

/* the caption that lands once the world is flat */
.flatcap{position:absolute;left:0;right:0;bottom:11vh;padding:0 var(--pad);
  max-width:var(--maxw);margin:0 auto;opacity:0}
.flatcap p{font-size:clamp(1.15rem,3.2vw,2.3rem);font-weight:800;font-stretch:112%;
  line-height:1.1;letter-spacing:-.015em;max-width:26ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(9,9,10,.9)}
.flatcap small{display:block;margin-top:1rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;color:#b3afa7;text-transform:uppercase}

/* longitude ruler: the axis an equirectangular is measured on */
.ruler{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;
  border-top:1px solid var(--line-lit);background:linear-gradient(transparent,rgba(9,9,10,.8))}
.ruler i{position:absolute;top:0;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;color:var(--dim);padding-top:14px;transform:translateX(-50%);white-space:nowrap}
.ruler i:first-child{transform:none}
.ruler i:last-child{transform:translateX(-100%)}
.ruler i::before{content:"";position:absolute;top:0;left:50%;width:1px;height:8px;background:var(--line-lit)}
.ruler i:first-child::before{left:0}
.ruler i:last-child::before{left:auto;right:0}

/* ── a world's own page ─────────────────────────────────── */
.chero{position:relative;min-height:clamp(360px,54vh,560px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--line)}
.chero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero-shade{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,9,10,.94) 0%,rgba(9,9,10,.84) 34%,rgba(9,9,10,.4) 64%,rgba(9,9,10,.2) 100%),
             linear-gradient(rgba(9,9,10,.62),rgba(9,9,10,.22) 44%,rgba(9,9,10,.86))}
.chero.bare{min-height:clamp(280px,38vh,420px);background:#101012}
.chero-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(2.6rem,6vh,4.4rem);padding-top:9rem}
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.6rem}
.crumb a{color:var(--dim);transition:color .3s}
.crumb a:hover{color:var(--red-lit)}
.crumb i{font-style:normal;color:var(--red);margin:0 .5em}
.chero h1{font-size:clamp(1.9rem,5.6vw,4.2rem);font-weight:800;font-stretch:118%;line-height:1;
  letter-spacing:-.02em;text-transform:uppercase;max-width:18ch;text-wrap:balance;
  text-shadow:0 2px 34px rgba(9,9,10,.8)}
.chero .lede{margin-top:1.5rem;max-width:44ch;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:300;
  line-height:1.5;color:#cfcbc3;text-shadow:0 1px 20px rgba(9,9,10,.9)}
.chero .cmeta{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-lit)}

.intro{max-width:var(--maxw);margin:0 auto;padding:9vh var(--pad) 5vh}
.intro p{max-width:68ch;font-size:clamp(1rem,1.5vw,1.14rem);font-weight:300;line-height:1.85;
  color:var(--dim);margin-bottom:1.4rem}
.intro .who{max-width:60ch;margin-top:2rem;margin-bottom:0;padding-left:1.2rem;
  border-left:2px solid var(--red);font-family:var(--mono);font-size:.8rem;line-height:1.9;
  letter-spacing:.04em;color:var(--ink)}

.worlds{max-width:var(--maxw);margin:0 auto;padding:2vh var(--pad) 8vh}
.worlds .eyebrow{display:block;margin-bottom:1.6rem}

/* ── questions people actually ask before buying ────────── */
.faq{max-width:var(--maxw);margin:0 auto;padding:4vh var(--pad) 8vh}
.faq .eyebrow{display:block;margin-bottom:2rem}
.q{border-top:1px solid var(--line)}
.q:last-of-type{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;padding:1.35rem 2.4rem 1.35rem 0;position:relative}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";position:absolute;right:.3rem;top:1.15rem;font-family:var(--mono);
  font-size:1.1rem;color:var(--red);transition:transform .3s}
.q[open] summary::after{transform:rotate(45deg)}
.q h3{display:inline;font-size:clamp(1rem,1.6vw,1.16rem);font-weight:600;color:var(--ink)}
.q summary:hover h3{color:var(--red-lit)}
.q p{max-width:70ch;padding:0 2.4rem 1.6rem 0;font-size:1rem;font-weight:300;line-height:1.85;
  color:var(--dim)}

/* ── the manifest ───────────────────────────────────────── */
.manifest{max-width:var(--maxw);margin:0 auto;padding:14vh var(--pad) 10vh}
.manifest .eyebrow{margin-bottom:2.4rem}
.mf{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:clamp(.72rem,1.35vw,.92rem)}
.mf th{text-align:left;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  font-size:.62rem;color:var(--dim);padding:0 1rem .9rem 0;border-bottom:1px solid var(--line)}
.mf td{padding:1.15rem 1rem 1.15rem 0;border-bottom:1px solid var(--line);color:var(--dim);
  vertical-align:baseline;font-variant-numeric:tabular-nums}
.mf td:first-child{color:var(--ink);font-weight:500}
.mf .qty{color:var(--ink);font-weight:500}
.mf tr:last-child td{border-bottom:0}
.mf th:not(:first-child),.mf td:not(:first-child){text-align:right}
.since{margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--dim);display:flex;flex-wrap:wrap;gap:.5em 2em}
.since b{color:var(--ink);font-weight:500}
.since .star i{font-style:normal;color:var(--red-lit)}

/* ── the catalogue ──────────────────────────────────────── */
.shop{max-width:var(--maxw);margin:0 auto;padding:4vh var(--pad) 10vh}
.shop h2{font-size:clamp(2rem,6vw,4.4rem);font-weight:800;font-stretch:118%;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;margin:.8rem 0 2.6rem}

.controls{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:flex-end;
  justify-content:space-between;padding-bottom:1.6rem;border-bottom:1px solid var(--line);margin-bottom:2.6rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters .chip{background:none;border:1px solid var(--line);color:var(--dim);
  font-family:var(--disp);font-size:.72rem;font-weight:600;font-stretch:78%;letter-spacing:.16em;
  text-transform:uppercase;padding:.62rem .95rem;transition:color .25s,border-color .25s,background .25s}
.filters .chip em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--dim);
  margin-left:.5em;transition:color .25s}
.filters .chip:hover{color:var(--ink);border-color:var(--red)}
.filters .chip.on{color:var(--void);background:var(--ink);border-color:var(--ink)}
.filters .chip.on em{color:rgba(9,9,10,.5)}

.sorter{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sorter select{background:var(--void);color:var(--ink);border:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:.55rem 1.9rem .55rem .7rem;
  border-radius:0;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1.4rem,2.6vw,2.4rem)}

.card{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:1.1rem;
  transition:border-color .3s}
.card:hover,.card:focus-visible{border-color:var(--red)}
.card .strip{position:relative;overflow:hidden;aspect-ratio:1204/474;background:#141416;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:border-color .3s}
.card:hover .strip,.card:focus-visible .strip{border-top-color:var(--red);border-bottom-color:var(--red)}
.card .strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);
  transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.card:hover .strip img{transform:scale(1.045)}

/* tool products carry no photograph, they carry a spec */
.card.tool .strip{display:flex;flex-direction:column;justify-content:center;gap:.55rem;
  padding:1.2rem 1.3rem;background:#121214}
.card.tool .strip b{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--red-lit);font-weight:500}
.card.tool .strip span{font-family:var(--mono);font-size:.74rem;line-height:1.65;color:var(--dim)}

.card h3{margin:1rem 0 .5rem;font-size:1.02rem;font-weight:600;font-stretch:100%;line-height:1.3;
  letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);
  font-variant-numeric:tabular-nums}
.card .qty{color:var(--ink);font-weight:500}
.card .spec{color:var(--dim)}
.card .go{margin-top:auto;padding-top:.75rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);transition:color .3s}
.card:hover .go,.card:focus-visible .go{color:var(--red-lit)}
.card .go i{font-style:normal}

.empty{padding:4rem 0;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--dim)}

/* ── the tour that was here before the shop was ─────────── */
.demo{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 6vh}
.dbox{border:1px solid var(--line);border-left:2px solid var(--red);
  padding:clamp(1.8rem,4vw,3rem)}
.dbox .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--red-lit);margin-bottom:1.2rem}
.dbox h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;max-width:22ch}
.dbox p{margin:1.2rem 0 1.8rem;max-width:64ch;font-size:1rem;font-weight:300;line-height:1.8;
  color:var(--dim)}
.dlink{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:color .3s}
.dlink i{font-style:normal;color:var(--red)}
.dlink:hover{color:var(--red-lit)}

/* ── the other half of the offer, which is a real place ── */
.service{max-width:var(--maxw);margin:0 auto;padding:2vh var(--pad) 6vh}
.sbox{border:1px solid var(--line);border-left:2px solid var(--orange);
  padding:clamp(1.8rem,4vw,3rem)}
.sbox .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.2rem}
.sbox h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;max-width:20ch}
.sbox p{margin:1.2rem 0 1.8rem;max-width:64ch;font-size:1rem;font-weight:300;line-height:1.8;
  color:var(--dim)}
.slink{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:color .3s}
.slink i{font-style:normal;color:var(--orange)}
.slink:hover{color:var(--orange)}

/* ── how buying works ───────────────────────────────────── */
.how{max-width:var(--maxw);margin:0 auto;padding:6vh var(--pad) 10vh}
.how .eyebrow{margin-bottom:2.2rem}
.how ol{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:820px){.how ol{grid-template-columns:repeat(3,1fr)}}
.how li{background:var(--void);padding:1.7rem 1.6rem 1.9rem}
.how li b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--red-lit);margin-bottom:.9rem;font-weight:500}
.how li p{font-size:.98rem;font-weight:300;line-height:1.75;color:var(--dim)}
.how .note{margin-top:1.4rem;max-width:78ch;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.05em;line-height:1.95;color:var(--dim)}

/* ── closing call ───────────────────────────────────────── */
.close{max-width:var(--maxw);margin:0 auto;padding:2vh var(--pad) 14vh}
.close .box{border:1px solid var(--line);border-left:2px solid var(--red);
  padding:clamp(2rem,5vw,4rem);display:grid;gap:clamp(2.4rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) auto;align-items:center}

/* The ruler that ran flat under the stage comes back here bent into a circle,
   which is the same measurement and the same 360. The sphere sits still inside
   it; only the red arc travels. */
.orb{position:relative;display:grid;place-items:center;
  width:clamp(150px,19vw,264px);aspect-ratio:1}
.orb img{position:relative;width:72%;height:auto}
.orb .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.orb .ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--red);border-bottom-color:var(--red);
  animation:orbit 16s linear infinite}
@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* degree ticks, every 15 degrees, twenty-four of them */
.orb .ticks{position:absolute;inset:-9%;border-radius:50%}
@supports (mask-image:radial-gradient(#000,#000)){
  .orb .ticks{background:repeating-conic-gradient(var(--line-lit) 0 .6deg,transparent .6deg 15deg);
    -webkit-mask-image:radial-gradient(circle,transparent 0 46.5%,#000 46.5% 50%,transparent 50%);
    mask-image:radial-gradient(circle,transparent 0 46.5%,#000 46.5% 50%,transparent 50%)}
}
.close h2 .nb{white-space:nowrap}   /* a hyphenated number is one word */
.close h2{font-size:clamp(1.9rem,5.4vw,3.6rem);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;max-width:19ch;text-wrap:balance}
.close p{margin:1.4rem 0 2.6rem;max-width:56ch;font-size:1.02rem;font-weight:300;
  line-height:1.8;color:var(--dim)}
.cta{display:inline-flex;align-items:center;gap:.9em;font-size:clamp(1.15rem,3vw,2rem);
  font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;
  transition:gap .3s ease,color .3s ease}
.cta:hover{color:var(--red-lit);gap:1.4em}
.cta i{font-style:normal;color:var(--red)}

/* ── footer ─────────────────────────────────────────────── */
.foot{padding:2.6rem var(--pad) 3rem;display:flex;flex-wrap:wrap;gap:.8em 2em;align-items:baseline;
  justify-content:space-between;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
.foot .fend{display:flex;flex-wrap:wrap;gap:.8em 2em}
.foot a{transition:color .3s}
.foot a:hover{color:var(--orange)}

/* ── small screens ──────────────────────────────────────── */
@media(max-width:780px){
  :root{--pad:7vw}
  .stage{height:240vh}
  .words{justify-content:flex-end;padding-bottom:16vh}
  .nav{font-size:.6rem;letter-spacing:.18em}
  .nav .mark img{width:32px;height:32px}
  .lead{margin-top:1.4rem}
  .drag{margin-top:1.6rem}
  .flatcap{bottom:14vh}
  .grid{grid-template-columns:1fr}
  .chero-in{padding-top:7rem}
  h1 .kw{letter-spacing:.18em}
  .close .box{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .orb{order:-1;justify-self:start}
  .controls{align-items:flex-start;flex-direction:column;gap:1.4rem}
  .mf th:nth-child(4),.mf td:nth-child(4){display:none}
}
@media(max-width:400px){
  .filters .chip{font-size:.68rem;padding:.55rem .75rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .card:hover .strip img{transform:none}
  .nav .mark img,.nav .mark:hover img,.orb .ring::after{animation:none}
}