/* ============================================
   NARINE MAGHAKYAN — PORTFOLIO
   Base design system
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Inter:wght@300..800&display=swap');

:root{
  --bg: #0a0a0b;
  --bg-alt: #111113;
  --panel: #16161a;
  --line: rgba(255,255,255,0.09);
  --text: #f4f3ef;
  --text-dim: #9a9a9f;
  --text-faint: #605f66;
  --accent: #d9ff4f;
  --accent-dim: #a3c93d;
  --radius: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --maxw: 1400px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  cursor:default;
}

h1,h2,h3,h4,.display{
  font-family:'Inter', sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.98;
}
.mono{ font-family:'Space Grotesk',sans-serif; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
@media(max-width:768px){ .wrap{ padding:0 20px; } }

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); transition:opacity .2s;
  mix-blend-mode:difference;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--accent); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),opacity .2s;
  mix-blend-mode:difference;
}
.cursor-ring.hover{ width:64px; height:64px; }
@media(hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

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

/* ---------- top nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 40px; mix-blend-mode:difference;
}
@media(max-width:768px){ .site-nav{ padding:18px 20px; } }
.site-nav .logo{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; letter-spacing:.02em; }
.site-nav .logo span{ color:var(--accent); }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
  font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text);
  position:relative; padding-bottom:3px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--text);
  transition:width .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-toggle{ display:none; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
@media(max-width:768px){
  .nav-links{
    position:fixed; inset:0; background:var(--bg); flex-direction:column; justify-content:center; gap:28px;
    transform:translateY(-100%); transition:transform .5s var(--ease); mix-blend-mode:normal; z-index:150;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ font-size:22px; }
  .nav-toggle{ display:block; z-index:201; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border:1px solid var(--line); border-radius:100px;
  font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn-solid{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }

/* ---------- section spacing ---------- */
section{ position:relative; padding:140px 0; }
@media(max-width:768px){ section{ padding:90px 0; } }
.section-label{
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
  display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.section-label::before{ content:''; width:28px; height:1px; background:var(--accent); }

/* ---------- reveal animation ---------- */
/* Safety: if JS never boots (or reduced-motion is on) nothing may stay hidden.
   js/main.js adds .js-motion to <html>; without it everything renders visible. */
html:not(.js-motion) .reveal,
html:not(.js-motion) .reveal-stagger > *,
html:not(.js-motion) .mk-i{
  opacity:1 !important; transform:none !important;
}
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.2s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.32s; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:80px 0 40px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px;
  padding-bottom:60px;
}
.footer-top h2{ font-size:clamp(32px,5vw,64px); max-width:680px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:30px; border-top:1px solid var(--line);
  font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;
}
.footer-socials{ display:flex; gap:24px; }
.footer-socials a{ color:var(--text-dim); transition:color .3s; }
.footer-socials a:hover{ color:var(--accent); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2a2e; }

/* ---------- utility ---------- */
.text-dim{ color:var(--text-dim); }
.text-accent{ color:var(--accent); }
.mt-lg{ margin-top:80px; }
.center{ text-align:center; }
.progress-bar{
  position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:300; width:0%;
}

/* ============================================
   WORK GRID — editorial, full-bleed, in-site
   ============================================ */
.work-intro{
  padding:200px 0 100px;
}
.work-intro .kicker{
  font-family:'Space Grotesk',sans-serif; font-size:14px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-dim); margin-bottom:28px;
}
.work-intro h1{
  font-size:clamp(38px,7.2vw,108px); max-width:1300px;
}
.work-intro .sub{
  color:var(--text-dim); font-size:clamp(16px,1.6vw,20px); max-width:640px; margin-top:32px;
  font-family:'Space Grotesk',sans-serif; font-weight:300;
}

