:root{--ink: #0b100f;--tile-base: #16211f;--paper: #ece6da;--paper-dim: rgba(236, 230, 218, .62);--amber: #c9a15e;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background-color:var(--ink);font-family:var(--font)}nav{position:absolute;top:0;left:0;width:100vw;display:flex;justify-content:space-between;align-items:flex-start;padding:1.9em 2.2em;z-index:10;pointer-events:none}.brand{display:flex;flex-direction:column;gap:.35em;text-decoration:none;pointer-events:all}.brand-mark{color:var(--paper);font-size:20px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;line-height:1;text-shadow:0 1px 14px rgba(0,0,0,.55)}.brand-sub{color:var(--amber);font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase}.nav-right{display:flex;align-items:center;gap:2.2em}.nav-links{display:flex;gap:1.9em;list-style:none}.nav-links a{color:var(--paper-dim);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;pointer-events:all;text-shadow:0 1px 14px rgba(0,0,0,.55);transition:color .25s ease}.nav-links a:hover{color:var(--paper)}nav button{border:1px solid rgba(201,161,94,.55);outline:none;color:var(--ink);background-color:var(--amber);border-radius:2px;padding:.85em 1.5em;text-transform:uppercase;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.24em;cursor:pointer;pointer-events:all;transition:background-color .25s ease,color .25s ease}nav button:hover{background-color:transparent;color:var(--amber)}.hero-caption{position:fixed;bottom:0;left:0;padding:2.2em;z-index:10;pointer-events:none;max-width:32ch}.caption-lead{color:var(--paper);font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.01em;text-shadow:0 1px 12px rgba(0,0,0,.6)}.caption-meta{margin-top:.7em;color:var(--paper-dim);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6)}.board{width:100vw;height:100vh;padding:.25em;display:flex;flex-direction:column;gap:.25em;perspective:1000px;background-color:var(--ink);position:relative;z-index:1}.row{flex:1;display:flex;gap:.25em}.tile{flex:1;position:relative;transform-style:preserve-3d}.tile-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:.5em;overflow:hidden}.tile-front{background-color:var(--tile-base)}.tile-back{background-color:var(--tile-base);transform:rotateX(180deg)}.tile-front:before,.tile-back:before{content:"";position:absolute;inset:0;background-size:600% 600%;background-position:inherit;clip-path:inset(0 round .25em)}.tile-front:before{background-image:url(/c/junni/front.jpg)}.tile-back:before{background-image:url(/c/junni/back.jpg)}.blocks-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none;z-index:2}#blocks{width:105vw;height:100vh;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;overflow:hidden}.block{width:50px;height:50px;border:.5px solid transparent;transition:border-color .3s ease}.highlight{border-color:#c9a15ed9}@media(max-width:768px){nav{padding:1.3em;align-items:center}.brand-mark{font-size:16px;letter-spacing:.34em}.brand-sub{font-size:9px;letter-spacing:.24em}.nav-right{gap:0}.nav-links{display:none}nav button{padding:.7em 1.15em;font-size:10px;letter-spacing:.18em}.hero-caption{padding:1.5em 1.3em;max-width:26ch}.caption-lead{font-size:13.5px}.caption-meta{font-size:9.5px;letter-spacing:.14em}}
