/* ============================================================
   Lemonstone Design, the portfolio, v2: the shared look.
   Every opening (a/ to e/) loads this file and v2.js, so the five pages
   differ ONLY in their opening. The look is the dark home page's
   (design-dark): near-black ground, grain, Outfit 200 in silver for
   display, Urbanist for body and labels, hairlines that fade at the ends,
   the accent only as glows, short dashes and small ticks.
   Paths in this file are relative to this file (sites/portfolio/).
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/outfit-full.woff2) format('woff2')}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/urbanist.woff2) format('woff2')}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/comfortaa.woff2) format('woff2')}

:root{
  --g0:#050608; --g1:#08090C; --g2:#0E1015; --slate:#272C37;
  --ink:#F2F3F6; --ink2:#AAAFBA; --ink3:#767B86; --ink4:#555963;
  --hair:rgba(226,232,244,.14); --hair2:rgba(226,232,244,.08); --hair-hi:rgba(226,232,244,.3);
  --lemon:#FFE45C; --coral:#FF6B57; --magenta:#FF3D8A;
  --sunset:linear-gradient(90deg,#FFE45C 0%,#FF6B57 55%,#FF3D8A 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(16px,3.4vw,48px); --max:1560px; --gap:clamp(14px,1.7vw,26px); --nav:72px;
  --noise: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--g1);overflow-x:clip}
body{margin:0;background:var(--g1);color:var(--ink);font-family:'Urbanist',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;-webkit-tap-highlight-color:transparent;min-height:100svh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,li{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{position:relative;width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
:focus-visible{outline:1.5px solid rgba(255,255,255,.8);outline-offset:4px;border-radius:6px}
::selection{background:var(--magenta);color:#fff}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:10px;background:#fff;color:#000;font-weight:600}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main,.end{position:relative;z-index:2}
/* the grain: fixed, under the content, so the pictures stay clean */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:var(--noise);background-size:160px 160px}
.silver{background:linear-gradient(to bottom right,#fff 30%,rgba(255,255,255,.5));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dim{background:linear-gradient(to bottom right,#A3A8B2 20%,#80858F 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sheen{background:linear-gradient(100deg,#fff 0%,#fff 10%,rgba(255,255,255,.58) 37%,rgba(255,255,255,.5) 44%,#fff 52%,rgba(255,255,255,.5) 60%,rgba(255,255,255,.5) 100%);background-size:260% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- logo 54 / 53, the same rules as lemonstone.io ---------- */
.lemon{--s:1em;display:inline-block;flex:none;width:calc(var(--s) * 1.031);height:var(--s);background:currentColor;
  -webkit-mask:url(assets/lemon-mark-mask.png) center/contain no-repeat;mask:url(assets/lemon-mark-mask.png) center/contain no-repeat}
.lg54{display:flex;align-items:center;gap:.44em;font-family:'Outfit',sans-serif;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);text-decoration:none}
.lg54 .lemon{--s:1.7em;color:var(--lemon)}
.lg54 .w b{display:block;margin-left:.013em;font-family:'Comfortaa','Outfit',sans-serif;font-weight:700;font-size:.908em;line-height:1.1012;letter-spacing:-.03em;text-transform:lowercase;position:relative;top:.084em}
.lg54 .w .d{display:block;font-size:.52em;font-weight:500;letter-spacing:.22em;margin-right:-.22em;margin-top:.46em;text-transform:uppercase;opacity:.72}
.lg53{display:inline-flex;flex-direction:column;align-items:center;font-family:'Outfit',sans-serif;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);text-decoration:none}
.lg53 .lemon{--s:2em;color:var(--lemon);margin-bottom:.44em}
.lg53 b{font-family:'Comfortaa','Outfit',sans-serif;font-weight:700;font-size:.908em;line-height:1.1012;letter-spacing:-.03em;text-transform:lowercase;position:relative;top:.084em}
.lg53 .d{font-size:.52em;font-weight:500;letter-spacing:.22em;margin-right:-.22em;margin-top:.5em;text-transform:uppercase;opacity:.72}

/* ---------- buttons: the shaded silver one, and dark glass ---------- */
.btn,.btn-g{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px 0 22px;border-radius:999px;
  font:600 16px/1 'Urbanist',sans-serif;letter-spacing:.005em;white-space:nowrap;transition:background .25s,box-shadow .35s var(--ease),transform .35s var(--ease),color .25s}
