/* Bauhaus / De Stijl tiles: library grid, pages chips, coming-soon puzzle (theme 1.7.0) */
@property --hov{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --sx{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --sy{syntax:'<percentage>';inherits:true;initial-value:0%}
.bh-board{--bh-red:#e63434;--bh-yel:#e8e000;--bh-blu:#3a2ee0;position:relative;margin-top:1.25rem;padding:clamp(1.25rem,4vw,3.25rem) clamp(1rem,4vw,3rem) clamp(1.5rem,4vw,3rem);background:linear-gradient(140deg,#e7e4ec 0%,#e9e1d4 42%,#e8dac9 78%,#f2d4c5 100%);color:#141414;border:1px solid #cfc6b8;overflow:hidden}
.bh-intro{max-width:44rem;margin:0 auto 1.5rem;font:500 clamp(14px,1.4vw,16px)/1.5 var(--mono,monospace);letter-spacing:.02em;text-align:center;color:#2a2622}
.bh-grid{--d:38%;--s:56%;list-style:none;margin:0 auto;padding:0;max-width:880px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2.2vw,1.4rem)}
.bh-cell{position:relative;aspect-ratio:1/1;container-type:inline-size;margin:0;padding:0}
.bh-cell::marker{content:none}
.bh-tile{--dx:calc(var(--d) + var(--hov) + var(--sx));--dy:calc(var(--d) + var(--hov) + var(--sy));--L:calc(100% - var(--s));position:absolute;inset:0;display:block;color:inherit;text-decoration:none;border-radius:0;outline:none;transition:--hov .35s cubic-bezier(.2,.8,.2,1),--sx .45s ease-out,--sy .45s ease-out,transform .35s cubic-bezier(.2,.8,.2,1)}
.bh-l,.bh-b{position:absolute;inset:0;pointer-events:none}
.bh-l{clip-path:polygon(var(--L) 0,var(--L) var(--s),calc(var(--L) - var(--dx)) calc(var(--s) + var(--dy)),calc(var(--L) - var(--dx)) var(--dy));background:linear-gradient(225deg,var(--l1) 30%,var(--l2) 100%)}
.bh-b{clip-path:polygon(var(--L) var(--s),100% var(--s),calc(100% - var(--dx)) calc(var(--s) + var(--dy)),calc(var(--L) - var(--dx)) calc(var(--s) + var(--dy)));background:linear-gradient(225deg,var(--b1) 25%,var(--b2) 100%)}
.bh-face{position:absolute;top:0;right:0;width:var(--s);height:var(--s);display:flex;flex-direction:column;justify-content:flex-start;padding:7cqw 7cqw;background:var(--face);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bh-n{font:700 clamp(18px,12cqw,42px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.bh-n--icon{font-family:var(--mono,monospace)}
.bh-u{margin-top:.35em;font:700 clamp(11px,4.6cqw,15px)/1.1 var(--mono,monospace);text-transform:uppercase;letter-spacing:.08em}
.bh-label{position:absolute;left:10%;bottom:8%;width:50%;max-height:31%;display:flex;align-items:flex-end;color:#fff;font:700 clamp(12px,6.6cqw,21px)/1.12 Georgia,"Times New Roman",serif;text-shadow:0 1px 2px rgba(0,0,0,.55);overflow-wrap:anywhere;hyphens:auto}
.bh-tile:hover,.bh-tile:focus-visible{--hov:5%;transform:translate(1.4cqw,-1.4cqw)}
.bh-tile:focus-visible{outline:3px solid #111;outline-offset:4px;box-shadow:0 0 0 7px #fff}
.bh-tile:active{--hov:-4%}
/* palette, after the reference image: face colour + left/bottom extrusion (near, far) */
.bh-c1,.bh-c6,.bh-c8{--face:#e63434;--ink:#140303}
.bh-c2,.bh-c4,.bh-c9{--face:#e8e000;--ink:#141300}
.bh-c3,.bh-c5,.bh-c7{--face:#3a2ee0;--ink:#fff}
.bh-c1,.bh-c4{--l1:#04223a;--l2:#1676ae;--b1:#021320;--b2:#0b4c77}
.bh-c2,.bh-c3,.bh-c5,.bh-c6{--l1:#000;--l2:#3b3b40;--b1:#000;--b2:#1d1d21}
.bh-c7{--l1:#260c22;--l2:#7b4673;--b1:#190616;--b2:#55284d}
.bh-c8,.bh-c9{--l1:#320104;--l2:#b3151d;--b1:#220103;--b2:#880c12}
/* pages chips */
.bh-pages{max-width:880px;margin:clamp(1.5rem,4vw,2.5rem) auto 0}
.bh-pages__title{margin:0 0 .6rem;font:700 12px var(--mono,monospace);text-transform:uppercase;letter-spacing:.1em}
.bh-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.bh-chip{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.45rem .9rem .45rem .6rem;border:2px solid #141414;background:#fffdf8;color:#141414;font:600 14px var(--mono,monospace);text-decoration:none;box-shadow:-5px 5px 0 #141414;transition:transform .2s,box-shadow .2s}
.bh-chip::before{content:"";width:14px;height:14px;flex:none;background:var(--bh-red)}
.bh-chip--1::before{background:var(--bh-yel)}
.bh-chip--2::before{background:var(--bh-blu)}
.bh-chip:hover,.bh-chip:focus-visible{transform:translate(2px,-2px);box-shadow:-8px 8px 0 #141414}
.bh-chip:focus-visible{outline:3px solid var(--bh-blu);outline-offset:3px}
@media (max-width:699px){
 .bh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
 .bh-label{width:54%;font-size:clamp(12px,7.6cqw,17px)}
 .bh-grid .bh-cell:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - .375rem)}
}
@media (max-width:330px){.bh-grid{grid-template-columns:1fr;max-width:260px}}
@media (prefers-reduced-motion:reduce){.bh-tile,.bh-face,.bh-chip{transition:none}}
@media (forced-colors:active){.bh-face{border:2px solid CanvasText}.bh-label{color:CanvasText}.bh-tile:focus-visible{outline-color:Highlight}}

/* coming-soon category page */
.bh-soon{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2rem) 3rem}
.bh-soon__head{max-width:46rem;margin:0 0 1.5rem}
.bh-soon__head h1{margin:.4rem 0 .6rem;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05}
.bh-soon__head p{font-size:1.05rem;line-height:1.55;margin:.25rem 0}
.bh-soon .bh-board{margin-top:0}
.bh-game{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);align-items:center;max-width:880px;margin:0 auto}
.bh-game__title{margin:0 0 .5rem;font:700 clamp(1.4rem,3vw,2rem)/1.1 Georgia,serif}
.bh-game__rules{margin:0 0 .9rem;line-height:1.55}
.bh-game__status{min-height:3em;margin:.75rem 0;font:600 15px/1.5 var(--mono,monospace)}
.bh-game__status strong{background:#141414;color:#fff;padding:.05em .35em}
.bh-game__grid{--d:30%;--s:66%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.35rem,1.6vw,.8rem);width:100%;max-width:22rem;aspect-ratio:1/1;touch-action:manipulation}
.bh-game__grid .bh-cell{aspect-ratio:auto}
.bh-game__grid .bh-tile{width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.bh-game__grid .bh-face{padding:0;transition:background-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.bh-k0{--face:#e63434;--l1:#320104;--l2:#b3151d;--b1:#220103;--b2:#880c12}
.bh-k1{--face:#e8e000;--l1:#000;--l2:#3b3b40;--b1:#000;--b2:#1d1d21}
.bh-k2{--face:#3a2ee0;--l1:#04223a;--l2:#1676ae;--b1:#021320;--b2:#0b4c77}
.bh-k0 .bh-face::after,.bh-k1 .bh-face::after,.bh-k2 .bh-face::after{position:absolute;right:8%;bottom:6%;font:700 clamp(11px,13cqw,17px) var(--mono,monospace);color:rgba(0,0,0,.72)}
.bh-k0 .bh-face::after{content:"R"}
.bh-k1 .bh-face::after{content:"Y"}
.bh-k2 .bh-face::after{content:"B";color:#fff}
.bh-game.is-won .bh-tile{--hov:6%}
.bh-btn{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border:2px solid #141414;background:#e8e000;color:#141414;font:700 14px var(--mono,monospace);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;box-shadow:-5px 5px 0 #141414}
.bh-btn:hover,.bh-btn:focus-visible{transform:translate(2px,-2px);box-shadow:-8px 8px 0 #141414}
.bh-btn:focus-visible{outline:3px solid #3a2ee0;outline-offset:3px}
.bh-more{max-width:880px;margin:clamp(2rem,5vw,3rem) auto 0}
.bh-more h2{margin:0 0 1rem;font:700 clamp(1.2rem,2.5vw,1.6rem) Georgia,serif}
@media (max-width:699px){.bh-game{grid-template-columns:1fr}.bh-game__grid{max-width:18rem;margin:0 auto}}
.bh-ic{width:clamp(22px,15cqw,50px);height:clamp(22px,15cqw,50px);display:block}