:root{--page:#fff;--surface:#f5f7f3;--control:#fff;--ink:#172018;--muted:#465448;--line:#cfd9d1;--link:#006400;--primary:#006400;--on-primary:#fff;--selected:#c2e5d3;--selected-border:#8eb99d;--accent:#f5f5dc;--accent-ink:#3c4426;--accent-edge:#9ba45e;--photo-back:#f2f4ef;--focus:#006400;color-scheme:light}
:root[data-theme=dark]{--page:#151b17;--surface:#1d2720;--control:#222e25;--ink:#edf2e9;--muted:#bac7b9;--line:#3d5042;--link:#c2e5d3;--primary:#c2e5d3;--on-primary:#173a24;--selected:#344d3a;--selected-border:#8fb69a;--accent:#303624;--accent-ink:#e8edcc;--accent-edge:#a3ad69;--photo-back:#1d251f;--focus:#d7df9d;color-scheme:dark}
body.gallery-page{background:var(--page);color:var(--ink);padding:0;max-width:none;font:16px/1.5 Arial,Helvetica,sans-serif;margin:60px 0 0}
.gallery-page *{box-sizing:border-box}
.gallery-page a{color:var(--link)}
.gallery-page h1,.gallery-page h2,.gallery-page h3{color:var(--ink);font-weight:700;letter-spacing:0;line-height:1.2}
.gallery-page button,.gallery-page input,.gallery-page textarea,.gallery-page select{font:inherit;max-width:100%}
.gallery-page button,.gallery-page .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 14px;margin:0;border:1px solid var(--line);border-radius:4px;background:var(--control);color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none}
.gallery-page button:disabled{opacity:.5;cursor:default}
.gallery-page button:hover:not(:disabled),.gallery-page .button:hover{border-color:var(--selected-border)}
.gallery-page button[aria-pressed=true],.gallery-page .tab[aria-selected=true]{background:var(--selected);border-color:var(--selected-border)}
.gallery-page .primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.gallery-page :is(button,a,input,textarea,select,[contenteditable]):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.gallery-page .muted{color:var(--muted)}
.album-shell{max-width:1180px;margin:auto;padding:30px 24px}
.album-shell.wide{max-width:1488px}
.album-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.album-head{padding:24px 0}
.album-head h1{font-size:clamp(28px,3vw,40px);max-width:none;line-height:1.18;margin:12px 0 18px}
.album-kicker{display:inline-block;background:var(--accent);color:var(--accent-ink)!important;padding:5px 10px;border-radius:2px;font-size:13px;font-weight:600}
.album-intro{max-width:none;color:var(--ink);font-size:16px;line-height:1.65}
.album-intro p{margin:0 0 12px}.album-intro ul,.album-intro ol{padding-left:24px}.album-intro a{text-decoration:underline}
.album-meta{font-size:13px;color:var(--muted);margin:16px 0}
.album-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.album-actions small{font-size:13px;color:var(--muted)}
.album-gallery{--gap:18px;display:flex;flex-direction:column;gap:var(--gap)}
.album-gallery.compact{--gap:8px}.album-gallery.spacious{--gap:28px}
.gallery-photo{min-width:0;margin:0;align-self:stretch}
.gallery-photo .photo-link{display:block;width:100%;padding:0;border:0;background:var(--photo-back);line-height:0;position:relative;cursor:zoom-in}
.gallery-photo .photo-link:hover:after{content:'+';position:absolute;right:12px;bottom:12px;padding:14px 10px;background:var(--control);color:var(--link);font-size:22px;line-height:1;border-radius:3px}
.gallery-photo img{display:block;width:100%;height:auto;object-fit:contain}
.gallery-photo figcaption{display:block;width:100%;max-width:100%;box-sizing:border-box;text-align:center;margin-top:8px;padding:7px 11px;background:var(--accent);color:var(--accent-ink);font-size:14px;line-height:1.5;border-radius:2px}
.album-gallery.captions-viewer figcaption{display:none}
.gallery-block{display:grid;gap:var(--gap);min-width:0}
.gallery-block.automatic{display:flex;flex-wrap:wrap}
.gallery-block.automatic .gallery-photo{flex:1 1 calc(var(--ratio,1.5)*230px);max-width:100%}
.gallery-block.automatic img{height:250px;object-fit:contain}
.gallery-block.automatic .gallery-photo:last-child{flex-grow:0}
.gallery-block.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-block.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-block.feature{grid-template-columns:1.6fr 1fr}
.gallery-block.feature .gallery-photo:first-child{grid-row:span 2;display:flex;flex-direction:column}
.gallery-block.feature .gallery-photo:first-child .photo-link{flex:1;display:flex;align-items:center}
.gallery-block.feature img{max-height:300px;object-fit:contain}
.gallery-block.feature .gallery-photo:first-child img{max-height:650px}
.gallery-heading{position:relative;font-size:26px;padding-top:18px;margin:24px 0 4px}
.gallery-heading:before{content:'';position:absolute;left:0;top:0;width:44px;height:4px;background:var(--accent-edge)}
.album-gallery.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.album-gallery.mode-grid img{aspect-ratio:3/2;object-fit:contain}
.album-gallery.mode-grid.ratio-3-2 img{object-fit:cover}.album-gallery.mode-grid.ratio-1-1 img{aspect-ratio:1;object-fit:cover}
.album-after{border-top:1px solid var(--line);margin-top:40px;padding-top:28px}
.album-after h2{font-size:22px;margin-bottom:14px}
.comment-form{max-width:700px;display:grid;gap:8px;margin-bottom:20px;font-size:14px;line-height:1.5}
.gallery-page input:not([type=checkbox]):not([type=file]),.gallery-page textarea,.gallery-page select,.gallery-page [contenteditable]{width:100%;border:1px solid var(--line);background:var(--control);color:var(--ink);border-radius:4px;padding:10px;min-height:44px;font-size:16px}
.gallery-page textarea{white-space:pre-wrap;resize:vertical;line-height:1.5}
.gallery-page [contenteditable]{min-height:130px;line-height:1.6}.gallery-page [contenteditable] :is(ul,ol){padding-left:24px}
.gallery-page .comment{background:var(--surface);padding:12px;border-radius:4px;color:var(--ink);font-size:14px;line-height:1.5;margin-bottom:12px}
.gallery-page .comment .muted{font-size:12px}
.related-albums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.related-albums img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:transparent}
.related-albums h3{font-size:16px;line-height:1.35;margin-top:8px}
:is(.gallery-page,.row-editor-page) .viewer{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:#111612;color:#f1f4ed;padding:0;color-scheme:dark;z-index:1000}
.viewer::backdrop{background:#111612}.viewer[open]{display:flex;flex-direction:column}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) 20px 12px}
.viewer-title{font-weight:600;max-width:45%;overflow-wrap:anywhere}.viewer-counter{color:#c1cbbc;font-size:14px}
.viewer-controls{display:flex;gap:8px;align-items:center}
:is(.gallery-page,.row-editor-page) .viewer button{background:#ffffff12;color:#f1f4ed;border-color:#ffffff35;min-width:44px;padding:8px}
:is(.gallery-page,.row-editor-page) .viewer :focus-visible{outline-color:#d7df9d}
.viewer-stage{flex:1;min-height:0;position:relative;display:flex;gap:16px;align-items:center;justify-content:center;padding:0 18px;overflow:auto}
.viewer-stage img{display:block;min-width:0;max-width:calc(100% - 130px);max-height:100%;width:auto;height:auto;object-fit:contain;touch-action:pan-y pinch-zoom}
.viewer-error{position:absolute;bottom:60px;background:#111612e8;color:#fff;padding:12px}
.viewer-bottom{text-align:center;padding:16px 24px max(24px,env(safe-area-inset-bottom));font-size:16px;color:#f1f4ed}
.gallery-page [hidden]{display:none!important}
.preview-panel{border:1px solid var(--line);background:var(--page);max-width:100%;padding:20px;margin:20px 0;overflow:hidden}
.preview-panel.phone{width:390px;margin:20px auto}.preview-panel .album-head{padding:16px 0}.preview-panel h1{font-size:32px}
.preview-panel.phone .gallery-block{display:flex;flex-direction:column}.preview-panel.phone .album-gallery.mode-grid{grid-template-columns:1fr}.preview-panel.phone .gallery-photo img{height:auto;max-height:none;aspect-ratio:auto}.preview-panel.phone .gallery-block.automatic .gallery-photo{flex-basis:auto}
@media(max-width:1099px){.album-gallery.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-block.trio{grid-template-columns:1fr}}
@media(max-width:767px){.viewer-title{font-size:12px;max-width:35%}.viewer-top{padding-left:12px;padding-right:12px;gap:6px}.viewer-controls{gap:4px}.viewer-stage{padding:0 8px}.viewer-stage img{max-width:100%}.viewer-stage>button{position:absolute;bottom:8px;z-index:1}.viewer-stage .viewer-prev{left:12px}.viewer-stage .viewer-next{right:12px}.album-shell{padding:20px 16px}.album-head{padding-top:24px}.album-head h1{font-size:30px}.album-intro{font-size:16px}.album-toolbar{align-items:flex-start}.gallery-heading{font-size:24px}.preview-panel{padding:12px}}
@media(max-width:639px){.album-gallery.mode-grid{grid-template-columns:1fr}.gallery-block:is(.pair,.trio,.feature){display:flex;flex-direction:column}.gallery-block.automatic{display:flex;flex-direction:column}.gallery-block.automatic .gallery-photo{flex-basis:auto}.gallery-block.automatic img,.gallery-block.feature img,.gallery-block.feature .gallery-photo:first-child img{height:auto;max-height:none}.album-gallery.mode-grid img{aspect-ratio:auto}.album-gallery.mode-grid.ratio-1-1 img{aspect-ratio:1}.album-gallery.mode-grid.ratio-3-2 img{aspect-ratio:3/2}}
@media(prefers-reduced-motion:reduce){.gallery-page *{scroll-behavior:auto!important;transition:none!important}}
.gallery-page :is(h1,h2,h3,.album-intro,.album-kicker,.gallery-photo figcaption,.comment){overflow-wrap:anywhere}
.album-kicker{max-width:100%}
/* Public album: images sit directly on the page without grey letterbox cards. */
.gallery-photo .photo-link{background:transparent;overflow:hidden}
.gallery-block.automatic img{background:transparent}
.related-albums img{object-fit:cover;background:transparent}
.album-social .share-links{padding:0;margin:4px 0 18px;gap:8px}
.album-social .share-links li{margin:0;padding:0}
.album-social .social_media_icon{display:block;width:40px;height:40px;max-width:40px}
.edit-album-link{white-space:nowrap}
/* Viewer downloads and restrained transitions. */
:is(.gallery-page,.row-editor-page) .viewer-download{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #ffffff35;border-radius:4px;background:#ffffff12;color:#f1f4ed;text-decoration:none;font-weight:700;font-size:20px}
@media(max-width:767px){
 .viewer-top,.viewer-bottom,.viewer-stage>button{transition:opacity .18s}
 .viewer.chrome-hidden .viewer-top,.viewer.chrome-hidden .viewer-bottom,.viewer.chrome-hidden .viewer-stage>button{opacity:0;pointer-events:none}
}
/* Exact row geometry from the editor: equal image heights, native proportions. */
.gallery-block.row{display:flex;width:100%;margin:0;gap:var(--gap);align-items:stretch}
.gallery-block.row .gallery-photo{flex:var(--ratio,1.5) 1 0;min-width:0;display:flex;flex-direction:column}
.gallery-block.row .gallery-photo .photo-link{background:transparent;position:relative;aspect-ratio:var(--ratio,1.5);flex:none}
.gallery-block.row img{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.gallery-block.row figcaption{flex:1}
@media(max-width:600px){.gallery-block.row{display:flex;flex-direction:column}.gallery-block.row .gallery-photo{flex:auto;width:100%}}

.album-kicker a{color:inherit!important;text-decoration:none}.album-kicker a:hover{text-decoration:underline}

@media(max-width:1000px){.related-albums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.related-albums{grid-template-columns:minmax(0,1fr)}}

.viewer-download svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Fixed navigation behavior: drag/swipe or use the arrow controls. */
.viewer-stage{overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab}
.viewer-stage:active{cursor:grabbing}
.viewer-stage img{user-select:none;-webkit-user-drag:none}
.viewer-stage img.is-loading{filter:blur(16px)}
:is(.gallery-page,.row-editor-page) .viewer-controls :is(button,.viewer-download){display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:9px;box-sizing:border-box}
.viewer-controls svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Counter stays on the viewport centerline, independent of title/control widths. */
.viewer-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.viewer-title{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-counter{justify-self:center;white-space:nowrap}
.viewer-controls{justify-self:end}
/* A single fixed frame prevents small previews growing when full resolution arrives. */
.viewer-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0 76px;box-sizing:border-box;object-fit:contain}
:is(.gallery-page,.row-editor-page) .viewer-stage>button{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:8px;background:#111612b3}
.viewer-stage .viewer-prev{left:16px}.viewer-stage .viewer-next{right:16px}
.viewer-stage>button svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.viewer-stage img{padding:0}.viewer-stage .viewer-prev{left:8px}.viewer-stage .viewer-next{right:8px}}
@media(max-width:600px){.viewer-top{grid-template-columns:minmax(0,1fr) auto;gap:8px}.viewer-title{grid-column:1;grid-row:1}.viewer-controls{grid-column:2;grid-row:1}.viewer-counter{grid-column:1/-1;grid-row:2}}

/* Comments and recommendations share the desktop width evenly. */
.album-bottom>section{min-width:0}
@media(min-width:901px){
 .album-bottom.has-recommendations{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
 .album-bottom.has-recommendations .related-albums{grid-template-columns:repeat(2,minmax(0,1fr))}
 .album-bottom .comment-form{max-width:none}
}

/* Compact secondary form, aligned with the 14px captions and comment text. */
.gallery-page .comment-form :is(input:not([type=checkbox]):not([type=file]),textarea){font-size:14px;padding:7px 10px;min-height:36px}
.gallery-page .comment-form textarea{min-height:88px}
.gallery-page .comment-form button{justify-self:start;min-height:36px;font-size:14px;padding:7px 14px}
@media(max-width:767px){.gallery-page .comment-form :is(input:not([type=checkbox]):not([type=file]),textarea){font-size:16px;min-height:44px}.gallery-page .comment-form button{min-height:44px}}
.album-bottom .album-after>.muted{font-size:14px;line-height:1.5}

/* Mint frames and linked metadata recall the original recommendation cards. */
:root{--album-card-frame:#c2e5d3}
:root[data-theme=dark]{--album-card-frame:#4b7559}
.related-album{min-width:0;margin:0;display:flex;flex-direction:column;gap:8px;align-self:start}
.related-album-frame{display:block;padding:6px;border:8px solid var(--album-card-frame);border-radius:10px;background:var(--page)}
.related-album-frame:hover{border-color:var(--edge)}
.related-album-frame img{border-radius:2px}
.related-album-info{padding:10px 12px;border-radius:10px;background:var(--mint-surface);color:var(--ink)}
.related-album-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;font-size:12px;line-height:1.5}
.related-album-tags{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;gap:0 5px}
.related-album-tags li{list-style:none;margin:0;padding:0}
.related-album-tags li+li:before{content:'·';margin-right:5px}
.related-album-tags a{text-decoration:none}
.related-album-info h3{margin:6px 0 0;font-size:16px;line-height:1.4}
.related-album-info h3 a{color:inherit!important;text-decoration:none}
.related-album-info a:hover{text-decoration:underline;text-underline-offset:3px}

.related-album-tags a{color:var(--ink)!important}

/* Stacked columns share the row height; each image crops to its own frame. */
.gallery-block.row.has-stacks{align-items:stretch}
.gallery-column{display:flex;flex-direction:column;gap:var(--gap);min-width:0;flex:none}
.gallery-block.row.has-stacks .gallery-photo{min-height:0;margin:0}
.gallery-block.row.has-stacks .gallery-photo .photo-link{flex:1 1 0;aspect-ratio:auto;min-height:0;overflow:hidden}
.gallery-block.row.has-stacks figcaption{flex:none}
@media(max-width:600px){
 .gallery-column{display:contents}
 .gallery-block.row.has-stacks .gallery-photo{flex:auto!important;width:100%}
 .gallery-block.row.has-stacks .gallery-photo .photo-link{flex:none;aspect-ratio:var(--ratio,1.5)}
}

/* Touch viewers fill the browser's visible viewport in either orientation.
   Controls overlay the image rather than reserving space around it. */
@media(max-width:767px),(hover:none) and (pointer:coarse){
 :is(.gallery-page,.row-editor-page) .viewer{inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#000;box-shadow:none;overflow:hidden;overscroll-behavior:none}
 .viewer::backdrop{background:#000}
 .viewer .viewer-stage{position:absolute;inset:0;width:100%;height:100%;padding:0;background:#000;overscroll-behavior:none}
 .viewer .viewer-stage img{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;object-fit:contain;object-position:center}
 .viewer .viewer-top{position:absolute;inset:0 0 auto;z-index:3;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));background:linear-gradient(#000b,transparent)}
 .viewer .viewer-bottom{position:absolute;inset:auto 0 0;z-index:3;max-height:30%;overflow:auto;padding:24px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(transparent,#000c);font-size:14px}
 .viewer .viewer-caption{margin:0;line-height:1.5}
 .viewer .viewer-prev{left:max(8px,env(safe-area-inset-left))}
 .viewer .viewer-next{right:max(8px,env(safe-area-inset-right))}
 .viewer .viewer-top,.viewer .viewer-bottom,.viewer .viewer-stage>button{transition:opacity .18s}
 .viewer.chrome-hidden .viewer-top,.viewer.chrome-hidden .viewer-bottom,.viewer.chrome-hidden .viewer-stage>button{opacity:0;pointer-events:none}
}