.btn{color:#0b0b0c;
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 48%),linear-gradient(180deg,#f2f3f4 0%,#d7d9db 46%,#b9bcbf 54%,#d3d5d7 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.14),0 14px 34px -14px rgba(255,61,138,.55),0 10px 30px -12px rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn-g{color:#fff;border:1.5px solid rgba(255,255,255,.07);background:var(--noise),linear-gradient(104deg,rgba(253,253,253,.05) 5%,rgba(240,240,228,.1) 100%)}
.btn .wa,.btn-g .wa{width:19px;height:19px;flex:none}
.btn-g.sm{height:44px;padding:0 16px 0 14px;font-size:14.5px;gap:8px}
.btn-g.sm .wa{width:17px;height:17px}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 50%),linear-gradient(180deg,#f7f8f8 0%,#e1e3e4 46%,#c9cbce 54%,#e0e1e3 100%);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.28),0 18px 40px -14px rgba(255,61,138,.7),0 3px 32px rgba(255,255,255,.22)}
  .btn-g:hover{background:var(--noise),rgba(255,255,255,.92);color:#000}
}
.btn:active,.btn-g:active{transform:scale(.98)}

/* ---------- nav: laid over the opening ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top)}
.nav-in{height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .lg54{font-size:19px;padding:6px 0}

/* ---------- the opening: shared parts. Each page adds its own. ---------- */
.open{position:relative;isolation:isolate;overflow:clip;padding-top:calc(var(--nav) + env(safe-area-inset-top))}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky i{position:absolute;display:block}
.sky .glow{inset:0;background:
  radial-gradient(42% 52% at 72% 42%,rgba(255,255,255,.05),transparent 70%),
  radial-gradient(34% 30% at 10% 4%,rgba(255,255,255,.045),transparent 70%),
  radial-gradient(28% 26% at 76% 96%,rgba(255,61,138,.08),transparent 72%),
  radial-gradient(80% 50% at 50% 112%,rgba(39,44,55,.5),transparent 70%)}
/* the beam: a soft diagonal band that drifts. No blur filter: its own gradient is the softness. */
.sky .beam{top:-30%;right:12%;width:34%;height:160%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.028) 25%,rgba(255,255,255,.075) 46%,rgba(255,255,255,.03) 70%,rgba(255,255,255,0));transform:rotate(-24deg);will-change:transform}
html:not(.rm) .sky .beam{animation:beam 14s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.75;transform:rotate(-24deg) translateX(0)}50%{opacity:1;transform:rotate(-21deg) translateX(-46px)}}
.sky .arc{left:-20%;bottom:-62%;width:150%;height:90%;border-radius:50%;border-top:1.5px solid rgba(255,255,255,.08);box-shadow:0 -18px 70px -8px rgba(255,255,255,.06);transform:rotate(-6deg)}
/* the light that follows the pointer (laptop only, the page script turns it on) */
.sky .follow{left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;opacity:0;transition:opacity 1s;will-change:transform;
  background:radial-gradient(closest-side,rgba(255,255,255,.055),rgba(255,255,255,.016) 50%,transparent 74%)}
.open.live .sky .follow{opacity:1}
.open.off .sky .beam{animation-play-state:paused}
/* the opening's lights fade into the ground at its foot. The fade carries the same grain as the
   ground (the grain layer sits under the content), faded in by a mask on this still layer, so no edge shows. */
.open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;pointer-events:none;background:var(--noise),var(--g1);background-size:160px 160px,auto;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0),#000 92%);mask-image:linear-gradient(rgba(0,0,0,0),#000 92%)}

/* headlines, and the way their lines rise from behind a mask */
.h1{font-family:'Outfit',sans-serif;font-weight:200;line-height:.98;letter-spacing:-.045em}
.ln{display:block;overflow:clip;padding:0 .04em .12em 0;margin-bottom:-.12em}
.ln>span{display:inline-block}
.sub{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(19px,1.8vw,27px);line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
html.js:not(.rm) .ld>span{animation:lnIn 1.2s var(--ease) both;animation-delay:var(--d,0s)}
html.js:not(.rm) .fd{animation:ldIn 1.1s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes lnIn{from{transform:translateY(108%)}}
@keyframes ldIn{from{opacity:0;transform:translateY(16px)}}
@keyframes fdIn{from{opacity:0}}
/* a quiet text link with an arrow (to the grid, or to a project) */
.qlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1 'Urbanist',sans-serif;color:var(--ink2);transition:color .25s}
.qlink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.qlink.dash::before{content:"";width:16px;height:1px;flex:none;background:var(--lemon)}
@media (hover:hover){.qlink:hover{color:#fff}.qlink:hover svg{transform:translateY(2px)}.qlink.fw:hover svg{transform:translateX(3px)}}

/* a hairline that draws itself, a sunset comet riding its tip */
.hl{position:relative;height:1px}
.hl i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.3) 14%,rgba(255,255,255,.2) 60%,rgba(255,255,255,0))}
.hl s{position:absolute;left:0;top:0;width:100%;height:1px;text-decoration:none;opacity:0}
.hl s::after{content:"";position:absolute;right:0;top:0;width:28px;height:1px;background:var(--sunset);box-shadow:0 0 12px 1px rgba(255,61,138,.55)}
html.js:not(.rm) .hl i{transform-origin:0 0;animation:draw 1.7s var(--ease) both;animation-delay:var(--d,.5s)}
html.js:not(.rm) .hl s{animation:comet 1.7s var(--ease) both,cometOut .6s 2.1s both;animation-delay:var(--d,.5s),calc(var(--d,.5s) + 1.5s)}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes comet{from{transform:translateX(-100%);opacity:1}to{transform:none;opacity:1}}
@keyframes cometOut{from{opacity:1}to{opacity:0}}