.work-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:4px;
}
.work-item{ position:relative; overflow:hidden; background:#0d0d0f; display:block; }
.work-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s; filter:grayscale(.15) brightness(.92); }
.work-item:hover img{ transform:scale(1.035); filter:grayscale(0) brightness(1); }
.work-item .work-cap{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 2px 0;
}
.work-item .work-cap h3{ font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.work-item .work-cap span{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-family:'Space Grotesk',sans-serif; }

.work-lead{ grid-column:span 12; aspect-ratio:16/8; }
.work-half{ grid-column:span 6; aspect-ratio:4/3; }
.work-third{ grid-column:span 4; aspect-ratio:3/4; }
@media(max-width:900px){
  .work-half,.work-third{ grid-column:span 12; aspect-ratio:4/3; }
}

.work-tag{
  position:absolute; top:20px; left:20px; z-index:2;
  background:rgba(10,10,11,.7); backdrop-filter:blur(6px);
  padding:6px 14px; border-radius:100px; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; font-family:'Space Grotesk',sans-serif;
}

/* ============================================
   CLARA-ROTH-STYLE MASTHEAD + NUMBERED WORK LIST
   ============================================ */
.masthead{
  min-height:92vh; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding:110px 40px 60px; overflow:hidden;
}
.masthead-grid{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr);
  pointer-events:none;
}
.masthead-grid span{ border-right:1px solid var(--line); height:100%; }
.masthead-name{
  font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.04em;
  font-size:clamp(48px,10.5vw,168px); line-height:0.92; text-align:center;
  white-space:nowrap;
}
@media(max-width:900px){ .masthead-name{ white-space:normal; font-size:clamp(38px,13vw,90px); } }
.masthead-role{
  text-align:center; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(18px,2.6vw,32px); font-family:'Space Grotesk',sans-serif; font-weight:500;
  margin-top:18px; color:var(--text);
}
.masthead-foot{
  display:flex; justify-content:space-between; align-items:flex-end; margin-top:60px;
  font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--text-dim);
}
.masthead-foot p{ max-width:260px; line-height:1.5; }

.work-row{
  display:grid; grid-template-columns:1fr 2fr 1fr; gap:24px;
  border-top:1px solid var(--line); padding:48px 0; align-items:center;
}
.work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row .wr-num{ font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--text-faint); margin-bottom:16px; }
.work-row .wr-title{ font-size:clamp(24px,2.6vw,38px); line-height:1.05; }
.work-row .wr-arrow{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-top:24px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.work-row:hover .wr-arrow{ background:var(--text); border-color:var(--text); }
.work-row:hover .wr-arrow svg{ stroke:var(--bg); transform:rotate(90deg); }
.work-row .wr-arrow svg{ width:18px; height:18px; stroke:var(--text); transition:stroke .3s var(--ease), transform .4s var(--ease); }
.work-row .wr-media{
  aspect-ratio:3/4; overflow:hidden; border-radius:2px; background:#0d0d0f; max-width:503px;
}
/* Reference site (webxdemo artist1): static on scroll, pans with the
   cursor on hover. The follow itself is lerped in js/main.js. */
.work-row .wr-media img{ width:100%; height:100%; object-fit:cover; }
html.js-motion .work-row .wr-media img.wr-follow{
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--ms,1));
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  html.js-motion .work-row .wr-media img.wr-follow{ transform:none !important; }
}
.work-row .wr-meta{ text-align:right; font-family:'Space Grotesk',sans-serif; }
.work-row .wr-meta .wr-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); margin-bottom:6px; }
.work-row .wr-meta .wr-type{ font-size:14px; color:var(--text-dim); }
@media(max-width:900px){
  .work-row{ grid-template-columns:1fr; gap:20px; }
  .work-row .wr-meta{ text-align:left; }
}

/* ============================================
   MOTION SYSTEM
   All hidden states below are scoped to html.js-motion,
   which js/main.js adds only after it boots successfully.
   ============================================ */

/* smooth scroll takes over from native smooth behaviour */
html.js-smooth{ scroll-behavior:auto; }

/* ---------- text mask reveal ---------- */
html.js-motion [data-mask="1"] .mk{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.14em;
  margin-bottom:-0.14em;
}
html.js-motion [data-mask="1"] .mk-i{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1.05s var(--ease);
}
html.js-motion [data-mask="1"].mask-in .mk-i{ transform:translateY(0); }

/* ---------- image parallax ---------- */
@property --ps{ syntax:'<number>'; initial-value:1.12; inherits:false; }

html.js-motion .px-box{ overflow:hidden; }
html.js-motion .bnd-hero-media.px-box,
html.js-motion .pj-hero-media.px-box{ border-radius:4px; }
html.js-motion .fx-campaign-hero > .px-box{ border-radius:12px; }

