/* =========================================================
   VCDW.IO — Vivid Craft. Digital Worlds
   Shared stylesheet. Plain CSS, no framework, Cloudflare-ready.
   ========================================================= */

:root{
  --ivory:      #f3efe6;
  --paper:      #ece6da;
  --ink:        #171614;
  --ink-soft:   #55524b;

  --black:      #000000;
  --panel-line: rgba(255,255,255,.09);
  --panel-line-strong: rgba(255,255,255,.18);
  --text:       #f2f1ee;
  --text-mid:   #b7b4ad;
  --text-dim:   #7c7a74;

  --maxw: 1080px;          /* tightened for density */
  --gap: 28px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

.serif{
  font-family:"Fraunces","Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-weight:400;letter-spacing:-.012em;
}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;font-weight:500}

/* =========================================================
   CURSOR LIQUID FIELD + INTRO PETALS  (canvas overlays)
   ========================================================= */
#wave,#petals{position:fixed;inset:0;pointer-events:none}
#wave{z-index:4;mix-blend-mode:screen;opacity:0;transition:opacity .7s var(--ease)}
#wave.on{opacity:1}
#petals{z-index:5}

/* =========================================================
   INTRO — pre-state (added by an inline script, so no-JS is safe)
   ========================================================= */
.pre .hero-copy .ln > i{transform:translateY(110%)}
.pre .hero-copy .eyebrow,
.pre .hero-copy .lede,
.pre .hero-cue,
.pre .reel{opacity:0}

/* =========================================================
   NAV
   ========================================================= */
.masthead{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px;
}
.masthead.on-dark{position:sticky;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-line)}
.brand{line-height:1.1}
.brand .word{font-size:17px;letter-spacing:.34em;font-weight:600}
.brand .tag{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.on-dark .brand .tag{color:var(--text-dim)}
.navlinks{display:flex;gap:24px;padding-top:3px}
.navlinks a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  opacity:.7;transition:opacity .3s var(--ease)}
.navlinks a:hover,.navlinks a:focus-visible{opacity:1}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;min-height:88vh;
  display:flex;align-items:center;
  background:radial-gradient(120% 90% at 18% 8%, #f7f4ec 0%, var(--ivory) 46%, var(--paper) 100%);
  color:var(--ink);isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.05;mix-blend-mode:multiply;
}
.hero::after{
  content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 60% at 26% 30%, rgba(30,26,20,.15), transparent 60%),
    radial-gradient(30% 42% at 70% 20%, rgba(30,26,20,.09), transparent 62%),
    radial-gradient(46% 66% at 78% 82%, rgba(30,26,20,.12), transparent 60%);
  filter:blur(22px);animation:drift 42s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.06)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}

.hero-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 28px;
  position:relative;z-index:6;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;gap:30px;
}
.hero-copy{transform-origin:center center;will-change:transform}
.hero-copy .eyebrow{color:var(--ink-soft);margin:0 0 22px}
.hero-copy h1{margin:0;font-size:clamp(2.3rem,5.1vw,4.5rem);line-height:1.04}
.hero-copy h1 em{font-style:italic}
.ln{display:block;overflow:hidden}
.ln > i{display:block;font-style:normal}
.hero-copy .lede{margin:26px 0 0;max-width:33ch;font-size:clamp(.95rem,1.15vw,1.06rem);color:var(--ink-soft)}

/* ---- Selected Work invitation, inside the first screen ---- */
.hero-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--ink);
}
.hero-cue .eyebrow{color:var(--ink-soft)}
.hero-cue .cue-title{font-size:clamp(1.15rem,1.9vw,1.55rem)}
.hero-cue .cue-sub{font-size:12px;letter-spacing:.1em;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px}
.hero-cue .arrow{display:inline-block;font-style:normal;animation:bob 2.6s var(--ease) infinite}
.hero-cue:hover .cue-title{opacity:.65}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* =========================================================
   FILM REEL in the hero
   ========================================================= */