/* ---------- the bar: what is shown, and how many across ---------- */
.bar-sentinel{height:1px;margin-bottom:-1px;scroll-margin-top:0}
.bar{position:sticky;top:0;z-index:20;transition:background .3s}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(226,232,244,0),rgba(226,232,244,.12) 18%,rgba(255,255,255,.3) 50%,rgba(226,232,244,.12) 82%,rgba(226,232,244,0))}
.bar.stuck{background:var(--noise),rgba(8,9,12,.92)}
.bar.stuck::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .bar.stuck{background:var(--noise),rgba(8,9,12,.72);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px;padding:6px 0}
.count{color:var(--ink2);font-size:14.5px;font-weight:500}
.count b{color:var(--ink);font-weight:600}
/* All / Websites / Apps: words on a hairline, the shown one lit with a short lemon dash */
.tabs{display:flex;align-items:center;gap:0 22px}
.tabs[hidden]{display:none}
.tabs button{position:relative;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 1px;font:500 15.5px/1 'Urbanist',sans-serif;letter-spacing:.005em;color:var(--ink3);transition:color .25s}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:rgba(255,255,255,.1);transition:background .3s}
.tabs button::before{content:"";position:absolute;left:0;bottom:5px;width:14px;height:1px;z-index:1;background:var(--lemon);opacity:0;transform:scaleX(.3);transform-origin:0 50%;transition:opacity .3s,transform .45s var(--ease)}
.tabs button[aria-pressed="true"]{color:#fff;font-weight:600}
.tabs button[aria-pressed="true"]::after{background:rgba(255,255,255,.6)}
.tabs button[aria-pressed="true"]::before{opacity:1;transform:none}
.tabs .n{font:500 12px/1 'Urbanist',sans-serif;color:var(--ink4);font-variant-numeric:tabular-nums;transition:color .25s}
.tabs button[aria-pressed="true"] .n{color:var(--ink2)}
@media (hover:hover){.tabs button:hover{color:var(--ink)}}
/* 2 / 3 / 4 across: small icons, the chosen one white with a lemon tick under it */
.view{display:flex;align-items:center;gap:6px}
.view-l{font:500 11px/1 'Urbanist',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-right:6px}
.cols{display:flex;align-items:center}
.cols button{position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--ink4);transition:color .25s}
.cols button svg{width:22px;height:15px;display:block}
.cols button::after{content:"";position:absolute;left:50%;bottom:5px;width:10px;height:1px;margin-left:-5px;background:var(--lemon);opacity:0;transform:scaleX(.3);transition:opacity .3s,transform .45s var(--ease)}
.cols button[aria-pressed="true"]{color:#fff}
.cols button[aria-pressed="true"]::after{opacity:1;transform:none}
@media (hover:hover){.cols button:hover{color:var(--ink)}}

/* ---------- the grid ---------- */
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:calc(var(--gap) * 1.45) var(--gap);padding:14px 0 0}
.card{display:block;color:var(--ink);min-width:0;border-radius:14px}
.card[hidden]{display:none}
.shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:12px;container-type:size;background:#000;
  box-shadow:0 0 0 1px var(--hair2),0 22px 40px -28px rgba(0,0,0,.8);transition:box-shadow .6s var(--ease)}
