/* QreativMedia draft · layout and motion language after unveil.fr (studied, rebuilt). Black / white / grey UI, photos in colour. */

/* ---------- Tokens ---------- */
:root {
  --bg: 250 250 250;          /* #FAFAFA */
  --ink: 10 10 10;            /* #0A0A0A */
  --g1: 230 230 230;          /* tile fill / hairline */
  --g2: 179 179 179;          /* muted */
  --g3: 110 110 110;          /* secondary text */
  --tile: rgb(var(--g1) / .55);
  --tile-line: rgb(var(--ink) / .07);
  --glow: 0 0 0;            /* light mode: black glow (inverse of dark mode's white) */
  --orb: 0 0 0;
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fs: 10.5px;
  --ls: .015em;
  --gut: 4px;
  --pad: 14px;
  --e-out: cubic-bezier(.19, 1, .22, 1);      /* expo.out */
  --e-io: cubic-bezier(1, 0, 0, 1);           /* expo.inOut */
  --e-p1: cubic-bezier(.455, .03, .515, .955);/* power1.inOut */
  --e-p2: cubic-bezier(.215, .61, .355, 1);   /* power2.out */
}
:root[data-theme="dark"] {
  --bg: 10 10 10;
  --ink: 242 242 242;
  --g1: 38 38 38;
  --g2: 92 92 92;
  --g3: 150 150 150;
  --tile: rgb(var(--g1) / .5);
  --tile-line: rgb(255 255 255 / .07);
  --glow: 255 255 255;      /* dark mode: white glow */
  --orb: 200 200 200;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font: 400 var(--fs)/1.05 var(--font);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  transition: background-color .5s var(--e-p1), color .5s var(--e-p1);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid rgb(var(--ink)); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; } }

/* ---------- Stage ---------- */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: none;
  transition: opacity .75s var(--e-p1), filter .75s var(--e-p1); }
html.view-open #stage { opacity: 0; pointer-events: none; }
.grain { position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
:root[data-theme="dark"] .grain { opacity: .07; }
:root:not([data-theme="dark"]) .grain { opacity: .08; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
html.is-rm .grain { animation: none; }

/* ---------- Logo (client's Canva logo, traced to a sharp mask so it follows the theme colour) ---------- */
.logo { display: block; background: currentColor; -webkit-mask: url("../assets/web/logo.png") center / contain no-repeat; mask: url("../assets/web/logo.png") center / contain no-repeat; }

/* ---------- Loader / banner ---------- */
.loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgb(var(--bg)); }
.loader__pct { position: absolute; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); font-variant-numeric: tabular-nums; }
.loader__mark { width: min(420px, 72vw); aspect-ratio: 1399 / 632; opacity: 0; }
.loader__mark .logo { width: 100%; height: 100%; }
/* Particle logo (React Bits ParticleText, ported to plain JS): the logo forms from drifting dust, soft glow */
.loader__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; touch-action: none;
  filter: drop-shadow(0 0 5px rgb(var(--ink) / .45)); }
.loader__line { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; margin: 0; display: flex; justify-content: space-between; color: rgb(var(--g3)); opacity: 0; }
.loader__enter:hover { box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 18px rgb(var(--glow) / .35), 0 0 40px rgb(var(--glow) / .16); }
.loader__enter { transition: box-shadow .5s var(--e-p1); position: absolute; left: 50%; top: calc(50% + min(130px, 22vw)); transform: translateX(-50%); padding: 14px 16px; border-radius: 999px;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none; min-height: 44px; }
html.is-ready .loader__enter { pointer-events: auto; }
html:not(.is-loading) .loader { display: none; }

/* ---------- Brand (logo on its own, top-left) ---------- */
.brand { position: fixed; top: 14px; left: 16px; z-index: 41; display: flex; flex-direction: column; gap: 6px; color: rgb(var(--ink));
  transition: filter .5s var(--e-p1), transform .6s var(--e-out); }
