:root{--bg:transparent;--gem-a:#f3f8ff;--gem-b:#8fb0da;--shade:#10203d;--shadow:rgba(40,28,18,.4);--s:clamp(150px,52vmin,470px);
--tile:linear-gradient(135deg,rgba(255,255,255,.1),rgba(10,25,60,.25)),url(../textures/satin.jpg) center/600px repeat,#2f5a9a;
--gemfill:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.28) 100%),conic-gradient(from 0deg at 30% 70%,rgba(255,120,170,.16),rgba(255,214,120,.12),rgba(120,255,200,.14),rgba(120,180,255,.16),rgba(200,140,255,.14),rgba(255,120,170,.16)),repeating-linear-gradient(90deg,transparent 0.0px,transparent 6.0px,rgba(255,255,255,.98) 6.0px,rgba(255,255,255,.6) 7.2px,rgba(255,255,255,.14) 16.3px,rgba(6,26,64,.6) 18.0px,rgba(6,26,64,.38) 18.0px,transparent 21.6px,transparent 24.0px),linear-gradient(135deg,rgba(236,245,255,.62),rgba(112,154,212,.5))}
body{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.facet{background:linear-gradient(var(--sheen,135deg),rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.28) 100%),conic-gradient(from var(--sheen,0deg) at 30% 70%,rgba(255,120,170,.16),rgba(255,214,120,.12),rgba(120,255,200,.14),rgba(120,180,255,.16),rgba(200,140,255,.14),rgba(255,120,170,.16)),repeating-linear-gradient(90deg,transparent 0.000%,transparent 3.125%,rgba(255,255,255,.98) 3.125%,rgba(255,255,255,.6) 3.750%,rgba(255,255,255,.14) 8.500%,rgba(6,26,64,.6) 9.375%,rgba(6,26,64,.38) 9.375%,transparent 11.250%,transparent 12.500%),linear-gradient(var(--sheen,135deg),rgba(236,245,255,.5),rgba(112,154,212,.38));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 calc(var(--s)*.06) rgba(255,255,255,.25)}
.facet.tri{background:linear-gradient(var(--sheen,135deg),rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.28) 100%),conic-gradient(from var(--sheen,0deg) at 30% 70%,rgba(255,120,170,.16),rgba(255,214,120,.12),rgba(120,255,200,.14),rgba(120,180,255,.16),rgba(200,140,255,.14),rgba(255,120,170,.16)),conic-gradient(from 0deg at 50% 0%,transparent 0deg,transparent 138.133deg,transparent 138.853deg,rgba(6,26,64,.38) 139.963deg,rgba(6,26,64,.6) 139.963deg,rgba(255,255,255,.14) 140.494deg,rgba(255,255,255,.6) 143.521deg,rgba(255,255,255,.98) 143.939deg,transparent 143.939deg,transparent 146.092deg,transparent 146.092deg,transparent 146.986deg,rgba(6,26,64,.38) 148.361deg,rgba(6,26,64,.6) 148.361deg,rgba(255,255,255,.14) 149.017deg,rgba(255,255,255,.6) 152.737deg,rgba(255,255,255,.98) 153.246deg,transparent 153.246deg,transparent 155.862deg,transparent 155.862deg,transparent 156.940deg,rgba(6,26,64,.38) 158.590deg,rgba(6,26,64,.6) 158.590deg,rgba(255,255,255,.14) 159.373deg,rgba(255,255,255,.6) 163.761deg,rgba(255,255,255,.98) 164.354deg,transparent 164.354deg,transparent 167.371deg,transparent 167.371deg,transparent 168.599deg,rgba(6,26,64,.38) 170.461deg,rgba(6,26,64,.6) 170.461deg,rgba(255,255,255,.14) 171.337deg,rgba(255,255,255,.6) 176.155deg,rgba(255,255,255,.98) 176.794deg,transparent 176.794deg,transparent 180.000deg,transparent 180.000deg,transparent 181.284deg,rgba(6,26,64,.38) 183.206deg,rgba(6,26,64,.6) 183.206deg,rgba(255,255,255,.14) 184.101deg,rgba(255,255,255,.6) 188.914deg,rgba(255,255,255,.98) 189.539deg,transparent 189.539deg,transparent 192.629deg,transparent 192.629deg,transparent 193.845deg,rgba(6,26,64,.38) 195.646deg,rgba(6,26,64,.6) 195.646deg,rgba(255,255,255,.14) 196.476deg,rgba(255,255,255,.6) 200.852deg,rgba(255,255,255,.98) 201.410deg,transparent 201.410deg,transparent 204.138deg,transparent 204.138deg,transparent 205.198deg,rgba(6,26,64,.38) 206.754deg,rgba(6,26,64,.6) 206.754deg,rgba(255,255,255,.14) 207.466deg,rgba(255,255,255,.6) 211.172deg,rgba(255,255,255,.98) 211.639deg,transparent 211.639deg,transparent 213.908deg,transparent 213.908deg,transparent 214.783deg,rgba(6,26,64,.38) 216.061deg,rgba(6,26,64,.6) 216.061deg,rgba(255,255,255,.14) 216.644deg,rgba(255,255,255,.6) 219.659deg,rgba(255,255,255,.98) 220.037deg,transparent 220.037deg,transparent 221.867deg,transparent 360deg),linear-gradient(var(--sheen,135deg),rgba(236,245,255,.5),rgba(112,154,212,.38))}
.facet[data-i="8"],.facet[data-i="9"],.facet[data-i="10"],.facet[data-i="11"]{background:linear-gradient(var(--sheen,135deg),rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.28) 100%),conic-gradient(from var(--sheen,0deg) at 30% 70%,rgba(255,120,170,.16),rgba(255,214,120,.12),rgba(120,255,200,.14),rgba(120,180,255,.16),rgba(200,140,255,.14),rgba(255,120,170,.16)),conic-gradient(from 0deg at 50% 0%,transparent 0deg,transparent 150.813deg,transparent 151.427deg,rgba(6,26,64,.38) 152.360deg,rgba(6,26,64,.6) 152.360deg,rgba(255,255,255,.14) 152.802deg,rgba(255,255,255,.6) 155.258deg,rgba(255,255,255,.98) 155.589deg,transparent 155.589deg,transparent 157.269deg,transparent 157.269deg,transparent 157.953deg,rgba(6,26,64,.38) 158.992deg,rgba(6,26,64,.6) 158.992deg,rgba(255,255,255,.14) 159.482deg,rgba(255,255,255,.6) 162.194deg,rgba(255,255,255,.98) 162.557deg,transparent 162.557deg,transparent 164.395deg,transparent 164.395deg,transparent 165.140deg,rgba(6,26,64,.38) 166.267deg,rgba(6,26,64,.6) 166.267deg,rgba(255,255,255,.14) 166.797deg,rgba(255,255,255,.6) 169.711deg,rgba(255,255,255,.98) 170.098deg,transparent 170.098deg,transparent 172.050deg,transparent 172.050deg,transparent 172.837deg,rgba(6,26,64,.38) 174.021deg,rgba(6,26,64,.6) 174.021deg,rgba(255,255,255,.14) 174.576deg,rgba(255,255,255,.6) 177.601deg,rgba(255,255,255,.98) 178.001deg,transparent 178.001deg,transparent 180.000deg,transparent 180.000deg,transparent 180.800deg,rgba(6,26,64,.38) 181.999deg,rgba(6,26,64,.6) 181.999deg,rgba(255,255,255,.14) 182.559deg,rgba(255,255,255,.6) 185.583deg,rgba(255,255,255,.98) 185.979deg,transparent 185.979deg,transparent 187.950deg,transparent 187.950deg,transparent 188.733deg,rgba(6,26,64,.38) 189.902deg,rgba(6,26,64,.6) 189.902deg,rgba(255,255,255,.14) 190.444deg,rgba(255,255,255,.6) 193.355deg,rgba(255,255,255,.98) 193.733deg,transparent 193.733deg,transparent 195.605deg,transparent 195.605deg,transparent 196.344deg,rgba(6,26,64,.38) 197.443deg,rgba(6,26,64,.6) 197.443deg,rgba(255,255,255,.14) 197.951deg,rgba(255,255,255,.6) 200.659deg,rgba(255,255,255,.98) 201.008deg,transparent 201.008deg,transparent 202.731deg,transparent 202.731deg,transparent 203.408deg,rgba(6,26,64,.38) 204.411deg,rgba(6,26,64,.6) 204.411deg,rgba(255,255,255,.14) 204.873deg,rgba(255,255,255,.6) 207.325deg,rgba(255,255,255,.98) 207.640deg,transparent 207.640deg,transparent 209.187deg,transparent 360deg),linear-gradient(var(--sheen,135deg),rgba(236,245,255,.5),rgba(112,154,212,.38))}
.facet::after{background:#0e2344}
.facet.far{opacity:.5}
.facet.far .media{visibility:hidden}
.shadow{background:radial-gradient(closest-side,rgba(150,195,245,.55),rgba(60,90,140,.22) 55%,transparent)}
.slot{color:#1c2f52;font-weight:700}
.facet[data-i="8"] .media,.facet[data-i="9"] .media,.facet[data-i="10"] .media,.facet[data-i="11"] .media{rotate:180deg}
.facet[data-i="8"] .slot,.facet[data-i="9"] .slot,.facet[data-i="10"] .slot,.facet[data-i="11"] .slot{margin:0 0 22%}
.shard{background:var(--gemfill)}

@keyframes gemOut{to{opacity:0}}
.deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 var(--pad);min-height:0}
.turn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:700;background:var(--char) url(../textures/corduroy.jpg) center/300px;background-blend-mode:soft-light;color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(40,28,18,.22);transition:transform .15s}
.turn:hover,.back:hover{background:#8e1f3a url(../textures/velvet.jpg) center/400px;background-blend-mode:normal}
.turn:active{transform:scale(.94)}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:24px;margin:0 var(--pad);padding:18px 0 26px;border-top:1px solid var(--line)}
#index{font:800 clamp(64px,7.5vw,112px)/.8 var(--display);letter-spacing:-.05em}
.now{display:grid;gap:8px;min-width:0}
.now small{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#label{font:800 clamp(28px,3.2vw,42px)/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side{display:grid;justify-items:end;gap:10px}
#status{font-size:16px;font-weight:600;color:var(--ink);text-align:right}
.controls button{border-radius:999px}
#intro,#overview,#project{background:linear-gradient(var(--wash),var(--wash)),url(../textures/corduroy.jpg) 0 0/420px,var(--dye);background-blend-mode:normal,luminosity}
#overview,#project{background-attachment:local}
#overview{--dye:#a9774f;--wash:rgba(250,236,220,.3)}
#project{--dye:#d2bea2;--wash:rgba(252,246,236,.5)}
#intro{place-content:center;justify-items:center;gap:30px;font:800 clamp(80px,19vw,260px)/1 var(--display);letter-spacing:-.055em}
#intro .word{margin-left:-.04em}
.dot{width:.13em;height:.13em;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#8e1f3a url(../textures/velvet.jpg) center/2em}
#intro .hint{display:flex;align-items:center;gap:12px;padding:15px 24px 15px 18px;border-radius:999px;font:700 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;background:var(--char) url(../textures/corduroy.jpg) center/300px;background-blend-mode:soft-light;color:var(--cream);box-shadow:0 3px 8px rgba(40,28,18,.22)}
#intro .hint i{width:11px;height:11px;background:var(--cream);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
#intro:hover .hint{background:#8e1f3a url(../textures/velvet.jpg) center/400px}
#intro .tag{position:absolute;left:0;right:0;bottom:var(--pad);font:600 13px/1 var(--text);letter-spacing:.02em;color:var(--dim)}
.overview-inner,.project-inner{padding:22px var(--pad) 80px}
.ov-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;margin-bottom:clamp(16px,4svh,40px)}
.back{order:3;margin-left:auto;padding:12px 20px;border-radius:999px;font-weight:700;font-size:13px;background:var(--char) url(../textures/corduroy.jpg) center/300px;background-blend-mode:soft-light;color:var(--cream);box-shadow:0 3px 8px rgba(40,28,18,.22)}
#overview h2{font:800 clamp(40px,min(9vw,12svh),140px)/.85 var(--display);letter-spacing:-.055em}
.count{display:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3svh,28px);width:min(100%,max(600px,calc((89.8svh - 300px) * 16 / 9 + 56px)));margin:0 auto}
#overview .overview-inner{padding-bottom:24px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:minmax(0,1fr)}}
.card{gap:clamp(6px,1.5svh,14px) 7px;grid-template-columns:auto minmax(0,1fr);align-items:baseline}
.card .project-image{grid-column:1/-1}
.card .project-image,#project-image{background:var(--gemfill),#e3ecf6;color:#1c2f52;font-weight:700;border-radius:14px;box-shadow:0 6px 18px rgba(40,28,18,.18)}
.card .project-image{transition:opacity .3s,transform .2s}
.card:hover .project-image{transform:translateY(-4px)}
.card-num{grid-row:2;grid-column:1;justify-self:start;padding-left:10px;font:800 clamp(14px,2.4svh,20px)/1.15 var(--display);letter-spacing:-.02em;color:var(--accent)}
.card-title{grid-row:2;grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font:700 clamp(14px,2.4svh,20px)/1.15 var(--display);letter-spacing:-.02em}
.project-inner{max-width:1100px;margin:0 auto;display:grid}
.project-inner>.back{order:0;justify-self:start;margin:0 0 48px}
#overview-back{margin-right:40px}
#project-num{justify-self:start;padding:7px 13px;border-radius:999px;background:#8e1f3a url(../textures/velvet.jpg) center/400px;color:var(--cream);font-size:13px;font-weight:800;margin-bottom:18px}
#project-title{font:800 clamp(48px,8.5vw,120px)/.88 var(--display);letter-spacing:-.055em;margin-bottom:36px}
#project-image{border-radius:18px;margin-bottom:28px}
#project-text{white-space:pre-line;font-size:20px;line-height:1.5;max-width:60ch}
@media (max-width:760px){.foot{grid-template-columns:auto minmax(0,1fr)}.side{grid-column:1/-1;justify-items:start}#status{text-align:left}.turn{width:44px;height:44px}}
.wm{font-family:var(--display);font-weight:800;letter-spacing:-.028em;white-space:nowrap;line-height:1}
.umlaut-logo{position:relative;display:inline-block;line-height:0;margin:0 .012em 0 .018em}
.umlaut-logo .o{display:inline-block;width:.58em;height:.555em;margin-bottom:-.012em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 0 100a50 50 0 1 0 0-100z M50 23 L75 41 L50 79 L25 41z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 0 100a50 50 0 1 0 0-100z M50 23 L75 41 L50 79 L25 41z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.umlaut-logo .dot{top:-.2em;width:.13em;height:.13em}
.umlaut-logo i:first-of-type{left:.095em}
.umlaut-logo i:last-of-type{left:.355em}
.logo .wm{font-size:34px}
.logo .dot{animation:none}
.logo{flex-direction:column;align-items:flex-start;gap:10px}
.logo .wm{font-size:52px}
.logo small{align-self:flex-start;font-size:18px}