/* Composition adapted from the three supplied Rust Rewrites HTML studies. */
@font-face{font-family:Teko;src:url('assets/rust-menu/teko-600.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:dark;--ink:#ecede5;--dim:#b5baad;--olive:#b1c77a;--heading:Teko,'Arial Narrow',sans-serif}
*{box-sizing:border-box}body{margin:0;background:#101310;color:var(--ink);font-family:Arial,sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;cursor:pointer;border-radius:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible{outline:3px solid #d7ed9c;outline-offset:5px}button{border:0}button:hover{color:#fff}[hidden]{display:none!important}
#bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 45% at 38% 6%,#555b52,transparent 70%),radial-gradient(ellipse 50% 40% at 72% 38%,#4a51486b,transparent 70%),radial-gradient(ellipse 40% 30% at 12% 55%,#3c423c80,transparent 70%),linear-gradient(180deg,#303533,#1d201e 55%,#0e0f0e)}
#bg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 25%,#000a)}
#gr{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.utility{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(22px,5vw,96px);font-size:11px;letter-spacing:.13em;color:var(--dim)}.utility a{min-height:44px;display:flex;align-items:center}.utility span{font-size:10px}
#stage{max-width:1680px;margin:auto;min-height:calc(100svh - 145px)}#home{padding:2vh clamp(30px,8vw,150px) 5vh}.logo{margin:0;line-height:1;text-transform:uppercase;font-family:var(--heading);text-shadow:0 3px 6px #0008}.logo b{display:block;line-height:.72;font-size:clamp(80px,8.1vw,150px);letter-spacing:.05em}.logo i{display:block;font-size:clamp(36px,3.4vw,64px);font-style:normal;letter-spacing:.13em;line-height:.8;color:var(--olive)}
#tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,36px);margin-top:clamp(70px,13vh,160px)}.tile{text-align:left;padding:0;background:#242923;box-shadow:0 8px 24px #0004;min-width:0}.tile-title{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px;font:600 clamp(16px,1.65vw,29px)/1 var(--heading);letter-spacing:.06em;text-transform:uppercase;background:#282d27;color:#b8bcb1;border-bottom:3px solid #10150f}.art{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 70% 30%,#7d886a70,transparent 65%),linear-gradient(125deg,#414b3c,#111711 90%)}.tile .art{height:clamp(180px,21vw,330px);filter:grayscale(1) brightness(.55);transition:filter .18s}.art:before{content:'';position:absolute;inset:-25%;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 37px,#b8c89412 38px 39px),repeating-linear-gradient(90deg,transparent 0 37px,#b8c89412 38px 39px);transform:perspective(400px) rotateX(35deg) rotateZ(-18deg);mask-image:linear-gradient(#000,transparent)}.art:after{content:attr(data-mark);position:absolute;right:10px;top:10px;font:600 clamp(95px,10vw,180px)/1 var(--heading);color:#d3dfb91c;letter-spacing:-.06em}.art-label{padding:20px;z-index:1;font:600 clamp(28px,3vw,50px)/.95 var(--heading);text-transform:uppercase;letter-spacing:.025em;max-width:90%;text-shadow:0 2px 5px #000}.tile-count{display:block;padding:10px 16px;font:600 18px/1 var(--heading);letter-spacing:.12em;color:var(--dim)}.tile.sel{box-shadow:0 0 0 1px #aabb7c70,0 8px 30px #0006}.tile.sel .tile-title{background:#58634a;color:#fff}.tile.sel .art{filter:none}.tile.sel .tile-count{color:#dceab9}.tile:nth-child(2) .art{background:radial-gradient(ellipse at 30% 30%,#7c867560,transparent 60%),linear-gradient(135deg,#363e37,#151b17)}.tile:nth-child(3) .art{background:radial-gradient(ellipse at 65% 60%,#89856a50,transparent 70%),linear-gradient(145deg,#3f4231,#14180e)}#desc{margin:36px 0 0;text-align:center;font:600 clamp(21px,2vw,32px)/1.25 var(--heading);min-height:2em;letter-spacing:.02em}
#cat{display:grid;grid-template-columns:minmax(280px,35%) 1fr;gap:clamp(35px,8vw,140px);padding:35px clamp(30px,5vw,96px) 60px 0;min-height:calc(100svh - 145px);position:relative}.list-panel{background:#090d0960;border-right:1px solid #65705b66;min-width:0}#ct{font:600 clamp(28px,3vw,45px)/1 var(--heading);text-transform:uppercase;letter-spacing:.05em;text-align:right;padding:24px 25px;margin:0;border-bottom:1px solid #65705b66}.row{display:block;width:100%;min-height:54px;background:transparent;text-align:right;padding:12px 25px;font:600 clamp(22px,2vw,30px)/1 var(--heading);text-transform:uppercase}.row.sel{background:linear-gradient(90deg,#30382a10,#949f7a);color:#fff;border-bottom:2px solid #151d10}.row.sel:after{content:' ›';color:#e4f4bd}#card{max-width:610px;width:100%;align-self:start;margin-top:24px}#card h3{margin:0;padding:14px;text-align:center;background:#242c22;font:600 24px/1.1 var(--heading);letter-spacing:.06em;text-transform:uppercase}#card .art{height:clamp(180px,19vw,300px)}#card .art-label{font-size:clamp(36px,4vw,65px)}.detail-body{background:#515d43;padding:20px 24px}.detail-body p{font-size:15px;line-height:1.6;margin:12px 0}.detail-body .meta{font:600 21px/1.3 var(--heading);letter-spacing:.03em}.detail-body a{display:flex;align-items:center;min-height:44px;border-top:1px solid #abb78c55;font-size:13px;text-decoration:underline;text-underline-offset:4px}.status{font:600 20px/1.3 var(--heading);text-transform:uppercase;color:#d2dfb9;margin:0 0 12px;letter-spacing:.08em}#back{position:absolute;bottom:0;right:clamp(30px,5vw,96px);background:transparent;min-height:48px;font:600 25px/1 var(--heading)}footer{display:flex;justify-content:space-between;gap:20px;padding:20px clamp(22px,5vw,96px);font-size:10px;color:var(--dim);letter-spacing:.05em}.no-js{padding:30px}.empty{padding:28px;background:#30372b;border-top:2px solid #8b996c}.empty h3{background:transparent!important}.empty p{font-size:15px;line-height:1.6;color:var(--dim)}
@media(max-width:700px){.utility{padding:8px 22px}#stage{min-height:calc(100svh - 122px)}#home{padding:15px 0 18px;overflow:hidden}.logo{margin-left:7vw}.logo b{font-size:72px}.logo i{font-size:32px}#tiles{display:block;position:relative;margin-top:45px;height:clamp(260px,49svh,470px);touch-action:pan-y;user-select:none}.tile{position:absolute;left:50%;top:0;width:76vw;height:100%;display:flex;flex-direction:column;will-change:transform}.tile-title{font-size:21px;flex:none}.tile .art{flex:1;height:auto}.art-label{font-size:38px;padding:18px}.tile .art:after{font-size:150px}.tile-count{font-size:18px}#desc{margin:28px 25px 0;font-size:23px;min-height:2.5em}footer{padding:14px 22px}.keyboard-hint{display:none}#cat{padding:14px 22px 65px;grid-template-columns:1fr;gap:20px;min-height:calc(100svh - 122px)}.list-panel{border-right:0;background:#12171066}#ct{text-align:left;font-size:28px;padding:14px 16px}.row{text-align:left;font-size:25px;padding:14px 16px}#card{margin:0;max-width:none}#card .art{height:180px}#card .art-label{font-size:40px}.detail-body{padding:16px 20px}#back{right:22px}}
@media(max-height:550px){#home{padding-top:5px}.logo b{font-size:60px}.logo i{font-size:28px}#tiles{margin-top:25px}.tile .art{min-height:120px}#desc{margin-top:22px}#cat{padding-top:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Refine against the supplied menu study, not a generic card-grid template. */
@font-face{font-family:Michroma;src:url('assets/rust-menu/michroma-400.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--label:Michroma,'Bank Gothic',Arial,sans-serif}
.logo i{font-family:var(--label);font-size:clamp(26px,2.1vw,44px);font-style:italic;letter-spacing:.04em;line-height:1.2}
.tile-title{font-family:var(--label);font-weight:400;font-size:clamp(11px,1vw,18px);letter-spacing:.06em}
.art:before,.art:after{display:none}
.tile .art{filter:grayscale(1) brightness(.7)}
.tile.sel .art{filter:none}
.art.project-image{background-position:center;background-size:cover}
.art.project-image .art-label{width:100%;max-width:none;background:linear-gradient(transparent,#0009)}
#card{justify-self:end}
.utility>span{display:none}
.utility #sound-toggle{min-height:44px;padding:0 10px;background:transparent;color:var(--dim);font:12px Arial,sans-serif;letter-spacing:.04em}
footer{font-size:12px}
@media(max-width:700px){
 .logo i{font-size:clamp(12px,4vw,26px)}
 .tile-title{font-size:12px}
 #cat{display:flex;flex-direction:column;padding:10px 22px 26px;gap:16px}
 #cat #back{position:static;order:0;align-self:flex-start;text-align:left;min-height:44px;padding:0 4px;margin:0}
 #card{order:1;margin:0}
 #card .art{height:clamp(160px,25svh,220px)}
 .list-panel{order:2}
 #ct{font-size:27px}
 .utility #sound-toggle{padding-right:0}
}