/* Layout: editorial one-pager after jasminemaduafokwa.com.
   "/ Label" left column + content right; statement hero; accordion services; 2-up works grid; table; dark footer with giant type.
   Palette: Pantone Cloud Dancer (paper), Classic Blue (ink, footer), Viva Magenta (accent). */
:root{
  --bg:#F0EEE9;
  --fg:#0F4C81;
  --ink:#0F4C81;          /* footer / buttons */
  --on-ink:#F0EEE9;
  --muted:#5B7593;
  --line:#C9CCCB;
  --accent:#BB2649;
  --tint:#E4E5E2;
  --f-sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,.84,.24,1);
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1A2C;--fg:#F0EEE9;--ink:#F0EEE9;--on-ink:#0B1A2C;--muted:#9DB0C5;--line:#2A3D53;--accent:#E0577A;--tint:#13263C;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1A2C;--fg:#F0EEE9;--ink:#F0EEE9;--on-ink:#0B1A2C;--muted:#9DB0C5;--line:#2A3D53;--accent:#E0577A;--tint:#13263C;color-scheme:dark}
@media (min-width:800px){:root{--gut-l:max(24px,env(safe-area-inset-left,0px));--gut-r:max(24px,env(safe-area-inset-right,0px))}}
::selection{background:var(--accent);color:#fff}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-sans);font-weight:500;font-size:16px;line-height:1.4;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
.gut{padding-left:var(--gut-l);padding-right:var(--gut-r)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}

/* Buttons and pills */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);border-radius:999px;padding:11px 20px;font:500 14px var(--f-sans);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:8px 14px;font-size:12px}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.pill{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:3px 10px;font-size:12px;line-height:1.3;white-space:nowrap}
.pills{display:flex;flex-wrap:wrap;gap:6px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.logo{font-weight:800;font-size:26px;letter-spacing:-.05em;line-height:1}
.nav{display:flex;align-items:center;gap:18px;font-size:12px;text-transform:uppercase;letter-spacing:.01em}
.roll{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:top}
.roll > span{display:block;transition:transform .5s var(--ease)}
.roll > span::after{content:attr(data-t);display:block}
.roll:hover > span{transform:translateY(-50%)}
@media (max-width:720px){.nav .opt{display:none}}

/* Hero */
.hero{padding-block:clamp(36px,6vw,70px) clamp(22px,3vw,34px)}
.statement{font-size:clamp(2.3rem,1.2rem + 3.6vw,4.6rem);font-weight:500;line-height:1.03;letter-spacing:-.045em;max-width:17ch;text-wrap:balance}
.statement em{font-style:normal;color:var(--accent)}
.w{display:inline-block;white-space:pre}
.w > span{display:inline-block;animation:word 1s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 150ms)}
@keyframes word{from{opacity:0;filter:blur(10px);transform:translateY(.35em)}}
.hero-media{overflow:hidden}
.hm{position:relative;height:min(82vh,860px);overflow:hidden;background:var(--tint);clip-path:inset(0 var(--cx,0px) 0 var(--cx,0px));will-change:clip-path}
.hm img{width:100%;height:115%;object-fit:cover;position:absolute;top:-7.5%;left:0;will-change:transform;animation:heroin 1.6s .35s var(--ease) both}
@keyframes heroin{from{opacity:0;transform:scale(1.12)}}

