/* Theme Name: ClimaxTg OneScreen Theme URI: https://www.theodorosgiannakis.com/ Author: Custom portfolio experiment Description: Experimental curated GRID, complete LIST, and typed RELATIONS graph, with persistent projects and media panels. Version: 0.6.12 Requires at least: 6.4 Requires PHP: 8.1 Text Domain: climaxtg-onescreen */ :root{--ink:#101010;--paper:#f6f6f6;--rule:#999;--panel:#050505;--font:'Courier New',Courier,monospace}*{box-sizing:border-box}html,body{padding:0;margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font:13px/1.35 var(--font)}button,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #1472c5;outline-offset:2px}[hidden]{display:none!important}.site-frame{height:100dvh;min-height:580px;display:flex;flex-direction:column;overflow:hidden;background:#f7f7f7}.site-header{height:56px;flex:none;margin:0 22px;border-bottom:1px solid #999;display:flex;align-items:center;gap:16px}.site-brand{font-size:clamp(17px,1.9vw,27px);font-weight:600;letter-spacing:.02em;white-space:nowrap}.top-nav{margin-left:auto;display:flex;gap:22px;align-items:center;white-space:nowrap;font-weight:600;font-size:13px}.top-nav a:hover,.nav-button:hover{text-decoration:underline}.nav-button{background:transparent;border:0;padding:5px 0;color:inherit}.mode-set{display:flex;align-items:center;gap:4px;border-left:1px solid #aaa;padding-left:12px;margin-left:5px}.mode-button{padding:4px 7px;border:0;background:transparent;font-weight:700}.mode-button.active{background:#111;color:#fff}.body-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,3.2fr) minmax(290px,1fr);gap:18px;padding:10px 8px 12px 22px}.left-archive{min-width:0;min-height:0;overflow:hidden}.archive-grid-wrap,.archive-list-wrap,.relations-wrap{height:100%;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#888 transparent}.section-label{position:sticky;top:0;z-index:4;background:#f7f7f7;display:flex;align-items:center;justify-content:space-between;min-height:36px;padding-right:4px;font-size:13px;font-weight:600}.section-count{font-size:10px;color:#555;font-weight:400}.art-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 13px;padding:2px 2px 16px 0}.art-tile{border:1px solid #b4b4b4;background:#eee;min-width:0;display:flex;flex-direction:column}.art-tile:hover{filter:brightness(.95)}.tile-heading{height:34px;display:flex;align-items:center;justify-content:space-between;gap:7px;background:#e8e8e8;border-bottom:1px solid #aaa;padding:0 8px;font-weight:600;font-size:12px}.tile-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-year{flex:none;font-weight:400}.tile-photo,.tile-placeholder{width:100%;aspect-ratio:1.22/1;object-fit:cover;display:block;background:#bbb}.tile-placeholder{display:flex;align-items:center;justify-content:center;color:#555}.archive-list-wrap{border:1px solid #999;background:#fafafa;padding:12px 18px 12px;}.list-section-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;gap:10px;margin-bottom:12px}.sort-label{font-size:11px;font-weight:400;white-space:nowrap}.sort-label select{font-size:11px;padding:4px;border:1px solid #999;background:white}.list-heading{position:sticky;top:0;background:#fafafa;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 74px 21%;gap:14px;padding:10px 0;border-bottom:1px solid #888;font-weight:600}.list-row{display:grid;grid-template-columns:92px minmax(0,1fr) 74px 21%;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid #aaa;min-height:76px;font-size:13px}.list-row:hover{background:#eee}.list-thumb{width:92px;height:56px;object-fit:cover;background:#ccc}.list-name{font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-name:before{content:'• '}.list-year,.list-medium{font-weight:400}.list-medium{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.right-rail{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,33fr) minmax(0,28fr) minmax(0,39fr);gap:17px}.rail-box{min-height:0;background:#050505;color:#f5f5f5;padding:15px 17px;display:flex;flex-direction:column;overflow:hidden}.rail-title{font-size:19px;display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #858585}.rail-close{font-size:23px;color:white;border:0;background:none;line-height:1}.rail-list{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#888 #111}.rail-link{display:block;font-size:12px;padding:12px 2px;border-bottom:1px solid #6b6b6b}.rail-link:hover,.media-item:hover{background:#222}.media-item{width:100%;text-align:left;display:block;border:0;border-bottom:1px solid #666;background:none;color:#fff;padding:10px 2px;font-size:12px}.media-item.is-current{background:#242424}.playmark{margin-right:8px;font-size:16px}.rail-box.is-collapsed .rail-list{display:none}.rail-box.is-collapsed .rail-toggle{transform:rotate(45deg)}.player-box{justify-content:center}.player-top{min-height:25px;display:flex;justify-content:flex-end}.player-stage{width:100%;aspect-ratio:16/9;border:1px solid #777;background:#111;position:relative;overflow:hidden}.player-stage iframe{border:0;width:100%;height:100%}.player-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}.player-start{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.12);color:white;font-size:32px}.player-caption{padding-top:8px;color:#aaa;font-size:11px}.player-caption strong{color:#eee}.player-actions{display:flex;gap:9px;padding-top:8px}.player-action{border:1px solid #777;background:none;color:white;font-size:11px;padding:5px 9px}.focus-flash{outline:2px solid #eee;outline-offset:-4px} /* Relations is an actual independent full-sized panel, not a decorative overlay. */ .relations-wrap{display:flex;flex-direction:column;border:1px solid #888;background:#f4f4f4;overflow:hidden;padding:11px 14px 10px}.relations-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 11px;border-bottom:1px solid #aaa;font-size:13px;font-weight:600}.relations-heading span:last-child{color:#666;font-size:10px;font-weight:400}.relation-toolbar{flex:none;display:flex;justify-content:space-between;gap:12px;align-items:start;padding:9px 0}.relation-types{display:flex;flex-wrap:wrap;gap:7px 12px}.relation-types label{font-size:10px;display:flex;align-items:center;gap:3px;white-space:nowrap;cursor:pointer}.relation-types input{accent-color:#111;width:12px;height:12px;margin:0}.relation-actions{white-space:nowrap;display:flex;gap:4px}.relation-actions button{border:1px solid #999;background:#fafafa;padding:3px 8px;font-size:11px}.relations-canvas{flex:1;min-height:120px;position:relative;background:linear-gradient(#ededed 1px,transparent 1px),linear-gradient(90deg,#ededed 1px,transparent 1px);background-size:32px 32px;border:1px solid #b8b8b8;overflow:hidden}.relations-canvas svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none}.relations-canvas svg.is-dragging{cursor:grabbing}.relation-help{position:absolute;right:9px;bottom:6px;font-size:9px;color:#777;pointer-events:none;background:#f4f4f4ce;padding:2px 4px}.graph-edge{stroke:#777;stroke-width:1.35;opacity:.63}.graph-edge.explicit{stroke:#222;stroke-width:2}.graph-edge.is-dim{opacity:.06}.graph-node{cursor:pointer}.graph-node circle{stroke:#333;stroke-width:1.1;fill:#fff}.graph-node[data-type='work'] circle{fill:#111}.graph-node[data-type='concept'] circle{fill:#c8c8c8}.graph-node[data-type='institution'] circle{fill:#858585}.graph-node[data-type='person'] circle{fill:#b9b9b9}.graph-node[data-type='publication'] circle{fill:#a1a1a1}.graph-node[data-type='external'] circle{fill:#e5e5e5}.graph-node[data-type='technique'] circle{fill:#dedede}.graph-node text{font:12px var(--font);fill:#111;pointer-events:none;paint-order:stroke;stroke:#f4f4f4;stroke-width:3px;stroke-linejoin:round}.graph-node.is-dim{opacity:.12}.graph-node.is-active circle{stroke:#d12b2b;stroke-width:4}.graph-node:hover circle{stroke:#d12b2b;stroke-width:3}.relation-inspector{flex:none;margin-top:8px;padding:8px 0 0;border-top:1px solid #aaa;min-height:44px;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:12px}.relation-inspector strong{font-size:12px}.relation-inspector a{text-decoration:underline}.relation-inspector .type{color:#666;text-transform:uppercase;font-size:10px}.relation-inspector .relations-count{color:#555}.relations-empty{font-size:12px;fill:#666} /* Single project and About pages */ .single-screen{height:auto;min-height:100dvh;overflow:visible}.single-content{width:100%;max-width:1020px;margin:0 auto;padding:24px 28px 75px}.single-title{font-size:clamp(28px,4vw,54px);line-height:1.08}.single-meta{border-top:1px solid #888;padding:10px 0;margin-bottom:25px}.entry-content p{line-height:1.7;max-width:850px}.single-content img{max-width:100%;height:auto}.single-content iframe{max-width:100%}.single-content figure{margin:20px 0}.single-content a:not(.back-link){text-decoration:underline} @media(max-width:1150px){.top-nav{gap:11px}.site-brand{font-size:19px}.mode-set{padding-left:6px;margin-left:1px}.mode-button{font-size:11px;padding:4px}.body-layout{grid-template-columns:minmax(0,2.2fr) minmax(270px,1fr);gap:10px}.art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.list-row{grid-template-columns:65px minmax(0,1fr) 55px 24%;gap:8px}.list-thumb{width:65px;height:48px}} @media(max-width:760px){.site-frame{height:auto;min-height:100dvh;overflow:visible}.site-header{height:auto;min-height:68px;margin:0 12px;padding:9px 0;display:flex;flex-wrap:wrap;gap:10px}.site-brand{width:100%;font-size:21px}.top-nav{margin-left:0;flex-wrap:wrap;gap:10px}.mode-set{margin-left:0}.body-layout{display:flex;flex-direction:column;padding:12px;gap:15px}.left-archive{overflow:visible;min-height:370px}.archive-grid-wrap,.archive-list-wrap,.relations-wrap{height:auto;max-height:none;overflow:visible}.archive-grid-wrap{max-height:none}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.archive-list-wrap{padding:10px}.list-row{grid-template-columns:54px minmax(0,1fr) 50px;gap:8px;min-height:65px}.list-thumb{width:54px;height:45px}.list-medium,.list-heading span:last-child{display:none}.list-heading{grid-template-columns:minmax(0,1fr) 50px}.relations-wrap{height:575px}.relation-toolbar{flex-direction:column}.relations-heading span:last-child{display:none}.right-rail{display:flex;flex-direction:column;gap:12px}.rail-box{min-height:180px}.player-box{min-height:270px}.player-stage{max-width:540px}} .video-modal[hidden]{display:none}.video-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.76);display:flex;align-items:center;justify-content:center;padding:26px}.video-modal-frame{width:min(900px,94vw);background:#050505;color:white;padding:12px;border:1px solid #888;box-shadow:0 12px 54px #0008}.video-modal-close{display:block;margin-left:auto;background:transparent;border:0;color:white;padding:3px 0 10px}.video-modal-screen{aspect-ratio:16/9;background:#111}.video-modal-screen iframe{width:100%;height:100%;border:0} /* v0.5: two-tier persistent archive; selecting LIST slides the upper tier away. */ .left-archive{display:flex;flex-direction:column;gap:10px;overflow:hidden} .primary-archive{flex:0 0 64%;min-height:0;min-width:0;overflow:hidden;transition:flex-basis .36s ease,opacity .24s ease;opacity:1} .primary-archive .archive-grid-wrap,.primary-archive .relations-wrap{height:100%;overflow:auto} .archive-list-wrap{flex:1 1 36%;height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;transition:flex-grow .36s ease;overscroll-behavior:contain} .left-archive[data-archive-mode="list"] .primary-archive{flex-basis:0%;opacity:0;pointer-events:none} .left-archive[data-archive-mode="list"]{gap:0} .left-archive[data-archive-mode="list"] .archive-list-wrap{flex-grow:1} .left-archive[data-archive-mode="relations"] .primary-archive{flex-basis:64%} .left-archive[data-archive-mode="relations"] .archive-list-wrap{flex-grow:1} .list-rows{min-width:0} .list-section-title{position:sticky;top:-12px;z-index:5;background:#fafafa;padding:7px 0;margin:0} .list-heading{top:29px} .right-rail{position:relative;gap:0;background:#050505;grid-template-rows:minmax(0,33fr) minmax(0,28fr) minmax(0,39fr)} .right-rail .rail-box{padding:15px 17px;border-bottom:1px solid #565656} .rail-back{display:none;background:#050505;color:white;padding:12px 15px;border-bottom:1px solid #666} .rail-back button{background:none;border:1px solid #777;color:white;padding:7px 11px;font-size:11px} .rail-focus{background:none;border:0;color:white;font-size:17px} .right-rail[data-rail-mode="projects"]{display:flex;flex-direction:column} .right-rail[data-rail-mode="projects"] .rail-back{display:block} .right-rail[data-rail-mode="projects"] #projects{flex:1;min-height:0} .right-rail[data-rail-mode="projects"] #media,.right-rail[data-rail-mode="projects"] #video-player{display:none} .right-rail[data-rail-mode="media"]{display:flex;flex-direction:column} .right-rail[data-rail-mode="media"] .rail-back{display:block} .right-rail[data-rail-mode="media"] #projects{display:none} .right-rail[data-rail-mode="media"] #media{flex:1 1 auto;min-height:0} .right-rail[data-rail-mode="media"] #video-player{flex:0 0 auto;max-height:52%;min-height:200px} .right-rail[data-rail-mode="media"] .rail-list{flex:1;overflow:auto} /* Expanded video always uses an embedded iframe in a framed overlay, not fullscreen. */ .video-modal{padding:26px;background:rgba(0,0,0,.63)} .video-modal-frame{width:min(900px,92vw);max-height:88dvh;border:1px solid #999} .video-modal-screen{aspect-ratio:16 / 9;max-height:calc(88dvh - 64px)} @media(max-width:760px){ .left-archive{height:auto;min-height:0;overflow:visible;gap:10px} .primary-archive{flex:none;height:auto;max-height:65vh;overflow:auto;transition:max-height .3s ease,opacity .3s ease} .left-archive[data-archive-mode="list"] .primary-archive{max-height:0;overflow:hidden;height:0} .left-archive[data-archive-mode="relations"] .primary-archive{max-height:65vh} .archive-list-wrap{flex:none;max-height:60vh;overflow:auto;height:auto} .left-archive[data-archive-mode="list"] .archive-list-wrap{max-height:75vh} .primary-archive .archive-grid-wrap,.primary-archive .relations-wrap{height:auto;max-height:65vh;overflow:auto} .right-rail{display:flex;flex-direction:column;min-height:400px;gap:0} .right-rail[data-rail-mode="all"] .rail-box{min-height:170px} .right-rail[data-rail-mode="projects"] #projects{min-height:350px} .right-rail[data-rail-mode="media"] #media{min-height:250px} .right-rail[data-rail-mode="media"] #video-player{max-height:none;min-height:240px} } @media(prefers-reduced-motion:reduce){.primary-archive,.archive-list-wrap{transition:none}} /* v0.5.1: restore three separate black blocks on the landing page. Focused PROJECTS or MEDIA remains one uninterrupted black column. */ @media (min-width:761px){ .right-rail[data-rail-mode="all"]{background:transparent;gap:17px;grid-template-rows:minmax(0,33fr) minmax(0,28fr) minmax(0,39fr)} .right-rail[data-rail-mode="all"] .rail-box{border-bottom:0} .right-rail[data-rail-mode="projects"],.right-rail[data-rail-mode="media"]{background:#050505;gap:0} .right-rail[data-rail-mode="projects"] .rail-box,.right-rail[data-rail-mode="media"] .rail-box{border-bottom:0} } @media(max-width:760px){ .right-rail[data-rail-mode="all"]{background:transparent;gap:12px} .right-rail[data-rail-mode="all"] .rail-box{border-bottom:0} .right-rail[data-rail-mode="projects"],.right-rail[data-rail-mode="media"]{background:#050505;gap:0} } /* Suggested links are inferred from text, not curator-confirmed. */ .graph-edge.suggested{stroke:#999;stroke-dasharray:4 4;stroke-width:1.1;opacity:.72} /* Plugin suggestions use dashed edges; internal links are subtly distinct. */ .graph-edge.suggested{stroke-dasharray:6 5;stroke-width:1.3}.graph-edge.internal{stroke:#4a4a4a;stroke-width:1.8} .graph-node[data-type="media"] circle{fill:#777}.graph-edge.media{stroke:#888;stroke-dasharray:2 3} /* v0.5.5 – wider RELATIONS inspection, typed external evidence. */ .graph-node[data-type="external"] circle{fill:#326f9a;stroke:#1c4d72;stroke-width:2} .graph-node[data-type="external"] text{fill:#1b4a70;stroke:#f4f4f4} .graph-node[data-type="external"].is-active circle,.graph-node[data-type="external"]:hover circle{stroke:#0d3b5e} .graph-edge.external{stroke:#387ba8;stroke-width:1.9;stroke-dasharray:5 3;opacity:.86} .graph-edge.discovery{stroke:#186b9b;stroke-width:2.6;stroke-dasharray:none;opacity:.95} .graph-node[data-type="person"] circle{fill:#829b85} .relations-wrap.is-expanded{position:fixed;inset:12px;z-index:99990;height:auto!important;max-height:none!important;width:auto!important;padding:18px 22px;box-shadow:0 15px 75px #0008;background:#f4f4f4} .relations-wrap.is-expanded .relations-canvas{min-height:45vh} .relation-actions .relation-focus{background:#e4eff7;border-color:#759bb6;color:#194e76} .relation-actions button[aria-pressed="true"]{background:#235b80;color:white;border-color:#235b80} .relation-status{font-size:10px;color:#416a83;flex:1;min-width:150px} .relations-wrap.is-expanded .relation-inspector{font-size:13px;min-height:60px} @media(max-width:760px){.relations-wrap.is-expanded{inset:4px;padding:10px}.relation-actions{flex-wrap:wrap;white-space:normal}} /* v0.5.6: the status label must NOT consume free space. Give the graph canvas the remaining height of the RELATIONS panel. */ .relations-wrap{display:flex;flex-direction:column;min-height:0;} .relation-status{flex:0 0 auto;min-height:0;padding:2px 0 7px;line-height:1.35;} .relations-canvas{flex:1 1 auto;min-height:0;width:100%;} .relations-wrap.is-expanded{display:flex;flex-direction:column;overflow:hidden;} .relations-wrap.is-expanded .relations-canvas{flex:1 1 auto;min-height:0;} @media(max-width:760px){.relations-wrap:not(.is-expanded) .relations-canvas{min-height:300px;}} /* v0.5.7: typed shapes, media opt-in, corner evidence/thumbnail preview */ .graph-node .node-shape{stroke:#333;stroke-width:1.35;fill:#efefef;vector-effect:non-scaling-stroke} .graph-node[data-type="work"] .node-shape{fill:#161616;stroke:#161616} .graph-node[data-type="concept"] .node-shape{fill:#f7f7f7;stroke:#555;stroke-width:2} .graph-node[data-type="technique"] .node-shape{fill:#727272;stroke:#333} .graph-node[data-type="institution"] .node-shape{fill:#a2a2a2} .graph-node[data-type="publication"] .node-shape{fill:#d5d5d5;stroke:#555} .graph-node[data-type="person"] .node-shape{fill:#819d88;stroke:#405e45} .graph-node[data-type="media"] .node-shape{fill:#888;stroke:#555} .graph-node[data-type="external"] .node-shape{fill:#326f9a;stroke:#164666;stroke-width:2} .graph-node.is-active .node-shape,.graph-node:hover .node-shape,.graph-node:focus-visible .node-shape{stroke:#bb312d;stroke-width:3} .graph-node[data-type="external"]:hover .node-shape{stroke:#0b3b5c} .relation-hover-preview{position:absolute;bottom:27px;right:11px;width:clamp(145px,24%,250px);max-height:72%;overflow:hidden;background:#101010;color:#fafafa;border:1px solid #777;box-shadow:0 5px 20px #0005;padding:9px;z-index:5;pointer-events:none} .relation-hover-preview[hidden]{display:none!important} .relation-preview-category{font-size:10px;color:#9fc3db;margin-bottom:7px;letter-spacing:.07em} .relation-hover-preview img{width:100%;max-height:170px;aspect-ratio:4/3;object-fit:contain;background:#202020;display:block;margin-bottom:7px} .relation-hover-preview img[hidden]{display:none!important} .relation-preview-title{font-size:12px;font-weight:700;overflow-wrap:anywhere;line-height:1.3} .relation-preview-detail{font-size:10px;color:#bbb;margin-top:5px;overflow-wrap:anywhere;max-height:65px;overflow:hidden} .relation-legend{font-size:9px;color:#555;flex:0 0 auto;padding-top:6px;white-space:normal} @media(max-width:760px){.relation-hover-preview{width:160px;right:8px}.relation-hover-preview img{max-height:115px}} /* v0.5.8 — sticky single-post masthead and left-side miniature artwork archive */ .single-screen{height:auto;min-height:100dvh;overflow:visible;display:block;} .single-screen>.site-header{position:sticky;top:0;z-index:80;background:var(--paper);margin:0 22px;} body.admin-bar .single-screen>.site-header{top:32px;} .single-page-layout{width:calc(100% - 44px);max-width:1510px;margin:0 auto;display:grid;grid-template-columns:205px minmax(0,1fr);gap:26px;align-items:start;} .single-page-layout>.single-content{width:100%;max-width:1020px;margin:0 auto;min-width:0;padding:24px 0 80px;} .mini-work-index{position:sticky;top:72px;align-self:start;display:flex;flex-direction:column;max-height:calc(100dvh - 90px);min-height:170px;overflow:hidden;background:var(--paper);border-right:1px solid #bbb;padding:16px 12px 8px 0;} body.admin-bar .mini-work-index{top:104px;max-height:calc(100dvh - 122px);} .mini-work-index-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12px;border-bottom:1px solid #999;padding:0 2px 11px 0;flex:none;} .mini-count{font-weight:400;color:#666;font-size:10px;} .mini-index-list{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aaa transparent;min-height:0;flex:1 1 auto;} .mini-index-item{display:grid;grid-template-columns:43px minmax(0,1fr) 10px;align-items:center;gap:8px;min-height:53px;padding:5px 4px 5px 0;border-bottom:1px solid #d0d0d0;font-size:10px;line-height:1.25;} .mini-index-item img,.mini-index-fallback{display:block;width:43px;height:39px;object-fit:cover;background:#ddd;} .mini-index-fallback{display:grid;place-items:center;color:#777;font-size:17px;} .mini-index-name{overflow-wrap:anywhere;} .mini-index-dot{color:#111;font-size:10px;} .mini-index-item:hover,.mini-index-item:focus-visible{background:#e5e5e5;} .mini-index-item.is-current{background:#e5e5e5;font-weight:700;} .mini-index-home{display:block;border-top:1px solid #999;padding:11px 2px 4px;font-size:10px;font-weight:700;flex:none;} .mini-index-jump{display:none;} @media(max-width:1000px){ .single-page-layout{grid-template-columns:155px minmax(0,1fr);gap:18px;width:calc(100% - 28px);} .single-page-layout>.single-content{padding-top:20px;} .mini-index-item{grid-template-columns:35px minmax(0,1fr) 7px;gap:5px;font-size:9px;} .mini-index-item img,.mini-index-fallback{width:35px;height:34px;} } @media(max-width:700px){ .single-screen>.site-header{margin:0 12px;} .single-page-layout{display:flex;flex-direction:column;gap:0;width:calc(100% - 24px);} .single-page-layout>.single-content{padding:16px 8px 60px;} .mini-work-index{position:relative;top:auto!important;max-height:165px!important;min-height:0;width:100%;padding:8px 0;border-right:0;border-bottom:1px solid #aaa;} .mini-index-list{display:flex;overflow-x:auto;overflow-y:hidden;min-height:66px;} .mini-index-item{display:flex;flex:0 0 120px;flex-direction:column;align-items:stretch;gap:4px;border-right:1px solid #ddd;border-bottom:0;padding:4px 8px;font-size:9px;} .mini-index-item img,.mini-index-fallback{width:100%;height:42px;object-fit:cover;} .mini-index-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .mini-index-dot,.mini-index-home{display:none;} .mini-index-jump{display:inline;} } @media(max-width:782px){body.admin-bar .single-screen>.site-header{top:46px;}} /* v0.5.9: heterogeneous media types in the existing framed player */ .player-stage .inline-media,.video-modal-screen .inline-media{width:100%;height:100%;object-fit:contain;background:#111;display:block} .player-stage audio,.video-modal-screen audio{width:100%;height:72px;margin:auto;position:relative;top:calc(50% - 36px)} .player-stage .media-open-link,.video-modal-screen .media-open-link{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#fff;text-decoration:underline;font-size:12px;text-align:center;padding:12px} .video-modal-screen{overflow:hidden} /* v0.6.6 — Stable viewport for ALL media sources. The rail has one fixed desktop geometry. Embedded providers receive the whole player viewport and fit their own content. Native media uses contain. Avoid object-fit/aspect-ratio on iframe: neither yields intrinsic video ratio. */ @media (min-width:761px){ .right-rail{height:100%;min-height:0;overflow:hidden;} .right-rail[data-rail-mode="all"]{ display:grid; grid-template-rows:minmax(0,33fr) minmax(0,28fr) minmax(0,39fr); gap:12px; background:transparent; } .right-rail[data-rail-mode="all"] .rail-box{min-height:0;max-height:none;} .right-rail[data-rail-mode="media"]{ display:grid; grid-template-rows:auto minmax(0,23fr) minmax(0,77fr); gap:0; background:#050505; } .right-rail[data-rail-mode="media"] .rail-back{display:block;} .right-rail[data-rail-mode="media"] #projects{display:none;} .right-rail[data-rail-mode="media"] #media, .right-rail[data-rail-mode="media"] #video-player{min-height:0;max-height:none;} .right-rail[data-rail-mode="projects"]{height:100%;} } #video-player{ display:flex;flex-direction:column;justify-content:flex-start; min-height:0;overflow:hidden; } #video-player .player-top, #video-player .player-caption, #video-player .player-actions{flex:0 0 auto;} #player-stage{ flex:1 1 0%;height:0;min-height:0;width:100%;max-height:none; aspect-ratio:auto;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; background:#111; } /* An iframe is a window into Google's/YouTube's/Vimeo's own player. Give it the WHOLE viewport; the provider handles internal letterboxing. */ #player-stage > iframe.provider-embed, #video-modal-screen > iframe.provider-embed{ position:absolute;inset:0; display:block;width:100%;height:100%;min-width:0;min-height:0; max-width:none;max-height:none;margin:0;padding:0;border:0; transform:none;flex:none; } #player-stage > img.inline-media, #player-stage > video.inline-media, #video-modal-screen > img.inline-media, #video-modal-screen > video.inline-media{ width:100%;height:100%;max-width:100%;max-height:100%; object-fit:contain;display:block; } #player-stage .player-poster{ width:100%;height:100%;object-fit:contain; } #player-stage > audio.inline-media, #video-modal-screen > audio.inline-media{ width:100%;height:54px;max-height:100%;margin:auto;position:static; } .video-modal-frame{ display:flex;flex-direction:column; width:min(940px,94vw);height:min(86dvh,800px);max-height:90dvh; } #video-modal-screen{ flex:1 1 0%;position:relative;min-height:0;height:0;aspect-ratio:auto; display:flex;align-items:center;justify-content:center;overflow:hidden; } @media(max-width:760px){ #video-player{height:360px;min-height:360px;flex:0 0 360px;} #player-stage{height:0;min-height:0;} } /* v0.6.7 — external WordPress cloud-provider modules use the same fixed viewport. No public aspect-ratio controls, no resizing of the sidebar. */ #player-stage > iframe.provider-embed, #video-modal-screen > iframe.provider-embed{border:0!important;inset:0!important;width:100%!important;height:100%!important;} /* v0.6.8 — native MP4/audio/image playback. THE RIGHT SIDEBAR IS NEVER RESIZED WHEN A MEDIA ENTRY CHANGES. Only media inside the fixed stage fits. A real