.brand__logo { width: 150px; aspect-ratio: 1399 / 632; transition: filter .5s var(--e-p1); }
.brand__tag { color: rgb(var(--ink) / .45); padding-left: 2px; transition: color .5s var(--e-p1); }
.brand:hover { transform: translateY(-1px); }
.brand:hover .brand__logo { filter: drop-shadow(0 0 10px rgb(var(--glow) / .55)) drop-shadow(0 0 24px rgb(var(--glow) / .3)); }
.brand:hover .brand__tag { color: rgb(var(--ink) / .8); }

/* ---------- Nav: one frosted bar, numbered items, sliding glow highlight ---------- */
.nav { position: fixed; top: var(--gut); right: var(--gut); z-index: 40; display: flex; gap: 2px; align-items: stretch; }
.nav__bar { position: relative; display: flex; align-items: stretch; padding: 4px; border-radius: 10px;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line), 0 10px 30px -18px rgb(0 0 0 / .25);
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); }
.nav__glow { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 7px; pointer-events: none; z-index: 0;
  background: rgb(var(--bg) / .85); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08), 0 0 18px rgb(var(--glow) / .35), 0 0 42px rgb(var(--glow) / .18);
  transition: transform .6s var(--e-out), width .6s var(--e-out), opacity .35s var(--e-p2); }
:root[data-theme="dark"] .nav__glow { background: rgb(255 255 255 / .08); }
.nav__item { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 6px; min-width: 104px; height: 50px; padding: 0 14px 9px 12px; border-radius: 7px;
  color: rgb(var(--ink) / .35); transition: color .5s var(--e-p1), text-shadow .5s var(--e-p1); }
.nav__item sup { position: absolute; top: 9px; left: 12px; font-size: 8.5px; letter-spacing: .06em; color: rgb(var(--ink) / .3); transition: color .5s var(--e-p1); }
.nav__item.is-on, .nav__item:hover, .nav__item:focus-visible { color: rgb(var(--ink)); }
.nav__item:hover, .nav__item:focus-visible { text-shadow: 0 0 12px rgb(var(--glow) / .7); }
.nav__item.is-on sup, .nav__item:hover sup { color: rgb(var(--ink) / .6); }
.nav__item.is-on::after { content: ""; position: absolute; right: 10px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--ink));
  box-shadow: 0 0 8px rgb(var(--glow) / .9); }
.nav__theme { width: 58px; border-radius: 10px; display: grid; place-items: center; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: box-shadow .5s var(--e-p1); }
.nav__theme:hover, .nav__theme:focus-visible { box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 18px rgb(var(--glow) / .45), 0 0 40px rgb(var(--glow) / .2); }
.themeicon { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--ink)); overflow: hidden; }
.themeicon i { position: absolute; inset: 0; background: rgb(var(--ink)); transform: translateX(50%); transition: transform .75s var(--e-io); }
:root[data-theme="dark"] .themeicon i { transform: translateX(0); }
:root[data-theme="dark"] .nav__theme:hover .themeicon i { transform: translateX(50%); }
.nav__theme:hover .themeicon i { transform: translateX(0); }

/* ---------- Homepage ambient background (light, in theme) ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .9s var(--e-p1); }
html.view-open .ambient { opacity: .35; }
.ambient__orb { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
:root:not([data-theme="dark"]) .ambient__orb--a { background: radial-gradient(circle, rgb(0 0 0 / .32), transparent 62%) !important; }
:root:not([data-theme="dark"]) .ambient__orb--b { background: radial-gradient(circle, rgb(0 0 0 / .26), transparent 60%) !important; }
.ambient__orb--a { left: -18vmax; top: -22vmax; background: radial-gradient(circle, rgb(var(--orb) / .16), transparent 62%); animation: orbA 26s ease-in-out infinite alternate; }
.ambient__orb--b { right: -20vmax; bottom: -26vmax; background: radial-gradient(circle, rgb(var(--orb) / .12), transparent 60%); animation: orbB 32s ease-in-out infinite alternate; }
@keyframes orbA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vmax, 9vmax) scale(1.12); } 100% { transform: translate(6vmax, 18vmax) scale(.95); } }
@keyframes orbB { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vmax, -10vmax) scale(1.08); } 100% { transform: translate(-20vmax, -4vmax) scale(1.15); } }
.ambient__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
html.is-rm .ambient__orb { animation: none; }

/* rolling text on hover */
.roll { display: inline-flex; overflow: hidden; height: 1.1em; line-height: 1.1; }
.roll .ch { display: inline-block; position: relative; transition: transform .6s var(--e-out); transition-delay: calc(var(--i) * 18ms); }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
a:hover .roll .ch, button:hover .roll .ch, a:focus-visible .roll .ch { transform: translateY(-100%); }