/* Sections */
.sec{display:grid;gap:22px;padding-block:clamp(60px,9vw,120px) 0}
@media (min-width:900px){.sec{grid-template-columns:minmax(150px,1fr) 3fr;column-gap:24px}}
.label{font-size:13px;text-transform:uppercase;letter-spacing:.01em;padding-top:.4em}
.sec-body{min-width:0;display:grid;gap:36px}
@media (min-width:900px){.sec-body.full{grid-column:1/-1}}
.lead{font-size:clamp(1.45rem,1rem + 1.5vw,2.45rem);line-height:1.12;letter-spacing:-.035em;max-width:30ch}
.lead .w{opacity:var(--o,1);transition:opacity .35s}
.about-pics{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.about-pics figure{margin:0;overflow:hidden;background:var(--tint);aspect-ratio:1.44/1}
@media (max-width:560px){.about-pics{grid-template-columns:1fr}}
.about-pics img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.about-pics figure:hover img{transform:scale(1.05)}

/* Services accordion */
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.acc li{border-bottom:1px solid var(--fg)}
.acc button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding-block:clamp(12px,1.6vw,20px);cursor:pointer}
.acc button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acc .n{font-size:12px;vertical-align:super}
.acc .t{font-size:clamp(1.6rem,1rem + 2.6vw,3.3rem);font-weight:500;text-transform:uppercase;letter-spacing:-.04em;line-height:1;height:1em;overflow:hidden;display:block}
.acc .t span{display:block;transition:transform .55s var(--ease)}
.acc .t span::after{content:attr(data-t);display:block;color:var(--accent)}
.acc button:hover .t span{transform:translateY(-50%)}
.acc .plus{font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.acc li.open .plus{transform:rotate(45deg)}
.acc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc li.open .panel{grid-template-rows:1fr}
.acc .panel > div{overflow:hidden}
.acc .panel p{padding:0 0 12px;max-width:72ch;font-size:clamp(.95rem,.9rem + .25vw,1.1rem)}
.acc .kw{padding-bottom:22px}
.acc .kw .pill{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.acc li.open .kw .pill{opacity:1;transform:none}
.acc li.open .kw .pill:nth-child(2){transition-delay:.05s}.acc li.open .kw .pill:nth-child(3){transition-delay:.1s}
.acc li.open .kw .pill:nth-child(4){transition-delay:.15s}.acc li.open .kw .pill:nth-child(5){transition-delay:.2s}.acc li.open .kw .pill:nth-child(6){transition-delay:.25s}
.center{display:flex;justify-content:center}

/* Works grid */
.works{display:grid;gap:clamp(28px,3vw,40px) 16px}
@media (min-width:760px){.works{grid-template-columns:1fr 1fr}}
.wk{display:grid;gap:10px}
.wk .im{aspect-ratio:16/10.5;overflow:hidden;background:var(--tint);max-width:100%}
.wk .im img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.1s var(--ease)}
.wk:hover .im img{transform:scale(1.06)}
.wk h3{font-size:clamp(1.4rem,1rem + 1vw,2rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.wk:hover h3{color:var(--accent)}

/* Illustration row */
.ill-row{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;cursor:grab}
.ill-row::-webkit-scrollbar{display:none}
.ill-row figure{margin:0;flex:0 0 auto;display:grid;gap:8px}
.ill-row .fr{height:clamp(260px,40vw,480px);overflow:hidden;background:var(--tint)}
.ill-row img{height:100%;width:auto;max-width:none;transition:transform 1s var(--ease)}
.ill-row figure:hover img{transform:scale(1.04)}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-weight:500;font-size:13px;padding:0 10px 10px 0;border-bottom:1px solid var(--fg)}
.tbl td{padding:14px 10px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr{transition:background .3s}
.tbl tbody tr:hover{background:var(--tint)}
.tbl td:last-child{text-align:right;color:var(--accent)}
@media (max-width:640px){.tbl th:nth-child(3),.tbl td:nth-child(3){display:none}}

/* Footer */
.foot{background:var(--ink);color:var(--on-ink);margin-top:clamp(70px,9vw,120px);padding-top:clamp(28px,3vw,40px);overflow:hidden}
.foot-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.foot-grid{grid-template-columns:1fr 1fr 2fr 1.2fr}}
.flinks{list-style:none;margin:0;padding:0;font-size:12px;text-transform:uppercase;display:grid;gap:4px;align-content:start}
.flinks a:hover{color:var(--accent)}
.fmail{display:grid;gap:8px;align-content:start;grid-column:1/-1}
@media (min-width:900px){.fmail{grid-column:auto}}
.fmail code{font:500 clamp(1.1rem,1rem + .6vw,1.5rem) var(--f-sans);letter-spacing:-.02em;user-select:all;word-break:break-all}
.fmail .btn{justify-self:start}
.fnote{font-size:12px;text-transform:uppercase;text-align:right;grid-column:1/-1}
@media (min-width:900px){.fnote{grid-column:auto}}
.giant{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.8;white-space:nowrap;text-align:right;padding-top:clamp(30px,5vw,70px);margin-bottom:-.06em}

/* Case study page */
.case{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--ease);visibility:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.case.open{clip-path:inset(0 0 0 0);visibility:visible}
.case-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding-block:16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.c-head{display:grid;gap:20px;padding-block:16px 36px}
@media (min-width:900px){.c-head{grid-template-columns:1fr 1fr;gap:24px;align-items:start}}
.c-cover{aspect-ratio:16/11;overflow:hidden;background:var(--tint);max-width:100%}
.c-cover img,.c-cover video{width:100%;height:100%;object-fit:cover}
.c-info{display:grid;gap:14px;align-content:start}
.c-info h2{font-size:clamp(2.6rem,1rem + 4.5vw,5.4rem);font-weight:500;letter-spacing:-.05em;line-height:.95}
.c-info .desc{font-size:clamp(1rem,.95rem + .3vw,1.15rem);max-width:58ch}
.c-info .desc p + p{margin-top:.7em}
.c-info .sub{font-size:clamp(1.2rem,1rem + .6vw,1.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;max-width:30ch}
.c-info .tools{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.c-link{justify-self:start;margin-top:6px}
.c-info .tools b{background:var(--ink);color:var(--on-ink);border-radius:999px;padding:3px 10px;font-weight:500;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--fg);border-left:0;border-right:0;margin-bottom:36px}
@media (min-width:760px){.stats{grid-template-columns:repeat(var(--n,4),1fr)}}
.stat{text-align:center;padding:22px 10px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:13px;color:var(--muted)}
.c-blocks{display:grid;gap:clamp(56px,7vw,96px);padding-block:30px 20px}
.cs{display:grid;gap:24px}
.cs + .cs{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.blk{display:grid;gap:12px}
@media (min-width:900px){.blk{grid-template-columns:minmax(150px,1fr) 3fr;gap:24px}}
.blk h3{font-size:13px;text-transform:uppercase;font-weight:500;padding-top:.5em}
.blk .bd{font-size:clamp(1rem,.95rem + .25vw,1.18rem);line-height:1.55;letter-spacing:-.01em;max-width:62ch}
.blk .bd > p:first-child{font-size:clamp(1.2rem,1rem + .7vw,1.6rem);line-height:1.3;letter-spacing:-.025em}
.blk .bd ul{margin:10px 0 0;padding-left:1.1em;display:grid;gap:6px}
.blk .bd p + p,.blk .bd h4 + p{margin-top:.5em}
.blk .bd p + p{margin-top:.7em}
.blk .bd h4{font-size:1.08em;font-weight:700;letter-spacing:-.025em;margin:1.3em 0 0;color:var(--fg)}
.blk .bd h4:first-child{margin-top:0}
.blk .bd strong{font-weight:700;color:var(--accent)}
.c-gal{display:grid;gap:16px}
@media (min-width:760px){.c-gal{grid-template-columns:repeat(12,1fr)}.c-gal figure{grid-column:span var(--span,6)}.c-gal .wide{grid-column:1/-1}.c-gal .third{grid-column:span 4}.c-gal .quarter{grid-column:span 3}}
@media (min-width:500px) and (max-width:759px){.c-gal{grid-template-columns:1fr 1fr}.c-gal .wide{grid-column:1/-1}}
.c-gal figure{margin:0;display:grid;gap:8px;align-self:start}
.c-gal .fr{background:var(--tint);overflow:hidden}
.c-gal img,.c-gal video{width:100%;height:auto}
/* Every image in a row sits in a frame of the same shape, so rows line up; full-width images keep their own ratio */
.c-gal figure:not(.wide) .fr{position:relative;aspect-ratio:4/3;background:var(--tint)}
.c-gal figure.third .fr{aspect-ratio:1/1;background:#FAFAFC}
.c-gal figure:not(.wide) .fr img,.c-gal figure:not(.wide) .fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.c-gal figure.third .fr img,.c-gal figure.third .fr video{padding:2%}
.c-gal figcaption{font-size:13px;color:var(--muted)}
.c-next{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--fg);margin-top:50px;padding-block:22px 70px;font-size:clamp(1.4rem,1rem + 2vw,3rem);text-transform:uppercase;font-weight:500;letter-spacing:-.04em}
.c-next a:hover{color:var(--accent)}
.c-next small{display:block;font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
body.locked{overflow:hidden}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:0;height:0;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease);display:grid;place-items:center}
.cursor.big{width:84px;height:84px}
.cursor span{font:500 12px var(--f-sans);color:#fff;opacity:0;transition:opacity .2s}
.cursor.big span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* Reveal */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.pre{opacity:0;transform:translateY(36px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv.pre{opacity:1;transform:none}
  .cursor{display:none}
}

/* YouTube poster */
.yt{position:relative;display:block}
.yt img{width:100%;height:auto;transition:transform .8s var(--ease)}
.yt:hover img{transform:scale(1.02)}
.yt .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:24px;padding-left:5px;transition:transform .4s var(--ease)}
.yt:hover .play{transform:scale(1.12)}

/* Small centred media (e.g. low-res video posters) */
.c-gal figure.center{justify-self:center;width:min(100%,560px)}

/* Themed case studies (a project can bring its own palette and display font) */
.case.themed{background:var(--bg);color:var(--fg);color-scheme:light}
.case.themed .case-bar{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.case.themed .stat b{color:var(--accent)}
.case.themed .c-gal figure:not(.wide) .fr{background:var(--tint)}
.c-gal figure.quarter .fr{aspect-ratio:4/5}
.case.themed .c-gal figure.third .fr{aspect-ratio:4/5}
.c-gal figure.quarter .fr img,.case.themed .c-gal figure.third .fr img{object-fit:cover;padding:0}
.c-gal figure.tall .fr{aspect-ratio:4/5}
.c-gal figure.tall .fr img{object-fit:cover;padding:0}
.disc{margin:0;display:grid;border-top:1px solid var(--fg)}
.disc div{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.disc dt{font-weight:700}
.disc dd{margin:0}
.blk .bd .btn{margin-top:.4em;font-size:15px}

/* Data figures inside case studies (bars and dot counts) */
.fig{margin:28px 0 8px;padding:22px 0 0;border-top:1px solid var(--fg)}
.fig h5{margin:0 0 4px;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.fig .note{margin:0 0 18px;font-size:.85rem;color:var(--muted)}
.bars{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;align-items:center;gap:12px;font-size:.95rem}
.bars .tr{height:12px;border-radius:0 6px 6px 0;background:color-mix(in srgb,var(--line) 60%,transparent);position:relative;overflow:hidden}
.bars .fl{position:absolute;inset:0 auto 0 0;width:0;background:var(--fg);border-radius:0 6px 6px 0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.bars li.hi .fl{background:var(--accent)}
.bars li.hi{font-weight:700}
.bars b{font-variant-numeric:tabular-nums;min-width:3.6em;text-align:right}
.fig.in .fl{width:var(--w)}
.dots{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.dots li{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center}
.dots .d{display:flex;gap:5px;grid-row:span 2}
.dots .d i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--fg);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.dots .d i.on{background:var(--accent);border-color:var(--accent)}
.fig.in .dots .d i{opacity:1;transform:none}
.dots strong{font-size:1.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dots span{font-size:.95rem;line-height:1.35}
@media (max-width:640px){.bars li{grid-template-columns:1fr auto;}.bars .tr{grid-column:1/-1;grid-row:2}.dots li{grid-template-columns:1fr}.dots .d{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.bars .fl,.dots .d i{transition:none}}
.blk .bd .fig ul{padding-left:0;margin:0}
.fig{margin-bottom:24px}
.dots .d{min-width:185px}
.blk .bd .dots strong{color:var(--fg)}
/* fit: keep the image's own proportions inside a column (no 4:3 frame) */
.c-gal figure.fit .fr{aspect-ratio:auto;background:transparent}
.c-gal figure.fit .fr img{position:static;height:auto;padding:0;object-fit:initial}
/* YouTube poster inside a framed (non-wide) gallery item */
.c-gal figure:not(.wide) .fr .yt{position:absolute;inset:0}
.c-gal figure.wide .yt .play{width:96px;height:96px;margin:-48px 0 0 -48px;font-size:30px}
/* Section labels stay on one line */
.label{white-space:nowrap}
/* Header canvas (Feelings slideshow) sits exactly where the hero image was */
.hm .hero-gl{position:absolute;left:0;top:-7.5%;width:100%;height:115%;display:block;will-change:transform;animation:heroin 1.6s .35s var(--ease) both;cursor:crosshair}

/* Links and buttons take the red accent from the headline */
.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.blk .bd a:not(.btn),.c-info .desc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.nav .roll:hover,.flinks a:hover{color:var(--accent)}

/* Header sized to the Feelings collages (2.39:1) so they show almost whole, not zoomed */
.hm{height:auto;aspect-ratio:1.8/1;max-height:88vh}
.hm img,.hm .hero-gl{top:-3%;height:106%}
@media (max-width:720px){.hm{aspect-ratio:4/3.6}}

/* Smaller "View" bubble */
.cursor.big{width:58px;height:58px}
.cursor span{font-size:11px}
/* Card bulge canvas (desktop hover) */
.wk .im{position:relative}
.wk .im .card-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.wk .im.gl-on img{transform:none;transition:none}

/* Anchors (About, Works...) land below the sticky header, with a smooth scroll */
html{scroll-behavior:smooth}
.sec,#contact{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Case study overlay scrolls on its own on phones without dragging the page behind */
.case{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Touch screens: a tap must not leave hover effects stuck (red titles, zoomed images, rolled menu) */
@media (hover:none){
  .roll:hover > span,.acc button:hover .t span{transform:none}
  .nav .roll:hover,.flinks a:hover,.wk:hover h3,.c-next a:hover{color:inherit}
  .wk:hover .im img{transform:scale(1.01)}
  .about-pics figure:hover img,.ill-row figure:hover img,.yt:hover img{transform:none}
  .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.ghost:hover{background:transparent;color:inherit;border-color:currentColor}
  .tbl tbody tr:hover{background:transparent}
  .yt:hover .play{transform:none}
}