/* ============================================================
   THE LEDGER — design system for rinkeshgorasia.com
   ------------------------------------------------------------
   Concept: an operator's record. The page is a document, not a
   screen. The record speaks in Hanken Grotesk; data speaks in
   Spline Sans Mono; red is reserved for what matters.

   Rules of the system:
   1. Two typefaces only. Hanken = words, Spline Mono = data
      (dates, figures, domains, labels of record).
   2. Red (--red) marks: status, verdicts, stamps, and focus.
      Never decoration. One red *idea* per region.
   3. Flat by default. Depth (shadow) is allowed only on
      evidence from outside the document (product screenshots).
   4. Structure is drawn with rules: 2px ink opens a section,
      1px --rule divides entries.
   5. Mobile is recomposed, not shrunk.
   ============================================================ */

:root[data-light="dawn"]{--paper:#FCFBF5}
:root[data-light="dusk"]{--paper:#FBF8F0}
:root[data-light="night"]{--paper:#F9F7F1}
:root{
  /* -- color ------------------------------------------------ */
  --paper:#FCFCF9;      /* white with a breath of warm grey    */
  --ink:#1C1C19;        /* text, heavy rules                   */
  --soft:#5F5E55;       /* secondary text                      */
  --faint:#97958A;      /* meta, labels (decorative minimum)   */
  --rule:#E8E6DE;       /* hairline dividers                   */
  --rule-dark:#CFCDC2;  /* borders that must hold a shape      */
  --red:#BE3E26;        /* bahi-khata red — status & verdicts  */
  --red-soft:#F4E4DD;   /* red at whisper volume (fills)       */
  --card:#FFFFFF;       /* surfaces that sit on the paper      */

  /* -- type ------------------------------------------------- */
  --sans:'Hanken Grotesk',-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;

  /* -- space (4px base) ------------------------------------- */
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem;  --s6:2.6rem; --s7:3.6rem; --s8:4.2rem;

  /* -- measure ---------------------------------------------- */
  --page:56rem;         /* the sheet */
  --prose:34rem;        /* comfortable line length */

  /* -- motion ----------------------------------------------- */
  --ease-out:cubic-bezier(.23,1,.32,1); /* strong, calm ease-out — the default UI curve */
  --pop:cubic-bezier(.34,1.4,.6,1);     /* a whisper of overshoot — the die & popovers only */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip} /* marks may bleed off the sheet; the sheet never scrolls sideways */
body{
  /* grain lives in the background tile itself (opacity baked into the SVG) —
     a fixed blend-mode overlay here defeats composited scrolling */
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
::selection{background:var(--red-soft)}
img{max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.mono{font-family:var(--mono);font-feature-settings:'tnum'}

/* ============ the sheet & the margin line =================== */
.wrap{max-width:var(--page);margin:0 auto;padding:0 1.5rem;position:relative}

/* ============ header ======================================== */
header{padding-top:2.2rem}
.h-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.85rem 0;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
}
.h-name{font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.h-right{display:flex;align-items:baseline;gap:1.5rem;position:relative}
.h-clock{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.06em;white-space:nowrap}
.h-row nav{display:flex;gap:1.6rem;align-items:baseline}
.h-row nav a{color:var(--soft);text-decoration:none;font-size:.88rem}
.h-row nav a:hover{color:var(--red)}
.h-row nav a.on{color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:2px}

/* ============ hero ========================================== */
.hero{display:grid;grid-template-columns:1fr 230px;gap:3.4rem;padding:var(--s8) 0 var(--s7);align-items:start}
h1{font-weight:600;font-size:2.7rem;line-height:1.08;letter-spacing:-.035em;margin-bottom:1.4rem}
h1 .dot{color:var(--red)}
.hero p{color:var(--soft);margin-bottom:1rem;max-width:33rem;font-size:1.05rem}
.hero p strong{color:var(--ink);font-weight:600}
a.ln{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-dark);text-underline-offset:3px}
a.ln:hover{text-decoration-color:var(--red);color:var(--red)}
/* availability — a quiet line that opens a small note on what I'm looking for */
/* lift the whole section so the popover floats above the next one, not under it */
section:has(.avail){position:relative;z-index:5}
.avail{position:relative;margin-top:1.7rem}
.avail-scrim{display:none}
.avail-trigger{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:none;border:0;padding:0;cursor:pointer}
.avail-trigger::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.avail-trigger .lbl{border-bottom:1px solid var(--rule-dark);padding-bottom:2px}
.avail-trigger .chev{font-size:.6rem;transition:transform .18s ease;opacity:.7}
.avail-trigger:hover{color:var(--red)}
.avail-trigger:hover .lbl{border-color:var(--red)}
.avail-trigger[aria-expanded="true"] .lbl{border-color:var(--red)}
.avail-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* grows from its top-left corner — the corner nearest the trigger above it */
.avail-pop{position:absolute;top:calc(100% + .75rem);left:0;z-index:50;width:21rem;max-width:88vw;background:var(--card);border:1px solid var(--ink);box-shadow:0 18px 40px -18px rgba(28,28,25,.4);padding:1rem 1.1rem;opacity:0;transform-origin:top left;transform:scale(.96);pointer-events:none;transition:opacity .16s ease,transform .18s var(--pop)}
.avail-pop.show{opacity:1;transform:none;pointer-events:auto}
.avail-pop .ap-head{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.5rem}
.avail-pop p{font-size:.95rem;line-height:1.5;color:var(--ink);margin:0 0 .7rem}
.avail-pop .ap-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding-top:.85rem;margin-top:.2rem;border-top:1px solid var(--rule)}
.avail-pop .ap-cta{font-family:var(--mono);font-size:.74rem;color:var(--red);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:baseline;gap:.5rem;text-align:left}
.avail-pop .ap-cta .em{border-bottom:1px solid var(--red-soft)}
.avail-pop .ap-cta .cp{font-size:.58rem;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.avail-pop .ap-cta:hover .em{border-color:var(--red)}
.avail-pop .ap-cta:hover .cp{color:var(--red)}
.avail-pop .ap-x{font-family:var(--mono);font-size:.7rem;color:var(--soft);text-decoration:none}
.avail-pop .ap-x:hover{color:var(--red)}
/* the "copied ✓" beat pops in — a small reward for a rare, satisfying action */
.avail-pop .ap-cta .ok{display:inline-flex;animation:copypop .15s var(--ease-out)}
@keyframes copypop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* portrait — placed on the record with crop marks */
.photo-cell{position:relative}
.ph-in{position:relative;display:block;cursor:pointer}
.ph-in img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;filter:saturate(.94)}
.ph-in::before,.ph-in::after,.ph-in .cm::before,.ph-in .cm::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.ph-in::before{top:-7px;left:-7px;border-top:1.5px solid var(--red);border-left:1.5px solid var(--red)}
.ph-in::after{top:-7px;right:-7px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red)}
.ph-in .cm::before{bottom:-7px;left:-7px;border-bottom:1.5px solid var(--red);border-left:1.5px solid var(--red)}
.ph-in .cm::after{bottom:-7px;right:-7px;border-bottom:1.5px solid var(--red);border-right:1.5px solid var(--red)}
.photo-cap{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-top:.8rem;display:flex;justify-content:space-between}
/* simba speaks */
.bubble{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:var(--card);border:1px solid var(--ink);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;
  padding:.3rem .6rem;white-space:nowrap;
  opacity:0;transform:translateY(4px) scale(.92);transform-origin:top right;
  transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.bubble::after{
  content:"";position:absolute;bottom:-5px;right:14px;width:8px;height:8px;
  background:var(--card);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:rotate(45deg);
}
.ph-in:hover .bubble,.ph-in.mrrp .bubble{opacity:1;transform:none}

/* ============ sections ====================================== */
section{padding:0 0 var(--s7)}
.sec-head{border-top:2px solid var(--ink);padding-top:.6rem;margin-bottom:.2rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sec-title{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sec-sub{font-size:.85rem;color:var(--faint);text-align:right}
/* "more" — a quiet link at the foot of a list, in the ledger's mono voice */
a.more{display:inline-block;margin-top:1.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--soft);text-decoration:none}
a.more:hover{color:var(--red)}

/* ============ ledger rows (track record) ==================== */
.row{
  display:grid;grid-template-columns:5.2rem 1fr 14.5rem;gap:2rem;
  padding:1.6rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;align-items:start;
}
.r-year{font-family:var(--mono);font-size:.78rem;color:var(--faint);padding-top:.45rem}
.r-name{font-weight:600;font-size:1.25rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.75rem}
.row:hover .r-name-t{color:var(--red)}
.lmk{width:30px;height:30px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.85;flex:none}
.row:hover .lmk{filter:none;opacity:1}
.lmk-m{width:30px;height:30px;flex:none;border:1px solid var(--rule-dark);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--soft)}
/* the house bracket — a small label flanked by a red square bracket. The red is
   reserved for the brackets; the word stays quiet. Simple, one mark, reused everywhere. */
.crop{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-left:.55rem;white-space:nowrap;vertical-align:middle}
.crop::before{content:"[";color:var(--red);margin-right:.5em}
.crop::after{content:"]";color:var(--red);margin-left:.5em}
.row p{color:var(--soft);font-size:.98rem;margin-top:.4rem;max-width:30rem}
/* figures of record — each fact stacked: quiet label, prominent value below.
   right-aligning a mix of numbers and phrases (85 vs "profitable → exit") left a
   ragged, gappy column; stacking lets the number own its line and phrases read clean. */
.r-figs{display:flex;flex-direction:column;gap:.95rem;border-left:1px solid var(--rule);padding-left:1.6rem}
.fig{display:flex;flex-direction:column;gap:.02rem}
.fig span{font-size:.72rem;color:var(--faint);letter-spacing:.02em}
.fig b{font-family:var(--mono);font-feature-settings:'tnum';font-size:1.02rem;color:var(--ink);font-weight:500;letter-spacing:-.005em;line-height:1.2}
.fig.key b{color:var(--red)}

/* ============ the lab (evidence frames) ===================== */
/* four live projects → a balanced 2×2 set; each card keeps real presence
   rather than shrinking into a cramped single row */
.lab{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:1.6rem}
.exp{text-decoration:none;color:inherit;display:block}
.frame{
  border:1px solid var(--rule-dark);background:var(--card);
  box-shadow:0 1px 2px rgba(28,28,25,.04), 0 12px 24px -22px rgba(28,28,25,.3);
  transition:transform .18s ease, box-shadow .18s ease;
}
.exp:hover .frame{transform:translateY(-3px);box-shadow:0 2px 3px rgba(28,28,25,.05), 0 18px 30px -22px rgba(28,28,25,.38)}
.frame-bar{display:flex;justify-content:space-between;align-items:center;padding:.4rem .7rem;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.64rem;color:var(--faint);letter-spacing:.04em}
.frame-bar .dotrow{display:flex;gap:4px}
.frame-bar .dotrow i{width:5px;height:5px;border-radius:50%;background:var(--rule-dark)}
.exp:hover .frame{border-color:var(--ink)}
.exp:hover .frame-bar .dotrow i:first-child{background:var(--red)}
/* a short preview banner (top of each product), not a full-height hero — keeps
   the shot supporting the card instead of dominating the 2×2 grid */
.shot{aspect-ratio:16/7;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* vouch has no product screenshot yet — a designed cover in its own brand
   (dark + gold wordmark), faithful to the live site. Swap for a real shot at
   assets/img/lab/vouch.jpg when there is one. */
.shot.vcover{background:#1b1a17;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#EFE9DD}
.shot.vcover .vq{font-family:var(--sans);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.34rem}
.shot.vcover .vq::before{content:"\201D";color:#E3A94F;font-size:1.7rem;line-height:.6}
.shot.vcover .vtag{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:#8f887a}
.shot.vcover .vtag b{color:#E3A94F;font-weight:500}
.exp-body{padding:.95rem .1rem 0}
.exp-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.exp-name{font-weight:700;font-size:1.05rem;letter-spacing:-.015em}
.exp:hover .exp-name{color:var(--red)}
.exp-body p{color:var(--soft);font-size:.9rem;margin:.25rem 0 .55rem}
.exp-fig{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.exp-fig b{font-feature-settings:'tnum';color:var(--ink);font-weight:500;font-size:.82rem}
/* vouch is new — no metrics yet; a quiet "just shipped" note holds the figure slot */
.exp-new{font-family:var(--mono);font-size:.72rem;color:var(--red);letter-spacing:.04em}

/* ============ writing (index rows — title-led, no catalog numbers) === */
.post{
  display:block;
  padding:1.55rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
}
.p-title{font-weight:600;font-size:1.35rem;letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:.6rem}
.p-title .go{color:var(--red);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s;font-weight:500}
.post:hover .p-title{color:var(--red)}
.post:hover .go{opacity:1;transform:none}
.p-ex{color:var(--soft);font-size:.98rem;margin-top:.35rem;max-width:var(--prose)}

/* ============ prose (essay interiors) ======================= */
.prose{max-width:var(--prose);font-size:1.08rem;line-height:1.72;color:var(--ink)}
.prose p{margin-bottom:1.25rem}
.prose h2{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin:2.4rem 0 .9rem}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-dark);text-underline-offset:3px}
.prose a:hover{color:var(--red);text-decoration-color:var(--red)}
.prose blockquote{border-left:2px solid var(--red);padding-left:1.2rem;color:var(--soft);margin:1.6rem 0}

/* ============ footer — editorial sign-off, bookends the header === */
footer{margin-top:var(--s7);border-top:2px solid var(--ink);padding:1.2rem 0 3.4rem}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.foot-name{font-weight:700;font-size:1rem;letter-spacing:-.01em;display:block}
.foot-nav{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right}
/* social — solid ink glyphs, one recognisable mark each */
.foot-social{display:inline-flex;align-items:center;gap:1.15rem}
.foot-social a{color:var(--soft);line-height:0;display:inline-flex}
.foot-social a:hover{color:var(--red)}
.foot-social svg{width:16px;height:16px;fill:currentColor}
.coffee-foot{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--soft);font-size:.88rem}
.coffee-foot:hover{color:var(--red)}
.coffee-foot svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.foot-top{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--faint);text-decoration:none}
.foot-top:hover{color:var(--red)}

/* ============ mobile — recomposed, not shrunk =============== */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:2.2rem;padding-top:var(--s7)}
  h1{font-size:2.15rem}
  /* portrait becomes a compact signature under the intro */
  .photo-cell{max-width:216px}
  .row{grid-template-columns:1fr;gap:.4rem;padding:1.5rem 0}
  .r-year{padding-top:0;order:-1}
  /* figures become a horizontal tally under the entry */
  .r-figs{border-left:none;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:1.5rem;margin-top:1rem}
  .fig{flex-direction:column;gap:.15rem;align-items:flex-start}
  .lab{grid-template-columns:1fr;gap:1.8rem}
  .p-title{font-size:1.2rem}
  .p-title .go{opacity:1;transform:none} /* touch has no hover — the arrow is always there */
}
@media(max-width:640px){
  body{font-size:16px}
  header{padding-top:1.4rem}
  /* header stacks: name row, then nav row */
  .h-row{flex-direction:column;align-items:flex-start;gap:.55rem;padding:.8rem 0}
  .h-row nav{gap:1.3rem}
  .hero{padding-top:2.6rem;padding-bottom:2.8rem}
  h1{font-size:1.95rem}
  .hero p{font-size:1rem}
}

/* the record settles into view as you read — a calm fade-up, no bounce */
.snap{opacity:0;transform:translateY(8px)}
.snap.in{opacity:1;transform:none;transition:transform .34s var(--ease-out),opacity .3s var(--ease-out)}

/* the die — somewhere on the board */
.roll{line-height:0;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.roll svg{width:19px;height:19px;vertical-align:-4px}
.roll .face{fill:#C08A4E;stroke:#1C1C19;stroke-width:1.4;stroke-linejoin:round}
.roll .pip{fill:#1C1C19}
.roll:hover .face{fill:#D09A5B}
/* grows from its top-right corner — the die sits just above it */
.die-pop{position:absolute;top:130%;right:0;z-index:50;width:15.5rem;background:var(--card);border:1px solid var(--ink);padding:.75rem .9rem;opacity:0;transform-origin:top right;transform:scale(.96);pointer-events:none;transition:opacity .16s ease,transform .18s var(--pop)}
.die-pop.show{opacity:1;transform:none;pointer-events:auto}
.die-pop .dp-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:.4rem}
.die-pop .dp-die{font-size:1rem;color:var(--red);line-height:1}
.die-pop p{font-size:.95rem;color:var(--ink);line-height:1.45}
.roll.rolling svg{animation:tumble .55s cubic-bezier(.3,.7,.4,1.2)}
@keyframes tumble{from{transform:rotate(0)}to{transform:rotate(360deg)}}



.steam{transform-box:fill-box;animation:steam 3.6s ease-in-out infinite;opacity:0}
.steam.s2{animation-delay:1.7s}
@keyframes steam{0%{opacity:0;transform:translateY(3px)}35%{opacity:.6}75%{opacity:0;transform:translateY(-3.5px)}100%{opacity:0;transform:translateY(-3.5px)}}



@media(max-width:640px){
  .h-clock{display:none}
  .die-pop{width:13rem}
  /* on phones the availability note is a bottom sheet — it slides up INTO the viewport
     so it's seen immediately, instead of opening off-screen below the trigger (which
     forced the visitor to hunt for it by scrolling) */
  .avail-scrim{display:block;position:fixed;inset:0;z-index:190;background:rgba(28,28,25,.5);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .avail-scrim.show{opacity:1;pointer-events:auto}
  .avail-pop{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:200;width:auto;max-width:none;margin:0;display:none;opacity:1;transform:none;pointer-events:auto;border:none;border-top:2px solid var(--ink);border-radius:16px 16px 0 0;box-shadow:0 -16px 44px -16px rgba(28,28,25,.45);padding:1.3rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom,0px))}
  .avail-pop.show{display:block;animation:sheetup .3s var(--ease-out)}
  .avail-pop::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--rule-dark);margin:-.15rem auto 1rem}
  body.avail-open{overflow:hidden}
  /* touch: expand hit areas to a comfortable size without moving the visuals */
  .h-row nav a{position:relative}
  .h-row nav a::after{content:"";position:absolute;top:-.55rem;bottom:-.55rem;left:-.4rem;right:-.4rem}
  .avail-trigger{padding:.45rem 0}
  .foot-social{gap:.35rem}
  .foot-social a{padding:.55rem}
  .coffee-foot,.foot-top{padding:.3rem 0}
  .foot-in{flex-direction:column;gap:1.6rem}
  .foot-nav{align-items:flex-start;text-align:left}
}

/* ============ motion discipline ============================= */
/* reduced motion = fewer, gentler — not zero. Stop looping/decorative motion and
   positional travel, but keep the opacity & colour fades that aid reading. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  /* popovers and the cat bubble settle by fade alone, no scale/travel */
  .avail-pop,.die-pop,.bubble{transform:none!important}
  /* card and thumbnail hovers hold still; their shadow still deepens */
  .exp:hover .frame,.build:hover .b-thumb{transform:none!important}
  /* the reading arrow appears without sliding */
  .p-title .go{transform:none!important}
}