.reel{
  position:relative;justify-self:center;
  width:min(42vw,430px);aspect-ratio:1/1;
  will-change:transform,opacity;
}
.reel-spin{position:absolute;inset:0;animation:reelspin 66s linear infinite}
@keyframes reelspin{to{transform:rotate(360deg)}}
.reel-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.reel-ring circle{fill:none;stroke:rgba(23,22,20,.30)}
.reel-cell{
  position:absolute;top:50%;left:50%;
  width:23%;aspect-ratio:1/1;margin:-11.5% 0 0 -11.5%;
  border-radius:11px;overflow:hidden;
  background:#0e0e10;border:1px solid rgba(23,22,20,.22);
  box-shadow:0 10px 22px -12px rgba(23,22,20,.5);
}
.reel-cell img{width:100%;height:100%;object-fit:contain}
.reel-hub{
  position:absolute;top:50%;left:50%;width:11%;aspect-ratio:1/1;margin:-5.5% 0 0 -5.5%;
  border-radius:50%;border:1px solid rgba(23,22,20,.28);background:rgba(23,22,20,.05);
  transition:width .7s var(--ease),margin .7s var(--ease),background .7s var(--ease),
             border-color .7s var(--ease),box-shadow .7s var(--ease);
}
/* the cells + hub animate between the two forms */
.reel-cell{transition:transform .7s var(--ease),border-radius .7s var(--ease),
  background .7s var(--ease),border-color .7s var(--ease),box-shadow .7s var(--ease)}
.reel-ring circle{transition:opacity .6s var(--ease)}

/* ---------- FLOWER FORM ----------
   Same seven icons, re-read as petals around a glowing core.
   Hovering the object flips between this and the film reel.        */
