:root{--ink:#16110e;--paper:#f6efe3;--gold:#f4a52a;--rose:#e2475c;--soft:#ebe1d0;--mut:rgba(22,17,14,.66);--line:rgba(22,17,14,.14);
--disp:'Bricolage Grotesque',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--hand:'Caveat',cursive;--pa:'Baloo Paaji 2',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--disp);-webkit-font-smoothing:antialiased}
a{color:inherit}img,svg{display:block;max-width:100%}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.05}
em{font:italic 400 1.08em/.9 var(--serif);letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eb{font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;border:1.5px solid var(--ink);transition:background .25s,color .25s}
.btn.p{background:var(--ink);color:var(--paper)}.btn.p:hover{background:var(--rose);border-color:var(--rose)}
.btn.g{background:var(--gold);border-color:var(--gold);color:var(--ink)}.btn.g:hover{background:var(--paper);border-color:var(--paper)}
.btn svg{width:20px;height:20px;flex:none}
.nav{position:sticky;top:0;z-index:80;padding:14px 0;background:rgba(246,239,227,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:38px;height:38px;border-radius:11px;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:800 19px/1 var(--pa);padding-top:4px;flex:none}
.word{font:italic 400 25px/1 var(--serif)}
.nav nav{margin-left:auto;display:flex;gap:26px;font-weight:600;font-size:.95rem}
.nav nav a{text-decoration:none;opacity:.75}.nav nav a:hover,.nav nav a[aria-current]{opacity:1}
.nav .btn{padding:10px 17px;font-size:.92rem}
.head{padding:clamp(56px,8vw,96px) 0 clamp(36px,5vw,56px)}
.head h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:900px}
.head h1 em{color:var(--rose)}
.head .lede{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:640px;color:var(--mut);margin:22px 0 0}
.work{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,96px) 0}
.work .wstat{margin:0;font:700 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,239,227,.55)}
.work .cards{margin-top:28px}
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.gc{display:block;background:#fffaf1;border:1px solid var(--line);border-radius:20px;padding:26px 26px 28px;text-decoration:none;transition:transform .3s,box-shadow .3s}
.gc:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(22,17,14,.45)}
.gc small{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.gc h3{font-size:1.35rem;letter-spacing:-.025em;line-height:1.15;margin:12px 0 10px}
.gc p{margin:0;color:var(--mut);font-size:.96rem}
.list{padding:0 0 clamp(70px,9vw,110px)}
.art{max-width:740px;margin:0 auto;padding:clamp(40px,6vw,72px) 24px clamp(60px,8vw,96px)}
.crumb{font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--mut);margin-bottom:34px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--rose)}
.art h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04}
.dek{font-size:1.2rem;color:var(--mut);margin:20px 0 0}
.meta{font:600 12px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:22px 0 0;padding-bottom:26px;border-bottom:1px solid var(--line)}
.prose{font-size:1.1rem;line-height:1.72}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:46px 0 14px;line-height:1.12}
.prose h3{font-size:1.25rem;margin:32px 0 10px;letter-spacing:-.02em}
.prose p,.prose ul,.prose ol{margin:0 0 18px}.prose li{margin:0 0 8px}
.prose a{color:var(--rose);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose strong{font-weight:750}
.prose blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:4px solid var(--gold);font:italic 400 1.35rem/1.4 var(--serif)}
.prose blockquote p{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.98rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.srcs{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);font-size:.95rem}
.srcs h2{font-size:1.1rem;letter-spacing:-.01em;margin:0 0 12px}.srcs ol{margin:0;padding-left:20px}.srcs li{margin:0 0 8px;color:var(--mut)}
.srcs a{color:var(--ink)}.srcs .chk{font:600 12px/1.6 var(--mono);letter-spacing:.05em;color:var(--mut);margin:14px 0 0}
.box{margin-top:40px;background:var(--ink);color:var(--paper);border-radius:24px;padding:30px 30px 32px}
.box .hand{font:700 1.7rem/1 var(--hand);color:var(--gold)}.box h2{font-size:1.7rem;margin:8px 0 10px;line-height:1.1}
.box p{margin:0 0 20px;color:rgba(246,239,227,.75)}
footer{background:var(--ink);color:var(--paper);padding:56px 0 40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between}
footer .links{display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:600}
footer .links a{text-decoration:none;opacity:.8}footer .links a:hover{opacity:1;color:var(--gold)}
footer small{display:block;width:100%;opacity:.5;font:500 12px/1.6 var(--mono);letter-spacing:.06em;margin-top:18px}
.mbar{display:none}
@media (max-width:900px){.nav nav{display:none}.nav .btn{margin-left:auto}
 .mbar{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:85;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
 .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:999px;font-weight:700;text-decoration:none;font-size:.95rem;border:1.5px solid var(--ink)}
 .mbar a:first-child{background:var(--ink);color:var(--paper)}.mbar svg{width:18px;height:18px}body{padding-bottom:74px}}
