/* Six project universes. Every cover is a 4:5 canvas sized in container units (cqw). */
.art{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;container-type:inline-size;isolation:isolate}
.art *{position:absolute}

/* ---------- NOCTURNE: rave poster ---------- */
.art-rave{background:#08070D;color:#D7FF3F}
.rv-dots{inset:0;background:radial-gradient(circle,#5B2BFF 0 30%,transparent 33%) 0 0/3.4cqw 3.4cqw;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 72% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 72% 40%,#000 10%,transparent 75%)}
.rv-grid{inset:0;background:repeating-linear-gradient(90deg,rgba(215,255,63,.08) 0 1px,transparent 1px 12.5cqw)}
.rv-word{position:absolute;left:6cqw;top:7cqw;font:900 23cqw/.78 var(--sans);font-variation-settings:"wdth" 62;letter-spacing:-.02em}
.rv-word span{position:relative;display:block;transform-origin:top left}
.rv-word span:nth-child(2){transform:scaleY(1.45);margin-bottom:8.2cqw}
.rv-word span:nth-child(3){transform:scaleY(2.05)}
.rv-word.late{font-size:34cqw;top:8cqw}
.rv-word.late span:nth-child(1){transform:scaleY(1.6);margin-bottom:16cqw}
.rv-word.late span:nth-child(2){transform:scaleY(2.6)}
.rv-times{position:absolute;right:6cqw;top:7cqw;display:grid;gap:1.4cqw;font:600 3.2cqw/1 var(--mono);text-align:right}
.rv-times li{position:relative}
.rv-times li:nth-child(4){background:#D7FF3F;color:#08070D;padding:.6cqw 1cqw}
.rv-meta{left:6cqw;right:6cqw;bottom:5cqw;font:600 2.8cqw/1.3 var(--mono);letter-spacing:.06em;color:#B9B6C6;border-top:.3cqw solid #5B2BFF;padding-top:2cqw}

/* ---------- MOTEL MOTEL: roadside neon ---------- */
.art-motel{background:linear-gradient(#F6EBD9 0 64%,#1F8A84 64%)}
.mo-sun{width:76cqw;aspect-ratio:1;border-radius:50%;right:-14cqw;top:6cqw;background:#F5A3B5}
.mo-stripes{right:-14cqw;top:44cqw;width:76cqw;height:36cqw;background:repeating-linear-gradient(#F6EBD9 0 1.6cqw,transparent 1.6cqw 5cqw)}
.mo-sign{left:6cqw;top:16cqw;transform:rotate(-7deg)}
.mo-sign b{position:relative;display:block;font:400 21cqw/1 var(--script);color:#E64C7E;text-shadow:0 0 2.4cqw rgba(255,90,150,.55),.6cqw .6cqw 0 #2B2523}
.mo-sign b+b{margin:-6cqw 0 0 12cqw}
.mo-vac{position:relative;display:inline-block;margin:3cqw 0 0 14cqw;font:800 3.6cqw/1 var(--sans);font-variation-settings:"wdth" 125;letter-spacing:.3em;color:#F6EBD9;background:#2B2523;padding:1.6cqw 2.4cqw;animation:flick 6s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.3}95%{opacity:1}96%{opacity:.4}}
html.calm .mo-vac{animation:none}
.mo-arrow{display:none}
.art-motel .mo-tag{right:9cqw;bottom:9cqw;--t:4.6cqw;rotate:14deg}
.mo-tag{--t:4cqw;font-size:var(--t);width:5.6em;height:8.6em;background:#F5A3B5;color:#2B2523;border:.18em solid #2B2523;border-radius:1em 1em 3em 3em;display:grid;justify-items:center;align-content:center;gap:.2em;text-align:center}
.mo-tag::before{content:"";position:absolute;top:.8em;left:50%;width:1em;height:1em;margin-left:-.5em;border-radius:50%;background:#F6EBD9;border:.15em solid #2B2523}
.mo-tag *{position:static}
.mo-tag span{font:700 .7em var(--mono);letter-spacing:.2em;margin-top:1.4em}
.mo-tag b{font:400 2.6em/1 var(--script)}
.mo-tag small{font:800 .52em var(--sans);letter-spacing:.14em}

/* ---------- OFFGRID: survey equipment ---------- */
.art-offgrid{background:#C9C3A3;color:#1C1D1A}
.og-topo{inset:0;background:repeating-radial-gradient(ellipse 120% 80% at 28% 70%,transparent 0 2.4cqw,rgba(28,29,26,.32) 2.4cqw 2.65cqw),repeating-radial-gradient(ellipse 70% 60% at 86% 18%,transparent 0 2.2cqw,rgba(28,29,26,.22) 2.2cqw 2.4cqw)}
.og-word{left:5cqw;top:27cqw;font:900 33cqw/.8 var(--sans);font-variation-settings:"wdth" 62;letter-spacing:-.01em}
.og-word.sm{font-size:8.6cqw;line-height:.95;top:8cqw;left:6cqw}
.og-tape{left:-3cqw;right:16cqw;top:11cqw;background:#FF5A1F;font:700 3.3cqw/1 var(--mono);letter-spacing:.06em;padding:2.2cqw 4cqw 2.2cqw 8cqw;rotate:-3deg}
.og-cross{right:16cqw;bottom:28cqw;width:18cqw;aspect-ratio:1;border:.5cqw solid #FF5A1F;border-radius:50%}
.og-cross::before,.og-cross::after{content:"";position:absolute;background:#FF5A1F}
.og-cross::before{left:50%;top:-6cqw;bottom:-6cqw;width:.5cqw;margin-left:-.25cqw}
.og-cross::after{top:50%;left:-6cqw;right:-6cqw;height:.5cqw;margin-top:-.25cqw}
.og-spec{left:6cqw;bottom:5cqw;font:600 2.7cqw/1.6 var(--mono);letter-spacing:.06em}
.og-spec li{position:relative}

/* ---------- SOFT ERROR: gentle glitch ---------- */
.art-error{background:#F4F4F6;color:#121212}
.er-blob{border-radius:50%;filter:blur(7cqw)}
.er-blob.a{width:70cqw;height:70cqw;left:-14cqw;bottom:-6cqw;background:#FF8FB1}
.er-blob.b{width:60cqw;height:60cqw;right:-18cqw;top:10cqw;background:#3D5AFE;opacity:.75}
.er-dither{inset:0;background:repeating-conic-gradient(rgba(18,18,18,.12) 0 25%,transparent 0 50%) 0 0/1.2cqw 1.2cqw;-webkit-mask-image:linear-gradient(transparent 40%,#000);mask-image:linear-gradient(transparent 40%,#000)}
.er-word{left:6cqw;top:8cqw;font:800 16cqw/.86 var(--sans);font-variation-settings:"wdth" 125;letter-spacing:-.02em;text-shadow:-.9cqw 0 rgba(255,0,90,.55),.9cqw 0 rgba(0,90,255,.55)}
.er-word.sm{font-size:9cqw;white-space:nowrap}
.er-dlg{--t:2.7cqw;font-size:var(--t);right:7cqw;bottom:12cqw;width:22em;background:#fff;border:.14em solid #121212;box-shadow:.6em .6em 0 #121212}
.er-dlg *{position:static}
.er-bar{display:flex;justify-content:space-between;align-items:center;background:#3D5AFE;color:#fff;font:600 1em var(--mono);padding:.5em .8em}
.er-bar i{width:.9em;height:.9em;border:.15em solid #fff}
.er-dlg p{font:500 1.35em/1.25 var(--sans);padding:1em .9em .6em}
.er-btns{display:flex;justify-content:flex-end;gap:.6em;padding:0 .9em 1em}
.er-btns span{font:600 1em var(--mono);border:.14em solid #121212;padding:.4em 1.1em;box-shadow:.25em .25em 0 #121212}

/* ---------- SUNDAY SERVICE: hymn board ---------- */
.art-sunday{background:#EFE5CF;color:#2E1C12}
.su-ring{right:-8cqw;top:-6cqw;width:46cqw;aspect-ratio:1;border-radius:50%;border:1.4cqw solid rgba(46,28,18,.14);box-shadow:inset 0 0 0 .8cqw rgba(46,28,18,.06)}
.su-word{left:7cqw;top:7cqw;font-family:var(--serif)}
.su-word *{position:static;display:block}
.su-word em{font:italic 500 18cqw/.9 var(--serif)}
.su-word span{font:600 13cqw/.95 var(--serif);letter-spacing:-.02em;margin-left:9cqw}
.su-board{--t:3.1cqw;font-size:var(--t);left:7cqw;right:7cqw;bottom:15cqw;background:#2E1C12;background-image:repeating-linear-gradient(#2E1C12 0 .55em,#24150D .55em .62em);padding:1.1em 1.2em;display:grid;gap:.45em;box-shadow:inset 0 0 0 .35em #A6774A}
.su-board *{position:static}
.su-board p{display:flex;flex-wrap:nowrap}
.su-board i{font:600 1em/1 var(--mono);font-style:normal;color:#F3EBDD;background:#3A2619;width:.95em;text-align:center;padding:.18em 0;margin-right:.08em}
.su-board p:last-child i{color:#B5352B}
.su-meta{left:7cqw;bottom:6cqw;font:600 2.6cqw var(--mono);letter-spacing:.08em}

/* ---------- OBJECTS OF DESIRE: luxury editorial ---------- */
.art-objects{background:#F3F0EA;color:#111}
.ob-word{left:6cqw;top:5cqw;z-index:2}
.ob-word *{position:static;display:block}
.ob-word em{font:italic 400 24cqw/.82 var(--serif);letter-spacing:-.03em}
.ob-word span{font:400 9cqw/1 var(--serif);letter-spacing:.02em;margin:1cqw 0 0 22cqw}
.ob-stage{--t:4.2cqw;font-size:var(--t);right:8cqw;bottom:9cqw;width:15em;height:20em}
.ob-stage.sm{--t:1.8cqw;position:relative;right:auto;bottom:auto}
.ob-stage>*{position:absolute}
.ob-vase{position:absolute;left:50%;bottom:4.6em;width:7em;height:10.5em;translate:-50% 0;border-radius:46% 46% 40% 40%/58% 58% 36% 36%;background:radial-gradient(ellipse at 34% 28%,#a33a3a 0,#5E1A1A 42%,#250808 82%)}
.ob-vase::before{content:"";position:absolute;left:50%;top:-1.6em;width:2.6em;height:2.4em;translate:-50% 0;background:linear-gradient(90deg,#3a0f0f,#7a2626 40%,#2a0a0a);border-radius:.4em .4em .2em .2em}
.ob-shadow{left:56%;bottom:4.4em;width:9em;height:1.6em;background:rgba(0,0,0,.28);border-radius:50%;filter:blur(.15em);transform:skewX(-40deg)}
.ob-plinth{left:1.5em;right:1.5em;bottom:0;height:4.8em;background:linear-gradient(#E6E0D5 0 .8em,#D9D2C5 .8em)}
.ob-issue{right:6cqw;top:6cqw;font:500 2.6cqw var(--mono);letter-spacing:.1em;writing-mode:vertical-rl}
.ob-cap{left:6cqw;bottom:6cqw;font:italic 400 3cqw var(--serif);max-width:32cqw}

/* thumbnails & peeks just crop the canvas */
.art.thumb,.art.card,.art.peek-art,.art.hero{width:100%}

/* ---------- mockups ---------- */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.app{display:grid;gap:10px}
.app>.mk{width:100%}
.app figcaption,.gal figcaption{font:500 12px/1.4 var(--mono);color:var(--u-mute,var(--mute))}
.app{container-type:inline-size}
.mk{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--u-panel,#141414);display:grid;place-items:center}
.mk *{box-sizing:border-box}
.mk-poster{display:block}
.mk-poster>*{position:absolute}
.mk-band{background:#121016}
.mk-band .band{width:104%;justify-content:center;rotate:-12deg;background:#D7FF3F;color:#08070D;display:flex;align-items:center;gap:4cqw;padding:3cqw 4cqw;font:900 5.4cqw/1 var(--sans);font-variation-settings:"wdth" 62;box-shadow:0 3cqw 5cqw rgba(0,0,0,.5)}
.mk-band .band b{font:600 3.4cqw var(--mono)}
.mk-band .band i{width:5cqw;height:5cqw;border-radius:50%;background:#08070D}
.mk-band .band small{font:600 3cqw var(--mono)}
.mk-phone{background:#1b1730}
.mk-phone .ph-scr{width:58cqw;aspect-ratio:9/18;border-radius:6cqw;background:#08070D;border:1.4cqw solid #000;padding:7cqw 4cqw;display:flex;flex-direction:column;gap:2cqw;overflow:hidden;box-shadow:0 4cqw 8cqw rgba(0,0,0,.5)}
.ra-h{font:600 2.8cqw var(--mono);color:#B9B6C6;margin-bottom:2cqw}
.ra-row{display:flex;align-items:flex-end;gap:2cqw;border-bottom:.3cqw solid #5B2BFF;padding-bottom:1cqw}
.ra-row b{font:600 2.8cqw var(--mono);color:#B9B6C6}
.ra-row span{display:inline-block;font:900 5.4cqw/1 var(--sans);font-variation-settings:"wdth" 62;color:#D7FF3F;transform:scaleY(var(--s));transform-origin:bottom left;margin-top:calc((var(--s) - 1) * 5cqw)}
.mk-key{background:#F6EBD9}
.mk-key .mo-tag{--t:8cqw;rotate:-8deg}
.mk-ring{position:absolute;top:9cqw;left:47cqw;width:16cqw;height:16cqw;border-radius:50%;border:1.6cqw solid #b9b0a0}
.mk-browser{aspect-ratio:4/5;background:var(--u-panel,#141414);display:flex;flex-direction:column;padding:6cqw 5cqw;place-items:stretch}
.br-bar{display:flex;gap:1.4cqw;background:#e9e6df;padding:2cqw 2.4cqw;border-radius:2cqw 2cqw 0 0}
.br-bar i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#bbb}
.ms-body,.es-body,.os-body{flex:1;border-radius:0 0 2cqw 2cqw;overflow:hidden}
.ms-body{background:#F6EBD9;color:#2B2523;padding:8cqw 6cqw;display:flex;flex-direction:column;gap:3cqw}
.ms-hi{font:400 13cqw/1 var(--script);color:#E64C7E;text-shadow:.5cqw .5cqw 0 #2B2523}
.ms-sub{font:500 4cqw/1.35 var(--sans)}
.ms-dates{display:flex;gap:2cqw;font:600 3.2cqw var(--mono);margin-top:auto}
.ms-dates span{border:.4cqw solid #2B2523;padding:1.6cqw 2.4cqw}
.ms-btn{align-self:flex-start;background:#1F8A84;color:#F6EBD9;font:800 3.4cqw var(--sans);padding:2.6cqw 4cqw;border-radius:99px}
.mk-dnd{background:#F6EBD9;align-content:center;gap:1cqw;text-align:center}
.mk-dnd::before{content:"";position:absolute;left:30cqw;right:30cqw;top:8cqw;bottom:8cqw;background:#1F8A84;border-radius:3cqw}
.mk-dnd::after{content:"";position:absolute;top:13cqw;left:50%;width:12cqw;height:12cqw;margin-left:-6cqw;border-radius:50%;background:#F6EBD9}
.mk-dnd b{position:relative;font:400 5.6cqw/1.1 var(--script);color:#F6EBD9;max-width:34cqw;rotate:-6deg}
.mk-dnd small{position:relative;font:700 2.6cqw var(--mono);color:#F5A3B5;max-width:30cqw;margin-top:3cqw}
.mk-hang{background:#C9C3A3}
.mk-hang>*{position:relative}
.mk-hang{align-content:center}
.mk-hang::before{content:"";position:absolute;left:30cqw;right:30cqw;top:10cqw;bottom:10cqw;background:#FF5A1F;clip-path:polygon(20% 0,80% 0,100% 12%,100% 100%,0 100%,0 12%)}
.hg-hole{position:absolute!important;top:15cqw;left:50%;width:6cqw;height:6cqw;margin-left:-3cqw;border-radius:50%;background:#C9C3A3}
.mk-hang b{font:900 7cqw/1 var(--sans);font-variation-settings:"wdth" 62;color:#1C1D1A;margin-top:10cqw}
.mk-hang dl{display:grid;grid-template-columns:auto auto;gap:1cqw 3cqw;font:600 2.6cqw var(--mono);color:#1C1D1A;margin-top:5cqw}
.mk-hang dd{margin:0}
.hg-o{display:none}
.mk-bill{aspect-ratio:4/5;width:100%}
.mk-bill .og-word.sm{font-size:11cqw;top:10cqw}
.mk-bill .og-tape{top:auto;bottom:10cqw;right:20cqw}
.mk-notebook{background:#C9C3A3}
.mk-notebook::before{content:"";position:absolute;left:18cqw;right:18cqw;top:10cqw;bottom:10cqw;background:#1C1D1A;border-radius:1cqw 3cqw 3cqw 1cqw}
.mk-notebook .og-topo{position:absolute;left:18cqw;right:18cqw;top:10cqw;bottom:10cqw;background:repeating-radial-gradient(ellipse 120% 80% at 30% 70%,transparent 0 2.4cqw,rgba(255,90,31,.6) 2.4cqw 2.7cqw);border-radius:1cqw 3cqw 3cqw 1cqw}
.mk-notebook b{position:absolute;left:24cqw;top:16cqw;font:900 8cqw/1 var(--sans);font-variation-settings:"wdth" 62;color:#E8E6DD;background:#1C1D1A;padding:1cqw 2cqw}
.mk-notebook small{position:absolute;left:24cqw;bottom:16cqw;font:600 2.4cqw var(--mono);color:#FF5A1F;background:#1C1D1A;padding:1cqw}
.mk-bill>*{position:absolute}
.mk-wall{display:block}
.mk-wall>*{position:absolute}
.mk-wall .er-word.sm{top:12cqw;left:7cqw;font-size:10cqw;white-space:normal}
.er-wall{left:7cqw;right:16cqw;bottom:10cqw;font:500 3.3cqw/1.5 var(--mono)}
.er-ticket{background:#F4F4F6}
.er-ticket::before{content:"";position:absolute;left:10cqw;right:10cqw;top:30cqw;bottom:30cqw;background:#3D5AFE;-webkit-mask:radial-gradient(circle at 0 50%,transparent 4cqw,#000 4.2cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 4cqw,#000 4.2cqw) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 4cqw,#000 4.2cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 4cqw,#000 4.2cqw) right/51% 100% no-repeat}
.er-ticket>*{position:relative;color:#fff}
.er-ticket{align-content:center;gap:2cqw;text-align:center}
.er-ticket b{font:800 7cqw/1 var(--sans);font-variation-settings:"wdth" 125;text-shadow:-.6cqw 0 rgba(255,0,90,.7),.6cqw 0 rgba(0,0,0,.4)}
.er-ticket span,.er-ticket small{font:600 2.8cqw var(--mono)}
.es-body{position:relative;background:radial-gradient(circle at 20% 80%,#FF8FB1,transparent 60%),radial-gradient(circle at 90% 20%,#3D5AFE,transparent 55%),#F4F4F6}
.es-body .er-dlg{--t:2.3cqw;right:auto;left:50%;top:50%;bottom:auto;translate:-50% -50%}
.mk-bag{background:#DCCFB2}
.mk-bag>*{position:relative}
.mk-bag{align-content:center;justify-items:start;padding:0 26cqw;gap:1.6cqw;color:#2E1C12}
.mk-bag::before{content:"";position:absolute;left:20cqw;right:20cqw;top:9cqw;bottom:7cqw;background:#EFE5CF;box-shadow:2cqw 2cqw 0 rgba(46,28,18,.2)}
.bg-fold{position:absolute!important;left:20cqw;right:20cqw;top:9cqw;height:7cqw;background:#2E1C12}
.bg-no{font:600 2.6cqw var(--mono);letter-spacing:.08em;color:#B5352B}
.bg-name{font:600 8cqw/.95 var(--serif)}
.bg-name em{font-weight:500}
.mk-bag ol{font:500 2.8cqw/1.5 var(--sans);padding-left:4cqw;list-style:decimal}
.bg-w{font:600 2.4cqw var(--mono)}
.mk-menu{background:#A6774A}
.mk-menu .su-board{position:relative;--t:4.2cqw;left:auto;right:auto;bottom:auto}
.su-card{background:#EFE5CF;align-content:center;justify-items:center}
.su-card::before{content:"";position:absolute;left:8cqw;right:8cqw;top:28cqw;bottom:28cqw;background:#2E1C12;border-radius:3cqw}
.su-card>*{position:relative;color:#EFE5CF}
.su-card em{font:italic 500 7cqw var(--serif)}
.su-card div{display:grid;grid-template-columns:repeat(5,5.6cqw);gap:2cqw;margin:3cqw 0}
.su-card i{width:5.6cqw;height:5.6cqw;border-radius:50%;border:.5cqw solid #EFE5CF}
.su-card i.on{background:#B5352B;border-color:#B5352B}
.su-card small{font:600 2.3cqw var(--mono);letter-spacing:.08em}
.os-body{background:#F3F0EA;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3cqw;padding:5cqw;color:#111}
.os-k{font:500 2.4cqw var(--mono)}
.os-h{font:italic 400 8cqw/1 var(--serif);margin:2cqw 0}
.os-p{font:400 3cqw/1.4 var(--serif)}
.ob-site .ob-stage.sm{width:100%;height:46cqw;font-size:2.6cqw}
.mk-spread{background:#2a2622;padding:12cqw 5cqw}
.mk-spread{grid-template-columns:1fr 1fr;place-items:stretch;gap:0}
.mk-spread>div{background:#F3F0EA;padding:5cqw 4cqw;color:#111;position:relative;overflow:hidden}
.mk-spread>div:first-child{box-shadow:inset -3cqw 0 3cqw -2cqw rgba(0,0,0,.25)}
.sp-h{font:400 9cqw/.9 var(--serif)}
.sp-p{font:400 2.8cqw/1.5 var(--serif);margin-top:4cqw}
.sp-img{background:#D9D2C5!important}
.sp-img .ob-vase{font-size:2.6cqw}
.mk-mag{background:#2a2622}
.mk-mag::before{content:"";position:absolute;left:18cqw;right:18cqw;top:8cqw;bottom:8cqw;background:#D9D2C5}
.mk-mag>*{position:absolute}
.mg-t{top:12cqw;left:0;right:0;text-align:center;font:400 9cqw/1 var(--serif);letter-spacing:.24em;color:#111}
.mk-mag .ob-vase{font-size:3.4cqw;bottom:22cqw}
.mg-w{bottom:12cqw;left:0;right:0;text-align:center;font:italic 400 10cqw/1 var(--serif);color:#5E1A1A}
.mk-mag small{top:12cqw;right:21cqw;font:500 2.2cqw var(--mono);color:#111}

/* ---------- case-study pages: each wears its project's universe ---------- */
body[data-universe] .page-wrap,body[data-universe] .cta-end{background:var(--u-bg);color:var(--u-fg)}
body[data-universe] .cta-end{border-color:var(--u-line)}
body[data-universe] .lbl,body[data-universe] .fine{color:var(--u-mute)}
body[data-universe] .pill-link:hover{background:var(--u-acc);color:var(--u-on-acc);border-color:var(--u-acc)}
body[data-universe] .cta-big em{color:var(--u-acc)}
body[data-universe] .cta-contacts>a{border-color:var(--u-line)}
body[data-universe] .wm-note{background:var(--u-bg)}
body[data-universe=rave]{--u-bg:#08070D;--u-fg:#EDEBE4;--u-acc:#D7FF3F;--u-on-acc:#08070D;--u-acc2:#5B2BFF;--u-panel:#14111f;--u-mute:#9a96ad;--u-line:rgba(215,255,63,.2)}
body[data-universe=motel]{--u-bg:#F6EBD9;--u-fg:#2B2523;--u-acc:#1F8A84;--u-on-acc:#F6EBD9;--u-acc2:#E64C7E;--u-panel:#EADBC2;--u-mute:#6d5f57;--u-line:rgba(43,37,35,.18)}
body[data-universe=offgrid]{--u-bg:#E8E6DD;--u-fg:#1C1D1A;--u-acc:#FF5A1F;--u-on-acc:#1C1D1A;--u-acc2:#1C1D1A;--u-panel:#D6D2BE;--u-mute:#5d5e57;--u-line:rgba(28,29,26,.2)}
body[data-universe=error]{--u-bg:#F4F4F6;--u-fg:#121212;--u-acc:#3D5AFE;--u-on-acc:#fff;--u-acc2:#FF8FB1;--u-panel:#E6E7F0;--u-mute:#5b5c68;--u-line:rgba(18,18,18,.15)}
body[data-universe=sunday]{--u-bg:#EFE5CF;--u-fg:#2E1C12;--u-acc:#B5352B;--u-on-acc:#EFE5CF;--u-acc2:#A6774A;--u-panel:#E2D4B6;--u-mute:#6e5a49;--u-line:rgba(46,28,18,.18)}
body[data-universe=objects]{--u-bg:#F3F0EA;--u-fg:#111;--u-acc:#5E1A1A;--u-on-acc:#F3F0EA;--u-acc2:#D9D2C5;--u-panel:#E3DDD2;--u-mute:#6b665e;--u-line:rgba(17,17,17,.14)}
.case{padding:clamp(24px,4vw,48px) var(--pad) clamp(60px,8vw,110px)}
.case-strip{display:flex;flex-wrap:wrap;gap:8px 24px;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--u-mute);border-bottom:1px solid var(--u-line);padding-bottom:14px}
.case-strip .txt-link{color:var(--u-fg)}
.case-head{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:end;margin:clamp(30px,5vw,60px) 0 30px}
.case-title{font:900 clamp(58px,13vw,230px)/.82 var(--sans);font-variation-settings:"wdth" 62;letter-spacing:-.02em;color:var(--u-fg);overflow-wrap:anywhere}
.case-concept{font-size:clamp(17px,1.6vw,22px);line-height:1.45;max-width:40ch}
.case-hero{max-width:min(720px,100%);margin:0 auto 40px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.case-hero .art{will-change:transform}
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-block:1px solid var(--u-line);padding:20px 0;margin-bottom:clamp(50px,7vw,100px)}
.case-facts dt{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--u-mute);margin-bottom:6px}
.case-facts dd{margin:0;font-size:15px}
.case-sec{margin-bottom:clamp(60px,8vw,120px)}
.case-sec.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
.case-sec h2{font:850 clamp(30px,3.6vw,54px)/.95 var(--sans);font-variation-settings:"wdth" 70;text-transform:uppercase;margin:6px 0 18px}
.case-sec p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:62ch}
.cs-n{font:500 12px var(--mono)!important;color:var(--u-acc)}
.cs-lead{margin-bottom:24px}
.studies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.study{aspect-ratio:1;background:var(--u-panel);display:grid;place-items:center;position:relative;overflow:hidden;padding:12px;container-type:inline-size}
.study span{font:700 12cqw/.9 var(--sans);text-align:center;overflow-wrap:anywhere}
.study small{position:absolute;left:10px;bottom:8px;font:500 10px var(--mono);color:var(--u-mute)}
.st1 span{font-weight:300;font-variation-settings:"wdth" 100}
.st2 span{color:transparent;-webkit-text-stroke:1px var(--u-fg);font-weight:900}
.st3 span{font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.02em}
.st4{background:var(--u-acc)}.st4 span{color:var(--u-on-acc)}.st4 small{color:var(--u-on-acc);opacity:.8}
.spec{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:start}
.spec-aa{font-size:clamp(120px,16vw,240px);line-height:.8;margin-bottom:16px}
.spec-type li{font:500 13px var(--mono);padding:6px 0;border-bottom:1px solid var(--u-line)}
.spec-type .fine{margin-top:14px;font-size:14px}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sw{width:100%;text-align:left;display:grid;gap:4px;border:1px solid var(--u-line);padding:0 0 12px;background:transparent}
.sw span{display:block;height:110px;background:var(--c);margin-bottom:8px;transition:height .4s var(--ease)}
.sw:hover span{height:140px}
.sw b,.sw code{padding:0 12px}
.sw b{font:600 14px var(--sans)}
.sw code{font:500 12px var(--mono);color:var(--u-mute)}
.sw.copied code{color:var(--u-acc)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gal{display:grid;gap:10px}
.gal-crop{overflow:hidden}
.gal.pf2 .art{filter:invert(1) hue-rotate(180deg)}
.gal.pf3 .art{filter:grayscale(1) contrast(1.8) brightness(1.05)}
.gal.pf3 .gal-crop{position:relative}
.gal.pf3 .gal-crop::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.18) 30%,transparent 32%) 0 0/5px 5px;mix-blend-mode:multiply;pointer-events:none}
.outcome ul{display:grid;gap:10px;margin-top:16px}
.outcome li{font:850 clamp(22px,2.6vw,36px)/1.1 var(--sans);font-variation-settings:"wdth" 75;border-top:1px solid var(--u-line);padding-top:12px}
.outcome .demo-flag{color:var(--u-acc)}
.case-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;border-top:1px solid var(--u-line);padding-top:24px}
.cn{display:grid;gap:6px;padding:20px;text-decoration:none;border:1px solid var(--u-line);transition:background .3s,color .3s}
.cn small{font:500 11px var(--mono);text-transform:uppercase}
.cn b{font:900 clamp(26px,4vw,56px)/.9 var(--sans);font-variation-settings:"wdth" 62}
.cn.next{text-align:right}
.cn.all{align-content:center;font:600 12px var(--mono);text-transform:uppercase}
.cn:hover{background:var(--u-fg);color:var(--u-bg)}
@media (max-width:900px){.case-head,.case-sec.two,.spec{grid-template-columns:1fr}.case-facts{grid-template-columns:1fr 1fr}.studies{grid-template-columns:1fr 1fr}.apps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gallery{grid-template-columns:1fr}}
@media (max-width:600px){.apps,.case-nav{grid-template-columns:1fr}.cn.next{text-align:left}}

/* each universe's typography on its own case page */
.u-rave .case-title{transform:scaleY(1.3);transform-origin:bottom left;color:#D7FF3F;margin-top:3vw}
.u-rave .studies .st3 span{transform:scaleY(1.8)}
.u-rave .spec-aa{font-family:var(--sans);font-weight:900;font-variation-settings:"wdth" 62;transform:scaleY(1.4);transform-origin:bottom left}
.u-motel .case-title{font-family:var(--script);font-weight:400;font-size:clamp(54px,10vw,170px);line-height:1.05;color:#E64C7E;text-shadow:.04em .04em 0 #2B2523;font-variation-settings:normal;letter-spacing:0}
.u-motel .st4 span,.u-motel .spec-aa{font-family:var(--script);font-weight:400}
.u-offgrid .case-title{letter-spacing:.02em}
.u-offgrid .st4 span{font-variation-settings:"wdth" 62;font-weight:900}
.u-offgrid .spec-aa{font-weight:900;font-variation-settings:"wdth" 62}
.u-error .case-title{font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(46px,9.5vw,170px);text-shadow:-.05em 0 rgba(255,0,90,.5),.05em 0 rgba(0,90,255,.5)}
.u-error .st4 span{text-shadow:-.06em 0 rgba(255,0,90,.7),.06em 0 rgba(255,255,255,.4)}
.u-error .spec-aa{font-variation-settings:"wdth" 125;font-weight:800;text-shadow:-.05em 0 rgba(255,0,90,.5),.05em 0 rgba(0,90,255,.5)}
.u-sunday .case-title,.u-objects .case-title{font-family:var(--serif);font-variation-settings:normal;letter-spacing:-.03em}
.u-sunday .case-title{font-weight:600;font-style:italic;font-size:clamp(52px,10vw,180px)}
.u-objects .case-title{font-weight:400;font-style:italic;font-size:clamp(52px,10vw,180px);line-height:.88}
.u-sunday .st4 span,.u-objects .st4 span,.u-sunday .spec-aa,.u-objects .spec-aa{font-family:var(--serif);font-weight:500;font-style:italic}
.u-sunday .case-sec h2,.u-objects .case-sec h2{font-family:var(--serif);text-transform:none;font-weight:500;font-variation-settings:normal;letter-spacing:-.01em}
.u-motel .case-sec h2{font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:.02em}
.u-error .case-sec h2{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2.4vw,34px)}
.u-error .case-sec h2::before{content:"> "}

/* phones: shorter case studies (proofs hidden) */
@media (max-width:760px){
  .case-head{margin:22px 0 20px;gap:14px}
  .case-hero{max-width:78%;margin-bottom:28px}
  .case-facts{margin-bottom:40px;padding:14px 0;gap:14px}
  .case-sec{margin-bottom:44px}
  .case-sec h2{margin-bottom:12px}
  .case-sec:has(.gallery){display:none}
  .apps{gap:16px}
  .case-nav{grid-template-columns:1fr 1fr}.case-nav .cn.all{display:none}.cn.next{text-align:right}
}