/* Bento stage: shared by the work pages and the admin. Every length is a multiple of --u (one grid unit),
   set by fitStage() in js/grid.js, so ratios, gutter and padding never change with screen size. */
@font-face{font-family:"Mona Sans";font-weight:200 900;font-display:swap;
  src:url("/assets/fonts/MonaSans.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5/files/mona-sans-latin-wght-normal.woff2") format("woff2")}
.stage{--u:12px;--g:calc(var(--u) * .85);position:relative;flex:none;color:#071013;font-family:"Mona Sans",system-ui,sans-serif}
.stage .grid{position:absolute;inset:calc(var(--g) / 2)}
.slot{position:absolute;left:calc(var(--c) * var(--u));top:calc(var(--r) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.cell,.infobox{position:absolute;inset:calc(var(--g) / 2)}
.cell{background:#D9D9D9;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:max(9px,calc(var(--u) * .85));color:#8a8a8a;letter-spacing:.04em}
.adj{position:absolute;max-width:none;display:block;left:calc((100% - 100% * var(--z,1)) * var(--px,.5));top:calc((100% - 100% * var(--z,1)) * var(--py,.5));width:calc(100% * var(--z,1));height:calc(100% * var(--z,1));object-fit:var(--fit,cover);object-position:var(--pos,50% 50%)}
.infobox{min-width:0;overflow:hidden}
.infobox h1{margin:0;font-weight:900;text-transform:uppercase;line-height:1.2;font-size:calc(max(18px,var(--u) * 3.4) * var(--ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.infobox p{margin:calc(var(--u) * .4) 0 0;font-weight:400;line-height:1.4;font-size:max(7px,calc(max(11px,var(--u) * 1.25) - var(--tm,0) * 1.333px));display:-webkit-box;-webkit-line-clamp:var(--lc,4);-webkit-box-orient:vertical;overflow:hidden}

/* work page: the white panel hugs the stage (sized by JS) */
body.work-page main{justify-content:center}
body.work-page .panel{flex:none}

/* flow mode (narrow / tall screens): rows fill the width, every box keeps its exact ratio and radius */
.stage.flow{width:auto;height:auto;padding:var(--fg,10px)}
.stage.flow .grid{position:static;display:flex;flex-direction:column;gap:var(--fg,10px)}
.stage.flow .frow{display:flex;gap:var(--fg,10px)}
.stage.flow .slot{position:relative;left:auto;top:auto;flex:none}
.stage.flow .cell{inset:0}
.stage.flow .info-slot{width:auto;height:auto;padding:2px 2px 4px}
.stage.flow .infobox{position:static;overflow:visible}
.stage.flow .infobox p{display:block;-webkit-line-clamp:unset}
.stage.flow .infobox h1{white-space:normal}
body.work-page.flow main{display:block;overflow-y:auto;container-type:normal;scrollbar-width:none;padding-bottom:6px}
body.work-page.flow main::-webkit-scrollbar{display:none}
body.work-page.flow .panel{width:auto;height:auto;overflow:visible}

.stage.pre .slot{opacity:0}

/* hover preview miniature */
.stage.mini{margin:auto;pointer-events:none}
.stage.mini .cell{font-size:0}
.stage.mini .infobox h1{font-size:calc(var(--u) * 3.4 * var(--ts,1))}
.stage.mini .infobox p{font-size:calc(var(--u) * 1.25 * (1 - var(--tm,0) * .07));-webkit-line-clamp:4}

/* 3D model box: rotate only. pan-y lets phones still scroll the page; wheel is never captured. */
.model3d{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;outline:none}
.model3d:active{cursor:grabbing}

/* phones / flow mode: never let the description get tiny (cap the reduction at 3pt, floor 10px) */
.stage.flow .infobox p{font-size:max(10px,calc(max(11px,var(--u) * 1.25) - min(var(--tm,0),3) * 1.333px))}
@media (max-width:640px){.infobox p{font-size:max(10px,calc(max(11px,var(--u) * 1.25) - min(var(--tm,0),3) * 1.333px))}}