*{box-sizing:border-box}body{margin:0;font-family:var(--font-serif)}main,body>footer{width:min(1040px,calc(100% - 72px));margin:auto}.intro{padding:32px 0 48px}h1{font-size:48px;font-weight:400;letter-spacing:-.03em;margin:0 0 14px}.intro p{font-size:18px;color:var(--muted);margin:0}.desk-grid{columns:3;column-gap:24px}.desk-grid figure{margin:0 0 24px;break-inside:avoid}.desk-grid a{display:block}.desk-grid img{display:block;width:100%;height:auto}.desk-grid figcaption{font-size:15px;color:var(--muted);margin-top:10px}body>footer{padding:40px 0 56px;color:var(--muted);font:12px var(--font-sans)}dialog{border:0;padding:40px 20px 20px;background:var(--bg);max-width:95vw;max-height:94vh}dialog::backdrop{background:#171a17d9}dialog img{display:block;max-width:85vw;max-height:75vh;width:auto;height:auto;margin:auto}dialog p:empty{display:none}dialog p{text-align:center;color:var(--muted)}.close{position:absolute;right:8px;top:4px;border:0;background:transparent;font-size:28px;cursor:pointer;width:36px;height:36px;color:var(--fg)}button:focus-visible{outline:2px solid var(--link)}body:has(dialog[open]){overflow:hidden}@media(max-width:800px){.desk-grid{columns:2}}@media(max-width:520px){main,body>footer{width:calc(100% - 40px)}.intro{padding:16px 0 32px}h1{font-size:38px}.desk-grid{columns:1}}

.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px;font:12px/1.5 var(--font-sans);color:var(--muted)}
.editor-toolbar button{border:1px solid var(--border);border-radius:3px;padding:8px 13px;background:transparent;color:var(--fg);font:inherit;cursor:pointer}
.editor-toolbar button:hover{border-color:var(--link)}
.editor-toolbar [hidden]{display:none}
.desk-grid.arranging{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;columns:auto;counter-reset:photo}
.desk-grid.arranging figure{position:relative;margin:0;cursor:grab;counter-increment:photo;align-self:start}

.desk-grid.arranging img{height:220px;object-fit:contain;background:var(--border-soft);pointer-events:none}
.desk-grid.arranging a{pointer-events:none}
.desk-grid.arranging .dragging{opacity:.45}
.desk-grid.arranging figure:focus-visible{outline:2px solid var(--link);outline-offset:4px}
@media(max-width:600px){.desk-grid.arranging{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.desk-grid.arranging img{height:180px}}

.desk-grid figure[hidden]{display:none}
.hide-photo,.photo-number{display:none}
.desk-grid.arranging a{position:relative}
.desk-grid.arranging .photo-number{display:block;position:absolute;bottom:10px;left:10px;padding:5px 9px;border:1px solid #ffffff80;border-radius:4px;background:#fbfaf6ed;color:#373a32;box-shadow:0 1px 5px #00000012;font:500 11px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.desk-grid.arranging .hide-photo{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted);font:12px/1.5 var(--font-sans);cursor:pointer}
.hide-photo input{width:15px;height:15px;margin:0;accent-color:var(--link);cursor:pointer}
.desk-grid.arranging .is-hidden img{opacity:.35;filter:grayscale(.65)}
.desk-grid.arranging .is-hidden .hide-photo{color:var(--fg)}

.photo-frame{display:block;position:relative;overflow:hidden;width:100%}
.desk-grid .photo-frame img,.crop-dialog .photo-frame img{position:absolute;max-width:none;max-height:none;height:auto;margin:0;display:block}
.desk-grid.arranging .photo-frame img{height:auto;background:none}
.crop-photo{display:none}
.desk-grid.arranging .crop-photo{display:inline-block;margin-top:10px;border:1px solid var(--border);border-radius:4px;background:transparent;padding:6px 10px;color:var(--fg);font:12px var(--font-sans);cursor:pointer}
.crop-dialog{width:640px;padding:26px;border:1px solid var(--border);border-radius:6px;overflow:auto}
.crop-dialog h2{font:400 27px var(--font-serif);margin:0 0 8px}
.crop-dialog p{font:13px/1.5 var(--font-sans);text-align:left;margin:0 0 20px}
.crop-stage{height:320px;display:flex;align-items:center;justify-content:center;background:var(--border-soft);margin-bottom:20px}
.crop-stage .photo-frame{width:min(100%,calc(320px * var(--crop-ratio)))}
.crop-sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.crop-sliders label{display:grid;grid-template-columns:45px minmax(0,1fr) 35px;align-items:center;gap:8px;font:12px var(--font-sans)}
.crop-sliders input{width:100%;accent-color:var(--link)}
.crop-sliders output{font-variant-numeric:tabular-nums;text-align:right}
.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.crop-actions button{border:1px solid var(--border);background:transparent;border-radius:4px;padding:9px 14px;font:12px var(--font-sans);color:var(--fg);cursor:pointer}
.crop-actions button:first-child{margin-right:auto}
.crop-actions [data-action=apply]{background:var(--link);color:var(--bg);border-color:var(--link)}
@media(max-width:520px){.crop-sliders{grid-template-columns:1fr}.crop-dialog{padding:20px}.crop-stage{height:240px}.crop-stage .photo-frame{width:min(100%,calc(240px * var(--crop-ratio)))}}

/* Match the editor's left-to-right order without forcing equal image heights. */
.desk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;columns:auto;align-items:start}
.desk-grid figure{margin:0;min-width:0}
.desk-grid.arranging .drop-before{box-shadow:-5px 0 0 var(--link)}
.desk-grid.arranging .drop-after{box-shadow:5px 0 0 var(--link)}
@media(max-width:800px){.desk-grid,.desk-grid.arranging{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.desk-grid,.desk-grid.arranging{grid-template-columns:minmax(0,1fr)}}

/* Compact gallery; Arrange mode remains a numbered, sequential editing grid. */
.desk-grid.packed:not(.arranging){grid-auto-rows:1px;row-gap:0;align-items:start}
.desk-grid a{position:relative}
.desk-grid.local-editor .photo-number{display:block;position:absolute;bottom:10px;left:10px;padding:5px 9px;border:1px solid #ffffff80;border-radius:4px;background:#fbfaf6ed;color:#373a32;box-shadow:0 1px 5px #00000012;font:500 11px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.08em;pointer-events:none}