.reel.bloom .reel-cell{
  width:27%;margin:-13.5% 0 0 -13.5%;
  border-radius:64% 64% 58% 58% / 78% 78% 42% 42%;
  background:radial-gradient(120% 100% at 50% 12%, #1a1a20 0%, #0d0d11 68%);
  border-color:rgba(23,22,20,.14);
  box-shadow:0 14px 30px -14px rgba(23,22,20,.45);
}
.reel.bloom .reel-cell img{transform:scale(.86)}
.reel-cell img{transition:transform .7s var(--ease)}
.reel.bloom .reel-hub{
  width:17%;margin:-8.5% 0 0 -8.5%;
  border-color:rgba(255,214,140,.55);
  background:radial-gradient(circle at 50% 42%, #ffe6b0 0%, #f6c977 46%, #e0a94e 100%);
  box-shadow:0 0 34px rgba(255,206,130,.55),0 8px 20px -8px rgba(120,86,20,.4);
}
.reel.bloom .reel-ring circle{opacity:0}

/* =========================================================
   TRANSITION ivory -> black  (slim; text now lives in the hero)
   ========================================================= */
.transition{
  height:210px;
  background:linear-gradient(180deg,var(--paper) 0%,#918c82 30%,#2b2b2d 66%,var(--black) 100%);
  position:relative;z-index:6;
}

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.stage{background:var(--black);padding:4px 0 34px;position:relative;z-index:6}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}

.card{
  position:relative;display:block;border-radius:var(--radius);
  background:linear-gradient(180deg,#0c0c0e 0%,#050506 100%);
  border:1px solid var(--panel-line);overflow:hidden;
  transform-origin:center center;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
  will-change:transform;
}
/* the lone last card must match a column EXACTLY (percentage of the grid, not a fixed calc) */
.card.solo{grid-column:1 / -1;width:calc((100% - var(--gap))/2);max-width:none;margin-inline:auto}
.card:focus-visible{outline:2px solid #fff;outline-offset:3px}

.grid.intro .card{opacity:0}
.grid.intro{pointer-events:none}

/* ---- media: folder holds, object lifts ---- */
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card-media::before{
  content:"";position:absolute;width:64%;height:56%;top:24%;left:18%;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--glow,rgba(255,255,255,.16)),transparent 72%);
  opacity:.5;filter:blur(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.card-media .layer{position:absolute;inset:0;z-index:1}
.card-media .layer img{width:100%;height:100%;object-fit:contain}

/* -- MODE A (fallback): one flat icon shared by two layers.
   IMPORTANT — the two masks are NOT complementary ramps. Two 50% layers
   composite to only 75% of the original ("b + (1-b)a" with b = 1-a), which
   paints a dark band straight across the icon. Instead the BOTTOM layer stays
   fully opaque through the whole feather zone and the TOP layer fades in over
   it, so at rest the composite is EXACTLY the original everywhere.          -- */
.card-media .layer.lift{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--split,47%) + 4%),transparent calc(var(--split,47%) + 9%));
          mask-image:linear-gradient(to bottom,#000 calc(var(--split,47%) + 4%),transparent calc(var(--split,47%) + 9%));
}
.card-media .layer.hold{
  z-index:2;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--split,47%) - 7%),#000 calc(var(--split,47%) + 4%));
          mask-image:linear-gradient(to bottom,transparent calc(var(--split,47%) - 7%),#000 calc(var(--split,47%) + 4%));
}
/* -- MODE B (perfect): two transparent PNGs, no mask needed at all -- */
.card-media.split2 .layer.lift,
.card-media.split2 .layer.hold{-webkit-mask-image:none;mask-image:none}
.card-media.split2 .layer.hold{z-index:2}

/* -- MODE C (today, one flat image): no mask at all. The whole icon floats,
      so nothing is ever sliced through the middle of the object. -- */
.card-media.whole .layer.lift{-webkit-mask-image:none;mask-image:none}

.card-media .layer.lift img{transform:translateY(0) scale(1);transition:transform .58s var(--ease)}

.card-body{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:16px 18px 18px;border-top:1px solid var(--panel-line);
  position:relative;z-index:3;background:linear-gradient(180deg,#0b0b0d 0%,#050506 100%);
}
.card-index{font-size:11px;letter-spacing:.2em;color:var(--text-dim);font-weight:600}
.card-title{margin:5px 0 0;font-size:clamp(1.02rem,1.6vw,1.28rem);font-weight:400}
.card-explore{margin:7px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mid);opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.card-arrow{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--panel-line-strong);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text);
  transition:transform .55s var(--ease),background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
}