.shot img.site{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transition:transform .9s var(--ease)}
/* hover: the edge brightens and the business's own colour glows under it */
.card:hover .shot,.card:focus-visible .shot{box-shadow:0 0 0 1px var(--hair-hi),0 34px 70px -34px color-mix(in srgb,var(--ac,#fff) 62%,transparent)}
/* The picture is the first screens of the site. Hovering scrolls down it. */
@media (hover:hover){
  html:not(.rm) .card:hover .shot img.site{transform:translateY(calc(-100% + 100cqh));transition:transform var(--travel,7s) cubic-bezier(.4,0,.35,1) .15s}
}
/* A business with both a website and an app: the website on the left, the app's phone on its logo on the right. */
.shot .half{position:absolute;inset:0 37% 0 0;overflow:hidden}
.shot .side{position:absolute;inset:0 0 0 63%;overflow:hidden;background:radial-gradient(90% 70% at 50% 46%,color-mix(in srgb,var(--ac) 42%,#0c0d10),#0c0d10 100%);box-shadow:-1px 0 0 var(--hair-hi)}
.shot .side .logo{position:absolute;left:50%;top:50%;width:84%;height:78%;max-width:none;object-fit:contain;transform:translate(-50%,-50%);opacity:.26}
.shot .side .phone{position:absolute;z-index:2;left:50%;top:13cqh;--pw:19.5cqw;width:var(--pw);margin-left:-9.75cqw;padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .17);
  background:linear-gradient(150deg,#43464e,#17181c 38%,#08080a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 20px 40px -14px rgba(0,0,0,.9)}
.shot .side .phone span{display:block;position:relative;overflow:hidden;aspect-ratio:var(--pa,390/844);border-radius:calc(var(--pw) * .138);background:#000}
.shot .side .phone img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.cap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 2px 0}
.who{display:flex;flex-direction:column;min-width:0}
.name{display:inline-flex;align-items:center;gap:9px;font:300 19.5px/1.2 'Outfit',sans-serif;letter-spacing:-.012em}
.name svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .5s var(--ease)}
.card:hover .name svg,.card:focus-visible .name svg{opacity:1;transform:none}
.type{margin-top:4px;font:500 13.5px/1.35 'Urbanist',sans-serif;letter-spacing:.01em;color:var(--ink3)}
/* the cards rise once, when the grid first comes into view */
html.js:not(.rm) .grid:not(.in) .card{opacity:0}
html.js:not(.rm) .grid.in:not(.settled) .card{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

/* ---------- the closing: the dark home page's, then the lemon logo ---------- */
.end{margin-top:clamp(90px,14vh,160px);text-align:center;overflow:clip}
.end-in{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:clamp(64px,10vh,110px)}
.end-in::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 30%,rgba(255,255,255,.12) 70%,rgba(255,255,255,0))}
.h2{font-family:'Outfit',sans-serif;font-weight:220;font-size:clamp(40px,4.8vw,68px);line-height:1.04;letter-spacing:-.036em}
.end .lede{margin-top:18px;max-width:30em;font-size:clamp(17px,1.36vw,19px);line-height:1.62;color:var(--ink2);text-wrap:balance}
.end .btn{margin-top:34px}
.end-mark{position:relative;width:100%;margin-top:clamp(70px,10vh,112px);display:flex;flex-direction:column;align-items:center}
.end-glow{position:absolute;left:50%;top:-70%;width:min(760px,150vw);height:240%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,228,92,.1),rgba(255,107,87,.045) 42%,rgba(255,61,138,.025) 60%,transparent 76%)}
.end .lg53{position:relative;font-size:26px}
.end-line{position:relative;display:block;width:min(100%,560px);height:1px;margin-top:34px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 30%,rgba(255,255,255,.16) 70%,rgba(255,255,255,0))}
.end-line b{position:absolute;left:calc(50% - 12px);top:0;width:24px;height:1px;background:var(--sunset)}
.end-small{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 24px;margin-top:8px;padding-bottom:calc(26px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink4)}
.end-small a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink3);transition:color .2s}
@media (hover:hover){.end-small a:hover{color:#fff}}

/* ---------- a phone, drawn like the cards' phone (openings B and C) ---------- */
.ph{display:block;width:var(--pw,200px);padding:calc(var(--pw,200px) * .034);border-radius:calc(var(--pw,200px) * .17);
  background:linear-gradient(150deg,#43464e,#17181c 38%,#08080a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1.5px 1px rgba(255,255,255,.22),0 40px 70px -26px rgba(0,0,0,.95)}
.ph>span{display:block;position:relative;overflow:hidden;aspect-ratio:var(--pa,390/844);border-radius:calc(var(--pw,200px) * .138);background:#000}
.ph img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}

@media (max-width:639px){
  :root{--nav:64px}
  .nav .lg54{font-size:17.5px}
  .view-l{display:none}
  .bar-in{gap:8px;min-height:60px}
  .tabs{gap:0 16px}
  .tabs button{font-size:15px}
  .tabs .n{display:none}
  .name{font-size:18.5px}
  .grid[data-cols="2"] .cap{flex-direction:column;gap:6px;padding-top:10px}
  .grid[data-cols="2"] .name{font-size:15.5px}
  .grid[data-cols="2"] .type{font-size:12.5px}
}

/* reduced motion and ?static=1: everything in its finished state */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}