html.js-motion .px-img{
  --py:0px;
  --ps:1.12;
  transform:translate3d(0,var(--py),0) scale(var(--ps));
  transition:--ps .8s var(--ease);
  will-change:transform;
}

/* ---------- interactive particle wordmark ---------- */
.hero-particles{ position:relative; }
.hero-particles canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.masthead-name.is-particled{ color:transparent; }

/* ---------- motion-safety ---------- */
@media (prefers-reduced-motion: reduce){
  html.js-motion [data-mask="1"] .mk-i{ transform:none !important; transition:none !important; }
  html.js-motion .px-img{ transform:none !important; }
  .masthead-name.is-particled{ color:var(--text) !important; }
  .hero-particles canvas{ display:none !important; }
}


/* ============================================
   RESPONSIVE LAYOUT PRIMITIVES
   These replace inline grid styles, which media
   queries could not override (inline wins).
   ============================================ */
.split{ display:grid; gap:60px; }
.split-bio{ grid-template-columns:1fr 1.3fr; }
.split-teaser{ grid-template-columns:1fr 1.4fr; align-items:center; }
.split-overview{ grid-template-columns:1fr 1.5fr; }
.split-even{ grid-template-columns:1fr 1fr; }

.cv-row{
  display:grid; grid-template-columns:1fr 2fr 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.cv-row-last{ border-bottom:none; }
.cv-row h3{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cv-tag{
  font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-faint);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  white-space:nowrap; line-height:1;
}
.cv-subhead{
  font-family:'Space Grotesk',sans-serif; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--text-faint);
  margin-top:34px; padding-bottom:14px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.cv-subhead::after{ content:''; flex:1; height:1px; background:var(--line); }

.fx-grid{ display:grid; gap:24px; }
.fx-grid-3{ grid-template-columns:repeat(3,1fr); }
.fx-grid-4{ grid-template-columns:repeat(4,1fr); }
.fx-grid-tight{ gap:16px; }
.fx-swatches{ display:grid; grid-template-columns:repeat(10,1fr); gap:8px; }

@media(max-width:1000px){
  .fx-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .split{ grid-template-columns:1fr !important; gap:40px; }
  .fx-grid-3{ grid-template-columns:1fr; }
  .cv-row{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .cv-row span{ text-align:left !important; }
  .cv-row span:first-child{ order:-1; font-size:13px !important; }
}
@media(max-width:560px){
  .fx-grid-4{ grid-template-columns:1fr; }
  .fx-swatches{ grid-template-columns:repeat(5,1fr); }
}

/* ---------- masthead on small screens ---------- */
@media(max-width:768px){
  .masthead{ padding:100px 20px 50px; min-height:88vh; }
  .masthead-foot{ flex-direction:column; align-items:flex-start; gap:18px; margin-top:44px; }
  .masthead-foot p{ max-width:none; }
  .masthead-foot p[style]{ text-align:left !important; }
  .masthead-role{ margin-top:14px; }
}

/* ---------- general small-screen tightening ---------- */
@media(max-width:768px){
  .work-row{ padding:36px 0; }
  .work-row .wr-media{ max-width:100%; }
  .footer-top{ padding-bottom:40px; gap:24px; }
  .footer-bottom{ gap:12px; }
  .site-footer{ padding:60px 0 32px; }
  .pj-facts{ gap:18px; margin-top:32px; padding-top:24px; }
  .bnd-block, .pj-block{ margin-top:80px; }
  .bnd-hero, .pj-hero{ gap:32px; }
}
@media(max-width:480px){
  .pj-facts{ grid-template-columns:1fr 1fr; }
  .pj-facts strong{ font-size:16px; }
  .btn{ padding:12px 20px; font-size:12px; }
}

/* nothing may ever scroll sideways */
html, body{ max-width:100%; overflow-x:hidden; }

/* ---------- page transition ---------- */
/* Element is created by JS only, so if JS fails there is no overlay at all. */
.page-fade{
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  pointer-events:none;
  opacity:1;
  transition:opacity .45s var(--ease);
}
.page-fade.is-out{ opacity:0; }
.page-fade.is-in{ opacity:1; transition:opacity .32s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .page-fade{ display:none !important; }
}

/* ============================================
   HOMEPAGE — two-column staggered work grid
   Single ordered grid (not two column divs) so
   source order stays 01..07 when it stacks on mobile.
   Stagger + scroll drift are both transforms, so they
   never affect layout.
   ============================================ */
.work-grid2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px 56px; align-items:start;
  padding-bottom:160px;
}

.wcard{
  display:block;
  --stagger:0px; --drift:0px;
  transform:translate3d(0, calc(var(--stagger) + var(--drift)), 0);
}
/* the stagger itself — only when the motion system is on */
html.js-motion .wcard:nth-child(even){ --stagger:88px; }

/* opacity-only reveal, so it can't fight the transform above */
html.js-motion .fade{ opacity:0; transition:opacity .9s var(--ease); }
html.js-motion .fade.in{ opacity:1; }

.wcard-media{
  position:relative;
  /* NOTE: no max-height here — combined with aspect-ratio it shrinks the
     WIDTH too, so the image stops filling its column and the caption
     below ends up wider than the picture. */
  aspect-ratio:3/2;
  overflow:hidden; border-radius:3px; background:#0d0d0f;
}
.wcard-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

/* ---------- horizontal marquee (looping asset rows) ----------
   The track holds the set TWICE and travels exactly -50%, so the
   loop is seamless. Spacing uses margin-right, not gap: `gap` adds
   one extra space across the duplicate seam and makes the loop jump.
   Pure CSS — no JS dependency, so the row is never blank.          */
.mq{
  position:relative; overflow:hidden;
  --mq-h:400px; --mq-gap:20px; --mq-dur:60s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.mq-track{
  display:flex; width:max-content;
  animation:mq-left var(--mq-dur) linear infinite;
}
.mq[data-dir="right"] .mq-track{ animation-name:mq-right; }
.mq-track img{
  height:var(--mq-h); width:auto; flex-shrink:0; display:block;
  margin-right:var(--mq-gap); border-radius:6px; background:#111;
  transition:transform .5s var(--ease);
}
.mq-track img:hover{ transform:translateY(-8px); }
.mq:hover .mq-track{ animation-play-state:paused; }

/* (a staggered/scaled variant lived here — removed: on sets that share one
   aspect ratio, varying size or baseline just reads as a mistake. Every row
   is flat and evenly aligned.) */
@keyframes mq-left{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@keyframes mq-right{
  from{ transform:translate3d(-50%,0,0); }
  to  { transform:translate3d(0,0,0); }
}
/* wide (16:9) sets sit shorter than the 4:5 sets so the rows feel even */
.mq-wide{ --mq-h:300px; }
@media(max-width:900px){
  .mq{ --mq-h:260px; --mq-gap:14px; }
  .mq-wide{ --mq-h:190px; }
}
@media (prefers-reduced-motion: reduce){
  .mq{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .mq-track{ animation:none; }
}

/* canvas ball loop — sits over the static cover, which stays as the
   no-JS / reduced-motion fallback underneath */
.ball-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:0; transition:opacity .45s var(--ease);
}
.ball-canvas.is-live{ opacity:1; }
.ball-stage{
  position:relative; width:100%; aspect-ratio:5/2;
  border-radius:4px; overflow:hidden; background:#000;
}
@media(max-width:900px){ .ball-stage{ aspect-ratio:3/2; } }

.wcard-foot{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; margin-top:20px;
}
.wcard-num{
  font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.1em;
  color:var(--text-faint); margin-bottom:9px;
}
.wcard-title{
  font-size:clamp(21px,2.1vw,31px); line-height:1.05; letter-spacing:-0.02em;
  max-width:15ch;
  transition:color .35s var(--ease);
}
.wcard:hover .wcard-title{ color:var(--accent); }
.wcard-type{
  font-family:'Space Grotesk',sans-serif; font-size:11px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-dim);
  text-align:right; max-width:14ch; line-height:1.5; flex-shrink:0;
}

@media(max-width:900px){
  .work-grid2{ grid-template-columns:1fr; gap:48px; padding-bottom:0; }
  html.js-motion .wcard:nth-child(even){ --stagger:0px; }
  .wcard{ transform:none !important; }
  .wcard-media{ aspect-ratio:3/2; }   /* same ratio as desktop so one export fits both */
  .wcard-title{ max-width:none; }
  .wcard-type{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wcard{ transform:none !important; }
}