@font-face {
  font-family: "Miracle Mono";
  src: url("/fonts/miracle-mono-bold-italic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
:root { --ink:#000; --mute:#8a8a8a; }
* { box-sizing:border-box; }
html,body { margin:0; background:#fff; color:var(--ink); }
body {
  font-family:"Miracle Mono", ui-monospace, Menlo, monospace;
  font-weight:700; font-style:italic; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input { font:inherit; color:inherit; }
a { color:inherit; }
.wrap { max-width:1100px; margin:0 auto; padding:48px 20px 96px; }
.rule { text-align:center; white-space:nowrap; overflow:hidden; user-select:none; }
header.site { text-align:center; margin-bottom:48px; }
header.site h1 { font-size:inherit; margin:0; font-weight:700; }
header.site p { margin:.4em 0 0; color:var(--mute); }
.note { text-align:center; color:var(--mute); padding:48px 0; }
footer.site { text-align:center; margin-top:64px; color:var(--mute); }

/* albums */
.trip { border-top:1px solid #000; }
.trip:last-child { border-bottom:1px solid #000; }
.trip-head { all:unset; cursor:pointer; display:flex; gap:1em; align-items:baseline; width:100%; padding:18px 4px; box-sizing:border-box; }
.trip-head:focus-visible { outline:2px solid #000; outline-offset:-2px; }
.trip-head .label { flex:1; }
.trip-head .meta { color:var(--mute); text-align:right; }
.trip-head:hover .label { text-decoration:underline; text-underline-offset:4px; }
.trip-body { display:none; padding:0 0 28px; }
.trip.open .trip-body { display:block; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.grid button.ph { all:unset; cursor:zoom-in; display:block; aspect-ratio:3/4; background:#f3f3f3; overflow:hidden; }
.grid button.ph:focus-visible { outline:2px solid #000; outline-offset:2px; }
.grid img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; }
.grid button.ph:hover img { opacity:.85; }
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(3,1fr); gap:3px; }
  .trip-head{ flex-wrap:wrap; }
  .trip-head .meta{ width:100%; text-align:left; padding-left:3ch; margin-top:-6px; }
}

/* lightbox */
#lb { position:fixed; inset:0; background:#fff; z-index:50; display:none; flex-direction:column; }
#lb.on { display:flex; }
#lb .stage { flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:56px 12px 12px; }
#lb img { max-width:100%; max-height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
#lb .bar { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
#lb .top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:14px 18px; z-index:2; }
#lb button { all:unset; cursor:pointer; padding:6px 8px; }
#lb button:hover { text-decoration:underline; text-underline-offset:4px; }
#lb button:focus-visible { outline:2px solid #000; }
#lb .navzone { position:absolute; top:56px; bottom:0; width:30%; z-index:1; }
#lb .navzone.l { left:0; cursor:w-resize; } #lb .navzone.r { right:0; cursor:e-resize; }
#lb .count, #lb .spin { color:var(--mute); }
#lb .spin { position:absolute; }

/* admin */
.panel { border:2px dashed #000; padding:18px; margin-bottom:24px; }
.panel h2 { font-size:inherit; margin:0 0 12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn { all:unset; cursor:pointer; padding:4px 10px; border:2px solid #000; white-space:nowrap; }
.btn:hover { background:#000; color:#fff; }
.btn:focus-visible { outline:2px solid #000; outline-offset:2px; }
.btn.ghost { border-color:transparent; text-decoration:underline; text-underline-offset:4px; padding:4px; }
.btn.ghost:hover { background:none; color:#000; }
.btn.danger:hover { background:#c00; border-color:#c00; color:#fff; }
.btn[disabled] { opacity:.35; pointer-events:none; }
input.txt { border:0; border-bottom:1px solid #000; background:transparent; padding:4px 2px; min-width:0; outline:none; flex:1 1 220px; }
input.txt:focus { border-bottom-style:dashed; }
.a-trip { border:2px dashed #000; margin-bottom:18px; }
.a-head { display:flex; gap:10px; align-items:center; padding:12px 14px; flex-wrap:wrap; }
.a-head .fields { flex:1 1 300px; display:flex; gap:10px; flex-wrap:wrap; }
.a-body { padding:0 14px 16px; display:none; }
.a-trip.open .a-body { display:block; }
.drop { border:2px dashed var(--mute); padding:22px; text-align:center; color:var(--mute); margin:6px 0 14px; cursor:pointer; }
.drop.over { border-color:#000; color:#000; background:#f6f6f6; }
.a-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.a-ph { position:relative; aspect-ratio:3/4; background:#f3f3f3; cursor:grab; }
.a-ph img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.a-ph .x { all:unset; position:absolute; top:4px; right:4px; background:#fff; padding:0 6px; cursor:pointer; font-size:14px; border:2px solid #000; }
.a-ph .x:hover { background:#c00; color:#fff; border-color:#c00; }
.a-ph .n { position:absolute; left:4px; bottom:4px; background:#fff; padding:0 5px; font-size:12px; }
.a-ph.uploading { display:flex; align-items:center; justify-content:center; color:var(--mute); font-size:13px; cursor:default; }
.sortable-ghost { opacity:.3; }
.status { color:var(--mute); min-height:1.6em; }
.err { color:#c00; }
#modal { position:fixed; inset:0; background:rgba(255,255,255,.92); display:none; align-items:center; justify-content:center; z-index:80; padding:20px; }
#modal.on { display:flex; }
#modal .box { background:#fff; border:2px solid #000; padding:22px; max-width:420px; width:100%; }
#modal .box p { margin:0 0 18px; }
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#000; color:#fff; padding:8px 14px; z-index:90; max-width:90vw; text-align:center; display:none; }

/* footer: line — cmf.photos — line */
footer.site-foot { display:flex; align-items:center; margin-top:64px; }
footer.site-foot .ln { height:0; border-top:1px solid #000; }
footer.site-foot .ln.l { flex:0 0 22%; }
footer.site-foot .ln.r { flex:1; }
footer.site-foot .mark { padding:0 .8em; white-space:nowrap; }

/* keep the footer at the bottom of the window when the list is short */
body > .wrap { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding-bottom:32px; }
body > .wrap > main { flex:1; }

/* viewer: photo fills the window, controls float on top */
#lb .stage { position:absolute; inset:0; padding:0; }
#lb img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
#lb .bar { position:absolute; left:0; right:0; bottom:0; z-index:2; }
#lb .navzone { top:0; }
#lb .top { align-items:flex-start; }
#lb .info { line-height:1.4; padding-top:6px; }

/* admin, matched to the gallery look */
.a-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:28px; border-bottom:1px solid #000; }
.a-top-r { display:flex; gap:18px; align-items:baseline; }
.panel, .a-trip { border:1px solid #000; }
.btn { border-width:1px; }
#modal .box { border-width:1px; }
.a-ph .x { border-width:1px; }
.drop { border-width:1px; }
.btn.on { background:#000; color:#fff; }
#saveState { position:fixed; right:16px; bottom:12px; color:var(--mute); font-size:14px; pointer-events:none; }
footer.site-foot a.mark { text-decoration:none; }
footer.site-foot a.mark:hover { text-decoration:underline; text-underline-offset:4px; }
/* fits "999 photos" (10 monospace chars) so it never changes size */
.btn.count { width:10ch; text-align:right; box-sizing:content-box; }
#lb .info .spin { position:static; }

/* viewer layout modes (set by script) */
#lb:focus { outline:none; }
#lb[data-mode="side"] .stage { top:0; bottom:0; left:var(--S); right:var(--S); }
#lb[data-mode="stack"] .stage { left:0; right:0; top:var(--T); bottom:var(--B); }
#lb .info .title-wrap, #lb #lbTitle { overflow-wrap:anywhere; }

/* trip rows: name + date/count on line one, places on their own line below */
.trip-head { display:grid; grid-template-columns:1fr auto; column-gap:2em; row-gap:2px; align-items:baseline; }
.trip-head .label { grid-column:1; }
.trip-head .meta { grid-column:2; white-space:nowrap; text-align:right; }
.trip-head .places { grid-column:1 / -1; padding-left:var(--indent, 3ch); color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip.open .trip-head .places { white-space:normal; }
@media (max-width:640px){
  .trip-head { grid-template-columns:1fr; }
  .trip-head .meta { grid-column:1; text-align:left; padding-left:var(--indent, 3ch); width:auto; margin-top:0; white-space:normal; }
}