@media (hover:hover){
  .card:hover{transform:translateY(-6px);border-color:var(--panel-line-strong);
    box-shadow:0 28px 56px -26px rgba(0,0,0,.9)}
  .card:hover .card-media .layer.lift img{transform:translateY(-7%) scale(1.025)}
  .card:hover .card-media.whole .layer.lift img{transform:translateY(-4%) scale(1.055)}
  .card:hover .card-media::before{opacity:.95;transform:scale(1.08)}
  .card:hover .card-explore{opacity:1;transform:translateY(0)}
  .card:hover .card-arrow{transform:translate(4px,-4px);background:#fff;color:#000;border-color:#fff}
}
.card:focus-visible .card-media .layer.lift img{transform:translateY(-7%) scale(1.025)}
.card:focus-visible .card-explore{opacity:1;transform:translateY(0)}
.card:focus-visible .card-arrow{transform:translate(4px,-4px);background:#fff;color:#000}

.card.opening{transform:translateY(-10px) scale(1.012);border-color:var(--panel-line-strong)}
.card.opening .card-media .layer.lift img{transform:translateY(-11%) scale(1.05);transition-duration:.44s}
.card.opening .card-media.whole .layer.lift img{transform:translateY(-6%) scale(1.09);transition-duration:.44s}
.card.opening .card-media::before{opacity:1;transform:scale(1.16)}
.card.opening .card-arrow{transform:translate(8px,-8px);background:#fff;color:#000;border-color:#fff}

/* =========================================================
   ABOUT / FOOTER
   ========================================================= */
.about{padding:104px 0 34px;background:var(--black);position:relative;z-index:6}
.about .eyebrow{color:var(--text-dim);margin-bottom:24px}
.about p{margin:0 0 18px;max-width:23ch;font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.18}
.about .meta{font-size:.98rem;color:var(--text-mid);max-width:46ch;line-height:1.6;
  font-family:"Inter",sans-serif;letter-spacing:0}
.about .avail{color:var(--text-mid);border-top:1px solid var(--panel-line);
  margin-top:32px;padding-top:20px;font-size:.93rem;max-width:46ch}

.foot{background:var(--black);padding:96px 0 42px;border-top:1px solid var(--panel-line);
  position:relative;z-index:6}
.foot h2{margin:0;font-size:clamp(1.85rem,4.6vw,3.4rem);line-height:1.04;max-width:16ch}
.foot .cta{display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--panel-line-strong);padding-bottom:8px;
  transition:gap .4s var(--ease),border-color .4s var(--ease);cursor:pointer}
.foot .cta:hover{gap:20px;border-color:#fff}
.foot .social{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:52px;font-size:12.5px;letter-spacing:.06em}
.foot .social a{color:var(--text-mid);transition:color .3s var(--ease);cursor:pointer}
.foot .social a:hover{color:#fff}
.foot .fine{margin-top:48px;padding-top:22px;border-top:1px solid var(--panel-line);
  display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:flex-end;
  color:var(--text-dim);font-size:12px;letter-spacing:.04em}
.fine-brand .fb-word{display:block;font-size:14px;letter-spacing:.3em;color:var(--text);font-weight:600}
.fine-brand .fb-tag{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.1em;color:var(--text-mid)}

/* =========================================================
   EMAIL CHOOSER MODAL
   ========================================================= */
.mask{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .3s var(--ease)}
.mask.open{display:flex}
.mask.show{opacity:1}
.modal{width:100%;max-width:410px;background:linear-gradient(180deg,#131316,#0a0a0c);
  border:1px solid var(--panel-line-strong);border-radius:18px;padding:28px 24px 22px;
  transform:translateY(12px) scale(.98);transition:transform .38s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.mask.show .modal{transform:none}
.modal h3{margin:0;font-size:1.4rem;font-weight:400}
.modal .addr{margin:9px 0 20px;font-size:13px;color:var(--text-mid);letter-spacing:.03em}
.modal .opts{display:flex;flex-direction:column;gap:9px}
.modal .opt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-radius:11px;border:1px solid var(--panel-line);
  background:rgba(255,255,255,.03);font-size:13.5px;color:var(--text);cursor:pointer;
  width:100%;text-align:left;font-family:inherit;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.modal .opt:hover{background:rgba(255,255,255,.09);border-color:var(--panel-line-strong);transform:translateX(3px)}
.modal .opt .go{color:var(--text-dim);font-size:12.5px}
.modal .opt.copied .go{color:#7fe0a8}
.modal .close{margin-top:16px;width:100%;background:none;border:0;color:var(--text-dim);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  font-family:inherit;padding:8px;transition:color .3s var(--ease)}
.modal .close:hover{color:#fff}

/* =========================================================
   CATEGORY PAGE
   ========================================================= */
.cat-head{padding:138px 0 36px;background:var(--black);position:relative;z-index:6}
.back{display:inline-flex;align-items:center;gap:10px;margin-bottom:40px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mid);
  transition:gap .4s var(--ease),color .3s var(--ease)}
.back:hover{gap:16px;color:#fff}
.cat-head .num{font-size:12px;letter-spacing:.24em;color:var(--text-dim);font-weight:600}
.cat-head h1{margin:12px 0 0;font-size:clamp(2.1rem,5.2vw,3.8rem);line-height:1.02}
.cat-head .desc{margin:22px 0 0;max-width:52ch;font-size:1.05rem;color:var(--text-mid);line-height:1.6}

.projects{padding:48px 0 34px;background:var(--black);position:relative;z-index:6}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.project{border:1px solid var(--panel-line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0c0c0e,#050506);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.project:hover{transform:translateY(-5px);border-color:var(--panel-line-strong)}
.project .cover{aspect-ratio:16/10;background:#141417;overflow:hidden}
.project .cover img,.project .cover video{width:100%;height:100%;object-fit:cover}
.project .pbody{padding:20px 20px 22px}
.project .ptop{display:flex;justify-content:space-between;gap:14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.project h3{margin:11px 0 7px;font-size:1.3rem;font-weight:400}
.project p{margin:0 0 18px;color:var(--text-mid);font-size:.95rem}
.project .actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;
  font-size:12px;letter-spacing:.08em;border:1px solid var(--panel-line-strong);
  transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:#fff;color:#000}
.btn.solid{background:#fff;color:#000;border-color:#fff}
.btn.solid:hover{background:transparent;color:#fff;border-color:var(--panel-line-strong)}

.empty{border:1px dashed var(--panel-line-strong);border-radius:16px;
  padding:72px 28px;text-align:center;color:var(--text-mid)}
.empty .big{font-size:1.4rem;color:var(--text);margin-bottom:10px}
.empty .small{font-size:.98rem}

/* =========================================================
   GAME DETAIL PAGE
   ========================================================= */
.gamewrap{padding:130px 0 40px;background:var(--black);position:relative;z-index:6}
.gmeta{display:flex;gap:18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:12px}
.gamewrap h1{margin:0;font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.03}
.gtag{margin:12px 0 30px;font-size:1.12rem;color:var(--text-mid)}

/* looping gameplay demo above the live game */
.gdemo{width:100%;border-radius:16px;display:block;margin-bottom:16px;
  border:1px solid var(--panel-line);background:#0b0b0d}

/* embedded playable game */
.play{width:100%;aspect-ratio:16/10;border:1px solid var(--panel-line-strong);
  border-radius:16px;overflow:hidden;background:#0b0b0d;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.play iframe{width:100%;height:100%;border:0;display:block}

.gbar{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;
  justify-content:space-between;margin-top:22px}
.gactions{display:flex;gap:11px;flex-wrap:wrap}
.gcount{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.gcount .n{color:var(--text);font-weight:600;font-size:15px;letter-spacing:.02em}

.gabout{margin-top:52px;max-width:56ch;border-top:1px solid var(--panel-line);padding-top:30px}
.gabout p{margin:0 0 18px;color:var(--text-mid);font-size:1.03rem;line-height:1.68}

@media (max-width:760px){
  .gamewrap{padding:104px 0 30px}
  .play{aspect-ratio:3/4}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .reel{display:none}
}
@media (max-width:760px){
  .wrap{padding-inline:20px}
  .masthead{padding:16px 20px}
  .brand .word{font-size:15px;letter-spacing:.28em}
  .brand .tag{font-size:8.5px;letter-spacing:.1em;white-space:nowrap}
  .navlinks{gap:15px}
  .navlinks a{font-size:10.5px;letter-spacing:.13em}
  .hero{min-height:84vh}
  .hero-cue{bottom:22px}
  .grid{grid-template-columns:1fr;gap:18px}
  .card.solo{width:100%;margin:0}
  .card-media{aspect-ratio:1/1}
  .pgrid{grid-template-columns:1fr}
  .about{padding:78px 0 26px}
  .foot{padding:74px 0 36px}
  .foot .fine{flex-direction:column;align-items:flex-start}
  .cat-head{padding:110px 0 18px}
  .transition{height:150px}
}

@media (hover:none){
  .card:active{transform:scale(.985)}
  .card:active .card-media .layer.lift img{transform:translateY(-6%) scale(1.02)}
  .card .card-explore{opacity:.8;transform:none}
  .project:active{transform:scale(.99)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  #wave,#petals{display:none}
  .grid.intro .card{opacity:1}
  .pre .hero-copy .ln > i{transform:none}
  .pre .hero-copy .eyebrow,.pre .hero-copy .lede,.pre .hero-cue,.pre .reel{opacity:1}
}