/* ---------- Switch / footer / hint ---------- */
.switch { position: fixed; right: var(--gut); bottom: var(--gut); z-index: 40; display: flex; gap: 28px; align-items: center; height: 40px; padding: 0 15px; border-radius: 6px;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.switch a { opacity: .3; transition: opacity .5s var(--e-p2); padding: 12px 0; }
.switch a.is-on, .switch a:hover { opacity: 1; }
.switch a:hover { text-shadow: 0 0 12px rgb(var(--glow) / .7); }
.switch { transition: box-shadow .5s var(--e-p1); }
.switch:hover { box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 22px rgb(var(--glow) / .25); }
.foot { position: fixed; left: var(--gut); bottom: var(--gut); z-index: 40; display: flex; gap: 16px; align-items: center; height: 40px; padding: 0 12px; border-radius: 6px; color: rgb(var(--ink)); pointer-events: none;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.foot__time b { font-weight: 400; font-variant-numeric: tabular-nums; }
.hint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; z-index: 3; color: rgb(var(--g3)); pointer-events: none; transition: opacity .75s var(--e-p1); }
html.view-open .hint, html.hint-off .hint { opacity: 0; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: none; }
html.has-cursor.cursor-live .cursor { display: block; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgb(var(--ink)); transition: transform .5s var(--e-out); }
.cursor.is-hover .cursor__dot { transform: scale(2.2); }
.cursor__lbl { position: absolute; left: 14px; top: 10px; white-space: nowrap; padding: 8px 10px; border-radius: 4px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--e-p2), transform .5s var(--e-out); }
.cursor__lbl em { font-style: normal; color: rgb(var(--g3)); margin-left: 10px; }
.cursor.has-lbl .cursor__lbl { opacity: 1; transform: none; }

/* ---------- Views ---------- */
.views { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.view { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.view.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.view__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.view__inner { padding: 260px var(--pad) 120px; min-height: 100%; }
.rv { opacity: 0; transform: translateY(14px); }
html.is-rm .rv { opacity: 1; transform: none; }

/* Index */
.idx { max-width: 900px; }
.idx__head, .idx__rows li a { display: grid; grid-template-columns: 87px 213px 1fr 60px; gap: 0; }
.idx__head { margin-bottom: 26px; }
.idx__rows { list-style: none; margin: 0; padding: 0; }
.idx__rows li a { padding: 6px 0; color: rgb(var(--ink) / .45); transition: color .35s var(--e-p2); min-height: 23px; }
.idx__rows li a:hover, .idx__rows li a:focus-visible { color: rgb(var(--ink)); text-shadow: 0 0 12px rgb(var(--glow) / .6); }
.idx__rows li a span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.peek { position: fixed; z-index: 12; left: 0; top: 0; width: 220px; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .35s var(--e-p2); }
.peek img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .4); }
.peek.is-on { opacity: 1; }