@media (max-width:420px){.wrap{padding:0 18px}.art{padding-left:18px;padding-right:18px}.word{font-size:22px}.nav .btn span{display:none}.nav .btn{padding:10px 14px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Rooh Sites · work-card motifs. Source of truth for the gallery cards on roohsites.com and /work/.
   _engine/brand_site.py reads this file: every <template data-motif> is one trade illustration, matched to a
   site's niche by data-match (a regex, first match wins, top to bottom). To add a trade, copy a template,
   give it a new key, regex, cursor label and background, and add its CSS below if it needs any. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:56px}
.cc{background:#211a15;border:1px solid rgba(246,239,227,.1);border-radius:22px;overflow:hidden}
.cv{height:220px;position:relative;overflow:hidden;display:grid;place-items:center}
.cc .t{padding:22px 24px 26px}
.cc .tag{font:700 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cc h3{font-size:1.32rem;letter-spacing:-.025em;margin:10px 0 8px;line-height:1.12}
.cc p{margin:0;color:rgba(246,239,227,.66);font-size:.95rem}
.cc .when{display:block;margin-top:12px;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,239,227,.4)}
.cc.cta{background:transparent;border-style:dashed;display:grid;place-items:center;padding:30px;text-align:center}
.cc.cta p{font:800 1.6rem/1.15 var(--disp);color:var(--paper);letter-spacing:-.02em;margin:0 0 18px}
/* shared motion: draw (.dw + pathLength=1), pop, blur-in, move, swing, grow, flip, equaliser */
svg.m{width:80%;max-width:300px;height:auto;overflow:visible}
.cv .dw{stroke-dasharray:1;stroke-dashoffset:0}
.play .dw{animation:dw 6s infinite var(--d,0s)}
@keyframes dw{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.cv .pop,.cv .grow,.cv .flip{transform-box:fill-box;transform-origin:center}
.cv .grow{transform-origin:50% 100%}
.play .pop{animation:pop 6s infinite var(--d,0s)}
@keyframes pop{0%,10%{transform:scale(0)}22%,85%{transform:scale(1)}96%,100%{transform:scale(0)}}
.play .grow{animation:grow 6s infinite var(--d,0s)}
@keyframes grow{0%,8%{transform:scaleY(.05)}40%,85%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
.play .flip{animation:flip 6s infinite var(--d,0s)}
@keyframes flip{0%,10%{transform:scaleX(1)}18%{transform:scaleX(0)}26%,85%{transform:scaleX(1)}}
.play .blr{animation:blr 6s infinite var(--d,0s)}
@keyframes blr{0%,12%{filter:blur(5px);opacity:.45}40%,85%{filter:blur(0);opacity:1}100%{filter:blur(5px);opacity:.45}}
.play .mv{animation:mv 6s infinite ease-in-out var(--d,0s)}
@keyframes mv{0%,10%{transform:translate(0,0)}50%,85%{transform:translate(var(--tx,0),var(--ty,0))}100%{transform:translate(0,0)}}
.cv .sw{transform:rotate(var(--r1,0deg))}
.play .sw{animation:sw 6s infinite cubic-bezier(.6,0,.3,1)}
@keyframes sw{0%,10%{transform:rotate(var(--r0,0deg))}50%,85%{transform:rotate(var(--r1,0deg))}100%{transform:rotate(var(--r0,0deg))}}
.cv .eq{transform-box:fill-box;transform-origin:50% 100%}
.play .eq{animation:eq 1.1s infinite alternate ease-in-out var(--d,0s)}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.play .bob{animation:bob .6s infinite alternate ease-in-out}
@keyframes bob{to{transform:translateY(-2px)}}
@keyframes fo{0%,30%{opacity:1}45%,85%{opacity:0}100%{opacity:1}}
@keyframes fi{0%,30%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}
/* seed motif: spine */
.spine{display:grid;gap:5px;justify-items:center}
.spine i{width:44px;height:15px;border-radius:7px;background:#f6efe3;transform:translateX(var(--o));display:block}
.play .spine i{animation:sp 5s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sp{0%,12%{transform:translateX(var(--o))}45%,85%{transform:none}100%{transform:translateX(var(--o))}}
.pain{position:absolute;right:22px;top:22px;font:700 12px/1.3 var(--mono);color:#9fe3d6;text-align:right;letter-spacing:.1em}
.pain b{display:block;font:800 2.6rem/1 var(--disp);color:var(--paper);position:relative;height:2.6rem;width:2ch;margin-left:auto}
.pain b span{position:absolute;right:0}.pain b span+span{opacity:0}
.play .pain b span{animation:fo 5s infinite}.play .pain b span+span{animation:fi 5s infinite}
/* seed motif: essay */
.essay{width:62%;display:grid;gap:13px;position:relative}
.essay i{height:8px;border-radius:4px;background:#bba982;display:block;position:relative}
.essay i:nth-child(2){width:88%}.essay i:nth-child(4){width:76%}.essay i:nth-child(5){width:54%}
.essay u{position:absolute;left:-4px;right:-4px;top:50%;height:3px;margin-top:-1.5px;background:#d4242f;transform:scaleX(0);transform-origin:left;border-radius:3px}
.essay i:nth-child(4) u{top:auto;bottom:-6px}
.play .essay u{animation:pen 5s infinite}.play .essay i:nth-child(4) u{animation-delay:.6s}
@keyframes pen{0%,10%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.band{position:absolute;right:20px;top:18px;font:700 12px/1.3 var(--mono);color:#7a5a12;letter-spacing:.1em;text-align:right}
.band b{display:block;font:800 2.4rem/1 var(--disp);color:#d4242f;position:relative;height:2.4rem;width:3ch;margin-left:auto}
.band b span{position:absolute;right:0}.band b span+span{opacity:0}
.play .band b span{animation:fo 5s infinite}.play .band b span+span{animation:fi 5s infinite}
.m-essay .hand{position:absolute;left:20px;bottom:14px;color:#d4242f;font-size:1.5rem;font-weight:700;transform:rotate(-4deg);font-family:var(--hand)}
/* seed motif: barbell */
.bar{position:relative;width:86%;height:120px}
.bar:before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;background:#2b2b2b;border-radius:4px}
.pl{position:absolute;top:50%;width:13px;border-radius:4px;transform:translateY(-50%)}
.pl.l{left:calc(10% + var(--x))}.pl.r{right:calc(10% + var(--x))}
.play .pl.l{animation:pll 5s infinite var(--d)}.play .pl.r{animation:plr 5s infinite var(--d)}
@keyframes pll{0%,8%{opacity:0;transform:translate(-50px,-50%)}22%,86%{opacity:1;transform:translate(0,-50%)}100%{opacity:0;transform:translate(-50px,-50%)}}
@keyframes plr{0%,8%{opacity:0;transform:translate(50px,-50%)}22%,86%{opacity:1;transform:translate(0,-50%)}100%{opacity:0;transform:translate(50px,-50%)}}
.kg{position:absolute;left:20px;top:16px;font:800 1.5rem/1 var(--disp);color:#2b1b05}.kg small{font:700 11px var(--mono);letter-spacing:.12em;display:block;margin-top:4px;opacity:.7}
/* seed motif: teeth (the teeth are placed by script on every .arch) */
.arch{position:relative;width:240px;height:150px}
.tooth{position:absolute;width:22px;height:26px;margin:-13px 0 0 -11px;border-radius:9px 9px 11px 11px;background:#fffdf8;box-shadow:0 2px 0 #e7b9c2}
.play .tooth.hit{animation:th 5s infinite}
@keyframes th{0%,20%{background:#fffdf8}30%,85%{background:#e2475c}100%{background:#fffdf8}}
.bub{position:absolute;left:50%;bottom:34px;white-space:nowrap;background:#25d366;color:#05210f;font:700 13px/1.25 var(--disp);padding:10px 13px;border-radius:14px 14px 4px 14px;opacity:0;transform:translate(-50%,10px)}
.play .bub{animation:bu 5s infinite}
@keyframes bu{0%,32%{opacity:0;transform:translate(-50%,10px)}42%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
/* seed motif: plan */
.plan{width:76%;height:auto;overflow:visible}
.plan path,.plan rect{fill:none;stroke:#1f3b57;stroke-width:3;stroke-dasharray:700;stroke-dashoffset:0}
.play .plan path,.play .plan rect{animation:dr 6s infinite}
.plan .fill{stroke:none;fill:#1f3b57;opacity:.12}
.play .plan .fill{animation:fl 6s infinite;stroke-dasharray:none}
.plan text{font:700 10px var(--mono);fill:#1f3b57;letter-spacing:.08em}
@keyframes dr{0%{stroke-dashoffset:700}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:700}}
@keyframes fl{0%,40%{opacity:0}55%,88%{opacity:.14}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cv *{animation:none!important}.cv .sw{transform:rotate(var(--r1,0deg))}}
.m-waves{background:#1b3b4b}
.m-spine{background:#0f3d3a}
.m-essay{background:#f3e7c4}
.m-barbell{background:#f2c230}
.m-teeth{background:#f7dde2}
.m-plan{background:#e9e4da}
.m-seating{background:#3b1f2b}
.m-glow{background:#f3d9cf}
.m-film{background:#1d1d1f}
.m-density{background:#e8efe9}
.m-snellen{background:#e6eef5}
.m-tubes{background:#dbe8f4}
.m-paw{background:#f7e7c6}
.m-crayon{background:#fff4d6}
.m-rank{background:#1f2a44}
.m-flight{background:#dceefa}
.m-modules{background:#efe6d8}
.m-sofa{background:#e9dccb}
.m-tiles{background:#e4e7ea}
.m-gloss{background:#111418}
.m-road{background:#2a2f36}
.m-boxes{background:#e9d3b0}
.m-ledger{background:#eef0e6}
.m-scales{background:#1e2430}
.m-keys{background:#e3ebe4}
.m-bed{background:#22264b}
.m-cake{background:#f9e1e6}
.m-plate{background:#f4ead7}
.m-notes{background:#2b1f3a}
.m-leaf{background:#e5eedb}
.m-sun{background:#fde9b8}
.m-wheel{background:#2c2c2c}
.m-drop{background:#dff3f6}
.m-hanger{background:#f4e3ec}
.m-gem{background:#20262e}
.m-steth{background:#e0f0ee}
.m-generic{background:#2a211b}