.image-viewport{position:relative;overflow:hidden;aspect-ratio:var(--image-ratio,1.25);background:#050505;min-width:0}.image-viewport>img{display:block;position:absolute;inset:0;margin:0;border:0;border-radius:0;max-width:none;width:100%;height:100%;object-fit:var(--image-fit,contain);object-position:50% var(--image-focal-y,50%);transform:translate(var(--image-x,0%),var(--image-y,0%)) rotate(var(--image-rotation,0deg)) scale(calc(var(--image-zoom,1)*var(--image-flip,1)),var(--image-zoom,1));transform-origin:center}.image-dialog{width:min(1050px,calc(100% - 28px));max-height:94dvh;overflow:auto;padding:0;border:1px solid var(--line);background:#101111;color:var(--text)}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.image-dialog-inner{padding:28px}.image-dialog-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:16px}.image-dialog-heading h2{font-size:2.6rem;margin-top:6px}.image-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px}.image-editor-stage{padding:20px;background:repeating-conic-gradient(#181919 0% 25%,#202121 0% 50%) 50%/22px 22px;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.image-editor-stage .image-viewport{max-height:520px;border:1px solid #a88b51;touch-action:none;cursor:grab}.image-editor-stage .image-viewport:active{cursor:grabbing}.image-editor-stage .field-note{background:#111d;padding:6px;margin:15px 0 0;text-align:center}.image-controls select{display:block;width:100%;padding:10px;background:#080909;border:1px solid var(--line);color:var(--text);font:inherit}.image-controls label{margin-bottom:13px}.image-controls input[type=range]{accent-color:var(--gold);margin:4px 0 0;padding:0;min-height:32px}.image-controls output{float:right;color:var(--gold);font-size:.8rem}.image-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.image-dialog .toggle-field{margin-block:16px}.image-field .image-viewport{width:100%;max-height:300px;margin-bottom:15px}.image-field .image-viewport img{margin:0;border:0}.image-field>button{margin:0 0 10px}.gallery-list{padding-bottom:80px}.gallery-list>input{max-width:520px}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 30px;align-items:start}.art-card .image-viewport{border:1px solid var(--line);margin-bottom:22px}.art-card h2{font-size:2.2rem;line-height:1.15;margin:10px 0}.art-card>p:not(.label){color:var(--muted);line-height:1.7;font-size:.875rem}.art-card .text-link{margin-top:16px}.art-card:hover h2{color:var(--lightgold)}.art-detail{padding-block:45px 80px}.art-detail .article-heading{max-width:900px}.art-detail-figure{width:var(--image-size,100%);max-width:1100px;margin-inline:auto}.art-zoom-button{padding:0;border:1px solid var(--line);display:block;width:100%;cursor:zoom-in;color:inherit}.art-detail figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.8rem;line-height:1.8;margin-top:14px}.art-writing{max-width:780px;margin:50px auto 0}.art-writing>.label{margin-bottom:24px}.art-author{border-top:1px solid var(--line);padding-top:25px;margin-top:30px;color:var(--muted);font-size:.875rem}.art-lightbox{width:96vw;max-width:1500px;max-height:96dvh;background:#080909;border:1px solid var(--line);color:var(--text);padding:18px}.art-lightbox img{display:block;max-height:76dvh;max-width:100%;width:auto;object-fit:contain;margin:15px auto}.art-lightbox p{text-align:center;line-height:1.7}.art-lightbox button{display:block;margin-left:auto}#art-welcome{padding:55px 0}#art-welcome h2{font-size:2.7rem;margin:20px 0}#art-welcome>p:not(.label){color:var(--muted);line-height:1.8;margin-bottom:25px}#art-fields{min-width:0;margin:0;padding:0;border:0}#art-frame{margin-block:14px 28px}#art-image-preview{max-width:560px;margin:auto}#art-body{border-top:0}#art-status,#art-list-message{font-size:.875rem;line-height:1.8;color:var(--lightgold);margin-top:18px}#art-status.error{color:#f2a4a4}#art-draft-preview{border:1px solid var(--line);padding:25px;margin-block:25px}#art-draft-preview h2{font-size:2.3rem;margin:18px 0}#art-draft-preview .image-viewport{margin:22px auto}#art-preview-toggle{margin-bottom:25px}.gallery-invite{border-block:1px solid var(--line);padding-block:45px;margin-block:20px 60px;display:flex;gap:25px;align-items:center;justify-content:space-between}.gallery-invite h2{font-size:2.7rem;margin:12px 0}.gallery-invite p{color:var(--muted);line-height:1.8}.portrait-frame>.image-viewport{width:100%}.portrait{width:var(--image-size,100%);justify-self:center}.brand-image.image-viewport{width:calc(70px * var(--brand-scale,.8));height:auto;aspect-ratio:var(--image-ratio,1.14)}.ornament.image-viewport{width:var(--image-size,100%);max-width:230px;height:auto;mix-blend-mode:normal}.ornament.image-viewport img{max-width:none}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.image-editor-layout{grid-template-columns:minmax(0,1fr) 230px}.header nav{gap:16px}.image-editor-stage{padding:10px}.image-editor-stage .image-viewport{max-height:430px}}
@media(max-width:650px){.image-dialog-inner{padding:18px}.image-editor-layout{grid-template-columns:1fr;gap:20px}.image-editor-stage{min-height:180px}.image-editor-stage .image-viewport{max-height:360px}.image-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.image-controls>[data-sliders]{grid-column:1/-1}.image-controls [data-sliders]{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.image-dialog-actions{position:sticky;bottom:-18px;background:#101111;padding-block:12px;z-index:2}.image-dialog-actions button{font-size:.8rem;padding:12px;gap:6px;flex:1}.image-dialog-heading h2{font-size:2.1rem}.gallery-grid{grid-template-columns:1fr;gap:35px}.gallery-invite{display:block}.gallery-invite .text-link{margin-top:20px}.art-detail-figure{min-width:50%}.header nav{justify-content:flex-start;gap:13px 20px}.art-detail .article-heading h1{font-size:3rem}#art-list{max-height:230px;overflow:auto}}

/* Keep crop geometry identical in the editor and the published frame. */
.image-editor-stage .image-viewport{max-height:none;max-width:min(100%,calc(520px * var(--image-ratio,1.25)))}.image-field .image-viewport{max-height:none;max-width:min(100%,calc(280px * var(--image-ratio,1.25)));margin-inline:auto}.image-field .image-viewport>img{height:100%;object-fit:var(--image-fit,contain)}
@media(max-width:650px){.image-editor-stage .image-viewport{max-height:none;max-width:min(100%,calc(360px * var(--image-ratio,1.25)))}}