/* Studio */
.studio { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; }
.studio__about { margin: 0 0 52px; text-transform: none; line-height: 13px; max-width: 402px; }
.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: 202px 1fr; margin-bottom: 33px; line-height: 13.1px; }
.kv dt { color: rgb(var(--ink) / .3); }
.kv dd { margin: 0; display: flex; flex-direction: column; }
.dither { position: fixed; top: 0; right: 0; width: min(450px, 31vw); margin: 0; aspect-ratio: 2 / 3; }
.dither canvas, .dither__colour { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.dither__colour { opacity: 0; transition: opacity .9s var(--e-p1); }
.dither:hover .dither__colour, .dither.is-colour .dither__colour { opacity: 1; }
.dither { transition: box-shadow .9s var(--e-p1); }
.dither:hover { box-shadow: 0 0 40px rgb(var(--glow) / .25), 0 0 90px rgb(var(--glow) / .12); }
.dither figcaption { position: absolute; left: 10px; bottom: -18px; color: rgb(var(--g3)); }

/* Services */
.svc { max-width: 900px; }
.svc__intro { text-transform: none; line-height: 13px; max-width: 402px; margin: 0 0 52px; }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(var(--ink) / .1); }
.svc__item { border-bottom: 1px solid rgb(var(--ink) / .1); }
.svc__head { width: 100%; display: grid; grid-template-columns: 87px 1fr auto; align-items: center; text-align: left; padding: 16px 0; min-height: 48px; color: rgb(var(--ink) / .45); transition: color .35s var(--e-p2); }
.svc__head:hover, .svc__item.is-open .svc__head { color: rgb(var(--ink)); }
.svc__head:hover { text-shadow: 0 0 12px rgb(var(--glow) / .6); }
.svc__plus { width: 9px; height: 9px; position: relative; }
.svc__plus::before, .svc__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; transition: transform .6s var(--e-out); }
.svc__plus::after { transform: rotate(90deg); }
.svc__item.is-open .svc__plus::after { transform: rotate(0); }
.svc__body { height: 0; overflow: hidden; }
.svc__body-in { display: grid; grid-template-columns: 87px minmax(0, 1fr) 240px; gap: 0 0; padding: 4px 0 26px; }
.svc__line { grid-column: 2; text-transform: none; line-height: 13px; margin: 0 0 18px; max-width: 420px; }
.svc__rows { grid-column: 2; margin: 0; padding: 0; list-style: none; }
.svc__rows li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid rgb(var(--ink) / .06); }
.svc__rows li span:nth-child(2) { color: rgb(var(--g3)); text-transform: none; }
.svc__acts { grid-column: 2; align-self: start; align-items: flex-start; display: flex; gap: 2px; margin-top: 18px; flex-wrap: wrap; }
.svc__thumb { grid-column: 3; grid-row: 1 / span 3; justify-self: end; width: 160px; aspect-ratio: 2/3; position: relative; display: block; }
.svc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

/* Pills */
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 14px 16px; border-radius: 6px; background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); white-space: nowrap; transition: background-color .35s var(--e-p2); }
a.pill:hover, button.pill:hover, a.pill:focus-visible, button.pill:focus-visible { background: rgb(var(--g1) / .95);
  box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 18px rgb(var(--glow) / .35), 0 0 40px rgb(var(--glow) / .16); }
.pill { transition: background-color .35s var(--e-p2), box-shadow .5s var(--e-p1); }
.pill--round { border-radius: 999px; }
.pill--ink { background: rgb(var(--ink)); color: rgb(var(--bg)); box-shadow: none; }
a.pill--ink:hover { background: rgb(var(--ink) / .85); box-shadow: 0 0 18px rgb(var(--ink) / .35), 0 0 40px rgb(var(--ink) / .18); }

/* Contact */
.contact { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--pad); }
.contact__logo { width: min(360px, 70vw); aspect-ratio: 1399 / 632; }
.contact__line { margin: 0 0 6px; }
.contact__pills { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }

/* Project */
.view--project { background: transparent; }
.proj { position: absolute; inset: 0; }
.proj__meta { position: absolute; left: var(--pad); top: 120px; z-index: 2; max-width: 300px; }
.proj__title { margin: 0 0 6px; }
.proj__cat { margin: 0 0 18px; color: rgb(var(--g3)); }
.proj__blurb { margin: 0 0 18px; text-transform: none; line-height: 13px; }
.car { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: min(66vh, 640px); outline: none; cursor: grab; touch-action: pan-y; }
.car:active { cursor: grabbing; }
.car__track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; gap: 12px; will-change: transform; }
.car__slide { height: 100%; flex: none; margin: 0; position: relative; }
.car__slide img { height: 100%; width: auto; border-radius: 3px; user-select: none; -webkit-user-drag: none; pointer-events: none;
  opacity: .35; filter: blur(6px); transform: scale(.94); transition: opacity .8s var(--e-out), filter .8s var(--e-out), transform .9s var(--e-out); }
.car__slide.is-on img { opacity: 1; filter: none; transform: none; }
/* Watermark: frosted QreativMedia Q in the centre of every photo (gallery, Index peek, Services thumbs), very translucent.
   Same recipe as the homepage cards: frosted blur inside the Q + a light white gradient (top-left 18% → bottom-right 5%). */
.car__slide::after, .peek::after, .svc__thumb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34.4%; aspect-ratio: 428 / 572; max-height: 46%;
  transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask: url(../assets/web/q-mark.png) center / contain no-repeat; mask: url(../assets/web/q-mark.png) center / contain no-repeat;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }
.peek::after, .svc__thumb::after { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.car__slide::after { transform: translate(-50%, -50%) scale(.94); opacity: .35; transition: opacity .8s var(--e-out), transform .9s var(--e-out); }
.car__slide.is-on::after { opacity: 1; transform: translate(-50%, -50%); }
.proj__bar { position: absolute; left: var(--pad); right: 220px; bottom: 56px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; z-index: 2; }
.proj__arrows { display: inline-flex; gap: 2px; }
.odo { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-variant-numeric: tabular-nums; overflow: hidden; }
.odo__col { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; }
.odo__col i { display: block; font-style: normal; transition: transform .9s var(--e-out); }
html.view-project .switch, html.view-project .hint { opacity: 0; pointer-events: none; }
html.view-project .foot { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .brand { top: 12px; left: 14px; }
  .brand__logo { width: 112px; }
  .brand__tag { display: none; }
  .nav { top: auto; bottom: 10px; left: 10px; right: 10px; justify-content: center; }
  .nav__bar { flex: 1; padding: 3px; border-radius: 14px; }
  .nav__item { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 6px 9px; justify-content: center; border-radius: 11px; }
  .nav__item sup { left: 50%; transform: translateX(-50%); top: 9px; }
  .nav__item.is-on::after { display: none; }
  .nav__glow { top: 3px; bottom: 3px; border-radius: 11px; }
  .nav__theme { width: 52px; border-radius: 14px; }
  .switch { top: 12px; bottom: auto; right: 10px; height: 36px; gap: 18px; padding: 0 12px; }
  .foot { display: none; }
  .foot span:first-child { display: none; }
  .hint { display: none; }
  .view__inner { padding-top: 120px; }
  .idx__head, .idx__rows li a { grid-template-columns: 48px 1fr 34px; }
  .idx__head span:nth-child(3), .idx__rows li a span:nth-child(3) { display: none; }
  .idx__rows li a { padding: 10px 0; }
  .peek { display: none; }
  .studio { grid-template-columns: 1fr; }
  .dither { position: relative; width: 100%; max-width: 420px; order: -1; margin-bottom: 30px; }
  .kv > div { grid-template-columns: 110px 1fr; }
  .svc__head { grid-template-columns: 34px 1fr auto; }
  .svc__body-in { grid-template-columns: 34px minmax(0, 1fr); }
  .svc__thumb { display: none; }
  .svc__rows li { grid-template-columns: 1fr auto; }
  .svc__rows li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .proj__meta { top: 78px; right: var(--pad); max-width: none; }
  .proj__blurb { display: none; }
  .car { height: 56vh; top: 54%; }
  .proj__bar { right: var(--pad); bottom: 84px; justify-content: space-between; }
  .car { top: 50%; height: 50vh; }
  .proj__arrows, #pNextProj { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}